@extends('layouts.cmsapp')

@section('cms_content')

    <div class="main-content">

        {{-- PAGE HEADER --}}
        <div class="row">
            <div class="col-lg-8">
                <h1 class="page-title">Menu Page Association</h1>

                <ol class="breadcrumb breadcrumb-2">
                    <li>
                        <a href="{{ route('home') }}">
                            <i class="fa fa-home"></i> Home
                        </a>
                    </li>
                    <li class="active">
                        <strong>Menu Page Association</strong>
                    </li>
                </ol>
            </div>
        </div>

        <div class="line-dashed"></div>

        {{-- FORM SECTION --}}
        <div class="row">
            <div class="col-lg-12">

                <div class="panel panel-default">

                    <div class="panel-heading">
                        <strong>Associate Menu / Submenu</strong>
                    </div>

                    <div class="panel-body">

                        <form method="POST" action="{{ route('menu-page-association.store') }}">
                            @csrf

                            <div class="row">

                                {{-- ASSOCIATION TYPE --}}
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Type</label>

                                        <select id="association_type" name="association_type" class="form-control">
                                            <option value="menu">Menu</option>
                                            <option value="submenu">Submenu</option>
                                        </select>
                                    </div>
                                </div>

                                {{-- MENU --}}
                                <div class="col-md-3" id="menu_div">
                                    <div class="form-group">
                                        <label>Menu</label>

                                        <select name="menu_id" class="form-control">
                                            <option value="">Select Menu</option>

                                            @foreach($menus as $menu)
                                                <option value="{{ $menu->id }}">
                                                    {{ $menu->menu_title }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                {{-- SUBMENU --}}
                                <div class="col-md-3 hidden" id="submenu_div">
                                    <div class="form-group">
                                        <label>Submenu</label>

                                        <select name="submenu_id" class="form-control">
                                            <option value="">Select Submenu</option>

                                            @foreach($submenus as $submenu)
                                                <option value="{{ $submenu->id }}">
                                                    {{ $submenu->menu->menu_title ?? '' }} /
                                                    {{ $submenu->submenu_title }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                {{-- TARGET TYPE --}}
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>Target Type</label>

                                        <select id="target_type" name="target_type" class="form-control">
                                            <option value="page">Page</option>
                                            <option value="route">Route</option>
                                            <option value="external">External</option>
                                        </select>
                                    </div>
                                </div>

                                {{-- PAGE --}}
                                <div class="col-md-3" id="page_div">
                                    <div class="form-group">
                                        <label>Page</label>

                                        <select name="page_id" class="form-control">
                                            <option value="">Select Page</option>

                                            @foreach($pages as $page)
                                                <option value="{{ $page->id }}">
                                                    {{ $page->title }}
                                                    ({{ $page->type }}/{{ $page->slug }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                {{-- ROUTE --}}
                                <div class="col-md-3 hidden" id="route_div">
                                    <div class="form-group">
                                        <label>Route</label>

                                        <input type="text" name="route" class="form-control" placeholder="Enter Route">
                                    </div>
                                </div>

                                {{-- EXTERNAL URL --}}
                                <div class="col-md-3 hidden" id="external_div">
                                    <div class="form-group">
                                        <label>External URL</label>

                                        <input type="text" name="external_link" class="form-control"
                                            placeholder="https://example.com">
                                    </div>
                                </div>

                                {{-- SUBMIT BUTTON --}}
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label>&nbsp;</label>

                                        <button type="submit" class="btn btn-primary btn-block">
                                            Save
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </form>

                    </div>

                </div>

            </div>
        </div>

        {{-- TABLE SECTION --}}
        <div class="row">
            <div class="col-lg-12">

                <div class="panel panel-default">

                    <div class="panel-heading">
                        <strong>Menu / Submenu Mapping</strong>
                    </div>

                    <div class="panel-body">

                        <div class="table-responsive">

                            <table class="table table-striped table-bordered">

                                <thead>
                                    <tr>
                                        <th width="5%">#</th>
                                        <th>Type</th>
                                        <th>Name</th>
                                        <th>Target Type</th>
                                        <th>Linked To</th>
                                    </tr>
                                </thead>

                                <tbody>

                                    {{-- MENUS --}}
                                    @foreach($menus as $menu)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>

                                            <td>
                                                <span class="label label-primary">
                                                    Menu
                                                </span>
                                            </td>

                                            <td>{{ $menu->menu_title }}</td>

                                            <td>{{ ucfirst($menu->target_type) }}</td>

                                            <td>
                                                @if($menu->target_type == 'page')

                                                    {{ $menu->menu_type }} /
                                                    {{ $menu->route }}

                                                @elseif($menu->target_type == 'route')

                                                    {{ $menu->route }}

                                                @elseif($menu->target_type == 'external')

                                                    <a href="{{ $menu->route }}" target="_blank">
                                                        {{ $menu->route }}
                                                    </a>

                                                @else
                                                    -
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach

                                    {{-- SUBMENUS --}}
                                    @foreach($submenus as $submenu)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>

                                            <td>
                                                <span class="label label-info">
                                                    Submenu
                                                </span>
                                            </td>

                                            <td>
                                                {{ $submenu->menu->menu_title ?? '' }} /
                                                {{ $submenu->submenu_title }}
                                            </td>

                                            <td>{{ ucfirst($submenu->target_type) }}</td>

                                            <td>
                                                @if($submenu->target_type == 'page')

                                                    {{ $submenu->route }}

                                                @elseif($submenu->target_type == 'route')

                                                    {{ $submenu->route }}

                                                @elseif($submenu->target_type == 'external')

                                                    <a href="{{ $submenu->route }}" target="_blank">
                                                        {{ $submenu->route }}
                                                    </a>

                                                @else
                                                    -
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>

            </div>
        </div>

    </div>

@endsection

@push('scripts')

    <script>

        $(document).ready(function () {

            // Bootstrap's `.hidden` sets `display:none !important`, which prevents jQuery `.show()`.
            // Remove it once and let JS control visibility via show/hide.
            $('#submenu_div, #route_div, #external_div').removeClass('hidden');

            function syncAssociationType() {
                let type = $('#association_type').val();

                if (type === 'submenu') {
                    $('#submenu_div').show();
                    $('#menu_div').hide();

                } else {
                    $('#menu_div').show();
                    $('#submenu_div').hide();

                }
            }

            function syncTargetType() {
                let type = $('#target_type').val();

                $('#page_div, #route_div, #external_div').hide();

                if (type === 'page') {
                    $('#page_div').show();
                } else if (type === 'route') {
                    $('#route_div').show();
                } else if (type === 'external') {
                    $('#external_div').show();
                }
            }

            // ASSOCIATION TYPE TOGGLE
            $('#association_type').on('change', function () {
                syncAssociationType();
            });

            // TARGET TYPE TOGGLE
            $('#target_type').on('change', function () {
                syncTargetType();
            });

            // Initialize current UI state
            syncAssociationType();
            syncTargetType();

        });

    </script>

@endpush