@extends('layouts.auth.app')

@section('title', 'Add Screens to Menu')

@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.screen-list', ['id' => $menu->CentralMenuID ?? 0]) }}" 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>

<!-- Add Screens Form -->
<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">
        <h3 class="text-lg font-semibold text-gray-900">Select Screens to Add</h3>
        <p class="text-sm text-gray-500 mt-1">Check the screens you want to associate with this menu</p>
    </div>

    @if($errors->any())
    <div class="mx-6 mt-4">
        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
            <p class="text-sm text-red-800">{{ $errors->first() }}</p>
        </div>
    </div>
    @endif

    <form id="frmScreen" method="POST" action="{{ route('central-menu.store-screen', ['id' => $menu->CentralMenuID ?? 0]) }}">
        @csrf
        <input type="hidden" name="MenuID" value="{{ $menu->CentralMenuID ?? 0 }}">
        <input type="hidden" name="ScreenIds" id="hdnScreenIds" value="">
        <input type="hidden" name="MainScreenID" id="hdnMainScreenId" value="">

        <div class="px-6 py-4">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200" id="tblScreens">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Select</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Screen Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Screen URL</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Main Screen</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($allScreens ?? [] as $screen)
                        <tr class="bg-white hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="chkscreen h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" data-screenid="{{ $screen->ScreenID }}">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $screen->ScreenName ?? '' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $screen->ScreenUrl ?? '' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="radio" name="mainScreen" class="rbscreen h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300" data-screenid="{{ $screen->ScreenID }}">
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">
                                No Screens Available
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end">
            <button type="button" id="btnSave" class="px-6 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors duration-200">
                Save Screens
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    $('#tblScreens').DataTable({
        responsive: true,
        columnDefs: [
            { orderable: false, targets: [0, 3] },
            { orderable: true, targets: [1, 2] }
        ],
        language: {
            emptyTable: "No Screens Available"
        },
        order: [[1, 'asc']]
    });

    // Checkbox selection
    $('.chkscreen').on('change', function() {
        jsfn_onScreenSelected($(this).data('screenid').toString(), this.checked);
    });

    // Radio button for main screen
    $('.rbscreen').on('change', function() {
        jsfn_onMainScreenSelected($(this).data('screenid').toString());
    });

    // Save button click
    $('#btnSave').click(function() {
        if ($('#hdnScreenIds').val() !== '') {
            $('#frmScreen').submit();
        } else {
            alert('Please select at least one screen');
        }
        return false;
    });
});

function jsfn_onScreenSelected(screenid, isChecked) {
    var vArrScreen = $('#hdnScreenIds').val().split(',').filter(function(e) { return e; });

    if (isChecked) {
        if (vArrScreen.indexOf(screenid) === -1) {
            vArrScreen.push(screenid);
        }
    } else {
        var index = vArrScreen.indexOf(screenid);
        if (index > -1) {
            vArrScreen.splice(index, 1);
        }
    }

    $('#hdnScreenIds').val(vArrScreen.join(','));
}

function jsfn_onMainScreenSelected(screenid) {
    $('#hdnMainScreenId').val(screenid);
}
</script>
@endpush