@include('admin.includes.header')
@include('admin.includes.sidebar')

<!--! [Start] Main Content !-->
    <!--! ================================================================ !-->
    <main class="nxl-container">
        <div class="nxl-content">
            <!-- [ page-header ] start -->
            <div class="page-header">
                <div class="page-header-left d-flex align-items-center">
                    <div class="page-header-title">
                        <h5 class="m-b-10">Bookings List</h5>
                    </div>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('admin/dashboard')}}">Home</a></li>
                        <li class="breadcrumb-item">Tables</li>
                    </ul>
                </div>
                <div class="page-header-right ms-auto">
                    <div class="page-header-right-items">
                        <div class="d-flex d-md-none">
                            <a href="javascript:void(0)" class="page-header-right-close-toggle">
                                <i class="feather-arrow-left me-2"></i>
                                <span>Back</span>
                            </a>
                        </div>
                        <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                            <div class="dropdown filter-dropdown">
                                {{-- <a class="btn btn-md btn-light-brand" data-bs-toggle="dropdown" data-bs-offset="0, 10" data-bs-auto-close="outside">
                                    <i class="feather-filter me-2"></i>
                                    <span>Filter</span>
                                </a> --}}
                                <div class="dropdown-menu dropdown-menu-end">
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Role" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Role">Role</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Team" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Team">Team</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Email" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Email">Email</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Member" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Member">Member</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-item">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="Recommendation" checked="checked">
                                            <label class="custom-control-label c-pointer" for="Recommendation">Recommendation</label>
                                        </div>
                                    </div>
                                    <div class="dropdown-divider"></div>
                                    <a href="javascript:void(0);" class="dropdown-item">
                                        <i class="feather-plus me-3"></i>
                                        <span>Create New</span>
                                    </a>
                                    <a href="javascript:void(0);" class="dropdown-item">
                                        <i class="feather-filter me-3"></i>
                                        <span>Manage Filter</span>
                                    </a>
                                </div>
                            </div>
                            {{-- <a href="{{url('admin/banners')}}" class="btn btn-md btn-dark">
                                <i class="feather-plus me-2"></i>
                                <span>Add Banner</span>
                            </a> --}}
                        </div>
                    </div>
                    <div class="d-md-none d-flex align-items-center">
                        <a href="javascript:void(0)" class="page-header-right-open-toggle">
                            <i class="feather-align-right fs-20"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- [ page-header ] end -->
            <!-- [ Main Content ] start -->
            <div class="main-content">
                <div class="row">
                    <!-- [Leads] start -->
                    <div class="col-xxl-12">
                        <div class="card stretch stretch-full">
                            <div class="card-header">
                                <h5 class="card-title">Bookings</h5>
                                {{-- <div class="card-header-action">
                                    <div class="card-header-btn">
                                        <div data-bs-toggle="tooltip" title="Delete">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-danger" data-bs-toggle="remove"> </a>
                                        </div>
                                        <div data-bs-toggle="tooltip" title="Refresh">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-warning" data-bs-toggle="refresh"> </a>
                                        </div>
                                        <div data-bs-toggle="tooltip" title="Maximize/Minimize">
                                            <a href="javascript:void(0);" class="avatar-text avatar-xs bg-success" data-bs-toggle="expand"> </a>
                                        </div>
                                    </div>
                                    <div class="dropdown">
                                        <a href="javascript:void(0);" class="avatar-text avatar-sm" data-bs-toggle="dropdown" data-bs-offset="25, 25">
                                            <div data-bs-toggle="tooltip" title="Options">
                                                <i class="feather-more-vertical"></i>
                                            </div>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-at-sign"></i>New</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-calendar"></i>Event</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-bell"></i>Snoozed</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-trash-2"></i>Deleted</a>
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-settings"></i>Settings</a>
                                            <a href="javascript:void(0);" class="dropdown-item"><i class="feather-life-buoy"></i>Tips & Tricks</a>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                            <div class="card-body custom-card-action p-0">
                                <div class="table-responsive">
                                    @include('admin.components.msg')
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr class="border-b">
                                                <th>Name / ID</th>
                                                <th>Credentials</th>
                                                <th>Status</th>
                                                <th>Uploaded on</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <form method="GET">
                                                    <td><input value="{{ request('data_unique') }}" type="text" name="data_unique" placeholder="Name/ID" class="form-control"></td>
                                                    <td><input type="text" name="data_cred" value="{{ request('data_cred') }}" placeholder="Email/Number" class="form-control"></td>
                                                    <td>
                                                        <select name="data_status" class="form-control" >
                                                            <option value="" {{ request('data_status') == '' ? 'selected' : '' }}>All</option>
                                                            <option value="0" {{ request('data_status') == '0' ? 'selected' : '' }}>New</option>
                                                            <option value="1" {{ request('data_status') == '1' ? 'selected' : '' }}>Working</option>
                                                            <option value="2" {{ request('data_status') == '2' ? 'selected' : '' }}>Contacted</option>
                                                            <option value="3" {{ request('data_status') == '3' ? 'selected' : '' }}>Declined</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <input type="text" name="date_range" id="dateRange" placeholder="Date range" value="{{ request('date_range') }}" class="form-control" autocomplete="off" />
                                                    </td>
                                                    <td>
                                                        <button type="submit" class="btn btn-sm btn-dark">Filter</button>
                                                        <button type="button" onclick="window.location.href='{{ url('admin/bookingsList') }}'" class="btn my-1 btn-sm btn-danger">Clear</button>
                                                    </td>
                                                </form>
                                            </tr>
                                            @foreach($bookings as $key=>$booking)
                                            <tr>
                                                <td>
                                                    <a href="javascript:void(0);">
                                                        <span class="d-block">{{$booking->name}} <span class="text-muted text-xs">/ #{{$booking->id}}</span></span>
                                                        {{-- <span class="fs-12 d-block fw-normal text-muted">{{$booking->message ? Str::limit($contact->message, 20) : ''}}</span> --}}
                                                    </a>
                                                </td>
                                                <td>
                                                    <a href="javascript:void(0);">
                                                        <span class="d-block fs-12"><a href="mailto:{{$booking->email}}" class="fs-12 fw-normal">{{$booking->email}} </a>
                                                        </a></span>
                                                        <span class="d-block fs-12"><a href="tel:{{$booking->number}}" class="fs-12 fw-normal">{{$booking->number}}</a>
                                                        </a></span>
                                                    </a>
                                                </td>
                                                <td>
                                                    <style>
                                                        .select2-selection.select2-selection--single{
                                                            padding: 0px !important;
                                                        }
                                                        .select2-container--default .select2-selection--single .select2-selection__rendered {
                                                            line-height: 32px !important;
                                                        }
                                                        .select2-container--default .select2-selection--single {
                                                            border: 1px solid #e5e7eb;
                                                        }
                                                    </style>
                                                    <select data-id="{{$booking->id}}"  class="select2 status-select2">
                                                        <option value="0" {{ isset($booking->status) && $booking->status == 0 ? 'selected' : '' }} data-bg="bg-info">New</option>
                                                        <option value="1" {{ isset($booking->status) && $booking->status == 1 ? 'selected' : '' }} data-bg="bg-warning">Working</option>
                                                        <option value="2" {{ isset($booking->status) && $booking->status == 2 ? 'selected' : '' }} data-bg="bg-indigo">Contacted</option>
                                                        <option value="3" {{ isset($booking->status) && $booking->status == 3 ? 'selected' : '' }} data-bg="bg-danger">Declined</option>
                                                        <option value="4" {{ isset($booking->status) && $booking->status == 4 ? 'selected' : '' }} data-bg="bg-success">Sold</option>
                                                    </select>
                                                    
                                                </td>
                                                <td>{{date("F j, Y", strtotime($booking->created_at))}}</td>
                                                <td class="">
                                                    <a href="{{url('admin/bookings?id='.$booking->id)}}"><i class="bi bi-eye mx-1 text-dark"></i></a>
                                                    <a href="{{url('admin/bookingsDelete?id='.$booking->id)}}"><i class="bi bi-trash3 text-danger mx-1"></i></a>
                                                </td>
                                                {{-- <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td> --}}
                                            </tr>
                                            @endforeach
                                            {{-- <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="avatar-image">
                                                            <img src="assets/images/avatar/3.png" alt="" class="img-fluid">
                                                        </div>
                                                        <a href="javascript:void(0);">
                                                            <span class="d-block">Holmes Cherryman</span>
                                                            <span class="fs-12 d-block fw-normal text-muted">golms.chan@gmail.com</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge bg-gray-200 text-dark">New</span>
                                                </td>
                                                <td>11/06/2023 10:53</td>
                                                <td>
                                                    <span class="badge bg-soft-dark text-dark">In Progress </span>
                                                </td>
                                                <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="avatar-image">
                                                            <img src="assets/images/avatar/4.png" alt="" class="img-fluid">
                                                        </div>
                                                        <a href="javascript:void(0);">
                                                            <span class="d-block">Malanie Hanvey</span>
                                                            <span class="fs-12 d-block fw-normal text-muted">lanie.nveyn@gmail.com</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge bg-gray-200 text-dark">Sent</span>
                                                </td>
                                                <td>11/06/2023 10:53</td>
                                                <td>
                                                    <span class="badge bg-soft-success text-success">Completed</span>
                                                </td>
                                                <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="avatar-image">
                                                            <img src="assets/images/avatar/5.png" alt="" class="img-fluid">
                                                        </div>
                                                        <a href="javascript:void(0);">
                                                            <span class="d-block">Kenneth Hune</span>
                                                            <span class="fs-12 d-block fw-normal text-muted">nneth.une@gmail.com</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge bg-gray-200 text-dark">Returning</span>
                                                </td>
                                                <td>11/06/2023 10:53</td>
                                                <td>
                                                    <span class="badge bg-soft-warning text-warning">Not Interested</span>
                                                </td>
                                                <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="avatar-image">
                                                            <img src="assets/images/avatar/6.png" alt="" class="img-fluid">
                                                        </div>
                                                        <a href="javascript:void(0);">
                                                            <span class="d-block">Valentine Maton</span>
                                                            <span class="fs-12 d-block fw-normal text-muted">alenine.aton@gmail.com</span>
                                                        </a>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge bg-gray-200 text-dark">Sent</span>
                                                </td>
                                                <td>11/06/2023 10:53</td>
                                                <td>
                                                    <span class="badge bg-soft-success text-success">Completed</span>
                                                </td>
                                                <td class="text-end">
                                                    <a href="javascript:void(0);"><i class="feather-more-vertical"></i></a>
                                                </td>
                                            </tr> --}}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-footer">
                                {{-- <ul class="list-unstyled d-flex align-items-center gap-2 mb-0 pagination-common-style"> --}}
                                    
                                    {{$bookings->appends(request()->all())->links('pagination::bootstrap-5')}}
                                    
                                    {{-- <li>
                                        <a href="javascript:void(0);"><i class="bi bi-arrow-left"></i></a>
                                    </li>
                                    <li><a href="javascript:void(0);" class="active">1</a></li>
                                    <li><a href="javascript:void(0);">2</a></li>
                                    <li>
                                        <a href="javascript:void(0);"><i class="bi bi-dot"></i></a>
                                    </li>
                                    <li><a href="javascript:void(0);">8</a></li>
                                    <li><a href="javascript:void(0);">9</a></li>
                                    <li>
                                        <a href="javascript:void(0);"><i class="bi bi-arrow-right"></i></a>
                                    </li> --}}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ Main Content ] end -->
        </div>
        <!-- [ Footer ] start -->
        <footer class="footer">
            <p class="fs-11 text-muted fw-medium text-uppercase mb-0 copyright">
                <span>Copyright ©</span>
                <script>
                    document.write(new Date().getFullYear());
                </script>
            </p>
            <div class="d-flex align-items-center gap-4">
                {{-- <a href="javascript:void(0);" class="fs-11 fw-semibold text-uppercase">Help</a>
                <a href="javascript:void(0);" class="fs-11 fw-semibold text-uppercase">Terms</a>
                <a href="javascript:void(0);" class="fs-11 fw-semibold text-uppercase">Privacy</a> --}}
            </div>
        </footer>
        <!-- [ Footer ] end -->
    </main>
    <!--! ================================================================ !-->
    <!--! [End] Main Content !-->
    <!--! ================================================================ !-->
@include('admin.includes.footer')

<script>
    $(document).ready(function() {
        $('.status-select2').on('change', function() {
            var id= $(this).attr('data-id');
            var status= $(this).val();
            var row =$(this).closest('tr');
            
            $.ajax({
                url: "{{ url('admin/bookingsStatusUpdate') }}",
                method: 'get',
                data: {
                    id: id,
                    status: status,
                },
                success: function(response) {
                    console.log(response);
                    var data_bg = $('option[value="' + response.status + '"]').attr('data-bg');
                    console.log(data_bg);
                    row.addClass(data_bg+' text-white');
                    setTimeout(function() {
                        row.removeClass(data_bg+' text-white');
                    }, 1500);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    });
</script>

<script>
    $(document).ready(function() {
        function formatStatus(option) {
            if (!option.id) return option.text; // Return text if no value (for placeholder)

            var bgClass = $(option.element).data('bg'); // Get background class
            
            // Create a colored circle with text
            var $status = $(
                '<div class="d-flex align-items-center">' +
                    '<span class="wd-7 ht-7 rounded-circle me-2 ' + bgClass + '" style="width: 12px; height: 12px; display: inline-block;"></span>' +
                    '<span>' + option.text + '</span>' +
                '</div>'
            );

            return $status;
        }

        $('.status-select2').select2({
            templateResult: formatStatus,  // Customize dropdown items
            templateSelection: formatStatus,  // Customize selected item
            minimumResultsForSearch: -1,  // Disable search bar (optional)
            width: '100%'  // Ensure it fits container
        });
    });
    $(function() {
        $('#dateRange').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            autoUpdateInput: false,
        });

        $('#dateRange').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
        });

        $('#dateRange').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
</script>