@extends('user.layouts.template')

@section('style')
    <style>
        .select-box {
            font-size: 15px !important;
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
            padding: 20px;
            background: var(--nf-mainnav-bg);
            color: var(--bs-heading-color) !important;
            border-radius: 5px;
            position: relative;
        }

        .select-box .form-select {
            font-size: 15px !important;
        }

        .select-box::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 5px;
            height: 55%;
            transform: translateY(40%);
            border-radius: 0px 10px 10px 0px;
            background-color: var(--nf-header-bg);
        }

        .card-body {
            padding: 20px !important;
        }

        .page-titl {
            color: white !important;
            font-size: 26px;
        }

        .dt-button {
            background: #e35205 !important;
            color: white !important;
            border: 0 !important;
            border-radius: 4px !important;
        }

        .dt-button:focus,
        .dt-button:hover {
            /* transition: all .2s ease-in-out; */
            outline: none !important;
            color: white !important;
            background-color: #1f3a6c !important;
            border-color: #1f3a6c !important;
            box-shadow: 0 .1rem .5rem #37558dff, 0 .25rem 1rem #37558dff !important;
        }

        .dataTables_wrapper .dataTables_filter input {
            border-color: #1a1d211a !important;
        }

        .dataTables_scrollBody {
            overflow-x: auto !important;
            overflow-y: hidden !important;
        }

        table.datatable {
            border-top: 1px solid gray;
        }

        table.dataTable {
            top: 0;
        }

        .dataTables_scroll {
            padding: 15px 0 15px 0;
        }

        #report-table-container {
            position: relative;
            overflow: hidden;
        }

        #report-table-container::after {
            content: "Loading...";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffffff;
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        #report-table-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            background-color: #cececeff;
            z-index: 999999;
            clip-path: polygon(60% 0, 100% 0%, 40% 100%, 0% 100%);
            transition: all cubic-bezier(0.94, 0, 0, 0.97) 0.5s;
            animation-name: chumma_fun;
            animation-duration: 1s;
            animation-iteration-count: infinite;
        }

        @keyframes chumma_fun {
            0% {
                top: -150%;
                left: -150%;
            }

            1% {
                top: -100%;
                left: -100%;
            }

            99% {
                top: 200%;
                left: 200%;
            }

            100% {
                top: 200%;
                left: 200%;
            }
        }

        #report-table-container.loading_done::after,
        #report-table-container.loading_done::before {
            display: none;
        }
    </style>
@endsection

