@extends('admin.layouts.main')

@section('title', 'Edit Sub Menu')

@section('menu', 'Sub Menu')

@section('content')
    <!--begin::Container-->
    <div id="kt_content_container" class="app-container container-fluid">
        <form id="form-create-menu" method="post" action="{{ route('admin.menu.submenu.update', $subMenu->id) }}"
                enctype="multipart/form-data" autocomplete="off">
            @csrf
            <div class="card card-flush">
                <div class="card-header">
                    <h3 class="card-title">Edit Sub Menu</h3>
                </div>
                <div class="card-body py-5 px-15">

                    <div class="row">
                        <div class="col-lg-6 col-sm-12">
                            <div class="mb-5">
                                <label class="form-label" for="menu-id">Menu<span class="text-danger ms-1">*</span></label>
                                <x-select-menu name="menu_id" id="menu-id" menuId="{{ $subMenu->menu_id }}" />
                                @if ($errors->has('menu_id'))
                                    <span class="error">{{ $errors->first('menu_id') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-12">
                            <div class="mb-5">
                                <label class="form-label" for="sub-menu">Nama Sub Menu<span class="text-danger ms-1">*</span></label>
                                <input type="text" class="form-control" name="sub_menu" id="sub-menu" placeholder="Masukkan nama sub menu" value="{{ old('sub_menu', $subMenu->sub_menu) }}" required>
                                @if ($errors->has('sub_menu'))
                                    <span class="error">{{ $errors->first('sub_menu') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-sm-12">
                            <div class="mb-5">
                                <label class="form-label" for="page-id">Page<span class="text-danger ms-1">*</span></label>
                                <x-select-page name="page_id" id="page-id" pageId="{{ $subMenu->page_id }}" />
                                @if ($errors->has('page_id'))
                                    <span class="error">{{ $errors->first('page_id') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-12">
                            <div class="mb-5">
                                <label class="form-label" for="status">Status<span class="text-danger ms-1">*</span></label>
                                <x-select-post-published-status name="status" id="status" value="{{ $subMenu->status }}" />
                                @if ($errors->has('status'))
                                    <span class="error">{{ $errors->first('status') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer px-15">
                    <div class="float-end">
                        <a class="btn btn-secondary me-1" href="{{ route('admin.menu.index') }}">Kembali/Batal</a>
                        <button type="submit" class="btn btn-primary ms-2">Simpan</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--end::Container-->
@endsection

@push('js')
    <!-- Main Script -->
    <script>
        $(document).ready(function () {
            /* Set Nav-Link Active */
            $('#menu-link-menus').addClass('active');

            /* Select2 on Change Listener */
            $('.form-select').on('change', function(){
                $(this).valid();
            });
        });
    </script>
    <!-- Main Script -->

    <!-- Validation -->
    <script>
        $(document).ready(function () {
            /* Add custom method */
            jQuery.validator.addMethod("title", function (value, element) {
                return this.optional(element) || /^[A-Z0-9 _]*[A-Z0-9][A-Z0-9]*$/i.test(value);
            });

            /* Create room type validation */
            $("#form-create-menu").validate({
                ignore: [],
                rules: {
                    menu: {
                        required: true,
                        title: true,
                        maxlength: 50
                    },
                    page_id: {
                        required: true
                    },
                    status: {
                        required: true
                    }
                },
                messages: {
                    menu: {
                        required: "Nama menu tidak boleh kosong",
                        title: "Nama menu hanya boleh berisi huruf, angka, spasi, dan underscore",
                        maxlength: "Nama menu maksimal 50 karakter"
                    },
                    page_id: {
                        required: "Page tidak boleh kosong"
                    },
                    status: {
                        required: "Status tidak boleh kosong"
                    }
                },
                errorPlacement: function (error, element) {
                    if (element.hasClass('form-select') && element.next('.select2-container').length) {
                        error.insertAfter(element.next('.select2-container'));
                    } else if (element.attr('name') === 'content') {
                        error.insertAfter('.error-content');
                    } else {
                    }
                }
            });
        });
    </script>
    <!-- Validation -->
@endpush