@extends('layouts.app', ['title' => __('Restaurants')])
@section('admin_title')
{{__('Restaurants')}}
@endsection
@section('content')
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<!-- DataTables Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
<style>
    /* Ensure the Select2 container has 100% width */
    .select2-container {
        width: 100% !important;
        /* Ensures the select box itself takes 100% width */
    }

    .btn-focus {
        background-color: #007bff;
        /* Change to your preferred focus color */
        color: white;
        /* Text color */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        /* Optional shadow for effect */
    }
</style>

<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5"></div>

<div class="container-fluid mt--7">
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col-4">
                            <h3 class="mb-0">{{ __('Restaurants') }}</h3>
                        </div>
                        <div class="col-8 text-right">
                            <div class="btn-group" role="group" aria-label="Filter">
                                <button type="button" class="btn" data-filter="daily">Daily</button>
                                <button type="button" class="btn" data-filter="weekly">Weekly</button>
                                <button type="button" class="btn" data-filter="monthly">Monthly</button>
                                <button type="button" class="btn" data-filter="quarterly">Quarterly</button>
                                <button type="button" class="btn" data-filter="Yearly">Yearly</button>
                                <button type="button" class="btn btn-focus" data-filter="all">All</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    @include('partials.flash')
                </div>
                <div class="table-responsive">
                    <table class="table align-items-center table-flush">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">{{ __('Id') }}</th>
                                <th scope="col">{{ __('Name') }}</th>
                                <th scope="col">{{ __('Logo') }}</th>
                                <th scope="col">{{ __('Owner') }}</th>
                                <th scope="col">{{ __('Owner email') }}</th>
                                <th scope="col">{{ __('Mobile number') }}</th>
                                <th scope="col">{{ __('City') }}</th>
                                <th scope="col">{{ __('State') }}</th>
                                <th scope="col">{{ __('Zip Code') }}</th>
                                <th scope="col">{{ __('Comission Rate') }}</th>
                                <th scope="col">{{ __('Created Date') }}</th>
                                <th scope="col">{{ __('Active') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($restaurants as $restorant)
                            <tr>
                                
                                <td>
                                    {{ $restorant->id }}
                                </td>
                                <td><a href="{{ route('admin.restaurants.edit', $restorant) }}">{{ $restorant->name }}</a></td>
                                <td><img class="rounded" src={{ $restorant->icon }} width="50px" height="50px"></img></td>
                                <td>{{ $restorant->user?$restorant->user->name:__('Deleted') }}</td>
                                <td>
                                    <a href="mailto: {{ $restorant->user?$restorant->user->email:""  }}">{{ $restorant->user?$restorant->user->email:__('Deleted')  }}</a>
                                </td>
                                <td>
                                    @php
                                    $phone = preg_replace('/\D/', '', $restorant->phone); // remove non-digits
                                    if (strlen($phone) === 10) {
                                    $phone = '(' . substr($phone, 0, 3) . ')' . substr($phone, 3, 3) . '-' . substr($phone, 6);
                                    }
                                    @endphp

                                    {{ $phone }}
                                </td>
                                <td>
                                    {{ $restorant->city}}
                                </td>
                                <td>
                                    {{ $restorant->state}}
                                </td>
                                <td>
                                    {{ $restorant->zip_code}}
                                </td>
                                <td>
                                    {{ $restorant->fee }}%
                                </td>
                                <td>{{ $restorant->created_at->format('Y-m-d H:i') }}</td>

                                <td>
                                    @if($restorant->active == 1)
                                    <span class="badge badge-success">{{ __('Active') }}</span>
                                    @else
                                    <span class="badge badge-warning">{{ __('Not active') }}</span>
                                    @endif
                                </td>
                                
                            </tr>
                            @endforeach
                        </tbody>
                        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                let editButton = document.getElementById("editRestaurantBtn");
                                let deleteButton = document.getElementById("deleteRestaurantBtn");
                                let radioButtons = document.querySelectorAll(".restaurant-selector");

                                let selectedId = null;

                                radioButtons.forEach(radio => {
                                    radio.addEventListener("change", function() {
                                        selectedId = this.value;
                                        let editUrl = "{{ route('superadmin.restaurants.edit', '__ID__') }}".replace("__ID__", selectedId);
                                        let deleteUrl = "{{ route('superadmin.restaurant.remove', '__ID__') }}".replace("__ID__", selectedId);

                                        editButton.href = editUrl;
                                        deleteButton.setAttribute("data-url", deleteUrl); // Store URL for deletion
                                    });
                                });

                                deleteButton.addEventListener("click", function(event) {
                                    event.preventDefault();
                                    if (!selectedId) {
                                        Swal.fire({
                                            icon: "error",
                                            title: "Oops...",
                                            text: "Please select a restaurant to delete!",
                                        });
                                        return;
                                    }

                                    Swal.fire({
                                        title: "Are you sure?",
                                        text: "This action is irreversible!",
                                        icon: "warning",
                                        showCancelButton: true,
                                        confirmButtonColor: "#d33",
                                        cancelButtonColor: "#3085d6",
                                        confirmButtonText: "Yes, delete it!"
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            window.location.href = deleteButton.getAttribute("data-url");
                                        }
                                    });
                                });
                            });
                        </script>

                    </table>
                </div>

                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="..."></nav>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

</script>
@endsection
@push('js')
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons JS -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script>
    $(document).ready(function() {
        $('.table').DataTable({
            dom: 'Bfrtip', // Add the buttons to the table
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "columnDefs": [{
                "orderable": false,
                "targets": -1 // Target the last column (Action column)
            }]
        });
    });
    $(document).ready(function() {
        // Debounce function to prevent multiple rapid clicks
        function debounce(func, wait) {
            let timeout;
            return function() {
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, arguments), wait);
            };
        }

        const fetchFilteredData = debounce(function(filterType) {
            // Remove focus from all buttons
            $('.btn').removeClass('btn-focus');
            // Add focus to the clicked button
            $(this).addClass('btn-focus');

            $.ajax({
                url: "{{ route('superadmin.Report.Restaurants_filter') }}",
                method: 'GET',
                data: {
                    filter: filterType
                },
                success: function(response) {
                    let rows = '';
                    response.Companys.forEach(function(restaurant) {
                        rows += `
                        <tr>
                            <td>${restaurant.name}</td>
                            <td><img class="rounded" src="${restaurant.icon}" width="50px" height="50px"></td>
                            <td>${restaurant.user ? restaurant.user.name : 'Deleted'}</td>
                            <td><a href="mailto:${restaurant.user ? restaurant.user.email : ''}">${restaurant.user ? restaurant.user.email : 'Deleted'}</a></td>
                            <td>${restaurant.created_at}</td>
                            <td>
                                ${restaurant.active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-warning">Not active</span>'}
                            </td>
                        </tr>
                    `;
                    });
                    $('#restaurant-table').html(rows);
                },
                error: function(error) {
                    console.error('Error fetching data', error);
                }
            });
        }, 300); // Debounce with a 300ms delay

        // Attach click event to all buttons
        $('.btn').click(function() {
            let filterType = $(this).data('filter');
            fetchFilteredData.call(this, filterType);
        });
    });
</script>
@endpush