@extends('admin.layout.index')
@section('script')
    <script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
    <style>
        .custom-file-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

        .img-thumbnail {
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }
    </style>
    <script>
        // Show File Name and Preview
        $('#primary_image').change(function () {
            var fileName = $(this).val();
            var fileNameShort = fileName.split('\\').pop();
            $(this).next('.custom-file-label').html(fileNameShort);

            // Show preview
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#primary_image_preview').attr('src', e.target.result).show();
                }
                reader.readAsDataURL(this.files[0]);
            }
        });

        $('#icon').change(function () {
            var fileName = $(this).val();
            var fileNameShort = fileName.split('\\').pop();
            $(this).next('.custom-file-label').html(fileNameShort);

            // Show preview
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#icon_preview').attr('src', e.target.result).show();
                }
                reader.readAsDataURL(this.files[0]);
            }
        });

        $('#banner_image').change(function () {
            var fileName = $(this).val();
            var fileNameShort = fileName.split('\\').pop();
            $(this).next('.custom-file-label').html(fileNameShort);

            // Show preview
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#banner_image_preview').attr('src', e.target.result).show();
                }
                reader.readAsDataURL(this.files[0]);
            }
        });

        // Handle old file values on page load
        $(document).ready(function () {
            // Check if there are old file values and show them
            @if(old('primary_image'))
            $('#primary_image').next('.custom-file-label').html('{{ old("primary_image") }}');
            @endif

            @if(old('icon'))
            $('#icon').next('.custom-file-label').html('{{ old("icon") }}');
            @endif

            @if(old('banner_image'))
            $('#banner_image').next('.custom-file-label').html('{{ old("banner_image") }}');
            @endif
        });
        CKEDITOR.replace('description', {
            language: 'fa',
            filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
            filebrowserUploadMethod: 'form'
        });
    </script>
