@extends('layouts.admin')
@section('content')
    @if (session('error'))
        <div class="alert alert-warning">
            {{ session('error') }}
        </div>
    @endif
    <div class="card-body">
        <ul class="nav nav-tabs mb-3 d-flex justify-content-center align-items-center" id="ex-with-icons" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="bookingReport_tab" data-toggle="tab" href="#bookingReport" role="tab"
                    aria-controls="bookingReport" aria-selected="true"><i class="fas fa-people-carry fa-fw me-2"></i>
                    Booking Report</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="transactionReport_tab" data-toggle="tab" href="#transactionReport" role="tab"
                    aria-controls="transactionReport" aria-selected="false"><i class="fas fa-money-bill-alt fa-fw me-2"></i>
                    Transaction Report</a>
            </li>
        </ul>
    </div>

    <div class="tab-content">
        <!-- Booking Report Section -->
        <div class="tab-pane fade show active" id="bookingReport" role="tabpanel" aria-labelledby="bookingReport_tab">
            <div class="d-flex flex-column justify-content-center align-items-center"
                style="min-height: calc(80vh - 100px);">
                <div class="col-md-10">
                    <div class="card shadow-lg border-0 rounded-lg" style="min-height: 300px;">
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                            <h5 class="m-0 fw-bold">Booking Report Management</h5>
                        </div>
                        <div class="card-body bg-light d-flex flex-column justify-content-center align-items-center">
                            <!-- Booking Report Form -->
                            <form action="{{ route('admin.report-management-export') }}" method="POST">
                                @csrf
                                <div class="row g-5">
                                    <!-- Location -->
                                    <div class="col-md-4">
                                        <label for="location_id" class="form-label fw-bold">Select Location</label>
                                        <select class="select2 form-control shadow-sm rounded" id="location_id"
                                            name="location_id">
                                            <option value="all_location"
                                                {{ request('location_id') == 'all_location' ? 'selected' : '' }}>All
                                                Locations
                                            </option>
                                            @forelse ($locations as $location)
                                                <option value="{{ $location->locker_code }}"
                                                    {{ request('location_id') == $location->locker_code ? 'selected' : '' }}>
                                                    {{ $location->location_landmark }}
                                                </option>
                                            @empty
                                                <option value="">No Location Available</option>
                                            @endforelse
                                        </select>
                                    </div>

                                    <!-- Status -->
                                    <div class="col-md-4">
                                        <label for="status" class="form-label fw-bold">Select Status</label>
                                        <select class="select2 form-control shadow-sm rounded" id="status"
                                            name="status">
                                            <option value="all_status"
                                                {{ request('status') == 'all_status' ? 'selected' : '' }}>All
                                                Statuses</option>
                                            @foreach ($statuses as $status)
                                                <option value="{{ $status }}"
                                                    {{ request('status') == $status ? 'selected' : '' }}>
                                                    {{ ucfirst(str_replace('_', ' ', $status)) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Date Range -->
                                    <div class="col-md-4">
                                        <label for="date" class="form-label fw-bold">Date</label>
                                        <input class="form-control" type="text" name="daterange" id="dateRange"
                                            value="12/01/2024 - 12/02/2024">
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <div class="row mt-5">
                                    <div class="col-md-12 text-center">
                                        <button type="submit" class="btn btn-primary px-5 py-2 shadow-sm fw-bold">
                                            <i class="far fa-file-excel" style="font-size: 18px"></i> Export to Excel
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Transaction Report Section -->
        <div class="tab-pane fade" id="transactionReport" role="tabpanel" aria-labelledby="transactionReport_tab">
            <div class="d-flex flex-column justify-content-center align-items-center"
                style="min-height: calc(80vh - 100px);">
                <div class="col-md-10">
                    <div class="card shadow-lg border-0 rounded-lg" style="min-height: 300px;">
                        <!-- Card Header -->
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                            <h5 class="m-0 fw-bold">Transaction Report Management</h5>
                        </div>
                        <!-- Card Body -->
                        <div class="card-body bg-light d-flex flex-column justify-content-center align-items-center">
                            <form action="{{ route('admin.report-management-transaction-export') }}" method="POST">
                                @csrf
                                <div class="row g-5">
                                    <!-- Location -->
                                    <div class="col-md-6">
                                        <label for="location_id" class="form-label fw-bold">Select Location</label>
                                        <select class="select2 form-control shadow-sm rounded" id="location_id"
                                            name="location_id" style="width: 250px">
                                            <option value="all_location"
                                                {{ request('location_id') == 'all_location' ? 'selected' : '' }}>All
                                                Locations
                                            </option>
                                            @forelse ($locations as $location)
                                                <option value="{{ $location->locker_code }}"
                                                    {{ request('location_id') == $location->locker_code ? 'selected' : '' }}>
                                                    {{ $location->location_landmark }}
                                                </option>
                                            @empty
                                                <option value="">No Location Available</option>
                                            @endforelse
                                        </select>
                                    </div>
                                    <!-- Date Range -->
                                    <div class="col-md-6">
                                        <label for="date" class="form-label fw-bold">Date</label>
                                        <input class="form-control" type="text" name="daterange" id="dateRange"
                                            value="12/01/2024 - 12/02/2024">
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <div class="row mt-5">
                                    <div class="col-md-12 text-center">
                                        <button type="submit" class="btn btn-primary px-5 py-2 shadow-sm fw-bold">
                                            <i class="far fa-file-excel" style="font-size: 18px"></i> Export to Excel
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "Select an option",
                allowClear: true,
            });
        });
        $(function() {
            var today = new Date();
            $('input[name="daterange"]').val(today);
            $('input[name="daterange"]').daterangepicker({
                opens: 'left'
            }, function(start, end, label) {
                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end
                    .format('YYYY-MM-DD'));
            });
        });
    </script>
@endsection