@extends('layouts.master')
@section('title', 'Header Menu')
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <form action="{{ route('menus.store') }}" class="ajaxForm form" id="ajaxForm" method="POST">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="mb-0">Header Menu</h6>
                                </div>
                                <div class="col-md-6 d-flex justify-content-end align-items-center">
                                    <button type="button" class="btn btn-primary add-menu-item me-2">Add Item</button>
                                    <button type="submit" class="btn btn-primary btn-block menu_button me-2">Save</button>
                                </div>
                            </div>
                            @csrf
                            <div class="main_menu" id="main_menu">
                                @foreach ($pageMenus as $menu)
                                <div class="row menu_item border mb-4" role="button">
                                    <input type="hidden" value="{{ \App\Models\Menu::HEADER }}" name="menu_type[{{ $menu->id }}]">
                                    <div class="form-outline col-12 mt-1 col-lg-5">
                                        <label class="form-label" for="type">Type</label>
                                        <select class="form-select page-menu-type select2 p-2" name="type[{{ $menu->id }}]"
                                            style="width: 100%">
                                            <option value="{{ \App\Models\Menu::PAGE }}" @selected(old('type', $menu->type) == \App\Models\Menu::PAGE)>Page
                                            </option>
                                            <option value="{{ \App\Models\Menu::CUSTOM }}" @selected(old('type', $menu->type) == \App\Models\Menu::CUSTOM)>
                                                Custom
                                            </option>
                                        </select>
                                        @error('type')
                                            <span class="invalid_feedback">
                                                <strong class="text-danger text-sm">{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    {{-- {{ $menu->page_id == null ? "hidden" : '' }} --}}
                                    <div class="form-outline col-12 page-type mt-1 col-lg-5">
                                        <label class="form-label" for="page">Pages</label>
                                        <select class="form-select select2 p-2" name="page_id[{{ $menu->id }}]" style="width: 100%">
                                            @foreach ($pages as $page)
                                            <option @selected(old('page_id', $menu->page_id) == $page->id) value="{{ $page->id }}">
                                                {{ $page->title }}</option>
                                            @endforeach
                                        </select>
                                        @error('type')
                                        <span class="invalid_feedback">
                                                <strong class="text-danger text-sm">{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        {{-- {{ $menu->custom_text == null ? "hidden" : '' }} --}}
                                        <div class="form-outline col-12 col-lg-5 custom-type">
                                            <div class="row">
                                            <div class="form-outline col-12 mt-1 col-md-6">
                                                <label class="form-label" for="custom-link">Link</label>
                                                <input type="url" name="custom_link[{{ $menu->id }}]" value="{{ old('custom_link', $menu->custom_link) }}"
                                                class="form-control">
                                                @error('custom_link')
                                                <span class="invalid_feedback">
                                                    <strong class="text-danger text-sm">{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                            <div class="form-outline col-12 mt-1 col-md-6">
                                                <label class="form-label" for="custom_text">Text</label>
                                                <input type="text" name="custom_text[{{ $menu->id }}]" value="{{ old('custom_text', $menu->custom_text) }}"
                                                    class="form-control">
                                                @error('custom_text')
                                                <span class="invalid_feedback">
                                                        <strong class="text-danger text-sm">{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-outline col-12 col-lg-2 pt-2">
                                        <label class="form-label"> </label>
                                        <div>
                                            <button type="button"
                                            class="btn btn-sm del-menu-item btn-secondary text-sm">DELETE</button>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                               <input type="hidden" value="{{ \App\Models\Menu::HEADER }}" name="menu_type">
                            </div>
                        </form>
                    </div>
                </div>  
            </div>
        </div>
    </div>
    @include('menus.menu-item')
@endsection
@push('scripts')
    <script src="{{ asset('assets/js/plugins/Sortable.min.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom.js') }}"></script>
    <script>
        // Menu change based on selection 
        $(function() {
            $('.page-menu-type').each(function(index, value) {
                var indexValue = $('.page-menu-type').index(index);
                var item = $(this).closest('.menu_item');
                $('.custom-type').eq(indexValue).val($(this).val());
                $(this).val() == "custom" ? $('.custom-type', item).show() && $('.page-type',item).hide() : $('.page-type', item).show() && $('.custom-type', item).hide();
                
                $('.page-menu-type').change(() => {
                    $(this).val() == "custom" ? $('.custom-type', item).show() && $('.page-type',item).hide() : $('.page-type', item).show() && $('.custom-type', item).hide();
                }).change();
            });
        });
        // End Menus

        // Drag and drop Menu
        const Items = document.getElementById('main_menu');
        new Sortable(Items, {
            animation: 350
        });
        // End Drag and Drop Menu
    </script>
@endpush