@endsection
@section('content')

    <div class="col-xl-12 col-md-12 mb-4 p-4 bg-white">
        <div class="mb-4 text-center text-md-right">
            <h5 class="font-weight-bold">تنظیمات دسته بندی : {{ $category->name }}</h5>
        </div>
        <hr>

        @include('admin.sections.errors')

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

            <div class="form-row">
                <div class="form-group col-md-3">
                    <label for="name">نام</label>
                    <input class="form-control" id="name" name="name" type="text"
                           value="{{ old('name', $category->name) }}">
                </div>
                <div class="form-group col-md-3">
                    <label for="name">اولویت</label>
                    <input class="form-control" id="priority" name="priority" type="number"
                           value="{{ old('priority', $category->priority) }}">
                </div>
                <div class="form-group col-md-3">
                    <label for="name">alias</label>
                    <input class="form-control" id="alias" name="alias" type="text"
                           value="{{ old('alias', $category->alias) }}">
                </div>


                <div class="form-group col-md-3">
                    <label for="parent_id">والد</label>
                    <select class="form-control" id="parent_id" name="parent_id">
                        <option value="0">بدون والد</option>
                        @foreach ($parentCategories as $parentCategory)
                            <option
                                value="{{ $parentCategory->id }}" {{ old('parent_id', $category->parent_id) == $parentCategory->id ? 'selected' : '' }}>{{ $parentCategory->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group col-md-3">
                    <label for="is_active">وضعیت</label>
                    <select class="form-control" id="is_active" name="is_active">
                        <option
                            value="1" {{ old('is_active', $category->getRawOriginal('is_active')) == '1' ? 'selected' : '' }}>
                            فعال
                        </option>
                        <option
                            value="0" {{ old('is_active', $category->getRawOriginal('is_active')) == '0' ? 'selected' : '' }}>
                            غیرفعال
                        </option>
                    </select>
                </div>
{{--                <div class="form-group col-md-3">--}}
{{--                    <label for="is_active">واحد اندازه گیری</label>--}}
{{--                    <select class="form-control" id="measure_id" name="measure_id">--}}
{{--                        <option value="">بدون واحد اندازه گیری</option>--}}
{{--                        @foreach($measures as $measure)--}}
{{--                            <option--}}
{{--                                value="{{ $measure->id }}" {{ old('measure_id', in_array($measure->id,$category->Measures()->pluck('id')->toArray()) ? $measure->id : '') == $measure->id ? 'selected' : '' }}>{{ $measure->title }}</option>--}}
{{--                        @endforeach--}}
{{--                    </select>--}}
{{--                </div>--}}
                <div class="col-md-5"></div>
                <div class="form-group col-md-4">
                    <label for="primary_image">عکس شاخص</label>
                    <div class="custom-file">
                        <input type="file" name="primary_image" class="custom-file-input" id="primary_image">
                        <label class="custom-file-label" for="primary_image"
                               style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> انتخاب
                            فایل </label>
                    </div>
                    <div class="mt-2">
                        <img id="primary_image_preview"
                             src="{{ old('primary_image') ? asset('storage/' . old('primary_image')) : (isset($category->image) ? asset(env('CATEGORY_IMAGES_UPLOAD_PATH') . $category->image) : '') }}"
                             style="max-width: 100px; max-height: 100px; display: {{ old('primary_image') || isset($category->image) ? 'block' : 'none' }};"
                             class="img-thumbnail">
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="icon">آیکون</label>
                    <div class="custom-file">
                        <input type="file" name="icon" class="custom-file-input" id="icon">
                        <label class="custom-file-label" for="icon"
                               style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> انتخاب
                            فایل </label>
                    </div>
                    <div class="mt-2">
                        <img id="icon_preview"
                             src="{{ old('icon') ? asset('storage/' . old('icon')) : (isset($category->icon) ? asset(env('CATEGORY_IMAGES_UPLOAD_PATH') . $category->icon) : '') }}"
                             style="max-width: 100px; max-height: 100px; display: {{ old('icon') || isset($category->icon) ? 'block' : 'none' }};"
                             class="img-thumbnail">
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="banner_image">تصویر صفحه دسته بندی</label>
                    <div class="custom-file">
                        <input type="file" name="banner_image" class="custom-file-input" id="banner_image">
                        <label class="custom-file-label" for="banner_image"
                               style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> انتخاب
                            فایل </label>
                    </div>
                    <div class="mt-2">
                        <img id="banner_image_preview"
                             src="{{ old('banner_image') ? asset('storage/' . old('banner_image')) : (isset($category->banner_image) ? asset(env('CATEGORY_IMAGES_UPLOAD_PATH') . $category->banner_image) : '') }}"
                             style="max-width: 100px; max-height: 100px; display: {{ old('banner_image') || isset($category->banner_image) ? 'block' : 'none' }};"
                             class="img-thumbnail">
                    </div>
                </div>
                <div class="col-12">
                    <hr>
                </div>
                {{--                <div class="form-group col-md-4">--}}
                {{--                    <label title="تغییرات قیمت برای تمامی محصولات مربوط به این دسته بندی اعمال میگردد" for="price_modify">تغییرات قیمت(%)</label>--}}
                {{--                    <input title="تغییرات قیمت برای تمامی محصولات مربوط به این دسته بندی اعمال میگردد" class="form-control" id="price_modify" name="price_modify" type="number" min="-100" max="100" value="{{ old('price_modify', 0) }}">--}}
                {{--                </div>--}}
                {{--                <div class="form-group col-12">--}}
                {{--                    <div class="alert alert-info d-flex justify-content-between">--}}
                {{--                        <label for="option_price_modify" class="m-0">اعمال تغییرات قیمت برای اقلام افزوده کالا ها</label>--}}
                {{--                        <input type="checkbox" id="option_price_modify" name="option_price_modify" {{ old('option_price_modify') ? 'checked' : '' }}>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
                <div class="col-12">
                    <hr>
                </div>

{{--                @if(count($category->children)==0 and $category->parent_id!=0)--}}
{{--                    <div class="col-md-12">--}}
{{--                        <div class="alert alert-warning d-flex justify-content-between">--}}
{{--                            <label for="depends_on_quantity" class="m-0">در روش های ارسال این کالا به تعداد وابسته باشد--}}
{{--                                ؟</label>--}}
{{--                            <input--}}
{{--                                {{ old('depends_on_quantity', $category->depends_on_quantity)==1 ? 'checked' : '' }} type="checkbox"--}}
{{--                                id="depends_on_quantity" name="depends_on_quantity"--}}
{{--                                value="{{ old('depends_on_quantity', $category->depends_on_quantity) }}">--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                @endif--}}

                <div class="form-group col-md-12">
                    <label for="short_description">توضیحات مختصر</label>
                    <textarea class="form-control" id="short_description"
                              name="short_description">{{ old('short_description', $category->short_description) }}</textarea>
                </div>
                <div class="form-group col-md-12">
                    <label for="description">توضیحات</label>
                    <textarea class="form-control" id="description"
                              name="description">{{ old('description', $category->description) }}</textarea>
                </div>

                <div class="form-group col-md-12">
                    <label for="name">Meta Tag Keyword</label>
                    <input class="form-control" id="meta_keyword" name="meta_keyword" type="text"
                           value="{{ old('meta_keyword', $category->meta_keyword) }}">
                </div>

                <div class="form-group col-md-12 mt-2">
                    <label for="meta_description">Meta Tag Description</label>
                    <textarea rows="4" class="form-control" id="meta_description"
                              name="meta_description">{{ old('meta_description', $category->meta_description) }}</textarea>
                </div>
            </div>
            <button class="btn btn-primary mt-5" type="submit">ویرایش</button>
            <a href="{{ route('admin.categories.index') }}" class="btn btn-dark mt-5 mr-3">بازگشت</a>
        </form>
    </div>

@endsection