@extends('admin.layout.main')
@section('title',$title)

@section('css')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    .dataTables_filter {
        margin-left: 10px;
        float: right;
    }

    .datatable-container {
        padding: 0 !important;
        font-size: 13px;
    }

    .dataTables_info {
        float: left;
    }

    tr:nth-of-type(even) {
        color: #212529;
    }

    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info {
        color: #000;
    }

    .table-bordered tr th {
        background-color: #fff;
        color: #212529;
    }

    .table-bordered td,
    .table-bordered th {
        border: 1px solid #dee2e6;
    }

    .table-bordered {
        border: 1px solid #dee2e6;
    }

    .booking-status {
        font-weight: bold;
    }

    .booking-status.confirmed {
        color: #4CAF50;
    }

    .booking-status.pending {
        color: #1679AB;
    }

    .booking-status.cancelled,
    .booking-status.failed {
        color: #D71920;
    }

    .booking-status span {
        font-weight: normal !important;
    }

    .table> :not(caption)>*>* {
        padding: 0.4rem 0.7rem !important;
    }

    .refund-booking {
        font-weight: bold;
        text-decoration: underline !important;
    }

    .swal2-input:focus {
        color: #FFF !important;
    }

    .dark-mode .daterangepicker .calendar-table td,
    .dark-mode .daterangepicker .calendar-table th {
        color: white !important;
        background-color: black;
    }

    .table-condensed tbody tr .active {
        background-color: #0088CC !important;
        color: #fff !important;
        border: 1px solid #006699;
        border-radius: 4px;
    }
</style>
@endsection
@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mt-2">
            <div class="col-sm-12 d-flex breadcrumb-style">
                <h1 class="m-0">{{ $heading }}</h1>
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@lang('customers.dashboard') </a></li>
                    <li class="breadcrumb-item active">Booking </li>
                </ol>
                <div class="breadcrumb-btn">

                    <button class="btn btn-primary" id="show-hide-filters">
                        Show Filters
                    </button>&nbsp;
                    <button type="button" class="btn btn-success" id="exportBookings">Export Excel</button>
                    <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exportModalLabel">Export Bookings</h5>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form id="exportForm">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Export Type <span class="required text-danger">*</span></label>
                                                    <select class="form-control" name="export_type" required id="export_type">
                                                        <option value="">Select Export Type</option>
                                                        <option value="all">All Bookings</option>
                                                        <option value="today">Today's Bookings</option>
                                                        <option value="week">This Week's Bookings</option>
                                                        <option value="month">This Month's Bookings</option>
                                                        <option value="year">This Year's Bookings</option>

                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;" class="datepicker is-valids">Booking Date</label>
                                                    <input type="date" class="form-control" name="booking_date">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Supplier</label>
                                                    <select class="form-control" name="supplier_id">
                                                        <option value="">Select Supplier</option>
                                                        @foreach($supplierDataList as $supplier)
                                                        <option value="{{ $supplier['id'] }}">{{ $supplier['name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Service Type</label>
                                                    <select class="form-control" name="service_id">
                                                        <option value="">Select Service</option>
                                                        @foreach($getServiceType as $service)
                                                        <option value="{{ $service['id'] }}">{{ $service['name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Booking ID</label>
                                                    <input type="text" class="form-control" name="booking_id">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Ticket Number</label>
                                                    <input type="text" class="form-control" name="ticket_numbers">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">System Ref ID</label>
                                                    <input type="text" class="form-control" name="system_ref_id">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Price Range From</label>
                                                    <input type="number" class="form-control" name="price_from">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Price Range To</label>
                                                    <input type="number" class="form-control" name="price_to">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">PNR Number</label>
                                                    <input type="text" class="form-control" name="pnr_number">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Customer Name</label>
                                                    <input type="text" class="form-control" name="customer_name">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Booking Status</label>
                                                    <select class="form-control" data-live-search="true" id="export_booking_status" name="booking_status" class="order-td-input select-text height_drp is-valid">
                                                        <option value="" selected disabled>Select Status</option>
                                                        <option value="pending">Pending</option>
                                                        <option value="processing">Processing</option>
                                                        <option value="confirmed">Confirmed</option>
                                                        <option value="supplier_failed">Failed (Supplier failed)</option>
                                                        <option value="payment_failed">Failed (Supplier success and Payment failed)</option>
                                                        {{-- <option value="cancelled">Cancelled</option> --}}
                                                        <option value="cancelled not refunded">Cancelled not refunded</option>
                                                        <option value="cancelled and refunded">Cancelled and refunded</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label style="color: black !important;">Agency</label>
                                                    <select class="form-control" name="agency_id">
                                                        <option value="">Select Agency</option>
                                                        @foreach($getAgency as $agency)
                                                        <option value="{{ $agency['id'] }}">{{ $agency['name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary" id="submitExport">Export</button>
                                </div>
                            </div>
                        </div>
                    </div>



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

@if (session('success'))
<div class="m-3 alert alert-success" role="alert">