@extends('admin.master')

@section('title',@trans('booking'))

@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@trans('Dashboard') </a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.bookings.index') }}">@trans('booking')
                        </a>
                    </li>
                    <li class="breadcrumb-item active">@trans('All bookings') </li>
                </ol>
            </div>
            <h4 class="page-title">@trans('bookings') </h4>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">

                <button type="button" class="btn btn-outline-info " data-bs-toggle="modal"
                    data-bs-target="#staticBackdrop">
                    <i class="fa-solid fa-filter"></i>
                </button>
                <a href="{{ route('admin.bookings.index') }}" class="btn btn-outline-primary"><i
                        class="fa-solid fa-rotate"></i></a>
                <a href="{{ route('admin.bookings.export_excel') }}" class="btn btn-outline-secondary"><i
                        class="fa-regular fa-file-excel"></i> @trans('Excel')</a>
            </div>
            @include('admin.pages.booking._model_search')
            <div class="card-body">
                <form id="update-pages" action="{{ route('admin.bookings.actions') }}" method="post">
                    @csrf
                </form>
                <table class="table table-striped dt-responsive nowrap w-100">
                    <thead>
                        <tr>
                        <tr class="bluck-actions" style="display: none" scope="row">
                            <td colspan="20">
                                <div class="col-md-12 mt-0 mb-0 text-center">
                                    <button form="update-pages" class="btn btn-outline-danger btn-sm" type="submit"
                                        name="actions" value="delete">
                                        <i class="ri-delete-bin-line"></i> @trans('Delete All')
                                    </button>
                                    <button class="btn btn-outline-info btn-sm" type="button" data-bs-toggle="modal"
                                        data-bs-target="#mailMultiMessage">
                                        <i class="fa-solid fa-envelope"></i> @trans('Send Mail')
                                    </button>
                                    <button class="btn btn-outline-info btn-sm" type="button" data-bs-toggle="modal"
                                        data-bs-target="#smsMultiMessage">
                                        <i class="fa-regular fa-message"></i> @trans('Send Sms')
                                    </button>
                                    @include('admin.pages.booking._model_sms_multi_message')
                                    @include('admin.pages.booking._model_mail_multi_message')
                                </div>
                            </td>
                        </tr>
                        <th style="width: 1px">
                            <input form="update-pages" class="checkbox-check flat cursor-pointer" type="checkbox"
                                name="check-all" id="check-all" title="check-all">
                        </th>
                        <th>#</th>
                        <th>@trans('Name') </th>
                        <th>@trans('Email') </th>
                        <th>@trans('Course')</th>
                        <th>@trans('is_reached') </th>
                        <th>@trans('Settings') </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($booking as $item)
                        <tr>
                            <td>
                                <input form="update-pages" class="checkbox-check" type="checkbox"
                                    name="record[{{ $item->id }}]" value="{{ $item->id }}">
                            </td>
                            <th scope="row">{{ $loop->index + 1 }}</th>
                            <td>{{ $item->user->first_name }} {{ $item->user->last_name }}</td>
                            <td>{{ @$item->user->email }}</td>
                            <td>{{ @$item->course->translations->first()->title }}</td>
                            <td>
                                @if ($item->is_reached == 1)
                                <span class="badge badge-outline-success">@trans('reached') </span>
                                @else
                                <span class="badge badge-outline-danger">@trans('Not reached') </span>
                                @endif
                            </td>
                            <td>
                                <div class="dropdown">
                                    <button class="btn btn-outline-primary dropdown-toggle" type="button"
                                        id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                        @trans('Settings')
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <li>
                                            <a class="dropdown-item  text-success text-center" href="#"
                                                data-bs-toggle="modal" data-bs-target="#exampleModal{{ $item->id }}">
                                                @trans('Send SMS')
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item  text-primary text-center" href="#"
                                                data-bs-toggle="modal" data-bs-target="#emailModal{{ $item->id }}">
                                                @trans('Send Mail')
                                            </a>
                                        </li>
                                        @if ($item->is_reached == 1)
                                        <li>
                                            <a class="dropdown-item text-center text-danger"
                                                href="{{ route('admin.bookings.is_reached', $item->id) }}">
                                                @trans('Not Reached') </a>
                                        </li>
                                        @else
                                        <li>
                                            <a class="dropdown-item text-primary  text-center"
                                                href="{{ route('admin.bookings.is_reached', $item->id) }}">
                                                @trans('Reached') </a>
                                        </li>
                                        @endif
                                        <li>
                                            <button class="dropdown-item text-danger  text-center" type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#danger-header-modal{{ $item->id }}">
                                                @trans('Delete')
                                            </button>
                                        </li>

                                    </ul>
                                </div>
                                @include('admin.pages.booking._model_sms_message', ['id' => $item->id])
                                @include('admin.pages.booking._model_email_message', ['id' => $item->id])
                                @include('admin.pages.booking._model_delete', ['id' => $item->id])
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center">@trans('No customer services found') </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div> <!-- end card body-->
            <div class="card-footer">
                {{ $booking->links('vendor.pagination.bootstrap-5') }}
            </div>
        </div> <!-- end card -->
    </div><!-- end col-->
