@extends('vendor.layouts.master')

@section('title')
    {{ config()->get('app.name') }} | {{ $bladeName }}
@endsection
@section('page_name')
    @if (app()->getLocale() == 'en')
        {{ $bladeName }}
    @else
        {{ $bladeName }}
    @endif
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"> </h3>
                    <div class="">
                        <button class="btn btn-secondary btn-icon text-white addBtn">
                            <span>
                                <i class="fe fe-plus"></i>
                            </span> {{ trns('add_new') }}
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table table-bordered text-nowrap w-100" id="dataTable">
                            <thead>
                                <tr class="fw-bolder text-muted bg-light">
                                    <th class="min-w-25px">#</th>
                                    <th class="min-w-25px">{{ trns('image') }}</th>
                                    <th class="min-w-25px">{{ trns('title') }}</th>
                                    <th class="min-w-25px">{{ trns('description') }}</th>
                                    <th class="min-w-25px">{{ trns('rule') }}</th>

                                    <th class="min-w-25px">{{ trns('price') }}</th>
                                    <th class="min-w-25px">{{ trns('discount') }}</th>
                                    <th class="min-w-25px">{{ trns('night_count') }}</th>
                                    <th class="min-w-25px">{{ trns('Travel_Schedules') }}</th>
                                    <th class="min-w-50px rounded-end">{{ trns('actions') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>



        <!-- Travel_Schedule  Modal -->
        <div class="modal fade" id="TravelSchedule" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteConfirmModalLabel">{{ trns('Travel_Schedule') }}</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">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{{ trns('Travel_Schedule') }}</th>
                                    <th>{{ trns('subscriber_count') }}</th>
                                    <th>{{ trns('night_count') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Travel schedule data will be populated here -->
                                <td></td>
                                <td></td>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ trns('cancel') }}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Travel_Schedule  Modal -->

        <!-- Create Or Edit Modal -->
        <div class="modal fade" id="editOrCreate" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="example-Modal3">{{ trns('object_details') }}</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" id="modal-body">

                    </div>
                </div>
            </div>
        </div>
        <!-- Create Or Edit Modal -->

        <!--Delete MODAL -->
        <div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ trns('delete_suitcase') }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input id="delete_id" name="id" type="hidden">
                        <p>{{ trns('are_you_sure_you_want_to_delete_this_suitcase') }} <span id="title"
                                class="text-danger"></span>?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal" id="dismiss_delete_modal">
                            {{ trns('close') }}
                        </button>
                        <button type="button" class="btn btn-danger" id="delete_btn">{{ trns('delete') }} !</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- MODAL CLOSED -->

    </div>
    @include('admin/layouts/myAjaxHelper')
@endsection
@section('ajaxCalls')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        var columns = [
            {
                data: 'id',
                name: 'id'
            },
            {
                data: 'image',
                name: 'image'
            },
            {
                data: 'title',
                name: 'title'
            },
            {
                data: 'description',
                name: 'description'
            }, {
                data: 'rule',
                name: 'rule'
            },
            {
                data: 'price',
                name: 'price'
            },
            {
                data: 'discount',
                name: 'discount'
            },
            {
                data: 'night_count',
                name: 'night_count'
            },
            {
                data: 'Travel_Schedules',
                name: 'Travel_Schedules'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            },
        ]
        showData('{{ route($route . '.index') }}', columns);

        // Delete Using Ajax
        deleteScript('{{ route($route . '.destroy', ':id') }}');

        showAddModal('{{ route($route . '.create') }}', "{{ trns('add_new') }} {{ $bladeName }}");
        addScript();
        // Add Using Ajax
        showEditModal('{{ route($route . '.edit', ':id') }}', "{{ trns('update') }} {{ $bladeName }}");
        editScript();
    </script>

    <script>
        // for status
        $(document).on('click', '.statusBtn', function() {

            let id = $(this).data('id');

            var val = $(this).is(':checked') ? 1 : 0;

            let ids = [id];




            $.ajax({
                type: 'POST',
                url: '{{ route($route . '.updateColumnSelected') }}',
                data: {
                    "_token": "{{ csrf_token() }}",
                    'ids': ids,
                },
                success: function(data) {
                    if (data.status === 200) {
                        if (val !== 0) {
                            toastr.success('Success', "");
                        } else {
                            toastr.warning('Success', "");
                        }
                    } else {
                        toastr.error('Error', "");
                    }
                },
                error: function() {
                    toastr.error('Error', "{{ trns('something_went_wrong') }}");
                }
            });
        });
    </script>

    <script>
        $(document).on('click', '.TravelScheduleBtn', function() {
            let id = $(this).data('id');

            // إفراغ الجدول مؤقتًا أثناء التحميل
            $('#TravelSchedule tbody').html(
                `<tr><td colspan="3" class="text-center text-muted">جارٍ التحميل...</td></tr>`
            );

            $.ajax({
                type: 'GET',
                url: '{{ route('suitcaseTravelSchedule') }}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'id': id
                },
                success: function(data) {
                    if (data.status === 200) {
                        let rows = '';
                        let trips = data.data;

                        if (trips.length > 0) {
                            trips.forEach(function(trip) {
                                rows += `
                            <tr>
                                <td>${trip.from} </td>
                                <td>${trip.subscriber_count} </td>
                                <td>${trip.night_count} </td>
                            </tr>
                        `;
                            });
                        } else {
                            rows =
                                `<tr><td colspan="3" class="text-center text-muted">لا توجد مواعيد سفر</td></tr>`;
                        }

                        $('#TravelSchedule tbody').html(rows);

                        // فتح المودال بعد تحميل البيانات فقط
                        $('#TravelSchedule').modal('show');
                    } else {
                        toastr.error('حدث خطأ أثناء تحميل المواعيد');
                    }
                },
                error: function() {
                    toastr.error('حدث خطأ في الاتصال بالسيرفر');
                }
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const modal = document.getElementById("editOrCreate");
            if (modal) {
                modal.addEventListener("show.bs.modal", function() {
                    tripCount = 1;
                    usedDates = [];
                    document.getElementById("date-inputs-container").innerHTML = '';
                });
            }
        });
    </script>

    <script>
        $(document).on('click', '.body-span-msg', function() {
            let body = $(this).data('body');
            Swal.fire({
                    html: `<div style="font-size:18px;">${body}</div>`,
                confirmButtonText: '{{ trns('close') }}',
                customClass: {
                    confirmButton: 'btn btn-primary'
                },
                buttonsStyling: false
            });
        });
    </script>

    <script>
        $(document).on('click', '.TravelScheduleBtn', function() {
            let id = $(this).data('id');

            // إفراغ الجدول مؤقتًا أثناء التحميل
            $('#TravelSchedule tbody').html(
                `<tr><td colspan="3" class="text-center text-muted">جارٍ التحميل...</td></tr>`
            );

            $.ajax({
                type: 'GET',
                url: '{{ route('suitcaseTravelSchedule') }}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'id': id
                },
                success: function(data) {
                    if (data.status === 200) {
                        let rows = '';
                        let trips = data.data;

                        if (trips.length > 0) {
                            trips.forEach(function(trip) {
                                rows += `
                            <tr>
                                <td>${trip.from} </td>
                                <td>${trip.subscriber_count} </td>
                                <td>${trip.night_count} </td>
                            </tr>
                        `;
                            });
                        } else {
                            rows =
                                `<tr><td colspan="3" class="text-center text-muted">لا توجد مواعيد سفر</td></tr>`;
                        }

                        $('#TravelSchedule tbody').html(rows);

                        // فتح المودال بعد تحميل البيانات فقط
                        $('#TravelSchedule').modal('show');
                    } else {
                        toastr.error('حدث خطأ أثناء تحميل المواعيد');
                    }
                },
                error: function() {
                    toastr.error('حدث خطأ في الاتصال بالسيرفر');
                }
            });
        });
    </script>
@endsection