@extends('Admin.Layouts.Dashboard')

@section('styles')
    <link href="{{asset('css/daterangepicker.css')}}" rel="stylesheet" type="text/css"/>

    <style>
        #reports-results li a:hover {
            cursor: pointer;
            opacity: .75;
        }

        #data-table_length,
        #data-table_filter {
            display: none;
        }

        .daterangepicker {
            z-index: 99999999
        }
    </style>
@endsection

@section('content')
    <!-- Add & Edit Booking -->
    <div class="modal fade" id="add-edit-booking" tabindex="-1" aria-labelledby="add-edit-booking-label" aria-hidden="true">
        <div class="modal-dialog"></div>
    </div>

    <!-- Cancel Booking -->
    <div class="modal fade" id="cancel-booking" tabindex="-1" aria-labelledby="cancel-booking-label" aria-hidden="true">
        <div class="modal-dialog">
            @include('Admin.Bookings.Cancel')
        </div>
    </div>

    <!-- Booking Details -->
    <div class="modal fade" id="booking-details" tabindex="-1" aria-labelledby="booking-details-label" aria-hidden="true">
        <div class="modal-dialog"></div>
    </div>

    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"><a href="{{dashboard_route()}}">الرئيسية /</a></h4>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">{{$page_title}}</span>
            </div>
        </div>

        <div class="d-flex my-xl-auto right-content">
            <button id="add-edit-booking-btn" data-bs-target="#add-edit-booking" data-bs-toggle="modal" class="btn btn-danger mb-1 me-1"><i class="mdi mdi-plus"></i> أضف حجز جديد </button>
        </div>
    </div>
    <!-- breadcrumb -->

    @include('Admin.Bookings.Statics')

    <!-- Row -->
    <div class="row row-sm">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{$page_title}}</h3>
                </div>

                <div class="card-body">

                    <div class="table-responsive">
                        <table id="data-table" class="border-top-0 table text-left table-hover text-nowrap key-buttons data-table">
                            <thead>

                                <tr>
                                    <th scope="col">رقم الحجز</th>
                                    <th scope="col">القابل للتسييل</th>
                                </tr>

                            </thead>

                            <tbody>
                            

                            @foreach($bookings as $booking)