</div>
@endsection
@section('script')
<script>
    $(document).ready(function () {
            let tableId = 'your_unique_table_id'; // استبدل هذا المعرف بشيء فريد لكل جدول
            let storageKey = 'selectedRecords_' + tableId;

            // استرجاع البيانات المخزنة في localStorage
            let selectedRecords = JSON.parse(localStorage.getItem(storageKey)) || [];

            // عند فتح المودال، نقوم بتحديث الـ hidden input بقيمة الـ IDs المخزنة
            $('#smsMultiMessage').on('show.bs.modal', function () {
                // تخزين الـ selectedRecords في الـ hidden input
                let records = selectedRecords.reduce((acc, id) => {
                    // تأكد من عدم تضمين أي قيمة إضافية غير الـ IDs
                    if (id !== "on") {
                        acc[id] = id; // تحويل الـ IDs إلى الشكل المطلوب: { 57: "57", 61: "61", ... }
                    }
                    return acc;
                }, {});

                // وضع الكائن JSON في الـ hidden input
                $('#modal-records').val(JSON.stringify(records)); // تحويل الكائن إلى JSON ووضعه في الـ hidden input
            });

            $('#mailMultiMessage').on('show.bs.modal', function () {
                // تخزين الـ selectedRecords في الـ hidden input
                let records = selectedRecords.reduce((acc, id) => {
                    // تأكد من عدم تضمين أي قيمة إضافية غير الـ IDs
                    if (id !== "on") {
                        acc[id] = id; // تحويل الـ IDs إلى الشكل المطلوب: { 57: "57", 61: "61", ... }
                    }
                    return acc;
                }, {});

                // وضع الكائن JSON في الـ hidden input
                $('#modal-records_mail').val(JSON.stringify(records)); // تحويل الكائن إلى JSON ووضعه في الـ hidden input
            });

            // عند تحديد أو إلغاء تحديد checkbox
            $('#check-all').click(function () {
                let isChecked = $(this).is(':checked');
                $("input.checkbox-check").prop("checked", isChecked);

                $("input.checkbox-check").each(function () {
                    updateSelectedRecords($(this).val(), isChecked);
                });

                toggleBulkActions();
            });

            $('.checkbox-check').on('click', function () {
                let isChecked = $(this).is(':checked');
                updateSelectedRecords($(this).val(), isChecked);

                toggleBulkActions();
            });

            // تحديث الـ selectedRecords وتخزينها في localStorage
            function updateSelectedRecords(value, isChecked) {
                if (isChecked) {
                    if (!selectedRecords.includes(value)) {
                        selectedRecords.push(value);
                    }
                } else {
                    selectedRecords = selectedRecords.filter(item => item !== value);
                }

                // حفظ البيانات في localStorage بعد تعديلها
                localStorage.setItem(storageKey, JSON.stringify(selectedRecords));
            }

            // إظهار أو إخفاء خيارات الحزمة بناءً على الـ checkboxes المحددة
            function toggleBulkActions() {
                let checked = $('.checkbox-check:checked').length > 0;
                if (checked) {
                    $('.bluck-actions').show();
                } else {
                    $('.bluck-actions').hide();
                }
            }
        });

</script>
@endsection