@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('menucontrols.index') }}">Menu</a></li>
                <li class="breadcrumb-item active">Menu Control</li>
            </ol>
            <!-- end breadcrumb -->
            <!-- begin page-header -->
            <h1 class="page-header">Menu Control</h1>
            <!-- end page-header -->

            <!-- begin info alert -->
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <h5 class="alert-heading"><i class="fa fa-info-circle"></i> Important Information</h5>
                <p class="mb-0">
                    <strong>Note:</strong> Disabling a menu control here will automatically hide it from the Room Type
                    configuration.
                    The menu will no longer appear in the "Available Menu Controls" or "Selected Menu Controls" sections
                    when editing Room Types,
                    and will be excluded from API responses to mobile applications.
                </p>
                <hr>
                <p class="mb-0 small">
                    <i class="fa fa-lightbulb"></i> <strong>Tip:</strong> Use the toggle switch to temporarily disable menu
                    items without deleting them.
                    This is useful for maintenance or seasonal features.
                </p>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- end info alert -->

            <!-- begin alerts -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>Success!</strong> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Error!</strong> {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div id="alert-container"></div>
            <!-- end alerts -->

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    {{-- <div class="panel-heading-btn">
                    <a href="{{ route('menucontrols.create') }}" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> Add Menu Control</a>
                </div> --}}
                </div>
                <div class="panel-body">
                    <table id="data-table-menu-control" class="table table-striped table-bordered table-td-valign-middle">
                        <thead>
                            <tr>
                                <th width="5%">No</th>
                                <th class="text-nowrap">Title</th>
                                <th class="text-nowrap">Status</th>
                                <th class="text-nowrap">Active</th>
                                {{-- <th class="text-nowrap">Action</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($menuControls as $menuControl)
                                <tr>
                                    <td width="5%" class="f-w-600 text-inverse">{{ $loop->iteration }}</td>
                                    <td>{{ $menuControl->title }}</td>
                                    <td>
                                        <span class="badge {{ $menuControl->isActive ? 'badge-green' : 'badge-red' }}">
                                            {{ $menuControl->isActive ? 'Yes' : 'No' }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input"
                                                id="customSwitch{{ $menuControl->id }}"
                                                {{ $menuControl->isActive ? 'checked' : '' }}
                                                onchange="toggleActive({{ $menuControl->id }}, this.checked)">
                                            <label class="custom-control-label"
                                                for="customSwitch{{ $menuControl->id }}">{{ $menuControl->isActive ? 'Aktif' : 'Tidak aktif' }}</label>
                                        </div>
                                    </td>
                                    {{-- <td>
                                    <a href="{{ route('menucontrols.edit', $menuControl->id) }}" class="btn btn-sm btn-warning">Edit</a>
                                    <form action="{{ route('menucontrols.destroy', $menuControl->id) }}" method="POST" style="display:inline;">
                                        <input name="_method" type="hidden" value="DELETE">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                                    </form>                                    
                                </td> --}}
                                </tr>
                            @endforeach
                        </tbody>

                    </table>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i
                class="fa fa-angle-up"></i></a>
        <!-- end scroll to top btn -->

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                let table;

                if ($.fn.DataTable.isDataTable('#data-table-menu-control')) {
                    table = $('#data-table-menu-control').DataTable();
                } else {
                    table = $('#data-table-menu-control').DataTable({
                        pageLength: 10,
                        lengthMenu: [10, 20, 50, 100, 200],
                    });
                }
            });

            function showAlert(message, type) {
                const alertContainer = document.getElementById('alert-container');
                const alertDiv = document.createElement('div');
                alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
                alertDiv.setAttribute('role', 'alert');
                alertDiv.innerHTML = `
                <strong>${type === 'success' ? 'Success!' : 'Error!'}</strong> ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            `;
                alertContainer.appendChild(alertDiv);

                setTimeout(() => {
                    alertDiv.remove();
                }, 5000);
            }

            function toggleActive(id, isActive) {
                const url = `{{ route('menucontrols.toggle', ':id') }}`.replace(':id', id);
                const switchElement = document.getElementById('customSwitch' + id);
                const labelElement = document.querySelector(`label[for="customSwitch${id}"]`);
                const badgeElement = switchElement.closest('tr').querySelector('.badge');

                // Disable the switch during the request
                switchElement.disabled = true;

                fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            isActive: isActive
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            // Use the message from the API response
                            const message = data.message || 'Status updated successfully';
                            showAlert(message, 'success');

                            // Update the label text
                            labelElement.textContent = isActive ? 'Aktif' : 'Tidak aktif';

                            // Update the badge
                            badgeElement.className = isActive ? 'badge badge-green' : 'badge badge-red';
                            badgeElement.textContent = isActive ? 'Yes' : 'No';
                        } else {
                            // Show error message from API or default
                            const message = data.message || 'Error updating status';
                            showAlert(message, 'danger');

                            // Revert the switch to previous state
                            switchElement.checked = !isActive;
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showAlert('An error occurred while updating status', 'danger');

                        // Revert the switch to previous state
                        switchElement.checked = !isActive;
                    })
                    .finally(() => {
                        // Re-enable the switch
                        switchElement.disabled = false;
                    });
            }
        </script>


    </div>
@endsection