@extends('adminlte::page')

@section('title', 'Checkouts')

@section('content_header')
  <h1>Visa Checkouts</h1>
@stop

@section('content')
  <div class="row">
    <div class="col-md-12">
      <div class="box">
        <div class="box-header with-border mb-2">
          <a href="{{route('admin.visa-checkout.verified',['status'=>'verify'])}}" class="btn btn-success">Verified</a>
          <a href="{{route('admin.visa-checkout.verified',['status'=>'flag'])}}" class="btn btn-warning">Flag</a>
          <a href="{{route('admin.visa-checkout.add')}}" class="btn btn-primary">+ Add Lead</a>
        </div>
        <div class="box-body table-responsive">
          <table class="table table-bordered">
            <tr>
              <th>Id</th>
              <th>Mobile</th>
              <th>Email</th>
              <th>User Name</th>
              <th>Country</th>
              <th>Form</th>
              <th>Verify</th>
              <th>Flag</th>
             {{--<th>Remark</th>--}} 
              <th>Created At</th>
              <!-- <th>Action</th> -->
            </tr>
            @foreach($applications as $key => $application)
              <tr>
                <td>{{$key+1}}</td>
                <td>
                  <ul class="call_action_list">
                    <li>
                      <a href="#" class="call-icon @if($application->is_called == 0) disabled @endif" data-id="{{ $application->id }}"  data-type="called">
                        <i>
                        <svg  width="18"  height="18"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.50"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-phone-call"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /><path d="M15 7a2 2 0 0 1 2 2" /><path d="M15 3a6 6 0 0 1 6 6" /></svg>
                        </i>  
                        {{$application->contact}}
                      </a>
                    </li>
                    <li>
                      <a href="#" target="_blank" class="call-icon @if($application->is_whatsapped == 0) disabled @endif"  data-id="{{ $application->id }}"  data-type="whatsapped">
                        <i class="_whatsapp">
                          <svg  width="18"  height="18"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.50"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-brand-whatsapp"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg>
                        </i>
                        {{$application->contact}}
                      </a>
                    </li>
                  </ul>
                </td>
                <td>
                  <ul class="call_action_list">
                    <li>
                    <a href="#" class="call-icon @if($application->is_emailed == 0) disabled @endif" data-id="{{ $application->id }}" data-type="emailed">
                        <i class="mail">
                          <svg width="18"  height="18"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.50"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-mail"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
                        </i>
                        
                      </a> {{$application->email}}
                    </li>  
                  </ul>
                </td>
                <td>@if(isset($application->vi_travellers->first()->first_name)){{$application->vi_travellers->first()->first_name}} {{$application->vi_travellers->first()->last_name}}@endif</td>
                <td> @if(isset($application->vi_service->country)) {{$application->vi_service->country->toCountry->name}} @endif</td>
                <td>{{$application->vi_service->title}} {{$application->vi_service->vi_service_validity->entry_type}} Entry {{$application->vi_service->vi_service_validity->valid_till}} Days
                </td>
                
                <td>
                  <input type="checkbox" data-id="{{ $application->id }}" name="is_verify" class="js-switch" {{ $application->is_verified == 1 ? 'checked' : '' }}>
                </td>
                <td>
                  <input type="checkbox" data-id="{{ $application->id }}" name="is_flag" class="js-switch" {{ $application->is_verified == 2 ? 'checked' : '' }}>
                </td>
                {{--<td>{{$application->remark}}</td>--}}

                <td>{{ $application->created_at->format('d-m-Y') }}</td>
                {{--<td>
                  <a href="{{route('admin.visa-checkout.edit',['id'=>$application->id])}}"><i class="fa fa-edit text-success mr-2" style="cursor:pointer;" title="Edit"></i></a>
                  <a href="{{route('admin.visa-checkout.delete',['id'=>$application->id])}}"><i class="fa fa-trash text-danger mr-2" style="cursor:pointer;" title="Delete"></i></a>

                  <button 
                    class="btn btn-sm btn-primary open-remark-modal" 
                    data-id="{{ $application->id }}" 
                    data-remark="{{ $application->remark ?? '' }}"
                    title="Add Remark"
                  >
                    <i class="fa fa-comment"></i>
                  </button>
                </td>--}}
                <!-- <td>
                    <a href="{{route('admin.visa-checkouts.document',['app_num'=>$application->application_num])}}" class="_view_btn">Check Documents</a>
                </td> -->
              </tr>
            @endforeach
          </table>
        </div>
        <div class="box-footer clearfix">
          {{ $applications->withQueryString()->links('pagination::bootstrap-4') }} 
        </div>
      </div>
    </div>
  </div>
  <!-- Remark Modal -->
  <div class="modal fade" id="remarkModal" tabindex="-1" role="dialog" aria-labelledby="remarkModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <form id="remarkForm" method="POST" action="{{  route('nri-checkouts.remark') }}">
        @csrf
        <input type="hidden" name="application_id" id="remarkApplicationId">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Add Remark</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span>&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <textarea name="remark" id="remarkText" class="form-control" rows="4" placeholder="Write remark..."></textarea>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-success">Save Remark</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  @section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
  @stop
  @section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
      $('.call-icon').on('click', function (e) {
        const $this = $(this);
        const id = $this.data('id');
        const type = $this.data('type');

        if (!$this.hasClass('disabled')) {
          return;
        }

        e.preventDefault();

        let label = {
          called: 'call this number',
          whatsapped: 'send a WhatsApp message',
          emailed: 'send an email'
        };

        Swal.fire({
          title: 'Are you sure?',
          text: `Do you want to ${label[type] || 'perform this action'}?`,
          icon: 'question',
          showCancelButton: true,
          confirmButtonText: 'Yes, proceed',
          cancelButtonText: 'Cancel'
        }).then((result) => {
          if (result.isConfirmed) {
            $.ajax({
              url: '/admin/visa-checkouts/update-status',
              type: 'POST',
              data: {
                _token: '{{ csrf_token() }}',
                id: id,
                type: type,
              },
              success: function (response) {
                $this.removeClass('disabled');
                toastr.success(response.message || 'Status updated');
              },
              error: function () {
                toastr.error('Failed to update contact status.');
              }
            });
          }
        });
      });
    </script>
    <script>
      $(document).ready(function () {
        $('.open-remark-modal').on('click', function () {
          let id = $(this).data('id');
          let remark = $(this).data('remark');

          $('#remarkApplicationId').val(id);
          $('#remarkText').val(remark);

          $('#remarkModal').modal('show');
        });
      });
    </script>

    <script>
      let isUpdating = false;

      document.querySelectorAll('input.js-switch[name="is_verify"]').forEach(function(el) {
          new Switchery(el, {
              size: 'small',
              color: '#28a745',        
              secondaryColor: '#6c757d' 
          });
          applyThirdColor(el);
      });

      document.querySelectorAll('input.js-switch[name="is_flag"]').forEach(function(el) {
          new Switchery(el, {
              size: 'small',
              color: '#dc3545',         
              secondaryColor: '#6c757d' 
          });
          applyThirdColor(el);
      });

      function applyThirdColor(el) {
          if (!el.checked && el.nextSibling) {
              el.nextSibling.style.backgroundColor = '#6c757d';
              el.nextSibling.style.borderColor = '#6c757d';
          }
      }

      $('.js-switch').change(function () {
          if (isUpdating) return;
          isUpdating = true;

          const id = $(this).data('id');
          const $verify = $('input[name="is_verify"][data-id="' + id + '"]');
          const $flag = $('input[name="is_flag"][data-id="' + id + '"]');

          let status = 0;

          if ($verify.is(':checked')) {
              status = 1;
              $flag.prop('checked', false);
              $flag.next('.switchery').removeClass('checked');
          } else if ($flag.is(':checked')) {
              status = 2;
              $verify.prop('checked', false);
              $verify.next('.switchery').removeClass('checked');
          }

          // Update styles
          applyThirdColor($verify[0]);
          applyThirdColor($flag[0]);

          $.ajax({
              type: "POST",
              url: '/admin/visa-checkouts/verify-status/' + id,
              data: {
                  is_published: status,
                  _token: '{{ csrf_token() }}'
              },
              success: function (data) {
                  toastr.success(data.message || 'Status updated');
              },
              error: function (xhr) {
                  toastr.error('Failed to update status');
                  console.log(xhr.responseText);
              },
              complete: function () {
                  isUpdating = false;
              }
          });
      });
    </script> 
  @stop

@stop