@extends('adminlte::page')

@section('title', 'Visa Leads')

@section('content_header')

    <div class="row mb-2">
        <div class="col-sm-10 col-6">
            <h1>Visa Leads</h1>
        </div>
        @if($is_verified == 0)
        <div class="col-sm-2 col-6">
          <a href="{{route('admin.visa-checkout.leads',['status'=>'verify'])}}" class="btn btn-success">Verified</a>
          <a href="{{route('admin.visa-checkout.leads',['status'=>'flag'])}}" class="btn btn-warning">Flag</a>
        </div>
        @endif
    </div>


@stop
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
              
                <!-- /.card-header -->
                <div class="card-body table-responsive">
                    <div class="custom-table table-light">
                        <div class="custom-table-row body-head">
                            <div class="item"><span>Name</span></div>
                            <div class="item"><span>Email</span></div>
                            <div class="item"><span>Phone</span></div>
                            <div class="item"><span>Country</span></div>
                            <div class="item"><span>Service</span></div>
                            <div class="item"><span>Created At</span></div>
                            @if($is_verified == 0)<div class="item"><span>Verify/Flag</span></div>@endif
                        </div>
                        @foreach ($allLeads as $blg)
                            <div class="custom-table-row body-table" id="tr_{{$blg->id}}">
                              <div class="item"><span>Name</span></div>
                              <div class="item">{{$blg->name }}</div>
                              <div class="item"><span>Email</span></div>
                              <div class="item">{{$blg->email }}</div>  
                              <div class="item"><span>Phone</span></div>                             
                              <div class="item">{{$blg->contact }}</div>
                              <div class="item"><span>Country</span></div>                             
                              <div class="item">@if(isset($blg->service->country)) {{$blg->service->country->toCountry->name}} @endif</div>
                              <div class="item"><span>Service</span></div> 
                              <div class="item">{{$blg->service->title}} {{$blg->service->vi_service_validity->entry_type}} Entry {{$blg->service->vi_service_validity->valid_till}} Days    </div>
                              <div class="item"><span>Created at</span></div> 
                              <div class="item">{{$blg->created_at->format('d-M-y')}}</div>
                              @if($is_verified == 0)
                                <div class="item"><span>Verify/Flag</span></div> 
                                <div class="item">
                                      <input type="checkbox" data-id="{{ $blg->id }}" name="is_verify" class="js-switch" {{ $blg->is_verified == 1 ? 'checked' : '' }}>
                                      <input type="checkbox" data-id="{{ $blg->id }}" name="is_flag" class="js-switch" {{ $blg->is_verified == 2 ? 'checked' : '' }}>
                                </div> 
                              @endif          
                            </div>
                        @endforeach
                    </div>
                </div>
                <!-- /.card-body -->

                <div class="box-footer clearfix">
                    {{ $allLeads->links() }}
                </div>
            </div>
        </div>
        <!-- /.col -->
    </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/nri-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');
    }

    applyThirdColor($verify[0]);
    applyThirdColor($flag[0]);

    $.ajax({
        type: "POST",
				url: '/admin/visa-checkouts/verify-lead-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