@extends('layouts.app')
@section('content')
<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between secondaryHead">
                    <h4 class="mb-sm-0">All Enquiries</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Enquiries</a></li>
                            <li class="breadcrumb-item active">All Enquiries</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-xl-12">

              <div class="card-header align-items-center d-flex mb-4 bcakgroundColor">
                <h4 class="card-title mb-0 flex-grow-1 d-none">Search & Filter Enquires</h4>
                <div class="live-preview w-100">
                  <form action="{{ url('/') }}/enquiry/all" method="GET">
                    <div class="row g-3">
                    
                      <div class="col-lg-5">
                        <div class="row">
                          <div class="col-lg-6">
                            <div class="form-floating">
                              <input name="sdate" value="{{ $sdate }}" id="sdatefloatingInput" type="date" class="form-control" placeholder="MM/DD/YYYY" data-provider="flatpickr">
                                <label for="sdatefloatingInput">Start Date</label>
                            </div>
                          </div>
                          <div class="col-lg-6">  
                            <div class="form-floating">
                              <input name="edate" value="{{ $edate }}" id="edatefloatingInput" type="date" class="form-control" placeholder="MM/DD/YYYY">
                                <label for="edatefloatingInput">End Date</label>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-6">
                        <div class="row">
                          <div class="col-lg-4">
                            <div class="form-floating">
                              <select name="selected_country" id="CountryfloatingInput" class="form-select select2">
                                  <option value="" label="Choose one"></option>
                                  @foreach ($countries as $country)
                                  <option {{ $selected_country == $country->name ? 'selected' : '' }} value="{{ $country->name }}">{{ $country->name }}</option>
                                  @endforeach
                              </select>
                              <label for="CountryfloatingInput">Country</label>
                            </div>
                          </div>
                          <div class="col-lg-4">  
                            <div class="form-floating">
                              <select name="selected_emp" id="EmployeefloatingInput" class="form-select select2">
                                  <option value="" label="Choose one"></option>
                                  @foreach ($employees_list as $employee_id => $employee)
                                  <option {{ $selected_emp == $employee_id ? 'selected' : '' }} value="{{ $employee_id }}">{{ $employee }}</option>
                                  @endforeach
                              </select>
                              <label for="EmployeefloatingInput">Employee</label>
                            </div>
                          </div>
                          <div class="col-lg-4">  
                            <div class="form-floating">
                              <select name="selected_department" id="DepartmentfloatingInput" class="form-select select2">
                                <option value="" label="Choose one"></option>
                                <option {{ $selected_department == 'English' ? 'selected' : '' }} value="English">English</option>
                                <option {{ $selected_department == 'Spanish' ? 'selected' : '' }} value="Spanish">Spanish</option>
                                <option {{ $selected_department == 'Luxury Train' ? 'selected' : '' }} value="Luxury Train">Luxury Train</option>
                              </select>
                              <label for="DepartmentfloatingInput">Department</label>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="col-lg-1">
                        <button class="btn btn-primary w-100 btn-label right ms-auto nexttab filterBtn" type="submit">
                          <i class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i> Filter
                        </button>
                      </div>
                  
                  
                    </div>
                  </form>
                  
                </div>
              </div><!-- end card header -->

                <div class="card">
                    

                    <div class="card-body">
                 

                        <div class="live-preview">
                            <div class="table-responsive table-card">
                                <table class="table align-middle table-striped mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="bg-gradient" scope="col">#</th>
                                            <th class="bg-gradient" scope="col">Enquiry</th>
                                            <th class="bg-gradient" scope="col">Date</th>
                                            <th class="bg-gradient" scope="col" style="width: 12%;">Client</th>
                                            <th class="bg-gradient" scope="col">Arrival</th>
                                            <th class="bg-gradient" scope="col">Country</th>
                                            <th class="bg-gradient" scope="col">Subject</th>
                                            <th class="bg-gradient" scope="col">Product</th>
                                            <th class="bg-gradient" scope="col">Department</th>
                                            <th class="bg-gradient" scope="col">Assign To</th>
                                            <th class="bg-gradient" scope="col">Action</th>
                                            <th class="bg-gradient" scope="col"><i onclick="deleteEnquiries()" class="fa fa-trash"></i></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($enquiries as $key => $enquiry)
                                        <tr class="enquiry-tr-{{ $enquiry->id }}">
                                            <td>{{ ++$key }}</td>
                                            <td>
                                                <a class="enquiryid-span" href="javascript:void()" onclick="enquiry_view_popup('{{ $enquiry->id }}')" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas">{{ $enquiry->enquiryid }}</a>
                                                <span class="enquiry-status-{{ $enquiry->enquiry_status }}">{{ $enquiry->enquiry_status }}</span>
                                            </td>
                                            <td>{{ date("d/M/Y", strtotime($enquiry->created_at)) }}</td>
                                            <td style="width:170px;">
                                                <span class="enquiry-td-client">{{ $enquiry->name }}</span>
                                                <span class="enquiry-td-info">Adult: {{ $enquiry->adult }} | Infant: {{ $enquiry->child1 }} | Child: {{ $enquiry->child2 }} </span>
                                            </td>
                                            <td>{{ date("d/M/Y", strtotime($enquiry->arrival)) }}</td>
                                            <td>
                                                @if (in_array($enquiry->country, ['India', 'india']))
                                                {{ $enquiry->country }}
                                                @else
                                                <span class="badge badge-info">{{ $enquiry->country }}</span>
                                                @endif
                                            </td>
                                            <td style="width:150px;">{{ $enquiry->subject }}</td>
                                            <td class="text-center">{{ $enquiry->product_code }}</td>
                                            <td>{{ $enquiry->department }}</td>
                                            <td id="assign-td-{{ $enquiry->id }}">
                                              @if (isset($employees_list[$enquiry->assign]))
                                              {{ $employees_list[$enquiry->assign] }}
                                              @else
                                              <select id="select-{{ $enquiry->id }}" onchange="assignEnquiry(this.value, '{{ $enquiry->id }}')" class="form-select select2-tipl rounded-pill">
                                                <option value="" label="Choose"></option>
                                                @foreach ($assign_employees_list as $employee_id => $employee)
                                                <option value="{{ $employee_id.'--'.$employee }}">{{ $employee }}</option>
                                                @endforeach
                                              </select>
                                              @endif
                                            </td>
                                            <td class="text-center">
                                              <a target="_blank" class="eyeHover" href="{{ url('/') }}/enquiry/view/{{ $enquiry->id }}"><i class="las la-eye align-middle  me-2 fs-18"></i></a>
                                            </td>                                          
                                            <td class="text-center">
                                              <div class="form-check">
                                                <input class="form-check-input" type="checkbox" onclick="onDeleteSelect()" name="delete_enquiry[]" value="{{ $enquiry->id }}" />
                                              </div>
                                            </td>
                                        </tr>
                                    @endforeach 

                                    </tbody>
                                </table>
                            

                                @if (count($enquiries) < 1)
                                <div class="noresult" style="display: block; height:44vh;">
                                  <div class="row m-0 py-4 justify-content-center align-items-center">
                                      <div class="text-center col-6">
                                          <lord-icon src="{{ url('/') }}/assets/lib/images/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px"></lord-icon>
                                          <h5 class="mt-2">Sorry! No Result Found</h5>
                                          <p class="text-muted mb-0">We've searched more than 10+ Websites We did not find any enquiries for your search.</p>
                                      </div>
                                      <div class="text-center col-6">   
                                          <img style="width:65%;" src="{{ url('/') }}/assets/lib/images/noDataWhiteHalf.png" alt="" />
                                      </div>
                                  </div>
                                </div>
                                @endif

                            </div>
                        </div>
                        
                    </div><!-- end card-body -->
                </div><!-- end card -->
            </div><!-- end col -->
        </div><!-- end row -->

    </div>
