@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">
                  
              </div>
              <!-- /.box-header -->
              <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>Created At</th>
                          <th>Comment</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>
                                  {{$application->email}}
                                </a> 
                              </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>{{ $application->created_at->format('d-m-Y') }}</td>
                          <td><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>
              <!-- /.box-body -->

              <div class="box-footer clearfix">
                  {{ $applications->withQueryString()->links('pagination::bootstrap-4') }} 
              </div>
          </div>
      </div>
      <!-- /.col -->
  </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('admin.visa-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('js')
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
  $('.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>
@stop

@stop