@extends('layouts.dashboard')
<style>
  .profile-user-img {
    height: 100px !important;
    display: flex;
    align-items: center;
    object-fit: contain;
  }

  .prof-img.pos-rel {
    position: relative;
    width: 100px;
    margin: 0 auto;
  }

  .dlt-img {
    position: absolute;
    top: 0;
    right: 13px;
    z-index: 111;
    cursor: pointer;
  }
  .dlt-img .badge-danger{
    background: linear-gradient(to right, #ffbe2b, #ff7e5f) !important;
  }
</style>
@section('content')

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Profile</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active">User Profile</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    @if (Session::has('message'))
    <div class="col-sm-12">
      <div class="alert {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show" role="alert">
        {{ Session::get('message') }}
      </div>
    </div>
    @endif

    <div class="row">
      <div class="col-md-3">
        <div class="card">
          <div class="card-body box-profile">
            <div class="text-center prof-img pos-rel">
              @if (isset(auth()->user()->profile_image))
              <img class="profile-user-img img-fluid img-circle" width="50%" src="{{ asset('public/uploads') . '/' . auth()->user()->profile_image }}" alt="User Image">
              @else
              <img class="profile-user-img img-fluid img-circle mb-3" src="{{ url('public/dashboard/img/dummy_user.png') }}" width="50%" alt="User Image">
              @endif
              <div class="dlt-img">
                <span class="badge badge-danger" id="remove_image" data-id="{{ auth()->id() }}"><i class="fa fa-times" title="Remove Image"></i></span>
              </div>
            </div>

            <h3 class="profile-username text-center">{{ auth()->user()->name }}</h3>
            <p class="text-muted text-center">{{ auth()->user()->email }}</p>
          </div>
        </div>
      </div>

      <div class="col-md-9">
        <div class="card">
          <div class="card-header p-2">
            <ul class="nav nav-pills">
              <li class="nav-item"><a class="nav-link active" href="#profile" data-toggle="tab">Profile</a></li>
              <li class="nav-item"><a class="nav-link" href="#change-password" data-toggle="tab">Change Password</a></li>
            </ul>
          </div>

          <div class="card-body">
            <div class="tab-content">
              <div class="active tab-pane" id="profile">
                <form class="form-horizontal" action="{{ route('profile') }}" method="post" enctype="multipart/form-data">
                  @csrf
                  <div class="row">
                    <div class="col-md-3">
                      <div class="form-group mb-2">
                        <label class=" col-form-label">Name</label>
                        <input type="text" class="form-control" name="name" value="{{ auth()->user()->name }}">
                        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group mb-2">
                        <label class=" col-form-label">Mobile Number</label>
                        <input type="text" class="form-control" name="mobile_number" value="{{ auth()->user()->mobile_number }}">
                        @error('mobile_number') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group mb-2">
                        <label class=" col-form-label">Address</label>
                        <input type="text" class="form-control" name="address" value="{{ auth()->user()->address }}">
                        @error('address') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group mb-2">
                        <label class=" col-form-label">Country</label>
                        <select class="form-control" id="country" name="country">
                          <option value="">Select Country</option>
                          @foreach ($countries as $country)
                          <option value="{{ $country->country_id }}"
                            @if (auth()->user()->country == $country->country_name) selected @endif>
                            {{ $country->country_name }}
                          </option>
                          @endforeach
                        </select>
                        @error('country') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group mb-2">
                        <label class=" col-form-label">State</label>
                        <select class="form-control" id="state" name="state">
                          <option value="">Select State</option>
                        </select>
                        @error('state') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group mb-2">
                        <label class=" col-form-label">City</label>
                        <select class="form-control" id="cities" name="city">
                          <option value="">Select City</option>
                        </select>
                        @error('city') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group mb-2">
                        <label class=" col-form-label">Postal Code</label>
                        <input type="text" class="form-control" name="postal_code" value="{{ auth()->user()->postal_code }}">
                        @error('postal_code') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="form-group mb-2">
                        <label class=" col-form-label">Timezone</label>
                        <select class="form-control" name="timezone">
                          @foreach (timezone_identifiers_list() as $tz)
                          <option value="{{ $tz }}" {{ auth()->user()->timezone == $tz ? 'selected' : '' }}>
                            {{ $tz }}
                          </option>
                          @endforeach
                        </select>
                        @error('timezone') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group mb-2">
                        <label class=" col-form-label">Upload Avatar</label>
                          <input type="file" class="form-control" name="image" accept="image/png, image/gif, image/jpeg">
                        @error('image') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="mt-4">
                        <label for="" class="invisible">.</label>
                        <button type="submit" class="btn btn-primary mt-3">Submit</button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>

              <!-- Change Password Tab -->
              <div class="tab-pane" id="change-password">
                <form class="form-horizontal" action="{{ route('change-password') }}" method="post">
                  @csrf
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="col-form-label">Password</label>
                        <input type="password" class="form-control" name="password" placeholder="Password">
                        @error('password') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="col-form-label">Confirm password</label>
                        <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password">
                        @error('confirm_password') <span class="text-danger">{{ $message }}</span> @enderror
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="">
                        <button type="submit" class="btn btn-danger">Submit</button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
              <!-- End Change Password -->

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@endsection


@push('scripts')
<script>
  $(document).ready(function() {
    let selectedState = "{{ auth()->user()->state }}";
    let selectedCity = "{{ auth()->user()->city }}";

    let country = $('#country').val();
    if (country) {
      getStates(country, selectedState, selectedCity);
    }

    $('#country').on('change', function() {
      const countryId = $(this).val();
      $('#state').empty().append('<option value="">Select State</option>');
      $('#cities').empty().append('<option value="">Select City</option>');
      if (countryId) {
        getStates(countryId);
      }
    });

    $('#state').on('change', function() {
      const stateId = $(this).val();
      $('#cities').empty().append('<option value="">Select City</option>');
      if (stateId) {
        getCities(stateId);
      }
    });

    function getStates(countryId, selectedState = null, selectedCity = null) {
      $.ajax({
        type: "POST",
        url: "{{ route('get-states') }}",
        data: {
          _token: "{{ csrf_token() }}",
          country_id: countryId
        },
        success: function(data) {
          if (data.status === 200) {
            $.each(data.states, function(index, state) {
              let selected = (state.state_name == selectedState) ? 'selected' : '';
              $('#state').append(`<option value="${state.state_id}" ${selected}>${state.state_name}</option>`);
            });

            if (selectedState) {
              getCities($(`#state`).val(), selectedCity);
            }
          }
        }
      });
    }

    function getCities(stateId, selectedCity = null) {
      $.ajax({
        type: "POST",
        url: "{{ route('get-cities') }}",
        data: {
          _token: "{{ csrf_token() }}",
          state_id: stateId
        },
        success: function(data) {
          if (data.status === 200) {
            $.each(data.cities, function(index, city) {
              let selected = (city.city_name == selectedCity) ? 'selected' : '';
              $('#cities').append(`<option value="${city.city_name}" ${selected}>${city.city_name}</option>`);
            });
          }
        }
      });
    }
  });
</script>
@endpush