@extends('app.admin.layout.layout')
@section('title',__('Create Menu Category'))
@push('css')
    <link rel="stylesheet" href="{{asset('/assets/admin/plugins/src/image-uploader/uploader.css')}}">
@endpush
@section('content')
    <style>
        .form-control{
            border-radius: 10px;
            border: 1px solid #7b7bff;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;        }
        .form-label{
            font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        }
        .btn-success:hover{
            background-color: #7b7bff !important;
        }
        .layout-top-spacing{
            margin: 20px;
            border-radius: 15px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }
        .form-select{
            background-image: none !important;
        }
        /* Ümumi container üçün stil */
.mt-3 {
    margin-top: 1rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

/* Label üçün stil */
label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

/* Select box üçün stil */
.tom-select {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tom-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Select elementinin genişliyini təyin etmək üçün */
.w-full {
    width: 100%;
}

/* Option elementləri üçün stil */
select option {
    padding: 0.5rem;
}

/* Mobil cihazlar üçün uyğunluq */
@media (max-width: 768px) {
    .tom-select {
        font-size: 0.9rem;
        padding: 0.4rem;
    }
}

    </style>
    <br>



    <div class="card layout-top-spacing">
        <div class="card-body">

            <br><br>
            <div class="page-title-container">
                <div class="row">
                    <!-- Title Start -->
                    <div class="col-12 col-md-7">
                        <h1 class="mb-0 pb-0 display-4" id="title">@lang('All Categories')</h1>
                        <nav class="breadcrumb-container d-inline-block" aria-label="breadcrumb">
                                <ul class="breadcrumb pt-0">
                                        <li class="breadcrumb-item"><a href="{{ route('admin:home') }}">@lang('Home')</a></li>
                                        <li class="breadcrumb-item"><a href="{{ route('admin:menuCategories.index') }}">@lang('Categories')</a></li>
                                        <li class="breadcrumb-item"><a href="{{ route('admin:menuCategories.create') }}">@lang('Create Category')</a></li>
                                </ul>
                        </nav>
                    </div>

                    <div class="col-12 col-md-5 d-flex align-items-start justify-content-end">
                        <a href="{{ route('admin:menuCategories.index') }}">
                            <button type="button" class="btn btn-outline-primary btn-icon btn-icon-start w-100 w-md-auto">
                                <i data-acorn-icon="arrow-left" class="me-2" data-acorn-size="17"></i>
                                <span>@lang('Back')</span>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
            <form @class(["row needs-validation","was-validated" => $errors->any()]) action="{{route('admin:menuCategories.store')}}" method="post" novalidate enctype="multipart/form-data">
                @csrf

                <x-admin.form.input
                    :label="__('Image')"
                    custom-div-class="col-12 col-lg-12"
                    name="image"
                    type="file"
                    :value="old('image')"
                    nullable/>


                    <x-admin.form.input
                        :label="__('Menu Category Az')"
                        name="menu_category_az"
                        custom-div-class="col-12 col-lg-4"
                        :value="old('menu_category_az')"
                        required/>

                    <x-admin.form.input
                        :label="__('Menu Category Ru')"
                        name="menu_category_ru"
                        custom-div-class="col-12 col-lg-4"
                        :value="old('menu_category_ru')"
                        required/>

                    <x-admin.form.input
                        :label="__('Menu Category En')"
                        name="menu_category_en"
                        custom-div-class="col-12 col-lg-4"
                        :value="old('menu_category_en')"
                        required/>

                                            @php
                        $viewOptions = [
                            '1' => 'Active',
                            '2' => 'Deactive',
                        ];
                    @endphp

                    <x-admin.form.select
                        :label="__('Active or Deactive')"
                        name="position"
                        custom-div-class="col-12 col-lg-5"
                        :selected="old('position')"
                        nullable
                        :options="$viewOptions"
                    />
                


                    @php
                        $viewOptions = [
                            'Caspian' => 'Eat',
                            'Cresent' => 'Drink',
                            'Breakfast' => 'Breakfast',
                        ];
                    @endphp

                    <x-admin.form.select
                        :label="__('Select Page')"
                        name="option"
                        custom-div-class="col-12 col-lg-5"
                        :value="old('option')"
                        nullable
                        :options="$viewOptions"
                    />

                    <x-admin.form.input
                            :label="__('Number')"
                            name="number"
                            custom-div-class="col-12 col-lg-2"
                            :value="old('number')"
                            nullable/>

                        <div class="mt-3">
                            <label>@lang('Select Main Category')</label>
                            <div class="mb-3">
                                <select name="menu_parent" class="tom-select w-full">
                                    <option value=""> @lang('Select main category') </option>
                                    @foreach($menuCategories as $menuCategory)
                                        <option @selected(old('menu_parent')) value="{{$menuCategory->getAttribute('id')}}"> {{ $menuCategory->menu_category() }} </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                    {{-- <div class="col-span-12 mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="use-background" name="show_in_main" @checked(old('show_in_main'))>
                            <label class="form-check-label" for="use-background">@lang('Show in main')</label>
                        </div>
                    </div> --}}



                <x-admin.form.submit-button/>
            </form>
        </div>
    </div>
@endsection
@push('js')
    <script src="{{asset('/assets/admin/plugins/src/image-uploader/uploader.js')}}"></script>
    <script>
        $("#partners").imageUploader({
            label:"{{__('Drag & Drop files here or click to browse')}}",
            imagesInputName: 'gallery',
            maxFiles: 50,
            maxSize: '2 * 1024 * 1024',
            allowedExt: 'jpg|jpeg|gif|png|webp|svg',
        });
    </script>

    <script src="{{asset('/assets/admin/plugins/src/tinymce/tinymce.min.js')}}"></script>
    <script>
        let tinyDarkActive = JSON.parse(localStorage.getItem("theme")).settings.layout.darkMode;
        tinymce.init({
            selector: 'textarea',
            plugins: [
                'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
                'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
                'media', 'table', 'emoticons', 'help'
            ],
            skin: tinyDarkActive ? "oxide-dark" : null,
            content_css: tinyDarkActive ? "dark" : null,
            @if(in_array(app()->getLocale(),['az','ru']))
            language: '{{app()->getLocale()}}'
            @endif
        });
    </script>
@endpush
