@extends('layouts.auth.app')

@section('title', 'Manage Screens')

@section('content')
<!-- Menu Details Card -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Central Menu Details</h3>
            </div>
            <a href="{{ route('central-menu.list') }}" class="flex items-center space-x-2 px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-colors duration-200">
                <span>Cancel</span>
            </a>
        </div>
    </div>

    <div class="px-6 py-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-500">Parent Menu</label>
                <p class="mt-1 text-sm text-gray-900">{{ $menu->ParentCentralMenuName ?? 'N/A' }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500">Menu Name</label>
                <p class="mt-1 text-sm text-gray-900">{{ $menu->CentralMenuName ?? 'N/A' }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500">Sort Order</label>
                <p class="mt-1 text-sm text-gray-900">{{ $menu->SortOrder ?? 0 }}</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500">Status</label>
                <p class="mt-1">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ ($menu->Active ?? false) ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                        {{ ($menu->Active ?? false) ? 'Active' : 'Inactive' }}
                    </span>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Associated Screens Card -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Associated Screens</h3>
                <p class="text-sm text-gray-500 mt-1">Manage screens linked to this menu</p>
            </div>
            <a href="{{ route('central-menu.add-screen', ['id' => $menu->CentralMenuID ?? 0]) }}" class="flex items-center space-x-2 px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </svg>
                <span>Add New</span>
            </a>
        </div>
    </div>

    @if(session('success'))
    <div class="mx-6 mt-4">
        <div class="bg-green-50 border border-green-200 rounded-lg p-4">
            <p class="text-sm text-green-800">{{ session('success') }}</p>
        </div>
    </div>
    @endif

    <div id="dvScreenData" class="overflow-x-auto">
        @include('pages.admin.central-menu.partials.screen-table', ['screenList' => $screenList])
    </div>
</div>

<!-- Remove Confirmation Modal -->
<div id="dvRemoveModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">Remove Screen</h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">Are you sure you want to remove this screen from the menu? This action cannot be undone.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button" id="btnModalYes" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
                    Yes, Remove
                </button>
                <button type="button" onclick="closeRemoveModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="hdnTBID" value="0">
<input type="hidden" id="hdnOtherID" value="0">
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    bindScreenTable();

    $('#btnModalYes').click(function() {
        var vData = {
            CMSID: $('#hdnTBID').val(),
            CentralMenuID: $('#hdnOtherID').val(),
            _token: '{{ csrf_token() }}'
        };

        $.ajax({
            url: '{{ route("central-menu.remove-screen") }}',
            method: 'POST',
            data: vData,
            success: function(data) {
                closeRemoveModal();
                if (data.success) {
                    $('#hdnTBID').val(0);
                    $('#hdnOtherID').val(0);
                    showAlert(data.Message, 'success');
                    $('#dvScreenData').html(data.ScreenList);
                    bindScreenTable();
                } else {
                    showAlert(data.Message, 'danger');
                }
            },
            error: function() {
                closeRemoveModal();
                showAlert('An error occurred while removing the screen.', 'danger');
            }
        });
    });
});

function bindScreenTable() {
    if ($.fn.DataTable.isDataTable('#tblScreen')) {
        $('#tblScreen').DataTable().destroy();
    }

    $('#tblScreen').DataTable({
        responsive: true,
        columnDefs: [
            { orderable: true, targets: [0, 1, 2] },
            { orderable: false, targets: [3] }
        ],
        language: {
            emptyTable: "No Screens Found"
        }
    });
}

function jsfn_RemoveLink(cmsId, centralMenuId) {
    $('#dvRemoveModal').removeClass('hidden');
    $('#hdnTBID').val(cmsId);
    $('#hdnOtherID').val(centralMenuId);
}

function closeRemoveModal() {
    $('#dvRemoveModal').addClass('hidden');
}

function showAlert(message, type) {
    var alertClass = type === 'success' ? 'bg-green-50 border-green-200 text-green-800' : 'bg-red-50 border-red-200 text-red-800';
    var alertHtml = '<div class="mx-6 mt-4"><div class="' + alertClass + ' border rounded-lg p-4"><p class="text-sm">' + message + '</p></div></div>';
    $('#dvScreenData').before(alertHtml);
    setTimeout(function() {
        $('.mx-6.mt-4').first().fadeOut(function() { $(this).remove(); });
    }, 3000);
}
</script>
@endpush