@extends('operations.layout.mainlayout')

@section('content')
{{--    @if(session('role') == 15 || session('role') == 17 || session('role') == 18 || session('role') == 14)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
<style>
    .contain-filters > div {
        display: flex;
    }

    /* Search Action Bar */
    .reservations-search-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 30px;
        background: #F9FAFB;
        box-shadow: 0px 2px 30px 0px #0000000F;
        border-radius: 30px;
    }

    .reservations-search-bar-left {
        color: var(--blazma-primary);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    .reservations-search-bar-left .fa-filter {
        font-size: 16px;
        opacity: 0.85;
    }

    .reservations-search-bar-btn {
        background: #ffffff;
        color: var(--blazma-primary);
        border: none;
        border-radius: 30px;
        padding: 9px 32px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.3px;
        cursor: pointer;
        box-shadow: 0 3px 12px rgba(0,0,0,0.15);
        transition: all 0.2s ease;
    }

    .reservations-search-bar-btn:hover {
        background: var(--blazma-primary);
        color: #fff0f4;
        box-shadow: 0 5px 18px rgba(0,0,0,0.2);
        transform: translateY(-1px);
    }

    .reservations-search-bar-btn:focus {
        outline: none;
    }

    .reservations-search-bar-btn:active {
        transform: translateY(0);
        outline: none;
    }
    .filters-toggle-btn {
        background: #F9FAFB;
        box-shadow: 0px 2px 30px 0px #0000000F;
        color: var(--blazma-primary);
        border: 1px solid rgba(255,255,255,0.4);
        border-radius: 30px;
        padding: 7px 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 14px;
        line-height: 1;
    }
    .filters-toggle-btn:hover {
        background: var(--blazma-primary);
        color: #fff0f4;
        box-shadow: 0 5px 18px rgba(0,0,0,0.2);
        transform: translateY(-1px);
    }
    .filters-toggle-btn:focus {
        outline: none;
    }
</style>
<link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}.15" rel="stylesheet">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header p-0">
        <div class="container-fluid card m-0">
            <div class="row">
                <div class="col-sm-6 m-0 card ">
                    <h1 class="card-body m-0 text-dark mb-2" style="color: var(--blazma-text)!important;">Reservations</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">

                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">

                <div class="card filter-main-card">
                    <div class="card-body bg-light">
                        <div class="row justify-content-start contain-filters" id="main-filters-row">
                            <div class="mb-2 mr-4">
                                <div class="filter">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="filter-name">Reservations</span>
                                        <span id="reservations-number" class="filter-reservation-number" style="cursor:pointer;"><i class="fa fa-eye"></i></span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <input type="text" class="form-control search-input" id="res-no" placeholder="Reservation ID" />
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <select class="form-control search-input" id="reservation-status-id">
                                            <option value="">Reservation Status</option>
                                            @foreach($statuses as $status)
                                                <option value="{{$status->ORDER_STATUS_ID}}">{{$status->LAB_DESC_EN}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <select class="form-control search-input" name="reservation_type" id="reservation_type">
                                            <option value="">Reservation Type</option>
                                            <option value="1">Normal</option>
                                            <option value="2">Home Visit</option>
                                        </select>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <input id="reservation-date-from" class="form-control search-input" type="text" name="date_from" placeholder="Date From" value="@if(!empty($date_from)){{$date_from}} @else {{$start_date}} @endif">
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <input id="reservation-date-to" class="form-control search-input" type="text" value="@if(!empty($date_to)){{$date_to}}@endif" placeholder="Date To">
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <input type="text" class="form-control search-input" id="serial-no" placeholder="Serial Number" />
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <input type="text" class="form-control search-input" id="invoice-number" placeholder="Invoice Number" />
                                    </div>
                                </div>
                            </div>
                            <div class="mb-2 mr-4">
                                <div class="filter">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="filter-name">Patients</span>
                                        <span id="patients-number" class="filter-reservation-number" style="cursor:pointer;"><i class="fa fa-eye"></i></span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <input type="text" placeholder="ID" class="form-control search-input" id="sample-identification" />
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <input type="text" placeholder="NAME" class="form-control search-input" id="sample-name" />
                                    </div>
                                    @if (!$profile->HIDE_MOBILE_NO)
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <input type="text" placeholder="Mobile No." class="form-control search-input" id="sample-mobile" />
                                    </div>
                                    @endif
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <input type="text" placeholder="Passport" class="form-control search-input" id="sample-passport" />
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <input type="text" placeholder="MRN" class="form-control search-input" id="mrn-no" />
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <input type="text" placeholder="Reference Order ID" class="form-control search-input" id="reference-id" />
                                    </div>
                                </div>
                            </div>
                            <div class="mb-2 mr-4">
                                <div class="filter">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="filter-name">Branch</span>
                                        <span id="branches-number" class="filter-reservation-number" style="cursor:pointer;"><i class="fa fa-eye"></i></span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-3" @if(empty(session('is_primary')) || !empty(session('org_id')) || session('role') == 17) style="display: none" @endif>
                                        <select class="form-control rhospital_id search-input" id="reservation-hospital-id" name="hospital">
                                            <option value="">Registration Branch</option>
                                            @foreach($hospitals as $ehospital)
                                                <option @if((!empty($hospital) && $hospital == $ehospital->ID) || (!empty(session('role')) && session('role') == 1 && session('hospital_id') == $ehospital->ID)) selected @endif value="{{$ehospital->ID}}">{{$ehospital->NAME_EN}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2" @if((!empty(session('is_branch')) || !empty(session('org_id'))) || session('role') == 17) style="display: none" @endif>
                                        <select required id="reservation-org-id" class="form-control rhospital_id search-input" name="org_id">
                                            <option value="">Client</option>
                                            @foreach($companies as $company)
                                                <option @if(!empty(session('role')) && (!empty(session('org_id')) || session('role') == 17) && !empty(session('org_id')) && session('org_id') == $company->ID) selected @endif value="{{$company->ID}}">{{$company->COMPANY_NAME}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <select class="form-control rhospital_id search-input" id="report-location-id" name="location">
                                            <option value="">Location</option>
                                            @if(count($locations) > 0)
                                                @foreach($locations as $location)
                                                    <option @if(!empty(session('location_id')) && session('location_id') == $location->ID) selected @endif value="{{$location->ID}}">{{$location->NAME_EN}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="reservations-search-bar mt-3">
                            <div class="reservations-search-bar-left">
                                <i class="fa fa-filter mr-2"></i>
                                <span id="active-filters-label">Ready to search</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <button type="button" class="filters-toggle-btn mr-3" title="Toggle Filters">
                                    <i class="fa fa-chevron-up"></i>
                                </button>
                                <button type="button" id="reservation-search-btn" class="reservations-search-bar-btn">
                                    <i class="fa fa-search mr-2"></i> Search
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                    <!-- /.card -->

                    <div class="card">

                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="reservation-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Reservation ID</th>
                                    <th>Patient Name</th>
                                    <th id="mobile-header">Mobile Number</th>
                                    <th>Patient ID</th>
                                    <th>Reservation Status</th>
                                    <th>Regestrated Branch</th>
                                    <th>Paid Amount</th>
                                    <th>Regestrated at</th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->


@endsection
@section('footer-scripts')
    <script>
        // Function to get filter request data for reservations
        function getReservationsAnalysisRequestData() {
            return {
                date_from : $('#reservation-date-from').val(),
                date_to : $('#reservation-date-to').val(),
                hospital_id : $('#reservation-hospital-id').val(),
                status_id : $('#reservation-status-id').val(),
                org_id : $('#reservation-org-id').val(),
                only_seha : $('#only-seha-pending').is(':checked'),
                location : $('#reservation-location-id').val(),
                test_category : $('#samples-category-id').val(),
                res_id : $('#res-no').val(),
                invoice_number : $('#invoice-number').val(),
                serial_no : $('#serial-no').val(),
                sample_id : $('#sample-id').val(),
                sample_mobile : $('#sample-mobile').val(),
                sample_identification : $('#sample-identification').val(),
                sample_name : $('#sample-name').val(),
                sample_passport : $('#sample-passport').val(),
                reference_id : $('#reference-id').val(),
                patient_id : $('#patient-id').val(),
                reservation_type : $('#reservation_type').val(),
                group_by_reservation : $('#group_by_reservation').is(':checked'),
                mrn : $('#mrn-no').val()
            };
        }

        $(document).ready(function() {
            // Filters toggle
            $(document).on('click', '.filters-toggle-btn', function() {
                var $btn     = $(this);
                var $icon    = $btn.find('i');
                var $filters = $('#main-filters-row');
                var hidden   = $btn.data('hidden') || false;
                if (!hidden) {
                    $filters.hide();
                    $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
                    $btn.data('hidden', true);
                } else {
                    $filters.css('display', 'flex');
                    $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
                    $btn.data('hidden', false);
                }
            });
            // Update active filters count in the search bar
            function updateActiveFiltersCount() {
                var count = 0;
                $('.filter input[type=text], .filter input[type=date]').each(function() {
                    if ($(this).val() && $(this).val().trim() !== '') count++;
                });
                $('.filter select').each(function() {
                    var val = $(this).val();
                    if (val && val !== '' && !(Array.isArray(val) && val.length === 0)) count++;
                });
                if (count === 0) {
                    $('#active-filters-label').html('Ready to search');
                } else {
                    $('#active-filters-label').html('<strong>' + count + '</strong> filter' + (count > 1 ? 's' : '') + ' applied');
                }
            }
            $(document).on('change keyup', '.filter input, .filter select', function() {
                updateActiveFiltersCount();
            });
            updateActiveFiltersCount();

            // Search button click handler - triggers table reload
            $(document).on('click', '#reservation-search-btn', function(e) {
                e.preventDefault();
                $('.filter-reservation-number').html('<i class="fa fa-eye"></i>');
                indexfilterChanged = true;
                if (typeof reservationTable !== 'undefined') {
                    console.log('Calling reservationTable.draw()');
                    reservationTable.draw();
                } else {
                    // Fallback: try to get DataTable instance
                    var table = $('#reservation-table').DataTable();
                    console.log('Table from fallback:', table);
                    if (table) {
                        table.draw();
                    }
                }
            });

            $('.search-input').on('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    $(this).blur();
                    $('#reservation-search-btn').trigger('click');
                }
            });

            // Filter totals click handler - update filter counts
            $(document).on('click', '.filter-reservation-number', function() {
                $(this).html('<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>').attr('disabled', true);
                $.ajax({
                    async: true,
                    url: '/operations/reservations-analysis-totals',
                    data: getReservationsAnalysisRequestData(),
                    success: function (response) {
                        $('#reservations-number').text(response.TOTAL_RESERVATIONS).attr('disabled', false)
                        $('#patients-number').text(response.TOTAL_PATIENTS).attr('disabled', false)
                        $('#branches-number').text(response.TOTAL_BRANCH).attr('disabled', false)
                    }
                });
            });
        });

        $('#reservation-date-from').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('#reservation-date-from').val(chosen_date.format('YYYY-MM-DD HH:mm')).trigger("change");
        })

        // $('#reservation-date-from').on('apply.daterangepicker', function(ev, picker) {
        //     $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
        // });

        $('#reservation-date-to').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('#reservation-date-to').val(chosen_date.format('YYYY-MM-DD HH:mm'));
        })

        $('#reservation-date-to').on('apply.daterangepicker', function(ev, picker) {
            if (!$(this).val()) {
                $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
            }
        });
        // $('#reservation-date-to').on('apply.daterangepicker', function(ev, picker) {
        //     $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
        // });

        var hide_mobile_no = {{ $profile->HIDE_MOBILE_NO }};
    </script>
@endsection