@php
    $layout = auth('employee')->check()?'employee':'admin';
@endphp
@extends('layout.'.$layout.'.master')

@section('content')
    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            <div class="section-body">
                <!-- Filters Section -->
                <form action="{{ route('on_road_bookings.index') }}" method="GET" id="filter-form">
                    <div class="row">
                        <div class="col-md-2">
                            <label for="from-date">{{ __('messages.from') }}</label>
                            <input type="date" id="from-date" name="from" class="form-control"
                                value="{{ request('from') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="to-date">{{ __('messages.to') }}</label>
                            <input type="date" id="to-date" name="to" class="form-control"
                                value="{{ request('to') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="partner">{{ __('messages.partner') }}</label>
                            <select id="partner" name="partner" class="form-control">
                                <option value="">{{ __('messages.select_partner') }}</option>
                                @foreach ($partners as $partner)
                                    <option value="{{ $partner->id }}"
                                        {{ request('partner') == $partner->id ? 'selected' : '' }}>
                                        {{ $partner->fname . ' ' . $partner->lname . ' - ' . $partner->company }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="employee">{{ __('messages.employee') }}</label>
                            <select id="employee" name="employee" class="form-control">
                                <option value="">{{ __('messages.select_employee') }}</option>
                                @foreach ($drivers as $employee)
                                    <option value="{{ $employee->id }}"
                                        {{ request('employee') == $employee->id ? 'selected' : '' }}>
                                        {{ $employee->fname . ' ' . $employee->lname . ' - ' . $employee->type }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="vehicle">{{ __('messages.vehicle') }}</label>
                            <select id="vehicle" name="vehicle" class="form-control">
                                <option value="">{{ __('messages.select_vehicle') }}</option>
                                @foreach ($vehicles as $vehicle)
                                    <option value="{{ $vehicle->id }}"
                                        {{ request('vehicle') == $vehicle->id ? 'selected' : '' }}>
                                        {{ $vehicle->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="account">{{ __('messages.account') }}</label>
                            <select id="account" name="account" class="form-control">
                                <option value="">{{ __('messages.select_account') }}</option>
                                @foreach ($accounts as $account)
                                    <option value="{{ $account->id }}"
                                        {{ request('account') == $account->id ? 'selected' : '' }}>
                                        {{ $account->title . ' - ' . $account->type }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 align-self-end">
                            <a href="{{ route('bookings.index') }}" class="btn btn-secondary" id="reset-btn"
                                style="display: none;">
                                {{ __('messages.reset') }}
                            </a>
                        </div>
                    </div>
                </form>

                <!-- Table Section -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>{{ __('messages.bookings') }}</h4>
                                <div class="card-header-action">
                                    <a href="{{ route('bookings.create') }}" id="addBtn"
                                        class="btn btn-icon icon-left btn-primary">
                                        <i class="fas fa-plus"></i>
                                        {{ __('messages.add_booking') }}
                                    </a>
                                    <button id="createInvoiceBtn" class="btn btn-icon icon-left btn-success"
                                        style="display: none;">
                                        <i class="fas fa-file-invoice"></i>
                                        {{ __('messages.create_invoice') }}
                                    </button>
                                    <!-- Excel Import Button -->
                                    <button id="importExcelBtn" class="btn btn-icon icon-left btn-warning"
                                        data-toggle="modal" data-target="#importExcelModal">
                                        <i class="fas fa-file-excel"></i>
                                        {{ __('messages.import_excel') }}
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped" id="table-1">
                                        <thead>
                                            <tr>
                                                <th class="text-center">
                                                    <input type="checkbox" id="select-all">
                                                </th>
                                                <th>Booking Id</th>
                                                <th>{{ __('messages.booking_type') }}</th>
                                                <th>{{ __('messages.travel_date') }}</th>
                                                <th>{{ __('messages.travel_time') }}</th>
                                                <th>{{ __('messages.partner') }}</th>
                                                <th>{{ __('messages.employee') }}</th>
                                                <th>{{ __('messages.vehicle') }}</th>
                                                <th>{{ __('messages.passenger_name') }}</th>
                                                <th>{{ __('messages.passenger_phone') }}</th>
                                                <th>{{ __('messages.airline') }}</th>
                                                <th>{{ __('messages.pickup_location') }}</th>
                                                <th>{{ __('messages.dropoff_location') }}</th>
                                                <th>{{ __('messages.created_at') }}</th>
                                                <th>{{ __('messages.debit') }}</th>
                                                <th>{{ __('messages.outsource_credit') }}</th>
                                                <th>{{ __('messages.outsource_purchase') }}</th>
                                                <th>{{ __('messages.status') }}</th>
                                                <th>{{ __('messages.payment_status') }}</th>
                                                <th>{{ __('messages.action') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($bookings as $key => $booking)
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="booking-checkbox"
                                                            data-id="{{ $booking->id }}">
                                                    </td>
                                                    <td>{{ $booking->id }}</td>
                                                    <td>{{ $booking->on_road ? __('messages.on_road') : ($booking->outsource ? __('messages.outsource') : __('messages.regular')) }}
                                                    </td>
                                                    <td>{{ $booking->travel_date }}</td>
                                                    <td>{{ $booking->travel_time ?? __('-') }}</td>
                                                    <td>{{ $booking->partner ? $booking->partner->fname . ' ' . $booking->partner->lname : __('messages.no_partner') }}
                                                    </td>
                                                    <td>{{ $booking->employee ? $booking->employee->fname . ' ' . $booking->employee->lname : __('messages.no_driver') }}
                                                    </td>
                                                    <td>{{ $booking->vehicle ? $booking->vehicle->name : __('messages.no_vehicle_selected') }}
                                                    </td>
                                                    <td>{{ $booking->passenger_name ?? __('-') }}</td>
                                                    <td>{{ $booking->passenger_phone ?? __('-') }}</td>
                                                    <td>{{ $booking->airline ?? __('-') }}</td>
                                                    <td>{{ $booking->pickup_location }}</td>
                                                    <td>{{ $booking->dropoff_location }}</td>
                                                    <td>{{ $booking->created_at->format('d-m-Y H:i') }}</td>
                                                    <td>{{ $booking->debit }}</td>
                                                    <td>{{ $booking->outsource_credit }}</td>
                                                    <td>{{ $booking->outsource_purchase }}</td>
                                                    <td>
                                                        <div
                                                            class="badge badge-shadow {{ $booking->status == 'pending' ? 'badge-warning' : ($booking->status == 'finished' ? 'badge-success' : ($booking->status == 'on_going' ? 'badge-primary' : ($booking->status == 'cancelled' ? 'badge-danger' : ''))) }}">
                                                            {{ strtoupper($booking->status) }}
                                                        </div>
                                                    </td>
                                                    <td>
                                                        @if ($booking->outsource)
                                                            @if ($booking->outsourceExpense)
                                                                <a title="Outsource Payment" href="{{ route('expense.edit', ['expense'=>$booking->outsourceExpense->id,'readonly'=>true]) }}">
                                                                    <div class="badge badge-shadow badge-success">
                                                                        Paid
                                                                    </div>
                                                                </a>
                                                            @else
                                                                <div class="badge badge-shadow badge-danger">
                                                                    Unpaid
                                                                </div>
                                                            @endif
                                                        @else
                                                            -
                                                        @endif
                                                    </td>                                                    
                                                    <td>
                                                        <a href="{{ route('bookings.edit', ['booking' => $booking->id]) }}"
                                                            class="btn btn-icon btn-primary"
                                                            title="{{ __('messages.edit') }}">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        <form
                                                            action="{{ route('bookings.destroy', ['booking' => $booking->id]) }}"
                                                            method="POST" style="display:inline-block;">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-icon btn-danger"
                                                                title="{{ __('messages.delete') }}"
                                                                onclick="return confirm('{{ __('messages.confirm_delete') }}');">
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="16" class="text-center">
                                                        {{ __('messages.no_bookings_found') }}</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>


    <!-- Invoice Modal -->
    <div class="modal fade" id="invoiceModal" tabindex="-1" role="dialog" aria-labelledby="invoiceModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('invoices.create') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="invoiceModalLabel">{{ __('messages.create_invoice') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"
                            aria-label="{{ __('messages.close') }}">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="booking_ids" id="selectedBookingIds">
                        <div class="form-group">
                            <label for="discount">{{ __('messages.discount') }}</label>
                            <input type="number" name="discount" id="discount" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">{{ __('messages.close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('messages.submit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Import Excel Modal -->
    <div class="modal fade" id="importExcelModal" tabindex="-1" role="dialog" aria-labelledby="importExcelModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importExcelModalLabel">{{ __('messages.import_excel') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="importExcelForm" action="{{ route('bookings.import') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="excelFile">{{ __('messages.choose_file') }}</label>
                            <input type="file" class="form-control" id="excelFile" name="file"
                                accept=".xlsx, .xls, .csv" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">{{ __('messages.close') }}</button>
                    <button type="submit" class="btn btn-primary"
                        form="importExcelForm">{{ __('messages.upload') }}</button>
                </div>
            </div>
        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectAllCheckbox = document.getElementById('select-all');
            const bookingCheckboxes = document.querySelectorAll('.booking-checkbox');
            const createInvoiceBtn = document.getElementById('createInvoiceBtn');

            selectAllCheckbox.addEventListener('change', function() {
                bookingCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
                toggleCreateInvoiceBtn();
            });

            bookingCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', toggleCreateInvoiceBtn);
            });

            function toggleCreateInvoiceBtn() {
                const anyChecked = Array.from(bookingCheckboxes).some(checkbox => checkbox.checked);
                createInvoiceBtn.style.display = anyChecked ? 'inline-block' : 'none';
            }

            createInvoiceBtn.addEventListener('click', function() {
                const selectedIds = Array.from(bookingCheckboxes)
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => checkbox.dataset.id);

                if (selectedIds.length > 0) {
                    $('#invoiceModal').modal('show');
                    $('#selectedBookingIds').val(selectedIds.join(','));
                }
            });

            // FILTERS
            var fromDateInput = document.getElementById('from-date');
            var toDateInput = document.getElementById('to-date');
            var resetBtn = document.getElementById('reset-btn');
            var filterForm = document.getElementById('filter-form');

            function checkForFilters() {
                var fromDate = fromDateInput.value;
                var toDate = toDateInput.value;
                var partner = document.getElementById('partner').value;
                var employee = document.getElementById('employee').value;
                var vehicle = document.getElementById('vehicle').value;
                var account = document.getElementById('account').value;

                if (fromDate || toDate || partner || employee || vehicle || account) {
                    resetBtn.style.display = 'block';
                } else {
                    resetBtn.style.display = 'none';
                }
            }

            function autoSubmitIfDatesSet() {
                var fromDate = fromDateInput.value;
                var toDate = toDateInput.value;
                if (fromDate && toDate) {
                    filterForm.submit();
                }
            }

            fromDateInput.addEventListener('change', function() {
                autoSubmitIfDatesSet();
                checkForFilters();
            });

            toDateInput.addEventListener('change', function() {
                autoSubmitIfDatesSet();
                checkForFilters();
            });

            document.querySelectorAll('#partner, #employee, #vehicle, #account').forEach(function(element) {
                element.addEventListener('change', function() {
                    filterForm.submit();
                    checkForFilters();
                });
            });

            // Initial check to show/hide reset button based on URL parameters
            function initializeFilters() {
                var params = new URLSearchParams(window.location.search);
                if (params.get('from') || params.get('to') || params.get('partner') || params.get('employee') ||
                    params.get('vehicle') || params.get('account')) {
                    resetBtn.style.display = 'block';
                } else {
                    resetBtn.style.display = 'none';
                }
            }

            initializeFilters();
        });
    </script>
@endsection