@extends('admin.lyoute.masterpage2')

@section('page_title', 'ایجاد منوی جدید')
@section('page_description', 'فرم ثبت منوی جدید')

@section('main_section')
    <div class="container-fluid">
        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show mb-4">
                <i class="fas fa-exclamation-triangle ml-2"></i>
                <strong>خطاهای زیر را بررسی کنید:</strong>
                <ul class="mb-0 mt-2">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="alert" aria-label="close">
                </button>
            </div>
        @endif

        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">
                            <i class="fas fa-plus-circle ml-2"></i>

                            @if(isset($menu))
                                ویرایش منو
                            @else
                                ایجاد منوی جدید
                            @endif
                        </h4>
                        <a href="{{ route('admin.menus.index') }}" class="btn btn-light btn-sm">
                            <i class="fas fa-arrow-right ml-2"></i>
                            بازگشت به لیست
                        </a>
                    </div>




                    @if(isset($menu))

                        <form action="{{ route('admin.menus.update' , $menu->id) }}" method="POST">
                            @method('PUT')

                    @else


                        <form action="{{ route('admin.menus.store') }}" method="POST">

                    @endif


                        @csrf

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <!-- اطلاعات اصلی -->
                                    <div class="card mb-4">
                                        <div class="card-header bg-light">
                                            <h5 class="mb-0">اطلاعات منو</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="title" class="form-label">عنوان منو *</label>
                                                <input type="text"
                                                       name="title"
                                                       id="title"
                                                       class="form-control @error('title') is-invalid @enderror"
                                                       value="@if(isset($menu)){{$menu->title}} @else{{old('title')}}@endif"
                                                       placeholder="مثال: صفحه اصلی"
                                                       required>
                                                @error('title')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group">
                                                <label for="url" class="form-label my-1">آدرس (URL)</label>
                                                <input type="text"
                                                       name="url"
                                                       id="url"
                                                       class="form-control @error('url') is-invalid @enderror"
                                                       value="@if(isset($menu)){{$menu->url}} @else{{old('url')}}@endif"
                                                       placeholder="مثال: / یا /products یا https://example.com">
                                                <small class="form-text text-muted">
                                                    برای منوهای والد می‌توانید خالی بگذارید
                                                </small>
                                                @error('url')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group">
                                                <label for="parent_id" class="form-label my-1">منوی والد</label>
                                                <select name="parent_id"
                                                        id="parent_id"
                                                        class="form-control @error('parent_id') is-invalid @enderror">
                                                    <option value="">بدون والد (منوی اصلی)</option>
                                                    @foreach($parentMenus as $parent)
                                                        <option value="{{ $parent->id }}"
                                                                @if(old('parent_id') == $parent->id)
                                                                    selected
                                                                @elseif(isset($menu) && $menu->parent_id == $parent->id)
                                                                    selected
                                                            @endif>
                                                            {{ $parent->title }}

                                                        </option>
                                                    @endforeach
                                                </select>
                                                <small class="form-text text-muted">
                                                    برای ایجاد زیرمنو، یک منوی والد انتخاب کنید
                                                </small>
                                                @error('parent_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <!-- تنظیمات -->
                                    <div class="card mb-4">
                                        <div class="card-header bg-light">
                                            <h5 class="mb-0">تنظیمات</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="type" class="form-label">نوع منو * </label>
                                                <select name="type"
                                                        id="type"
                                                        class="form-control @error('type') is-invalid @enderror"
                                                        required>

                                                    @foreach($menuTypes as $key => $label)

                                                        <option value="{{ $key }}"
                                                                @if(old('type') == $key)
                                                                    selected

                                                                @elseif(isset($menu) && $menu->type == $key)
                                                                    selected

                                                            @endif>
                                                            {{ $label }}


                                                        </option>

                                                    @endforeach
                                                </select>
                                                @error('type')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group">
                                                <label for="target" class="form-label my-1">نحوه باز کردن لینک</label>
                                                <select name="target"
                                                        id="target"
                                                        class="form-control">
                                                    <option value="_self" @if( old('target') == '_self' || (isset($menu) && $menu->target=='_self'))selected @endif>
                                                        در همین پنجره
                                                    </option>
                                                    <option value="_blank" @if( old('target') == '_blank' || (isset($menu) && $menu->target=='_blank'))selected @endif>
                                                        در پنجره جدید
                                                    </option>
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label for="icon" class="form-label my-1">آیکون</label>
                                                <div class="input-group">


                                                <input type="text"
                                                       name="icon"
                                                       id="icon"
                                                       class="form-control @error('icon') is-invalid @enderror"
                                                       value="{{ old('icon') }}"
                                                       placeholder="مثال: fas fa-home">
                                                <button type="button" class="btn btn-outline-secondary m-1" id="openIconPicker">
                                                    <i class=" fas fa-icons"></i>
                                                </button>

                                                </div>

                                                <small class="form-text text-muted">
                                                    کد آیکون FontAwesome (اختیاری)
                                                </small>
                                                @error('icon')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>

                                            <div class="form-group">
                                                <div class="form-check">
                                                    <input type="hidden" name="status" value="0"></input>
                                                    <input type="checkbox"
                                                           name="status"
                                                           id="status"
                                                           class="form-check-input"
                                                           value="1"
                                                      @if(old('status',isset($menu)? $menu->status : 1)==1) checked @endif>
                                                    <label for="status" class="form-check-label">
                                                        منو فعال باشد
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- دکمه‌ها -->
                                    <div class="card">
                                        <div class="card-body">
                                            <button type="submit" class="btn btn-success btn-lg btn-block">
                                                <i class="fas fa-save ml-2"></i>
                                               {{isset($menu) ? ' ذخیره تغییرات ' : 'ایجاد منو'}}
                                            </button>
                                            <a href="{{ route('admin.menus.index') }}" class="btn btn-outline-danger btn-block mt-2">
                                                <i class="fas fa-times ml-2"></i>
                                                انصراف
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    
    <!-- انتخاب آیکون -->
    <div class="modal fade" id="iconPickerModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">انتخاب آیکون</h5>

                    <button type="button" class="close" data-bs-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row" id="iconList">
                        <!-- آیکون‌ها با AJAX لود می‌شوند -->
                    </div>
                </div>
            </div>
        </div>
    </div>


<script>
    const iconSuggestions = [
    'fas fa-home', 'fas fa-shopping-cart', 'fas fa-box',
    'fas fa-user', 'fas fa-info-circle', 'fas fa-phone',
    'fas fa-envelope', 'fas fa-tags', 'fas fa-star',
    'fas fa-heart', 'fas fa-shopping-bag', 'fas fa-store'
    ];

    // نمایش پیشنهادها
    document.getElementById('icon').addEventListener('focus', function() {
    const existingSuggestions = this.parentNode.querySelector('.icon-suggestions');
    if (existingSuggestions) {
    existingSuggestions.remove();
    }

    const suggestionsDiv = document.createElement('div');
    suggestionsDiv.className = 'icon-suggestions mt-2';

    const title = document.createElement('small');
    title.className = 'd-block mb-2 text-muted';
    title.textContent = 'پیشنهادها:';

    const buttonsContainer = document.createElement('div');
    buttonsContainer.className = 'd-flex flex-wrap';

    iconSuggestions.forEach(icon => {
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'btn btn-sm btn-outline-secondary m-1';

    const iconName = icon.replace('fas fa-', '');

    button.innerHTML = <i class="${icon} ml-1"></i> ${iconName};

    button.onclick = function() {
    document.getElementById('icon').value = icon;
    };

    buttonsContainer.appendChild(button);
    });

    suggestionsDiv.appendChild(title);
    suggestionsDiv.appendChild(buttonsContainer);

    this.parentNode.insertBefore(suggestionsDiv, this.nextSibling);
    });


</script>
@endsection