@extends('admin.layout')

@section('content')
  <style>
    /* Card Styling */
    .profile-card {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      max-width: 100%;
      margin: 0 auto;
      padding: 20px;
    }

    /* Profile Image Styling */
    .profile-image {
      margin-bottom: 20px;
    }

    .profile-image img {
      border-radius: 50%;
      border: 4px solid #4CAF50;
    }

    .form-row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 15px;
      justify-content: space-evenly;
    }


    .link-active {
      position: relative;
      text-decoration: none;
      /* Remove default underline */
    }

    .link-active::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      /* Adjust the position for the underline */
      width: 100%;
      height: 2px;
      /* Thickness of the underline */
      background-color: currentColor;
      /* Matches the text-primary color */
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
      margin-top: 1px;
      /* Add margin above the underline */
    }
  </style>

  <div class="row mb-3">
    <div class="row d-flex justify-content-between">
      <div class="col">
        <h4 class="page-top-heading">Edit Profile</h4>
      </div>
      {{-- <div class="col d-flex justify-content-end">
                <a href="{{ route('admin.edit_profile_history') }}" class="btn btn-primary">History</a>
            </div> --}}

    </div>

  </div>

  <div class="row mb-3">
    <div class="card profile-card">
      {{-- 
<div class="col-lg-4">
    <div class="d-flex justify-content-center gap-3 mt-4">
        <a href="{{ route('admin.edit_profile') }}"
           class="link-active {{ Request::routeIs('admin.edit_profile') ? 'text-primary fw-bold' : 'text-secondary' }}">
            Edit Profile
            @if (Request::routeIs('admin.edit_profile'))
                <div class="border border-primary mt-1" style="width: 100%;"></div>
            @endif
        </a>
    </div>
</div> --}}

      <div class="card-body">
        <form action="{{ route('edit_profile_form') }}" method="POST" enctype="multipart/form-data" id="profileForm">
          @csrf
          <div class="form-row">
            <div class="form-group col-lg-12">
              <div class="profile-image text-center">
                @if ($profile_details->profile_image)
                  <img id="profilePreview" src="{{ asset($profile_details->profile_image) }}" alt="Profile Image"
                    class="rounded-circle" width="100" height="100">
                @else
                  <img id="profilePreview" src="{{ asset('/assets/images/avatar/profiledefault.svg') }}"
                    alt="Profile Image" class="rounded-circle" width="100" height="100">
                @endif

                <input type="file" id="uploadImage" class="d-none" name="profile_image" accept="image/*"
                  onchange="previewImage(event)">
                <label for="uploadImage" class="upload-label btn btn-primary mt-2">Upload</label>
              </div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-lg-5">
              <label for="firstName"> Name *</label>

              <input type="hidden" name="user_id" class="form-control" value="{{ $profile_details->user_id }}">
              <input type="hidden" name="id" class="form-control" value="{{ $profile_details->id }}">
              <input type="text" id="firstName" class="form-control" name="name"
                value="{{ $profile_details->name }}" required>
            </div>
            <div class="form-group col-lg-5">
              <label for="contactNumber">Contact Number *</label>
              <input type="number" id="contactNumber" class="form-control" name="phone_number"
                value="{{ $profile_details->phone_number }}" required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-lg-5">
              <label for="email">Email Address *</label>
              <input type="email" id="email" class="form-control" name="email"
                value="{{ $profile_details->email }}" >
            </div>
            <div class="form-group col-lg-5">
              <label for="country">Country *</label>
              <input type="text" id="country" class="form-control" name="country"
                value="{{ $profile_details->country }}" required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-lg-5">
              <label for="city">Address *</label>
              <input type="text" id="city" class="form-control" value="{{ $profile_details->address }}"
                name="address" required>
            </div>
            <div class="form-group col-lg-5">
              <label for="city">Landmark*</label>
              <input type="text" id="city" class="form-control" value="{{ $profile_details->landmark }}"
                name="landmark" required>
            </div>
          </div>
          <div class="form-row">

            <div class="form-group col-lg-5">
              <label for="state">Pincode *</label>
              <input type="number" id="state" class="form-control" value="{{ $profile_details->pincode }}"
                name="pincode" required>
            </div>
            <div class="form-group col-lg-5">
              <label for="sponsorName">Sponsor Id *</label>
              <input type="text" id="sponsorName" class="form-control" value="{{ $profile_details->sponsor_id }}"
                readonly>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-lg-5">
              <label for="sponsorId">Sponsor name *</label>
              <input type="text" id="sponsorId" class="form-control" value="{{ $sponsor->name }}" readonly>
            </div>
            <div class="form-group col-lg-5">
              <label for="sponsorId">Date Of Joining *</label>
              <input type="text" id="sponsorId" class="form-control" value="{{ $profile_details->created_at }}"
                Readonly>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-lg-5">
              <label for="sponsorId">Update User Password</label>
              <input type="text" id="password" class="form-control" value="{{ base64_decode($profile_details->pwd_hint) }}" name="password">
            </div>
            <div class="form-group col-lg-5">
              <label for="city">Courier Address</label>
              <input type="text" id="city" class="form-control" value="{{ $profile_details->courier_address }}"
                name="courier_address">
            </div>
          </div>
          <div class=" d-flex justify-content-end mt-5">
            <button type="submit" class="btn btn-primary w-25">Update</button>
          </div>
      </div>
      </form>
    </div>
  </div>


  <!-- Confirmation Modal -->
  <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body text-center p-5">
          <h4 class="mb-3 fw-bold">Are you sure</h4>
          <hr>
          <h6 class="mb-4 fw-regular mt-3">Are you sure you want to Add Wallet Address?</h6>
          <div class="d-flex justify-content-center gap-3 mt-4">
            <button type="button" class="btn btn-outline-primary py-3 w-50" data-bs-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary py-3 w-50">Yes, Proceed</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script>
    function previewImage(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          const preview = document.getElementById('profilePreview');
          preview.src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    }
  </script>
@endsection