@extends('layouts/main-layout')
@section('meta_title')
Our Departments
@endsection



@section('meta_description')
Kidney transplantation is the treatment of choice for a minority of patients. Read more about the process and details of renal transplant surgery and how they may affect your body.
@endsection



@section('meta_keywords')
@endsection


@section('canonical')
https://www.nuhospitals.com/
@endsection



@section('custom-css')
<style>
  .table {
    border-radius: 10px;
    outline-style: auto;
    table-layout: auto;
    margin-left: auto;
    margin-right: auto;
  }
</style>
@endsection



@section('content')
<div class="row mt-4">
  <div class="col-md-2">
  <input type="text" class="form-control search" id="search" placeholder="seach">
</div>
<div class="col-md-2">
  <input type="date" class="form-control from_date" id="from_date">
</div>
<div class="col-md-2">
  <input type="date" class="form-control to_date" id="to_date">
</div>
<div class="col-md-3">
  <button type="submit" id="search_dtt" class="btn-primary search_dtt">Search</button>
</div>
<div class="col-md-3">
  <button type="submit" id="export_to_excel" class="btn-success export_to_excel">Export To Excel</button>
</div>
</div>
<section>
  <div class="container">
   <table class="table mt-3 mb-3" id="searchTable">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Phone</th>
          <th scope="col">Message</th>
          <th scope="col">Title</th>
          <th scope="col">Date</th>
          <th scope="col">Utm</th>
          <th scope="col">Utm Source</th>
          <th scope="col">Utm Medium</th>
          <th scope="col">Utm Link</th>
        </tr>
      </thead>
        <tbody id="searchResultsBody">
        @foreach($contact_us as $data)
      
        <tr>

          <td>{{isset($data->name) ? $data->name : '' }}</td>
          <td>{{isset($data->email) ? $data->email : ''}}</td>
          <td>{{isset($data->phone) ? $data->phone : ''}}</td>
          <td>{{isset($data->message) ? $data->message :'' }}</td>
          <td>{{isset($data->title) ? $data->title : ''}}</td>
          <td>{{isset($data->created_at) ? $data->created_at : ''}}</td>
          <td>{{isset($data->utm) ? $data->utm : ''}}</td>
          <td>{{isset($data->utm_source) ? $data->utm_source : ''}}</td>
          <td>{{isset($data->utm_medium) ? $data->utm_medium : ''}}</td>
          <td>{{isset($data->utm_link) ? $data->utm_link : ''}}</td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</section>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.16/jspdf.plugin.autotable.min.js"></script>

<script>
  $(document).ready(function(){
 document.getElementById('export_to_excel').addEventListener('click', function() {
    var searchValue = document.getElementById('search').value;
    var fromDateValue = document.getElementById('from_date').value;
    var toDateValue = document.getElementById('to_date').value;

    var xhr = new XMLHttpRequest();
   
    var route = '{{ route('download') }}' + '?search=' + encodeURIComponent(searchValue) + '&from_date=' + encodeURIComponent(fromDateValue) + '&to_date=' + encodeURIComponent(toDateValue);

    xhr.open('GET', route, true);
    xhr.responseType = 'blob';

    xhr.onload = function() {
        if (xhr.status === 200) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(xhr.response);
            a.href = url;
            a.download = 'filtered_contacts.csv'; 
            document.body.appendChild(a);
            a.click();

            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        } else {
            console.error('Failed to download CSV file. Status:', xhr.status);
        }
    };

    xhr.onerror = function() {
        console.error('Error occurred during the AJAX request.');
    };

    xhr.send();
});



  
function formatDate(date) {
    if (!date) return '';
    var parts = date.split('-');
    return parts[2] + '-' + parts[0] + '-' + parts[1];
}

  $('#search_dtt').on('click', function() {
        // Collect input values
        var searchData = $('#search').val();
        var fromDate = $('#from_date').val();
        var toDate = $('#to_date').val();
        $.ajax({
            url: '/filter', 
            type: 'GET',
            data: {
                searchdata: searchData,
                from_date: fromDate,
                to_date: toDate
            },
            success: function(response) {
                $('#searchResultsBody').empty();
                if (response.results.length === 0) {
                    $('#searchResultsBody').html('<tr><td colspan="10">No data found</td></tr>');
                } else {
                    $.each(response.results, function(index, data) {
                        var row = '<tr>' +
                            '<td>' + (data.name ? data.name : '') + '</td>' +
                            '<td>' + (data.email ? data.email : '') + '</td>' +
                            '<td>' + (data.phone ? data.phone : '') + '</td>' +
                            '<td>' + (data.message ? data.message : '') + '</td>' +
                            '<td>' + (data.title ? data.title : '') + '</td>' +
                            '<td>' + (data.created_at ? data.created_at : '') + '</td>' +
                            '<td>' + (data.utm ? data.utm : '') + '</td>' +
                            '<td>' + (data.utm_source ? data.utm_source : '') + '</td>' +
                            '<td>' + (data.utm_medium ? data.utm_medium : '') + '</td>' +
                            '<td>' + (data.utm_link ? data.utm_link : '') + '</td>' +
                            '</tr>';
                        $('#searchResultsBody').append(row);
                    });
                }
            }
        });
    });
    });

</script>