@extends('admin.main')
@section('content')

<div class="row">
   <div class="col-md-12">
      <div class="card"> 
         <div class="card-header">
            <h4 class="">Lead Management
                 <button type="button" id="reset_leads" class="btn btn-primary float-right ml-2">Reset</button>
                @can('view.leads')    
                        <a href="#" class="btn btn-primary float-right" data-toggle="modal" data-target="#importModal">Import</a>
                   @if(count($leads) > 0)
                          <a href="javascript:void(0);" class="btn btn-primary float-right mr-2" data-toggle="modal" data-target="#exportModal">
                              Export <i class="i-Download1" aria-hidden="true"></i>
                            </a>
                   @endif
                        <a href="{{ route('leads.create') }}" class="btn btn-primary float-right mr-2">Create Lead</a>
                @endcan

            </h4>
         </div>
         <div class="card-body sales_new_table">
             @include('admin.msg')

             <div class="float-right mb-3 mr-3">
                 <form id="search-leads-form" method="post">
                    @csrf
                    <div class="row">
                        <div class="form-group d-inline pr-2">
                             <select class="form-control" name="search_by_status" id="search_by_status">
                                <option value="">Filter By Status</option>
                                <option value="new">New</option>
                                <option value="contacted">Contacted</option>
                                <option value="converted">Converted</option>
                                <option value="dropped">Dropped</option>
                             </select>
                        </div>
                         <div class="form-group d-inline">
                             <input placeholder="Enter Text" type="text" name="search" id="filter_input"  class="form-control  d-inline"  required>
                         </div>
                    </div>
                 </form>
              </div>
            <div class="table-responsive">
             <table class="display table-striped table table-bordered" id="leads-table" width="100%">
               <thead>
                  <tr>
                        <th>#</th>
                        <th>Call Received On</th>
                        <th>Date of 1st Call</th>
                        <th>Call Received From</th>
                        <th>Patient Name</th>
                        <th>Source</th>
                        <th>Place Area</th>
                        <th>Treating Doctor</th>
                        <th>Surgery Advised</th>
                        <th>Lead Status</th>
                        <th>Actions</th>
                  </tr>
               </thead>
               <tbody></tbody>
            </table>
             <div id="pagination-links" class="float-right mt-2">
            </div>
           </div>
         </div>
      </div>
   </div>
</div>

@include('admin.appointment-modal')


<x-add-notes />
<x-view-notes />
<x-add-reminder />
<x-view-reminder />
<!-- <div class="modal fade" id="modelReminders">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Reminder Email Notification</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form method="POST" action="{{ route('reminders.store') }}">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="lead_id" id="reminder_lead_id">
                    <input type="hidden" name="reminder_id" id="reminder_main_id">
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" placeholder="Enter Subject" class="form-control" name="subject" id="reminder_subject" value="{{ old('subject') }}" required>
                        @error('subject')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="body">Body</label>
                        <textarea placeholder="Enter Email Body" rows="4" class="form-control" name="body" id="reminder_body" required>{{ old('body') }}</textarea>
                        @error('body')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="date">Reminder Date</label>
                        <input type="date" min="{{ now()->toDateString() }}" class="form-control" name="date" id="reminder_date" value="{{ old('date') }}" required>
                        @error('date')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="time">Reminder Time</label>
                        <input type="time" class="form-control" name="time" id="reminder_time" value="{{ old('time') }}" required>
                        @error('time')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div> -->

