@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Admin Dashboard</h1>
        <div class="container my-3">
            <div class="row align-items-center">
                <!-- Search Input -->
                <div class="col-md-3">
                    <input type="text" name="query" id="dt-search" class="form-control" placeholder="Search...">
                </div>

                <!-- Minimum Date Input -->
                <div class="col-md-3">
                    <input type="datetime-local" id="min" name="min" class="form-control"
                        placeholder="Minimum Date">
                </div>

                <!-- Maximum Date Input -->
                <div class="col-md-3">
                    <input type="datetime-local" id="max" name="max" class="form-control"
                        placeholder="Maximum Date">
                </div>

                <!-- Buttons -->
                <div class="col-md-3 d-flex justify-content-end">
                    <!-- Download PDF Button -->
                    <button id="downloadBtn" onclick="handleDownload()" class="btn btn-secondary mx-1">Download PDF</button>

                    <!-- Export Excel Button -->
                    <button id="ExcelBtn" onclick="handleExportExcel()" class="btn btn-secondary mx-1">Export Excel</button>
                    {{-- <button id="ExcelBtn" onclick="window.location.href='{{ route('export.excel') }}'"
                        class="btn btn-secondary">Export Excel</button> --}}
                </div>
            </div>
        </div>


        <table id="dataDatatable" class="table table-bordered table-hover w-100"
            data-url="{{ route('admin.report-get-data') }}">
            <thead>
                <tr>
                    <td>No</td>
                    <td>Staff ID</td>
                    <td>Visitor ID</td>
                    <td>Plate No</td>
                    <td>Guard's Name(Arrive)</td>
                    <td>Guard's Name(Depart)</td>
                    <td>Purpose</td>
                    <td>Total Visitor</td>
                    <td>Arrive Time</td>
                    <td>Depart Time</td>
                    <td>Action</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>
@endsection

@push('custom-scripts')
    <script>
        $(document).ready(function() {
            datatableData();

        });

        function datatableData() {
            $('#dataDatatable').DataTable({
                searching: false,
                paging: false,
                info: false,
                ordering: false,
                processing: true,
                serverSide: true,
                ajax: {
                    url: $('#dataDatatable').data('url'),
                    type: 'GET',
                    data: function(d) {
                        d.search.search = $('#dt-search').val();
                        d.search.min = $('#min').val();
                        d.search.max = $('#max').val();
                    },
                },
                columns: [{
                    data: 'no'
                }, {
                    data: 'id_staff'
                    // name: 'id_staff'
                }, {
                    data: 'id_visitor'
                    // name: 'id_visitor'
                }, {
                    data: 'plate_no'
                    // name: 'plate_no'
                }, {
                    data: 'guard_in'
                    // name: 'guard_in'
                }, {
                    data: 'guard_out'
                    // name: 'guard_out'
                }, {
                    data: 'purpose'
                    // name: 'purpose'
                }, {
                    data: 'total_visitor'
                    // name: 'total_visitor'
                }, {
                    data: 'arrive_at'
                    // name: 'arrive_at'
                }, {
                    data: 'depart_at'
                    // name: 'depart_at'
                },{
                // data: 'id',
                // render: function(data, type, row) {
                //     var editUrl = '{{ route("admin.edit", ":id") }}'.replace(':id', data);
                //     var deleteUrl = '{{ route("admin.delete", ":id") }}'.replace(':id', data);
                    
                //     return `
                //         <a href="${editUrl}" class="btn btn-sm btn-primary">Edit</a>
                //         <button class="btn btn-sm btn-danger" onclick="handleDelete(${data}, '${deleteUrl}')">Delete</button>
                //     `;
                // }
                    data: 'action'
                    // name: 'action'
            }]
            });

            $(document).on('change', '#dt-search, #min, #max', function() {
                $('#dataDatatable').DataTable().ajax.reload(null, false);
            });
        }

        function handleDownload() {
            var button = document.getElementById('downloadBtn');
            button.innerHTML =
                '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Downloading...';
            button.disabled = true;

            var minDate = $('#min').val();
            var maxDate = $('#max').val();
            var search = $('#dt-search').val();

            var downloadUrl = '{{ route('report.pdf') }}';

            if (minDate || maxDate || search) {
                downloadUrl += '?search[min]=' + minDate + '&search[max]=' + maxDate + '&search[search]=' + search;
            }

            window.location.href = downloadUrl;

            setTimeout(function() {
                button.innerHTML = 'Download PDF';
                button.disabled = false;
            }, 1000);

        }

        function handleExportExcel() {
            var button = document.getElementById('ExcelBtn');
            button.innerHTML =
                '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Exporting....';
            button.disabled = true;

            var minDate = $('#min').val();
            var maxDate = $('#max').val();
            var search = $('#dt-search').val();

            var downloadUrl = '{{ route('export.excel') }}';

            if (minDate || maxDate || search) {
                downloadUrl += '?search[min]=' + minDate + '&search[max]=' + maxDate + '&search[search]=' + search;
            }

            window.location.href = downloadUrl;

            setTimeout(function() {
                button.innerHTML = 'Export Excel';
                button.disabled = false;
            }, 1000);

        }

        function handleDelete(id) {
            if (confirm('Are you sure you want to delete this record?')) {
                $.ajax({
                    url: `/admin/delete/${id}`,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        alert(response.message);
                        $('#dataDatatable').DataTable().ajax.reload(null, false);
                    },
                    error: function(xhr) {
                        alert('Error: ' + xhr.responseText);
                    }
                });
            }
        }
    </script>
@endpush