@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage-restaurant';
    @endphp



    <!--  END LOADER -->
    <!--  BEGIN MAIN CONTAINER  -->

    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="card-title">Manage Restaurant</h6>
                            {{-- voucher to restaurant updated --}}
                        </div>
                        <div class="col-md-8">

                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn" style="overflow: auto;">
                        <form action="{{ route('export-selected-restaurant') }}" method="POST" id="restaurant-form">
                            @csrf
                            <input type="hidden" name="selected_id" id="ids" disabled>
                            <input type="hidden" name="all_id" id="all_id" value="all" disabled>
                            <table id="zero-config" class="table dt-table-hover" style="width:100%">
                                <thead class="text-center">
                                    <tr>
                                        <th class="w-10px pe-2">
                                            <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                                <input class="form-check-input" type="checkbox" id="select-all-ids" />
                                            </div>
                                        </th>
                                        <th class="text-center">Sr no</th>
                                        <th class="text-center">Restaurant Name</th>
                                        <th class="text-center">Restaurant ID</th>
                                        <th class="text-center">Status</th>
                                        <th class="no-content">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    @php($count = 0)
                                    @foreach ($restaurant as $restaurants)
                                        @php($count++)
                                        <tr>
                                            <td>
                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                    <input class="form-check-input" type="checkbox" name="restaurant_ids"
                                                        value="{{ $restaurants->id }}" />
                                                </div>
                                            </td>
                                            <td class="text-center">{{ $count }}</td>
                                            <td class="text-center">{{ $restaurants->name }}</td>
                                            <td class="text-center">{{ $restaurants->restaurant_id }}</td>
                                            <td class="text-center">
                                                <form>
                                                    <div class="switch-btn" id="status-change">
                                                        <input type="checkbox" id="switch18-{{ $restaurants->id }}"
                                                            switch="bool" data-id="{{ $restaurants->id }}" name="status"
                                                            value="1" {{ $restaurants->is_active ? 'checked' : '' }} />
                                                        <label for="switch18-{{ $restaurants->id }}" data-on-label="Active"
                                                            data-off-label="Inactive"></label>
                                                    </div>
                                                </form>
                                            </td>
                                            <td>
                                                <div class="dropout">
                                                    <button class="more">
                                                        <span></span>
                                                        <span></span>
                                                        <span></span>
                                                    </button>
                                                    <ul>
                                                        <li>
                                                            <a href={{ route('manage_view_restaurant', $restaurants->id) }}>
                                                                <img src="{{ asset('public/assets/img/view.svg') }}" />
                                                                <span>View</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="{{ route('edit_restaurant', $restaurants->id) }}">
                                                                <img src="{{ asset('public/assets/img/edit.svg') }}" />
                                                                <span>Edit</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#" id="delete_restaurant_id"
                                                                data-id="{{ $restaurants->id }}" data-toggle="modal"
                                                                data-target="#delete-restaurant-modal">
                                                                <img
                                                                    src="{{ asset('public/assets/img/delete-recycle.svg') }}" />
                                                                <span>Delete Details</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="rest_archive_btn" data-id="{{ $restaurants->id }}"
                                                                data-toggle="modal" data-target="#archive-modal">
                                                                <img src="{{ asset('public/assets/img/archive.svg') }}"
                                                                    alt="Archive" title="Archive" />
                                                                <span>Archive</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete-restaurant-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                        x
                    </button>
                </div>
                <div class="modal-body">
                    <p class="modal-text" style="text-align:center;">Are you sure you want to<br>Delete </p>
                    <input type="hidden" id="news_delete">
                    <div class="modal-btn d-flex ">
                        <a class="extra-btn" href="#" data-dismiss="modal">No</a>
                        <a class="download-btn-custom" id="delete_restaurant" href="#"
                            data-dismiss="modal">Yes</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="archive-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-header">
                        <button type="button pointer" class="btn-close" data-dismiss="modal" aria-label="Close">
                            x
                        </button>
                    </div>
                    <input type="hidden" id="archive_id" name="restaurant_id">
                    <p class="modal-text">Are you sure you want to<br>archive?</p>
                    <div class="modal-btn d-flex ">
                        <a class="extra-btn pointer" data-dismiss="modal">No</a>
                        <a class="download-btn-custom customer_archive" href="{{ route('manage.restaurants') }}">Yes,
                            archive</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('section_script')
    <script src="../src/plugins/src/table/datatable/datatables.js"></script>
    <script>
        $('#zero-config').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [7, 10, 20, 50],
            "pageLength": 10
        });
    </script>
    <script>
        $(document).ready(function() {
            $('<button><a class="extra-btn width-max-content" href="{{ route('add_manage_restraunt') }}">Add</a></button><button><a class="extra-btn width-max-content" href="{{ route('restaurant_archive') }}">View Archive List</a></button><button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Filter</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="{{ route('manage.restaurants') }}" id="allFilter"><span>All</span></a></div><div class="dropdown-item"><a href="{{ route('manage.restaurants', ['active' => true]) }}" id="activeFilter"><span>Active</span></a></div><div class="dropdown-item"><a href="{{ route('manage.restaurants', ['active' => false]) }}" id="expiredFilter"> <span>Expired</span></a></div></div></li></ul></button><button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a></div></div></li></ul></button>')
                .insertBefore("#zero-config_filter label");
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#status-change input[type="checkbox"]').on('change', function() {
                var dataId = $(this).data('id');
                var isChecked = $(this).is(':checked');

                // Perform actions based on the dataId and isChecked values
                var status = isChecked ? '1' : '0';
                updateStatusOfVoucher(status, dataId);
                if (isChecked) {
                    //   console.log('Switch with data-id ' + dataId  + ' is checked.');
                    // Perform additional logic for checked state
                } else {
                    //   console.log('Switch with data-id ' + dataId + ' is unchecked.');
                    // Perform additional logic for unchecked state
                }
            });
        });

        function updateStatusOfVoucher(status, dataId) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('update_status_of_restaurant') }}",
                method: 'POST',
                data: {
                    status: status,
                    dataId: dataId
                },
                success: function(result) {
                    if (result.status_code == 200) {
                        toastr.success('Restaurant Status Updated Sucessfully');
                        setTimeout(function() {
                            window.location.href = "{{ route('manage.restaurants') }}";
                        }, 2000);
                    } else {
                        toastr.error('Something Went Wrong');
                        setTimeout(function() {
                            window.location.href = "{{ route('manage.restaurants') }}";
                        }, 2000);
                    }
                },
                error: function(xhr, status, error) {
                    // Handle errors if needed
                    console.error(error);
                }
            });
        }



        //delete Article
        $(document).on('click', "#delete_restaurant_id", function() {
            var delete_restaurant_id = $(this).data('id');
            $("#news_delete").val(delete_restaurant_id);
        })

        $(document).on('click', '#delete_restaurant', function(e) {
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var id = $('#news_delete').val();
            console.log("id", id)

            $('#delete_restaurant').text('Please wait...');
            $('#delete_restaurant').attr('disabled', true);

            $.ajax({
                type: 'POST',

                url: 'delete_restaurant/' + id,
                success: function(result) {
                    if (result.status_code == 200) {
                        toastr.success('Restaurant Deleted Sucessfully');
                        setTimeout(function() {
                            window.location.href = "{{ route('manage.restaurants') }}";
                        }, 2000);
                    } else {
                        toastr.error('Something Went Wrong');
                        setTimeout(function() {
                            window.location.href = "{{ route('manage.restaurants') }}";
                        }, 2000);
                    }
                }
            });
        });
    </script>
    <script>
        $(document).on("click", ".rest_archive_btn", function() {
            var data_id = $(this).data('id');
            $('#archive_id').val(data_id);
        });

        $(document).on("click", ".customer_archive", function(e) {
            e.preventDefault();
            let base_url = url_path;
            var archive_id = $('#archive_id').val();
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
            });
            $.ajax({
                type: "DELETE",
                url: base_url + "/manage_restaurant_archive/" + archive_id,
                success: function(response) {
                    if (response.status_code == 200) {
                        toastr.success('Record has been archive');
                        setTimeout(function() {
                            window.location.href = base_url + "/manage_restaurant_archive";
                        }, 1000);
                    } else {
                        toastr.error("Something went wrong");
                    }
                },
            });
        });
    </script>
    <script>
        $(function() {
            $("#select-all-ids").click(function() {
                $(".form-check-input[name='restaurant_ids']").prop('checked', $(this).prop('checked'));
            });

            $(".form-check-input[name='restaurant_ids']").click(function() {
                if (!$(this).prop('checked')) {
                    $("#select-all-ids").prop('checked', false);
                } else {
                    if ($(".form-check-input[name='restaurant_ids']:checked").length === $(
                            ".form-check-input[name='restaurant_ids']").length) {
                        $("#select-all-ids").prop('checked', true);
                    }
                }
            });

            $(document).on("click", "#download-selected", function(e) {
                e.preventDefault();

                var allIds = [];

                // Iterate over each page of the DataTable
                var table = $('#zero-config').DataTable();
                table.rows().every(function(rowIdx, tableLoop, rowLoop) {
                    var row = this.node();
                    if ($(row).find('.form-check-input[name="restaurant_ids"]').is(':checked')) {
                        allIds.push($(row).find('.form-check-input[name="restaurant_ids"]').val());
                    }
                });

                if (allIds.length > 0) {
                    $('#ids').prop('disabled', false).val(allIds.join(','));
                    $('#all_id').prop('disabled', true);
                    $('#restaurant-form').submit();
                } else {
                    toastr.error("Please select at least one restaurant to download.");
                }
            });

            $(document).on("click", "#download_all", function(e) {
                $('#all_id').prop('disabled', false);
                $('#ids').prop('disabled', true);
                $('#restaurant-form').submit();
            });
        });

        $(document).on("click", ".more", function(e) {
            e.preventDefault();
            e.stopPropagation();

        });
    </script>
@endsection
