@extends('administrative.layouts.main')
@section('title', 'Switch User')
@section('pageStyles')
  <link rel="stylesheet" href="{{ asset('assets/plugins/select2/select2.min.css') }}">
@endsection
@section('content')
  <x-breadcrumb custom="true">
    <li class="inline-flex items-center">
      <a href="{{ route('administrative.dashboard') }}" class="text-sm font-medium text-blue-500 hover:text-blue-600">
        <i class="fas fa-home me-1"></i>
        Dashboard
      </a>
    </li>
    <li class="inline-flex items-center">
      <a href="#" class="text-sm font-medium">Switch User</a>
    </li>
  </x-breadcrumb>

  <div class="flex justify-between items-center mt-5">
    <div>
      <h1 class="text-2xl font-semibold">Switch User</h1>
    </div>
  </div>

  <div class="mt-6 rounded-lg bg-white p-4 shadow-[0_0_10px_0_rgba(183,192,206,0.2)]">
    <div class="mb-3">
      <label for="customer_id">Select Customer</label>
      <x-select id="customer_id" name="customer_id" required>
        @foreach ($customer_list as $value)
          <option value='{{ $value->id }}' @selected($value->id == old('customer_id', isset($data) ? $data->id : ''))>
            {{ ucwords(str_replace('_', ' ', $value->username)) }}
          </option>
        @endforeach
      </x-select>

      @error('customer_id')
        <div class="text-red-500">{{ $message }}</div>
      @enderror
    </div>

    <x-button id="impersonate" variant="blue">
      <span class="hidden me-2 animate-spin" id="impersonateSpinner">
        <i class="fas fa-spinner"></i>
      </span>
      Impersonate
    </x-button>
  </div>

  {{-- <div class="modal fade bd-example-modal-sm" id="otpModal" tabindex="-1" role="dialog"
    aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content" style="padding: 2%">
        <p style="text-align: center;color: #0f6674">*Otp will be expired in 10 minutes*</p>
        <input type="text" class="form-control" id="input_otp" value="" placeholder="Please Enter OTP">
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" id="confirm_otp" class="btn btn-primary">Confirm OTP</button>
        </div>
      </div>
    </div>
  </div> --}}
@endsection
@section('pageScripts')
  <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
  <script type="module">
    let base_url = "{{ env('PANEL_URL') }}/switchUser";

    const impersonateBtn = document.querySelector('#impersonate');
    const impersonateSpinner = document.querySelector('#impersonateSpinner');

    impersonateBtn.addEventListener('click', () => {
      impersonateBtn.disabled = true;
      impersonateSpinner.classList.remove('hidden');

      let customer_id = document.querySelector('#customer_id')?.value;
      if (!customer_id) return;

      axios({
        method: 'POST',
        data: {
          customer_id: customer_id,
          _token: "{{ csrf_token() }}",
        },
        url: "{{ route('administrative.impersonate') }}",
      }).then(response => {
        const accessToken = response.data.access_token;
        const url = `${base_url}?access_token=${accessToken}`;
        window.open(url, '_blank');
      }).catch(error => {
        console.error(error);
      }).finally(() => {
        impersonateBtn.disabled = false;
        impersonateSpinner.classList.add('hidden');
      });
    })

    $('#customer_id').select2(select2Options);
  </script>
@endsection