@extends('Admin/layout/master')
@section('title', 'Dashboard')
@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="card">
                <h5 class="card-header">Dashboard
                </h5>
                @if (Session::has('msg'))
                    <div class="alert alert-primary" role="alert">
                        {{ Session::get('msg') }}
                    </div>
                @endif
                <div style="background-color: #FFFF99">
                    <form action="" method="get">
                        <div class="input-group mb-4">
                            <h6 style="margin-left: 20px;" class="mt-2">View By</h6>
                            <input type="radio" id="form1" id="date_pic" value="weak"
                                style="margin-left: 10px;"class="mb-1" name="weak" />
                            <h6 style="margin-left: 10px; margin-top:10px;">This Weak</h6>
                            <div class="form-outline">
                                <input type="radio" id="form1" style="margin-left: 10px; margin-top:12px;"
                                    value="date" name="weak" /> <span style="margin-bottom:5px;">Date</span>
                            </div>
                            <div class="form-outline" id="serch">
                                <input type="date" id="form1" style="margin-left: 10px;" name="search"
                                    class="form-control" value="{{ request('search') }}" />
                            </div>
                            <button class="btn btn-primary btn-sm mb-1" style="margin-left:2px;">Search</button>
                        </div>
                    </form>

                    <div class="row" class="mb-5">
                        <div class="col-sm-2">
                            <h6 for="" style="margin-left:23px;">Plese Select Status</h6>
                        </div>
                        <div class="col-sm-3 mb-3" style="margin-left: 10px;">
                            <select name="" class="form-control" id="selct">
                                <option value="">--Select--</option>
                                <option value="1">Car Picked</option>
                                <option value="2">Car Returned</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <img src="{{ asset('Admin/img/avatars/grey.jpg') }}" style="margin-left: 20px;">
                        <span style="margin-top: 5px;font-weight: bold">Booking Cancelled</span>
                        <img src="{{ asset('Admin/img/avatars/orange.jpg') }}" style="margin-left:5px;">
                        <span style="color:#FF6600 ;font-weight: bold">Car Picked</span>
                        <img src="{{ asset('Admin/img/avatars/brown.jpg') }}" style="margin-left:5px;">
                        <span style="color: #993300; font-weight: bold">Car Returned</span>
                        <img src="{{ asset('Admin/img/avatars/red-key.jpg') }}" style="margin-left:5px;">
                        <span style="color: black;font-weight:bold;">Not Paid</span>
                        <img src="{{ asset('Admin/img/avatars/blu-key.jpg') }}" style="margin-left:5px;">
                        <span style="color: black;font-weight:bold;">Paid</span>
                        <img src="{{ asset('Admin/img/avatars/green-key1.jpg') }}" style="margin-left:5px;">
                        <span style="color: black;font-weight:bold;">Paid & Approved</span>
                        <img src="{{ asset('Admin/img/avatars/blue_bg_key.png') }}" style="margin-left:5px;">
                        <span style="color: black;font-weight:bold;">Entry</span>
                        <img src="{{ asset('Admin/img/avatars/white_bg_key.png') }}" style="margin-left:5px;">
                        <span style="color: black;font-weight:bold;">Exit</span>
                    </div>
                </div>
                <hr>
                <div class="table-responsive text-nowrap">
                    <table class="table">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="select_all"></th>
                                <th>Refrence No</th>
                                <th>Name</th>
                                <th>Car Number</th>
                                <th>Car Make</th>
                                <th>Car Model</th>
                                <th>Parking Start</th>
                                <th>Parking End</th>
                                <th>Terminal</th>
                                <th> Car Washed</th>
                                <th>Info</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">

                            @foreach ($bookings as $index => $booking)
                                <tr style="color:{{ $booking->status == 1 ? 'red' : 'green' }}">
                                    <td><input type="checkbox" id="status[]" name="ids" value="{{ $booking->id }}"
                                            class="select_id"></td>
                                    <td>{{ $booking->refrence_no }}</td>
                                    {{-- <td>{{ $booking->user->name }}</td> --}}
                                    <td>

                                        {{ $booking->carDetail->car_registration?? "Null" }}

                                    </td>
                                    <td>{{ $booking->carDetail->car_make ??"Null" }}</td>
                                    <td> {{ $booking->carDetail->car_model ??"Null" }}</td>
                                    <td> {{ $booking->start_date }}{{ $booking->start_time }}</td>
                                    <td>{{ $booking->end_date }} {{ $booking->end_time }}</td>
                                    <td>{{ $booking->airport->name ??"Null" }}</td>
                                    <td></td>
                                    <td><a href="{{ route('contact.info', $booking->id) }}"
                                            style="background-color:rgb(255, 102, 0); color:black;border:none"
                                            class="btn btn-sm" target="_blank">View</button></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            // Initially hide the input field on page load
            // $('#serch').hide();
            // Listen for changes in the radio button selection
            $('input[type=radio]').change(function() {
                if (this.value === 'date') {
                    $('#serch').show(); // Show the input field
                } else if (this.value === 'weak') {
                    $('#serch').hide(); // Hide the input field
                }
            });
        });
        // $(document).on('change', '#selct', function() {
        //     let selct = $(this).val();
        //     let ids = $('#status').val();
        //     let data = {
        //         'status': selct,
        //         'booking_id': ids,
        //     }
        //     $.ajax({
        //         type: 'get',
        //         url: "change-status",
        //         data: data,
        //         success: function() {

        //         },

        //     });

        // });

        $(document).on('change', '.select_all', function() {
            $('.select_id').prop('checked', $('.select_all').prop('checked'))
        });
        $(document).on('change', '#selct', function() {
            let all_ids = [];
            $('input:checkbox[name=ids]:checked').each(function() {
                all_ids.push($(this).val());
            });
            if (all_ids < 1) {
                alert('Please Select the bookings for which you want to update status');
            } else {
                let status = $("#selct").val()
                $.ajax({
                    type: 'get',
                    url: "change-status",
                    data: {
                        'status': status,
                        ids: all_ids,
                    },
                    success: function(response) {},
                });
                window.location.reload();
            }

        });
    </script>
@endsection