@extends('layouts.backend.app')

@section('title','Menu Item')

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-menu icon-gradient bg-mean-fruit">
                    </i>
                </div>
                <div>
                @if($menuItem->exists)
                    Edit Menu Item
                @else
                    Add New Menu Item to (<code>{{ $menu->name }}</code>)
                @endisset
                </div>
            </div>
            <div class="page-title-actions">
                <div class="d-inline-block dropdown">
                    <a href="{{ route('app.menus.builder',$menu->id) }}" class="btn-shadow btn btn-danger text-white">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-arrow-circle-left fa-w-20"></i>
                        </span>
                        {{ __('Back to List') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="main-card mb-3 card">
                <!-- form start -->
                <form id="itemFrom" role="form" method="POST"
                      action="{{ $menuItem->exists ? route('app.menus.item.update',['menu'=> $menu->id,'menuItem'=> $menuItem->id]) : route('app.menus.item.store', $menu->id) }}">
                    @csrf
                    @if($menuItem->exists)
                        @method('PUT')
                    @endif

                    <div class="card-body">
                        <h5 class="card-title">Manage Menu Item</h5>

                        <div class="form-group">
                            <label class="form-label" for="type">Type</label>
                            <select class="custom-select" id="type" name="type" onchange="setItemType()">
                                @foreach(\App\Models\MenuItem::getConstants('TYPE_') as $type)
                                    <option value="{{ $type }}" @if($menuItem->type === $type) selected @endif>
                                        {{ \Illuminate\Support\Str::title(str_replace('-', ' ', $type)) }}</option>
                                @endforeach
                                {{--<option value="item" {{ isset($menuItem) && ($menuItem->type == \App\Models\MenuItem::TYPE_ITEM) ? 'selected' : '' }}>Menu Item</option>
                                <option value="divider" {{ isset($menuItem) && ($menuItem->type == 'divider') ? 'selected' : '' }}>Divider</option>
                                <option value="divider" {{ isset($menuItem) && ($menuItem->type == 'divider') ? 'selected' : '' }}>Text Toggle</option>--}}
                            </select>
                        </div>

                        <div id="divider_fields">
                            <div class="form-group">
                                <label class="form-label" for="divider_title">Title of the Divider</label>
                                <input type="text" class="form-control @error('divider_title') is-invalid @enderror" id="divider_title"
                                       name="divider_title"
                                       placeholder="Divider Title" value="{{ old('divider_title', $menuItem->divider_title) }}"
                                       autofocus>
                                @error('divider_title')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="item_fields">
                            <div class="form-group">
                                <label class="form-label" for="title">Title of the Menu Item</label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" id="title"
                                       name="title"
                                       placeholder="Title" value="{{ old('title', $menuItem->title) }}"
                                       autofocus>
                                @error('title')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <x-forms.select label="Title Font Type"
                                        name="title_font_type"
                        >
                            @foreach(['Normal' => 'fw-normal', 'Bold' => 'fw-bold', 'Italic' => 'fst-italic', 'Underline' => 'text-reset', 'Strikethrough' => 'text-decoration-line-through'] as $label => $value)
                                <x-forms.select-item :value="$value" :label="$label"
                                                     :selected="old('title_font_type', $menuItem->title_font_type)"/>
                            @endforeach
                        </x-forms.select>


                        <x-forms.textbox
                                label="Title Font Size"
                                name="title_font_size"
                                :value="old('title_font_size', $menuItem->title_font_size ?? '')"
                                description="A value should be like 12px, 1.2em, 2rem"
                        ></x-forms.textbox>

                        @include('components.backend.menu-items.fields.color', ['label' => 'Title Colour', 'name' => 'title_color', 'value' => $menuItem->title_color])

                        <div class="item_fields">

                            <div id="url_field" class="form-group">
                                <label class="form-label" for="url">URL for the Menu Item</label>
                                <input type="text" class="form-control @error('url') is-invalid @enderror" id="url"
                                       name="url"
                                       placeholder="URL" value="{{ old('url', $menuItem->url) }}">
                                @error('url')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div id="target_field" class="form-group">
                                <label class="form-label" for="target">Open In</label>
                                <select name="target" id="target"
                                        class="form-control @error('target') is-invalid @enderror">
                                    <option
                                        value="_self" @if(old('target', $menuItem->target) === '_self') selected @endif>
                                        Same Tab/Window
                                    </option>
                                    <option
                                        value="_blank" @if(old('target', $menuItem->target) === '_blank') selected @endif>
                                        New Tab/Window
                                    </option>
                                </select>
                                @error('target')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="icon_class">Font Icon class for the Menu Item
                                    {{--<a target="_blank" href="https://themes-pixeden.com/font-demos/7-stroke/index.html">(Use Stroke 7 Icon Font Set by Pixeden)</a>--}}
                                    <a target="_blank" href="https://fontawesome.com/">(Font Awesome)</a>
                                </label>
                                <input type="text" class="form-control @error('icon_class') is-invalid @enderror"
                                       id="icon_class" name="icon_class"
                                       placeholder="Icon Class (optional)"
                                       value="{{ old('icon_class', $menuItem->icon_class) }}"
                                       autofocus>
                                @error('icon_class')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            @include('components.backend.menu-items.fields.color', ['label' => 'Icon Colour', 'name' => 'icon_color', 'value' => $menuItem->icon_color])

                            <div class="form-group">
                                <label class="form-label" for="roles"><i class="fas fa-cog"></i> Role Required</label>
                                <select id="roles"
                                        multiple
                                        tabindex="-1"
                                        aria-hidden="true"
                                        class="select form-control @error('roles') is-invalid @enderror"
                                        name="roles[]"
                                >
                                    <option value="">No Role</option>
                                    @foreach(\App\Models\Role::getConstants('ROLE_') as $roleName)
                                        <option value="{{ $roleName }}" @if(in_array($roleName, old('roles') ?: ($menuItem->roles ?? []))) selected @endif>{{ $roleName }}</option>
                                    @endforeach
                                </select>
                                <p class="form-text">Select user roles that you want to see the menu item, otherwise, leave it empty.</p>
                                @error('roles')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="permissions"><i class="fas fa-cog"></i> Permissions Required</label>
                                <select id="permissions"
                                        multiple
                                        tabindex="-1"
                                        aria-hidden="true"
                                        class="select form-control @error('permissions') is-invalid @enderror"
                                        name="permissions[]"
                                >
                                    @foreach(\App\Repositories\PermissionRepository::getPermissionGroup() as $group => $perms)
                                        <optgroup class="p-2" label="{{ $group }}">
                                            @foreach($perms as $perm)
                                                <option value="{{ $perm['name'] }}" @if(in_array($perm['name'], old('permissions', $menuItem->permissions ?? []))) selected @endif>{{ $perm['action'] }}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                                <p class="description">Not require any permission if leave it empty</p>
                                @error('permissions')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                        </div>

                        <button type="button" class="btn-shadow btn btn-danger text-white" onClick="resetForm('itemFrom')">
                            <i class="fas fa-redo"></i>
                            <span>Reset</span>
                        </button>

                        <button type="submit" class="btn-shadow btn btn-primary text-white">
                            @if($menuItem->exists)
                                <i class="fas fa-arrow-circle-up"></i>
                                <span>Update</span>
                            @else
                                <i class="fas fa-plus-circle"></i>
                                <span>Create</span>
                            @endif
                        </button>

                    </div>
                </form>
            </div>
            <!-- /.card -->
        </div>
    </div>
@endsection

@push('js')
    <script type="text/javascript">
        function setItemType(){
            let typeEl = $('select[name="type"]');
            switch (typeEl.val()) {
                case '{{ \App\Models\MenuItem::TYPE_DIVIDER }}': {
                    $('#divider_fields').removeClass('d-none');
                    $('.item_fields').addClass('d-none');
                    break;
                }
                case '{{ \App\Models\MenuItem::TYPE_TOGGLE_ICON }}':
                case '{{ \App\Models\MenuItem::TYPE_TOGGLE_TEXT }}':
                default: {
                    $('#divider_fields').addClass('d-none');
                    $('.item_fields').removeClass('d-none');
                    $('#url_field').removeClass('d-none');
                    $('#target_field').removeClass('d-none');
                    break;
                }
            }
        }

        setItemType();
        $('input[name="type"]').change(setItemType);
    </script>
@endpush