@section('content')
    @php
        $permission = session()->get('permissions');
    @endphp
    <!-- Content Start -->
    <div class="content__boxed">
        <div class="content__wrap">
            <div class="page-title-box align-items-center">
                <div id="page-titl" style="margin-bottom: 0;">
                    Report <i class="ri-arrow-right-s-line"></i> {{ $page_name ?? "" }}
                </div>
            </div>

            <div class="card">
                <div class="card-body" id="report-table-container">
                    <div class="row align-items-end">
                           <div class="col-12  mb-3">
                            <p class="mb-0 h5">{{ $page_name ?? "" }}</p>
                        </div>

                        <div class="col-md-4 mb-3 mb-md-0">
                            <label>Property Name:</label>
                            <select id="propertyFilterNames" class="form-control" disabled>
                                <option value="">-- Loading --</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-2 mb-md-0">
                            <label>Lease Exp Date Range:</label>
                            <input type="text" id="dateRangeFilter" class="form-control datepicker"
                                placeholder="MM-DD-YYYY to MM-DD-YYYY" disabled>
                        </div>

                        <div class="col-md-2 mb-2 mb-md-0">
                            <label>&nbsp;</label>
                            <button id="clearDateFilter" class="btn btn-secondary btn-block">Clear Dates</button>
                        </div>

                        <div class="col-12 p-0 pt-4">
                            <div class="table-responsive p-2">
                                @if(!empty($response['columns']))
                                    <table id="report-table" class="table table-bordered table-striped w-100">
                                        <thead>
                                            <tr>
                                                @foreach($response['columns'] as $column)
                                                    <th>{{ $column }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if(!empty($response['data']))
                                                @foreach($response['data'] as $row)
                                                    <tr>
                                                        @foreach($row as $cell)
                                                            <td>{{ $cell }}</td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Content End -->
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @section('script')
        <!-- DataTables Buttons CSS -->
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

        <!-- DataTables + Buttons JS -->
        <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>

        <!-- File export dependencies -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>


        <!-- CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">

        <!-- CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

        <!-- JS -->
        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
        <!-- JS (needs moment.js) -->
        <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


        <script>
            @if (!empty($response['visible_columns']))
                var visibleCols = @json($response['visible_columns']);
            @endif

                @if (!empty($response['columns']))
                    var allCols = @json($response['columns']);
                @endif

                    var columnDefs = [];
            @if (!empty($response['columns']) && !empty($response['visible_columns']))
                allCols.forEach(function (col, idx) {
                    var isVisible = visibleCols.includes(col);
                    columnDefs.push({
                        targets: idx,
                        visible: isVisible
                    });
                });
            @endif

                    // Find the column index for 'lease_exp_date' FIRST
                    var leaseExpDateColumnIndex = -1;
            @if(!empty($response['columns']))
                var columns = @json($response['columns']);
                leaseExpDateColumnIndex = columns.indexOf('Lease Expiration Date');
                console.log('Lease exp date column index:', leaseExpDateColumnIndex);
            @endif

            // Add the custom filter ONCE (before DataTable init)
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var dateRange = $('#dateRangeFilter').val();

                    // If no date range selected, show all rows
                    if (!dateRange || dateRange.trim() === '') {
                        return true;
                    }

                    // If lease_exp_date column doesn't exist, show all
                    if (leaseExpDateColumnIndex === -1) {
                        return true;
                    }

                    var leaseDate = data[leaseExpDateColumnIndex] || '';

                    // If this row has no lease date, hide it when filter is active
                    if (!leaseDate || leaseDate.trim() === '') {
                        return false;
                    }

                    // Parse date range (format: "MM-DD-YYYY to MM-DD-YYYY")
                    var dates = dateRange.split(' to ');
                    if (dates.length !== 2) {
                        return true; // Invalid format, show all
                    }

                    function parseDate(dateStr) {
                        if (!dateStr) return null;
                        var parts = dateStr.trim().split('-');
                        if (parts.length === 3) {
                            // MM-DD-YYYY format
                            if (parts[0].length <= 2) {
                                return new Date(parts[2], parts[0] - 1, parts[1]);
                            }
                            // YYYY-MM-DD format (from table)
                            return new Date(parts[0], parts[1] - 1, parts[2]);
                        }
                        // Try parsing as is
                        return new Date(dateStr);
                    }

                    var rowDate = parseDate(leaseDate);
                    var filterStart = parseDate(dates[0]);
                    var filterEnd = parseDate(dates[1]);

                    console.log('Filtering row:', {
                        leaseDate: leaseDate,
                        rowDate: rowDate,
                        filterStart: filterStart,
                        filterEnd: filterEnd,
                        isInRange: rowDate >= filterStart && rowDate <= filterEnd
                    });

                    // Check if dates are valid
                    if (!rowDate || !filterStart || !filterEnd) {
                        return false; // Invalid date, hide row
                    }

                    // Check if date is within range
                    return rowDate >= filterStart && rowDate <= filterEnd;
                }
            );

            var table;
            @if(!empty($response['columns']))
                $(document).ready(function () {
                    table = $('#report-table').DataTable({
                        pageLength: 10,
                        ordering: true,
                        searching: true,
                        responsive: true,
                        scrollX: true,
                        scrolly: false,
                        fixedHeader: true,
                        autoWidth: false,
                        dom: 'Bfrtip',
                        buttons: [
                            {
                                extend: 'excelHtml5',
                                text: 'Excel',
                                filename: '{{ $page_name ?? "Report" }}',
                                title: '{{ $page_name ?? "Report" }}',
                                customize: function (xlsx) {
                                    var sheet = xlsx.xl.worksheets['{{ $page_name ?? "Report" }}.xml'];
                                }
                            },
                            {
                                extend: 'print',
                                text: 'Print',
                                title: '{{ $page_name ?? "Report" }}',
                                customize: function (win) {
                                    $(win.document.body).find('table')
                                        .addClass('compact')
                                        .css('font-size', 'inherit');
                                }
                            }
                        ],
                        columnDefs: columnDefs
                    });

                    // Populate property filter
                    $('#propertyFilterNames').html('<option value="">-- All --</option>');
                    table.column(1).data().unique().sort().each(function (d) {
                        $('#propertyFilterNames').append('<option value="' + d + '">' + d + '</option>');
                    });

                    // Property filter
                    $('#propertyFilterNames').on('change', function () {
                        var val = $(this).val();
                        table.column(1).search(val ? '^' + val + '$' : '', true, false).draw();
                    });

                    // Initialize Flatpickr for date range
                    flatpickr("#dateRangeFilter", {
                        mode: "range",
                        dateFormat: "m-d-Y",
                        delimiter: " to ",
                        showMonths: 2,
                        allowInput: true,
                        onChange: function (selectedDates, dateStr, instance) {
                            console.log('Date selected:', selectedDates);
                            console.log('Date string:', dateStr);

                            // Trigger DataTable redraw when range is complete
                            if (selectedDates.length === 2) {
                                table.draw();
                            }
                        },
                        onClose: function (selectedDates, dateStr, instance) {
                            // Also trigger on close in case user picked both dates
                            if (selectedDates.length === 2) {
                                table.draw();
                            }
                        }
                    });

                    // Clear date filter button
                    $('#clearDateFilter').on('click', function () {
                        $('#dateRangeFilter').val('');
                        // Clear the flatpickr instance
                        document.querySelector('#dateRangeFilter')._flatpickr.clear();
                        table.draw();
                    });

                    // Enable filters after table loads
                    setTimeout(function () {
                        $('#report-table-container').addClass('loading_done');
                        $('#propertyFilterNames').prop('disabled', false);
                        $('#dateRangeFilter').prop('disabled', false);
                    }, 1000);
                });
            @endif
        </script>
    @endsection

@endsection