</div>


<script>
  function deleteEnquiries() {
    let ids = [];
    $('input[name="delete_enquiry[]"]:checked').each(function() {
      ids.push(this.value);
      $(".enquiry-tr-"+this.value).addClass('enquiry-delete');
    });
    if (ids.length > 0) {
      var r = confirm("Do you want to delete selected enquiries?");
      if (r) {
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            /* the route pointing to the post function */
            url: '{{ url('/') }}/enquiry/delete',
            type: 'POST',
            /* send the csrf-token and the input to the controller */
            data: {_token: CSRF_TOKEN, employee_ids: ids},
            dataType: 'JSON',
            /* remind that 'data' is the response of the AjaxController */
            success: function (data) { 
              if (data.status) {
                for (let index in ids) {
                  $(".enquiry-tr-"+ids[index]).remove();
                }
              }
              alert(data.message);
            }
        });
      }
    }
  }
  function onDeleteSelect() {
    $('input[name="delete_enquiry[]"]:checked').each(function() {
      $(".enquiry-tr-"+this.value).addClass('enquiry-delete');
    });
  }
  function assignEnquiry(employee, id) {
    employee_data = employee.split('--');
    var r = confirm("Do you want to assign this enquiry to "+employee_data[1]+"?");
    if (!r) {
      $('#select-'+id+' option:selected').remove();
      return false;
    }
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $.ajax({
        /* the route pointing to the post function */
        url: '{{ url('/') }}/enquiry/assign',
        type: 'POST',
        /* send the csrf-token and the input to the controller */
        data: {_token: CSRF_TOKEN, employee_id: employee_data[0], enquiry_id: id},
        dataType: 'JSON',
        /* remind that 'data' is the response of the AjaxController */
        success: function (data) { 
          if (data.status) {
            $('#assign-td-'+id).html(employee_data[1]);
          } else {
            $('#select-'+id+' option:selected').remove();
          } 
          alert(data.message);
        }
    });
  }
</script>
@endsection