@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>
            </div>
        </div>

        <div class="card-body pt-0">

            <form action="{{ route('admin.categories.update',$category->id) }}"
                method="POST"
                enctype="multipart/form-data">

                @csrf
                @method('PUT')

                <div class="row">

                    <div class="mb-3 col-lg-6">
                        <label class="form-label">نام</label>

                        <input
                            type="text"
                            name="name"
                            value="{{ old('name',$category->name) }}"
                            class="form-control @error('name') is-invalid @enderror">

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

                    <div class="mb-3 col-lg-6">
                        <label class="form-label">لینک</label>

                        <input
                            type="text"
                            name="link"
                            value="{{ old('link',$category->link) }}"
                            class="form-control @error('link') is-invalid @enderror">

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

                </div>

                <div class="row">

                    <div class="mb-3 col-lg-6">

                        <label class="form-label">
                            تصویر جدید
                        </label>

                        <input
                            type="file"
                            name="image"
                            class="form-control @error('image') is-invalid @enderror">

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

                        @if($category->image)
                        <div class="mt-3">
                            <img
                                src="{{ asset('uploads/categories/'.$category->image) }}"
                                alt="{{ $category->alt }}"
                                width="150"
                                class="img-thumbnail">
                        </div>
                        @endif

                    </div>

                    <div class="mb-3 col-lg-6">

                        <label class="form-label">ALT تصویر</label>

                        <input
                            type="text"
                            name="alt"
                            value="{{ old('alt',$category->alt) }}"
                            class="form-control @error('alt') is-invalid @enderror">

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

                    </div>

                </div>

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

                <div class="mb-3">

                    <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]"
                                    value="{{ $faq['question'] ?? '' }}"
                                    placeholder="سوال"
                                    class="form-control @error('faqs.'.$key.'.question') is-invalid @enderror">

                                @error('faqs.'.$key.'.question')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror

                            </div>

                            <div class="col-md-5">

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

                                @error('faqs.'.$key.'.answer')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror

                            </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>

                <div class="mb-3">

                    <label class="form-label">
                        توضیحات
                    </label>

                    <textarea
                        id="desc"
                        name="desc"
                        class="form-control">{{ old('desc',$category->desc) }}</textarea>

                </div>

                <button
                    type="submit"
                    class="btn btn-primary">
                    ذخیره تغییرات
                </button>

            </form>

        </div>

    </div>

    <x-ErrorComponent />

</div>

@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]"
                        placeholder="سوال"
                        class="form-control">
                </div>

                <div class="col-md-5">
                    <input
                        type="text"
                        name="faqs[${index}][answer]"
                        placeholder="پاسخ"
                        class="form-control">
                </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();
    });

    $(function() {

        $('#desc').summernote({
            height: 300
        });

        updateDeleteButtons();

    });
</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