@extends('panel.admin.layouts.layout')



@section('content')


<div class="col-12">
    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col">
                    <h4 class="card-title">افزودن دسته بندی مادر</h4>
                </div><!--end col-->
            </div> <!--end row-->
        </div><!--end card-header-->
        <div class="card-body pt-0">
            <form id="form-validation-2" class="form" action="{{route('admin.categories.store')}}" method="post" enctype="multipart/form-data">
                @csrf
                @if(request()->has('parent_id'))
                <input type="hidden"
                    name="parent_id"
                    value="{{ request('parent_id') }}">
                @endif
                <div class="row">
                    <div class="mb-2 col-lg-6 col-md-12">
                        <label for="name" class="form-label">نام</label>
                        <input value="{{old('name')}}" class="form-control @error('name') error @enderror" style="text-align: right; -webkit-appearance: none;" type="text" id="name" name="name" placeholder="دستگاه پر کن">

                    </div>
                    <div class="mb-2 col-lg-6 col-md-12">
                        <label for="link" class="form-label">لینک</label>
                        <input value="{{old('link')}}" class="form-control @error('link') error @enderror" style="text-align: right; -webkit-appearance: none;" type="text" id="link" name="link" placeholder="دستگاه_پرکن_مایعات">

                    </div>
                </div>

                <div class="row">
                    <div class="mb-2 col-lg-6 col-md-12">
                        <label for="desc" class="form-label">تصویر دسته بندی</label>
                        <input name="image" type="file" class="form-control @error('image') error @enderror" id="inputGroupFile02">

                    </div>
                    <div class="mb-2 col-lg-6 col-md-12">
                        <label for="alt" class="form-label">ALT تصویر</label>
                        <input value="{{old('alt')}}" class="form-control @error('alt') error @enderror" style="text-align: right; -webkit-appearance: none;" type="text" id="alt" name="alt" placeholder="دستگاه پر کن">

                    </div>
                </div>


                @php
                $faqs = old('faqs', [['question' => '', 'answer' => '']]);
                @endphp

                <label class="form-label">سوالات متداول</label>

                <div id="faq-container">

                    @foreach($faqs as $key => $faq)
                    <div class="row faq-item mb-2 align-items-center">

                        <div class="col-md-5">
                            <input
                                type="text"
                                name="faqs[{{$key}}][question]"
                                class="form-control @error('faqs.'.$key.'.question') error @enderror"
                                placeholder="سوال"
                                value="{{ $faq['question'] ?? '' }}">
                        </div>

                        <div class="col-md-5">
                            <input
                                type="text"
                                name="faqs[{{$key}}][answer]"
                                class="form-control @error('faqs.'.$key.'.question') error @enderror"
                                placeholder="پاسخ"
                                value="{{ $faq['answer'] ?? '' }}">
                        </div>

                        <div class="col-md-2 d-flex gap-2">
                            <button type="button" class="btn btn-success add-faq">
                                <i class="fas fa-plus"></i>
                            </button>

                            <button type="button" class="btn btn-danger remove-faq">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>

                    </div>
                    @endforeach

                </div>

                <div class="mb-2">
                    <label for="desc" class="form-label">توضیحات</label>
                    <textarea class="form-control" id="desc" name="desc"></textarea>
                </div>

                <br>
                <button type="submit" class="btn btn-primary">افزودن دسته بندی</button>
            </form><!--end form-->
        </div><!--end card-body-->

    </div><!--end card-->

    <x-ErrorComponent></x-ErrorComponent>
    @if(session('message'))
    <x-SucssesComponent></x-SucssesComponent>

    @endif
</div>


@endsection

@section('title')

افزودن دسته بندی

@endsection

@section('scripts')

<script>
    let index = $('.faq-item').length;

    function updateDeleteButtons() {

        let count = $('.faq-item').length;

        $('.remove-faq').prop('disabled', false);

        if (count <= 1) {
            $('.remove-faq').prop('disabled', true);
        }
    }

    $(document).on('click', '.add-faq', function() {

        $('#faq-container').append(`
            <div class="row faq-item mb-2 align-items-center">

                <div class="col-md-5">
                    <input
                        type="text"
                        name="faqs[${index}][question]"
                        class="form-control"
                        placeholder="سوال">
                </div>

                <div class="col-md-5">
                    <input
                        type="text"
                        name="faqs[${index}][answer]"
                        class="form-control"
                        placeholder="پاسخ">
                </div>

                <div class="col-md-2 d-flex gap-2">
                    <button type="button" class="btn btn-success add-faq">
                        <i class="fas fa-plus"></i>
                    </button>

                    <button type="button" class="btn btn-danger remove-faq">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>

            </div>
        `);

        index++;
        updateDeleteButtons();
    });

    $(document).on('click', '.remove-faq', function() {

        if ($('.faq-item').length > 1) {
            $(this).closest('.faq-item').remove();
        }

        updateDeleteButtons();
    });

    $(document).ready(function() {

        $('#desc').summernote();

        updateDeleteButtons();
    });
</script>

<script>
    $(document).ready(function() {
        $('#desc').summernote();
    });
</script>
@endsection


@section('style')


<script src="{{asset('assets/panel/css/sumernote/jquery.js')}}"></script>

<link href="{{asset('assets/panel/css/sumernote/sumernote.css')}}" rel="stylesheet" type="text/css" />
<script src="{{asset('assets/panel/css/sumernote/sumernote.js')}}"></script>


@endsection