<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="importModalLabel">Import</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
       <form method="POST" action="{{ route('leads.import') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="leads_file">Select CSV File</label>
                        <input type="file" class="form-control @error('leads_file') is-invalid @enderror" id="leads_file" name="leads_file" accept=".xls,.xlsx,.csv" required>
                        @error('leads_file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Import</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </form>
    </div>
  </div>
</div>


 <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exportModalTitle">Select Date</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
                <form action="{{ route('exportLeads') }}" method="post">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="start_date">Start Date</label>
                        <input type="date" id="start_date" class="form-control @error('start_date') is-invalid @enderror" name="start_date" value="{{ old('start_date', date('Y-m-d')) }}" required>
                        @error('start_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="end_date">End Date</label>
                        <input type="date" id="end_date" class="form-control @error('end_date') is-invalid @enderror" name="end_date" value="{{ old('end_date', date('Y-m-d')) }}" required>
                        @error('end_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="lead_status">Status</label>
                        <select class="form-control" name="lead_status" id="lead_status">
                            <option value="">Select Status</option>
                            <option value="new">New</option>
                            <option value="contacted">Contacted</option>
                            <option value="converted">Converted</option>
                            <option value="dropped">Dropped</option>
                         </select>
                        @error('lead_status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    @if (session('lead_file_error'))
                        <div class="error-message btn-danger p-2 mt-2">
                            {{ session('lead_file_error') }}
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" name="export_type" value="csv">Export CSV</button>
                    <button type="submit" class="btn btn-primary" name="export_type" value="excel">Export Excel</button>
                </div>
            </form>
        </div>
      </div>
    </div>
  </div>


@if (session('show_modal') == 'modelReminders')
    <script>
        $(document).ready(function() {
            $('#modelReminders').modal('show');
        });
    </script>
@elseif (session('show_modal') == 'lead_import_modal')
     <script>
         $(document).ready(function(){
            $('#importModal').modal('show');
        });
    </script>
@elseif (session('show_modal') == 'lead_export_modal')
     <script>
         $(document).ready(function(){
            $('#exportModal').modal('show');
            $('.invalid-feedback').show();
        });
    </script>
@endif


<script>
    
 $(document).ready(function() {
      let debounceTimer;

      function renderLeadRow(lead, index, canEdit, canDelete, page_no='') {
        let editButton = '';
        let deleteButton = '';
        let addAppointment = '';
        let addNotes = '';
        let viewNotes = '';
        let addReminder = '';
        let viewReminder = '';
        let is_disabled = 'add_appointment';
        // Check permissions
        if (canEdit) {
            editButton = `
                <a href="{{url('/')}}/admin/leads/${lead.id}/edit" data-toggle="tooltip" title="Edit" class="btn btn-primary btn-sm text-white m-1">
                    <i class="i-Pen-2"></i>
                </a>
            `;
        }

        if (canDelete) {
            deleteButton = `
                <form action="{{url('/')}}/admin/leads/${lead.id}" method="POST" style="display:inline;" id="delete-form-${lead.id}">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="_method" value="DELETE">
                    <button type="button" data-toggle="tooltip" title="Delete" class="btn btn-danger btn-sm m-1" onclick="confirmDelete(${lead.id})">
                        <img src="{{asset('/')}}img/del.png" width="15" alt="Delete">
                    </button>
                </form>
            `;
        }

        if (lead.appointment && lead.appointment.leads_id) {
          //  is_disabled = "disabled";
        }
        addAppointment = `<a href="javascript:void(0);" data-leadid="${lead.id}" class="btn btn-primary btn-sm text-white m-1 ${is_disabled}" data-toggle="tooltip" title="Add Appointment"> <i class="i-Calendar-4"></i></a>`;
        /*addNotes = `<a href="javascript:void(0);" lead-id="${lead.id}" class="btn btn-primary btn-sm text-white m-1 notes_modal" data-toggle="tooltip" title="Add Notes"> <i class="i-Edit"></i></a>`;*/
        viewNotes = `<a href="javascript:void(0);" lead-id="${lead.id}" class="btn btn-primary btn-sm text-white m-1 notes_list" data-toggle="tooltip" title="View Notes"> <i class="i-Open-Book"></i></a>`;
        /*addReminder = `<a href="javascript:void(0);" lead-id="${lead.id}" class="btn btn-primary btn-sm text-white m-1 reminder_modal" data-toggle="tooltip" title="Add Reminder"> <i class="i-Bell1"></i></a>`;*/
        viewReminder = `<a href="javascript:void(0);" lead-id="${lead.id}" class="btn btn-primary btn-sm text-white m-1 reminder_list" data-toggle="tooltip" title="View Reminder"> <i class="i-Eye1"></i></a>`;
        let indexing = index + 1;
        if (page_no) {
            indexing = ((page_no - 1) * 10) + (index + 1);
        }
        let lead_status = "New";
        if (lead.lead_status) {
            lead_status = (lead.lead_status).charAt(0).toUpperCase() + (lead.lead_status).slice(1).toLowerCase();
        }

        var color_code = lead.color_code;
        
        return `
            <tr style="background-color:${color_code}">
                <td>${indexing}</td>
                <td>${lead.call_received_on ?? ''}</td>
                <td>${lead.date_of_1st_call ?? ''}</td>
                <td class="lead_no">${lead.call_received_from ?? ''}</td>
                <td class="lead_name">${lead.patient_name ? lead.patient_name.charAt(0).toUpperCase() + lead.patient_name.slice(1) : ''}</td>
                <td>${lead.source ? (lead.source).replace(/_/g, " ").toUpperCase(): ''}</td>
                <td>${lead.place_area ?? ''}</td>
                <td>${lead.treating_doctor ?? ''}</td>
                <td>${lead.surgery_advised ?? ''}</td>
                <td>${lead_status ?? ''}</td>
                <td><div class="dropdown d-inline">
                    <button class="btn btn-sm btn-primary dropdown-toggle m-1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Actions
                    </button>
                    <div class="dropdown-menu">
                        <a href="{{url('/')}}/admin/leads/${lead.id}/edit" class="dropdown-item" data-toggle="tooltip" title="Edit">
                            <i class="i-Pen-2 mr-1"></i> Edit
                        </a>
                        <a href="javascript:void(0);" onclick="confirmDelete(${lead.id})" class="dropdown-item text-danger" data-toggle="tooltip" title="Delete">
                            <i class="i-Close mr-1"></i> Delete
                        </a>
                        <a href="javascript:void(0);" data-leadid="${lead.id}" class="dropdown-item ${is_disabled}" data-toggle="tooltip" title="Add Appointment">
                            <i class="i-Calendar-4 mr-1"></i> Add Appointment
                        </a>
                        <a href="javascript:void(0);" lead-id="${lead.id}" class="dropdown-item notes_list" data-toggle="tooltip" title="View Notes">
                            <i class="i-Open-Book mr-1"></i> View Notes
                        </a>
                        <a href="javascript:void(0);" lead-id="${lead.id}" class="dropdown-item reminder_list" data-toggle="tooltip" title="View Reminder">
                            <i class="i-Eye1 mr-1"></i> View Reminder
                        </a>
                    </div>
                </div>
                <form action="{{url('/')}}/admin/leads/${lead.id}" method="POST" style="display:none;" id="delete-form-${lead.id}">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="_method" value="DELETE">
                </form>
                </td>
            </tr>
        `;
    }

       function fetchLeads(url = "{{ route('search_leads') }}", search = '', key="") {
        let params = new URL(url).searchParams;
        let page_no = params.get("page");
        $.ajax({
            url: url,
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                search: search,
                key: key,
            },
            success: function (response) {
                let tableBody = $('#leads-table tbody');
                tableBody.empty(); // Clear previous rows

                if (response.leads.length > 0) {
                    $.each(response.leads, function (index, lead) {
                        tableBody.append(renderLeadRow(lead, index, response.canEdit, response.canDelete,page_no));
                    });
                } else {
                    tableBody.append('<tr><td colspan="11" class="text-center">No leads found</td></tr>');
                }

                 $('#pagination-links').html(response.pagination);
                 $('#pagination-links a').on('click', function (e) {
                    e.preventDefault();
                    let pageUrl = $(this).attr('href');
                    if (key != "") {
                        fetchLeads(pageUrl, $("#search_by_status").val(), 'lead_status');
                    }else{
                        fetchLeads(pageUrl, $('#filter_input').val());
                    }
                 });
                 $('[data-toggle="tooltip"]').tooltip();
            },
            error: function (xhr) {
                console.error(xhr.responseText);
                alert('An error occurred. Please try again.');
            }
        });
    }

        // Search form submission
         $('#filter_input').on('keyup', function (e) {
            clearTimeout(debounceTimer); // Clear the previous timer
            let search = $(this).val();

            debounceTimer = setTimeout(function () {
                fetchLeads("{{ route('search_leads') }}", search);
            }, 300); // Adjust debounce delay as needed (300ms in this case)
        });

         $('#reset_leads').on('click', function (e) {
            e.preventDefault();
            $('#filter_input').val('');
            fetchLeads("{{ route('search_leads') }}", '');
        });

        $("#search_by_status").on("change", function(){
            fetchLeads("{{ route('search_leads') }}", $("#search_by_status").val(), 'lead_status');
        })

        fetchLeads();

        $('body').on('click','.add_appointment',function(event){
            var leadId = $(this).attr("data-leadid");
            var lead_no = $(this).parents("tr").find("td.lead_no").html();
            var lead_name = $(this).parents("tr").find("td.lead_name").html();
            $('#appointment_date').val("{{ date('Y-m-d') }}");
            $('#create_patient_name').val(lead_name);
            $('#create_patient_phone').val(lead_no);
            $('#appointmentModal form.appointmentForm').append("<input type='hidden' name='leads_id' value='"+leadId+"'>");
            $('#appointmentModal').modal('show');
        });

 });



var showModal = @json(session('show_modal')); 
  if (showModal != 'lead_import_modal') {
    $(document).on('click', '#exportModalBttn', function() {
      setTimeout(function () {
        location.reload();  // Reload the page after 2.5 seconds
      }, 2500);
    });
  }
</script>

@endsection