@extends('Admin.layouts.master')

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

    <style>
        .btn {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
        }

        .btn-danger {
            background-color: #dc3545;
            color: white;
        }

        .btn-success:hover {
            background-color: #218838;
            color: #fff;
        }

        .btn-danger:hover {
            background-color: #c82333;
            color: #fff;
        }

        /* CSS for action icons */
        .actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }

        .actions a {
            margin: 0 5px;
            /* Space between icons */
        }

        .actions img {
            width: 20px;
            /* Adjust the size as needed */
            height: 20px;
            /* Adjust the size as needed */
            cursor: pointer;
            transition: transform 0.2s;
        }

        .actions img:hover {
            transform: scale(1.2);
        }

        /* Ensuring icons are properly aligned in their table cells */
        td.actions {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Additional global styles for consistency */
        table td,
        table th {
            vertical-align: middle;
            text-align: center;
        }

        /* Ensuring the table does not overflow */
        table {
            width: 100%;
            overflow-x: auto;
        }

        .btn {
            padding: 6px 12px;
            /* Adjust padding as needed */
            font-size: 14px;
            /* Adjust font size as needed */
        }
    </style>

    <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">Restaurants Users</h6>
                        </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;">
                        <table id="zero-config" class="table dt-table-hover rest_users_table" style="width:100%">
                            <thead class="text-center">
                                <tr>
                                    <th class="text-start">Sr no</th>
                                    <th class="text-start">First Name</th>
                                    <th class="text-start">Last Name </th>

                                    <th class="text-start">Restaurant Name</th>
                                    <th class="text-start">Restaurant ID</th>
                                    <th class="text-start">Email Id</th>
                                    <th class="text-start">Date Onboarded</th>
                                    <th class="text-start">Location</th>
                                    <th class="no-content">Approve/Disapprove</th>
                                    <th class="no-content">Status</th>
                                    <th class="no-content">Action</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                @foreach ($restaurant_users as $restaurant_user)
                                    <tr>
                                        <td class="text-start">{{ $loop->iteration }}</td>
                                        <td class="text-start">{{ $restaurant_user->first_name }}</td>
                                        <td class="text-start">{{ $restaurant_user->last_name }}</td>


                                        <td class="text-start">
                                            @foreach ($restaurant_user->restaurants as $restaurant)
                                                {{ $restaurant->name }}
                                            @endforeach
                                        </td>
                                        <td class="text-start">{{ $restaurant->restaurant_id }}</td>
                                        <td class="text-start">{{ $restaurant_user->email_address }}</td>
                                        <td>{{ $restaurant_user->created_at->format('d/m/Y') }}</td>
                                        <td>{{ $restaurant_user->state ? $restaurant_user->state->name : 'No state assigned' }}
                                        </td>
                                        <td>
                                            <button class="btn btn-success approve-btn"
                                                data-id="{{ $restaurant_user['id'] }}">Approve</button>
                                            <button class="btn btn-danger disapprove-btn"
                                                data-id="{{ $restaurant_user['id'] }}">Disapprove</button>
                                        </td>
                                        <td>
                                            <div class="switch-btn">
                                                <input data-id="{{ $restaurant_user['id'] }}"
                                                    {{ $restaurant_user['is_active'] ? 'checked' : '' }}
                                                    class="active_rest_user" type="checkbox"
                                                    id="switch{{ $restaurant_user['id'] }}" switch="bool" />
                                                <label for="switch{{ $restaurant_user['id'] }}" data-on-label="Active"
                                                    data-off-label="Inactive"></label>
                                            </div>
                                        </td>
                                        <td class="actions">
                                            <a href="{{ url('/view_restaurant_users/' . $restaurant_user->id) }}"><img
                                                    src="{{ asset('public/assets/img/view.svg') }}" alt="View"
                                                    title="View" /></a>
                                            <a href="{{ url('/edit_restaurant_users/' . $restaurant_user->id) }}"><img
                                                    src="{{ asset('public/assets/img/edit.svg') }}" alt="Edit"
                                                    title="Edit" /></a>
                                            <a href="#" id="delete_restaurant_user_id"
                                                data-id="{{ $restaurant_user->id }}" data-toggle="modal"
                                                data-target="#delete-restaurant-user-modal"><img
                                                    src="{{ asset('public/assets/img/delete-recycle.svg') }}" /></a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

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

    <div class="modal fade" id="delete-restaurant-user-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_user" 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="restaurants_id" name="restaurants_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 restaurants_archive" href="">Yes, archive</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('section_script')
    <script src="{{ asset('public/assets/js/admin/manage_restaurant/main.js') }}"></script>
    <script>
        $(document).ready(function() {
            var filterButton = $('<div class="filter-btn-wrapper">' +
                '<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('restraunt_users') }}" id="allFilter" class="default-filter"><span>All</span></a></div>' +
                '<div class="dropdown-item"><a href="{{ route('restraunt_users', ['active' => true]) }}" id="activeFilter"><span>Active</span></a></div>' +
                '<div class="dropdown-item"><a href="{{ route('restraunt_users', ['active' => false]) }}" id="expiredFilter"><span>Inactive</span></a></div>' +
                '</div>' +
                '</li>' +
                '</ul>' +
                '</div>');

            filterButton.insertBefore("#zero-config_filter");

            var selectedFilter = localStorage.getItem('selectedFilter');

            if (selectedFilter) {
                handleChange(selectedFilter);
            } else {
                $('#allFilter').trigger('click');
            }

            $('#activeFilter').on('click', function() {
                handleChange('active');
                localStorage.setItem('selectedFilter', 'active');
            });

            $('#expiredFilter').on('click', function() {
                handleChange('expired');
                localStorage.setItem('selectedFilter', 'expired');
            });

            $('#allFilter').on('click', function() {
                handleChange('all');
                localStorage.setItem('selectedFilter', 'all');
            });
        });

        function handleChange(filterType) {
            $('#activeFilter, #expiredFilter, #allFilter').css('background-color', '');

            if (filterType === 'active') {
                $('#activeFilter').css({
                    'padding': '4px 8px',
                    'background-color': 'rgb(233, 233, 234)',
                    'color': 'rgb(191, 191, 196)'
                });
            } else if (filterType === 'expired') {
                $('#expiredFilter').css({
                    'padding': '4px 8px',
                    'background-color': 'rgb(233, 233, 234)',
                    'color': 'rgb(191, 191, 196)'
                });
            } else if (filterType === 'all') {
                $('#allFilter').css({
                    'padding': '4px 8px',
                    'background-color': 'rgb(233, 233, 234)',
                    'color': 'rgb(191, 191, 196)'
                });
            }
        }
    </script>

    <script>
        $(document).on('click', "#delete_restaurant_user_id", function() {
            var delete_restaurant_user_id = $(this).data('id');
            $("#news_delete").val(delete_restaurant_user_id);
        })

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

            var id = $('#news_delete').val();

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

            $.ajax({
                type: 'POST',
                url: 'delete_restaurant_user/' + id,
                success: function(result) {
                    if (result.status == 200) {
                        toastr.success('Restaurant Deleted Sucessfully');
                        setTimeout(function() {
                            window.location.href = base_url + "/restaurant_users";
                        }, 2000);
                    } else {
                        toastr.error('Something Went Wrong');
                        setTimeout(function() {
                            window.location.href = base_url + "/restaurant_users";
                        }, 2000);
                    }
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // Handle approve button click
            $(".approve-btn").on("click", function() {
                let base_url = url_path;
                var rest_user_id = $(this).data("id");
                var switchElement = $('#switch' + rest_user_id);

                // Check current status
                if (switchElement.prop('checked')) {
                    toastr.options = {
                        "timeOut": 500
                    }
                    toastr.warning("User is already approved. !!");
                    return;
                }

                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: base_url + '/change_rest_status',
                    data: {
                        status: 1,
                        rest_user_id: rest_user_id,
                    },
                    success: function(data) {
                        toastr.options = {
                            "timeOut": 500
                        }
                        toastr.success("User approved and status activated successfully. !!");

                        // Update the switch to active
                        switchElement.prop('checked', true);
                    },
                });
            });

            // Handle disapprove button click
            $(".disapprove-btn").on("click", function() {
                let base_url = url_path;
                var rest_user_id = $(this).data("id");
                var switchElement = $('#switch' + rest_user_id);

                // Check current status
                if (!switchElement.prop('checked')) {
                    toastr.options = {
                        "timeOut": 500
                    }
                    toastr.warning("User is already disapproved. !!");
                    return;
                }

                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: base_url + '/change_rest_status',
                    data: {
                        status: 0,
                        rest_user_id: rest_user_id,
                    },
                    success: function(data) {
                        toastr.error(
                            "User disapproved and status deactivated successfully. !!");

                        // Update the switch to inactive
                        switchElement.prop('checked', false);
                    },
                });
            });

            // Handle switch change
            $(".rest_users_table").on("change", ".active_rest_user", function() {
                // Revert the switch change
                var currentStatus = $(this).prop("checked");

                // Revert the switch state
                $(this).prop("checked", !currentStatus);

                toastr.options = {
                    "timeOut": 500
                }
                toastr.error("You can only change the status using Approve/Disapprove buttons.");
            });
        });
    </script>
@endsection
