@php
  $configData   = Helper::appClasses();
  $userActive = \Illuminate\Support\Facades\Auth::guard('customer')->user();
  $serviceActive = $userActive->getServiceById($userActive->service_id);
@endphp

@extends('layouts.layoutMaster')

@section('title', 'Store')


@section('page-style')
  @vite([
      'resources/assets/vendor/libs/@form-validation/form-validation.scss',
      'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
      'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
      'resources/assets/vendor/scss/pages/front-page-payment.scss',
      'resources/assets/vendor/scss/pages/front-page-landing.scss',
      'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
      'resources/assets/vendor/libs/animate-css/animate.scss',
      'resources/assets/vendor/libs/select2/select2.scss',
      'resources/assets/vendor/scss/pages/page-faq.scss',
      'resources/assets/vendor/libs/tagify/tagify.scss',


  ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
  @vite([
      'resources/assets/vendor/libs/jquery/jquery.js',
      'resources/assets/vendor/libs/moment/moment.js',
      'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
      'resources/assets/vendor/libs/cleavejs/cleave.js',
      'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
      'resources/assets/vendor/libs/select2/select2.js',
      'resources/assets/vendor/libs/tagify/tagify.js',
      'resources/assets/vendor/libs/@form-validation/popular.js',
      'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
      'resources/assets/vendor/libs/@form-validation/auto-focus.js',
      'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
      'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
  ])
@endsection

<!-- Page Scripts -->
@section('page-script')
  <script src="{{ asset('tools/common.js') }}"></script>
  @vite([
      'resources/assets/js/front/front-profile.js',
  ])
@endsection


@section('content')

  <div data-bs-spy="scroll" class="scrollspy-example">

    <section id="landingFAQ" class="section-py bg-body landing-faq">
      <div class="container bg-icon-right">
        <div class="row">
          <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
            <div class="card mb-6">
              <div class="card-body pt-12">
                <div class="user-avatar-section">
                  <div class=" d-flex align-items-center flex-column">
                    <img class="img-fluid rounded mb-4" src="{{ asset($userActive->img )}}" height="120" width="120" alt="User avatar" />
                    <div class="user-info text-center">
                      <h5> {{ $userActive->name }}</h5>
                      <span class="badge bg-label-success rounded-pill">Subscriber</span>
                    </div>
                  </div>
                </div>
                <div class="d-flex justify-content-around flex-wrap my-6 gap-0 gap-md-3 gap-lg-4">
                  <div class="d-flex align-items-center me-5 gap-4">
                    <div class="avatar">
                      <div class="avatar-initial bg-label-primary rounded-3">
                        <i class='ri-check-line ri-24px'></i>
                      </div>
                    </div>

                    <div>
                      <h5 class="mb-0">{{ $userActive->pointsXP }}</h5>
                      <span>XP</span>
                    </div>
                  </div>
                  <!--
                  <div class="d-flex align-items-center gap-4">

                    <div class="avatar">
                      <div class="avatar-initial bg-label-primary rounded-3">

                      </div>
                    </div>
                    <div>
                      <h5 class="mb-0"></h5>
                      <span></span>
                    </div>
                  </div>
                  -->
                </div>
                <h5 class="pb-4 border-bottom mb-4">Details</h5>
                <div class="info-container">
                  <ul class="list-unstyled mb-6">
                    <li class="mb-2">
                      <span class="fw-medium text-heading me-2">Name:</span>
                      <span>{{ $userActive->name }}</span>
                    </li>
                    <li class="mb-2">
                      <span class="fw-medium text-heading me-2">Username:</span>
                      <span>{{ $userActive->username }}</span>
                    </li>
                    <li class="mb-2">
                      <span class="fw-medium text-heading me-2">Phone:</span>
                      <span>{{ $userActive->msisdn }}</span>
                    </li>
                    <li class="mb-2">
                      <span class="fw-medium text-heading me-2">Email:</span>
                      <span>{{ $userActive->email }}</span>
                    </li>
                    <li class="mb-2">
                      <span class="fw-medium text-heading me-2">Status:</span>
                      <span class="badge bg-label-success rounded-pill">Active</span>
                    </li>
                    <li class="mb-2">
                      <span class="fw-medium text-heading me-2">Birth date:</span>
                      <span><span>{{ $userActive->birth_date }}</span></span>
                    </li>
                    <li class="mb-2">
                      <span class="fw-medium text-heading me-2">Gender:</span>
                      <span><span>{{ config('enums.gender.'.$userActive->gender) }}</span></span>
                    </li>
                    <li class="mb-2">
                      <span class="fw-medium text-heading me-2">Service:</span>
                      <span><span>{{ $serviceActive->name }}</span></span>
                    </li>
                  </ul>
                  <div class="d-flex justify-content-center">
                    <a href="javascript:;" class="btn btn-primary me-4" data-bs-target="#editMyData" data-bs-toggle="modal">Edit</a>
                  </div>
                </div>
              </div>
            </div>
            @if(false)
              <div class="card mb-6 border border-2 border-primary">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start">
                    <span class="badge bg-label-primary rounded-pill">Standard</span>
                    <div class="d-flex justify-content-center">
                      <sup class="h5 pricing-currency mt-5 mb-0 me-1 text-primary">$</sup>
                      <h1 class="mb-0 text-primary">99</h1>
                      <sub class="h6 pricing-duration mt-auto mb-3 fw-normal">month</sub>
                    </div>
                  </div>
                  <ul class="list-unstyled g-2 my-6">
                    <li class="mb-2 d-flex align-items-center"><i class="ri-circle-fill text-body ri-10px me-2"></i><span>10 Users</span></li>
                    <li class="mb-2 d-flex align-items-center"><i class="ri-circle-fill text-body ri-10px me-2"></i><span>Up to 10 GB storage</span></li>
                    <li class="mb-2 d-flex align-items-center"><i class="ri-circle-fill text-body ri-10px me-2"></i><span>Basic Support</span></li>
                  </ul>
                  <div class="d-flex justify-content-between align-items-center mb-1 fw-medium text-heading">
                    <span>Days</span>
                    <span>26 of 30 Days</span>
                  </div>
                  <div class="progress mb-1 rounded">
                    <div class="progress-bar rounded" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <small>4 days remaining</small>
                  <div class="d-grid w-100 mt-6">
                    <button class="btn btn-primary" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade Plan</button>
                  </div>
                </div>
              </div>
            @endif
          </div>

          <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
            <!-- User Tabs -->
            <div class="nav-align-top">
              <ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2">
                <li class="nav-item"><a class="nav-link active" href="#"><i class="ri-group-line me-2"></i>Awards</a></li>
                <!--
                <li class="nav-item"><a class="nav-link" href="{{url('app/user/view/security')}}"><i class="ri-lock-2-line me-2"></i>Security</a></li>
                <li class="nav-item"><a class="nav-link" href="{{url('app/user/view/billing')}}"><i class="ri-bookmark-line me-2"></i>Billing & Plans</a></li>
                <li class="nav-item"><a class="nav-link active" href="javascript:void(0);"><i class="ri-notification-4-line me-2"></i>Notifications</a></li>
                <li class="nav-item"><a class="nav-link" href="{{url('app/user/view/connections')}}"><i class="ri-link-m me-2"></i>Connections</a></li>
                -->
              </ul>
            </div>
            <!--/ User Tabs -->

            <!-- Project table -->
            <div class="card mb-6">
              <!-- Notifications -->
              <h5 class="card-header border-bottom mb-0">My Exchanges</h5>
              <div class="card-body py-4">
                <span class="h6 mb-0">Record.</span>
              </div>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                  <tr>
                    <th class="text-nowrap">Type</th>
                    <th class="text-nowrap text-center">Email</th>
                    <th class="text-nowrap text-center">Browser</th>
                    <th class="text-nowrap text-center">App</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td class="text-nowrap text-heading">New for you</td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck1" checked />
                      </div>
                    </td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck2" checked />
                      </div>
                    </td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck3" checked />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-nowrap text-heading">Account activity</td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck4" checked />
                      </div>
                    </td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck5" checked />
                      </div>
                    </td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck6" checked />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-nowrap text-heading">A new browser used to sign in</td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck7" checked />
                      </div>
                    </td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck8" checked />
                      </div>
                    </td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck9" />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-nowrap text-heading">A new device is linked</td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck10" checked />
                      </div>
                    </td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck11" />
                      </div>
                    </td>
                    <td>
                      <div class="form-check mb-0 d-flex justify-content-center">
                        <input class="form-check-input" type="checkbox" id="defaultCheck12" />
                      </div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <div class="card-body">
                <button type="submit" class="btn btn-primary me-3">Save changes</button>
                <button type="reset" class="btn btn-outline-secondary">Discard</button>
              </div>
              <!-- /Notifications -->
            </div>
            <!-- /Project table -->
          </div>
        </div>
      </div>
    </section>



    <div class="modal fade animate__animated" id="editMyData" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-simple modal-add-new-address">
        <div class="modal-content">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          <div class="modal-body p-0">
            <div class="text-center mb-6">
              <h4 class="address-title mb-2">Edit my data</h4>
              <p class="address-subtitle">Keep your data updated to receive our latest news</p>
            </div>
            <form id="modalEditMyProfile" action="{{ route('client.update', ['id' => $userActive->id]) }}" class="row g-5" onsubmit="return false">
              @csrf


              <div class="row mb-2 g-6">
                <div class="col-md">
                  <div class="card">
                    <div class="row g-0">
                      <!-- Checkbox alineado a la derecha ocupando toda la fila -->
                      <div class="d-flex justify-content-end p-3">
                        <div class="form-check form-switch mb-2" id="checkbox">
                          <input class="form-check-input" type="checkbox" id="changeImg" name="file">
                          <label class="form-check-label" for="flexSwitchCheckDefault">Change image</label>
                        </div>
                      </div>

                      <div class="row mb-3" id="oldImg">
                        <div class="col-md-4">
                          <img class="card-img card-img-left" src="{{ url($userActive->img) }}" alt="Card image" />
                        </div>
                        <div class="col-md-8">
                          <div class="card-body">
                            <h5 class="card-title">Imagen profile</h5>
                            <p class="card-text"></p>
                          </div>
                        </div>
                      </div>


                      <div class="col-12 p-3" id="newImg">
                        <label for="formFile" class="form-label">Select Image</label>
                        <input class="form-control" type="file" id="file" name="file" accept="image/*">
                      </div>
                    </div>
                  </div>
                </div>
              </div>




              <div class="col-12 col-md-6">
                <div class="form-floating form-floating-outline">
                  <input type="text" id="username" name="username" class="form-control" placeholder="" value="{{ $userActive->username }}" />
                  <label for="username">Username</label>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="form-floating form-floating-outline">
                  <input type="text" id="name" name="name" class="form-control" placeholder="" value="{{ $userActive->name }}" />
                  <label for="name">Name</label>
                </div>
              </div>

              <div class="col-12">
                <div class="form-floating form-floating-outline">
                  <input type="text" id="email" name="email" class="form-control" placeholder="" value="{{ $userActive->email }}" />
                  <label for="email">Email</label>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="form-floating form-floating-outline">
                  <input type="text" id="birth_date" placeholder="MM/DD/YYYY" class="form-control" name="birth_date" value="{{ $userActive->birth_date }}" />
                  <label for="bs-datepicker-basic">Birth Date</label>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="form-floating form-floating-outline">
                  <select id="gender" name="gender" class="select2 form-select" data-allow-clear="true">
                    <option value="M" {{ $userActive->gender == 'M' ? 'selected' : '' }}>Male</option>
                    <option value="F" {{ $userActive->gender == 'F' ? 'selected' : '' }}>Female</option>
                  </select>
                  <label for="modalAddressCountry">Gender</label>
                </div>
              </div>

              <div class="col-12 mt-6 d-flex flex-wrap justify-content-center gap-4 row-gap-4">
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>

@endsection