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

<main class="main">
                    <div class="inner-app-main">
                        <section class="section lyt-section ">
                            <div class="property--height">
                                <div>
                                    <h1 class="bs-heading typ-27 typ-800 mb-24 mt-18">
                                        <a href="{{route('admin.adminProperiesList')}}" class="me-2">
                                            <span class="icon icon-left-icon"></span>
                                        </a>
                                        {{$property->property_name}}’s Visitors
                                    </h1>
                                </div>
                                <div class="row custom-row-gutter">
                                    <div class="bs-card property-card">
                                        <div class="bs-table">
                                            <table id="property-visit-list-table"
                                                class="table table-striped display nowrap cell-border"
                                                style="width:100%">
                                                <div class="append-div">
                                                    <div class="bs-flex-lyt upper-flex bs-search-box-set">
                                                        <div class="d-flex gap-24">
                                                            <select id="property-status-filter" class="form-select"
                                                                aria-label="Default select example">
                                                                <option value="" selected>Status</option>
                                                                <option value="Under Background Check">Under Background Check</option>
                                                                <option value="Visit Scheduled">Visit Scheduled</option>
                                                                <option value="Sold">Sold</option>
                                                            </select>
                                                            <a href="#"
                                                                class="bs-btn typ-blue-btn typ-export-btn" onclick="exportData()">Export</a>
                                                        </div>
                                                        <div class="append-search-bar"></div>
                                                    </div>
                                                </div>
                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                        <th>First Name</th>
                                                        <th>Last Name</th>
                                                        <th>Date</th>
                                                        <th>Time</th>
                                                        <th>Phone Number</th>
                                                        <th>Email ID</th>
                                                        <th>Locations</th>
                                                        <th>Status</th>

                                                    </tr>
                                                </thead>                                                 
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </main>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    var table =   $('#property-visit-list-table').DataTable({
        ajax: {
            url: "{{ route('owner.getPropertyVisitRequests',$property->id) }}",
            data: function(d) {
                // Add the filter value to the data sent to the server
                d.status = $('#property-status-filter').val();
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'checkbox' },
            { data: 'first_name' },
            { data: 'last_name' },
            { data: 'date' },
            { data: 'time' },
            { data: 'phone_number' },
            { data: 'email' },
            { data: 'address' },
            { data: 'status' },





        ],
        scrollX: true,
        info: true,
        ordering: false,
        language: {
            paginate: {
                first: false,
                last: false,
                next: "Next",
                previous: "Previous",
            },
        },
    });
    $('#property-status-filter').on('change', function() {
console.log("sd",$('#property-status-filter').val())
        table.ajax.reload();
    });
});



  const token='{{csrf_token()}}';

  

  function exportData(){
    var checkboxes = document.querySelectorAll('input[name="user_id"]');

    // Array to store checked values
    var checkedValues = [];

    var status = document.getElementById("property-status-filter").value;

    checkboxes.forEach(function(checkbox) {
        // If checkbox is checked, add its value to the array
        if (checkbox.checked) {
            checkedValues.push(checkbox.value);
        }
    });

       fetch("{{route('owner.getVisitorsExcel', ['propertyId' => $property->id])}}",{
                        method:"POST",
                        headers:{
                            'Content-Type':'application/json',
                            'X-CSRF-Token':token
                        },
                        body:JSON.stringify({
                            'checked_users':checkedValues,
                            'status':status
                        })
                    }).then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.blob();
})
.then(blob => {
    // Create a temporary URL to the blob
    const url = window.URL.createObjectURL(blob);

    // Create a temporary <a> element to trigger the download
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'visitors.xlsx'; // Set the file name here

    // Append the <a> element to the document body
    document.body.appendChild(a);

    // Trigger the click event to download the file
    a.click();

    // Clean up: remove the <a> element and revoke the URL object
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
                    }).catch((error)=>{
                        console.log(error);
                    })
  }
</script>