@extends('admin.layout')

@push('styles')
<style>
    .card select.form-select,
    .card input.form-control {
        color: #333 !important;
        background-color: #fff !important;
        border: 1px solid #ccc;
    }

    .card select.form-select option {
        color: #333;
        background-color: #fff;
    }
</style>
@section('content')
    <div class="fw-bold" style="font-size:1.4rem;margin-bottom:15px;color:#1c1d46;">Add Childmenu</div>

    <div class="card p-4 mb-4 shadow-sm" style="background:#ffffff;border:1px solid #e5e7eb;">
        <form action="{{ route('admin.childmenus.store') }}" method="POST">
            @csrf

            <div class="mb-3">
                <label class="form-label" style="color:#333;">Select Main Menu <span class="text-danger">*</span></label>
                <select name="main_menu_id" id="mainMenu" class="form-select">
                    <option value="">--Please Select--</option>
                    @foreach($mainMenus as $menu)
                        <option value="{{ $menu->id }}">{{ $menu->title }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label" style="color:#333;">Select Sub Menu <span class="text-danger">*</span></label>
                <select name="menu_id" id="subMenu" class="form-select">
                    <option value="">--Please Select--</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label" style="color:#333;">Childmenu Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" required>
            </div>

            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    <div class="card p-4 shadow-sm" style="background:#ffffff;border:1px solid #e5e7eb;">
        <h5 class="mb-3" style="color:#1c1d46;">Manage Submenu Item</h5>
        <table class="table table-bordered align-middle">
            <thead style="background:#f4f6f9;">
                <tr>
                    <th>Serial No.</th>
                    <th>Childmenu Name</th>
                    <th>Submenu Name</th>
                    <th>Main Menu Name</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($childMenus as $index => $child)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $child->name }}</td>
                        <td>{{ $child->submenu->name ?? '-' }}</td>
                        <td>{{ $child->submenu->parent->name ?? '-' }}</td>
                        <td>
                            <form action="{{ route('admin.childmenus.destroy', $child->id) }}" method="POST"
                                onsubmit="return confirm('Delete this item?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center">No records found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection

@push('scripts')
    <script>
        document.getElementById('mainMenu').addEventListener('change', function () {
            const mainMenuId = this.value;
            const subMenuSelect = document.getElementById('subMenu');
            subMenuSelect.innerHTML = '<option value="">--Please Select--</option>';

            if (!mainMenuId) return;

            fetch(`/admin/childmenus/submenus/${mainMenuId}`)
                .then(res => res.json())
                .then(data => {
                    data.forEach(sub => {
                        const opt = document.createElement('option');
                        opt.value = sub.id;
                        opt.textContent = sub.name;
                        subMenuSelect.appendChild(opt);
                    });
                });
        });
    </script>
@endpush