@extends('panel.layouts.master')
@section('title','ویرایش محصول')

@section('content')
    <!-- begin::page loader-->
    @include('panel.layouts.sidebar')
    @include('panel.layouts.header')
    <style>
        .btn-custom{
            border-radius: 0;
            width: 5rem;
            height: 2.5rem;
            justify-content: center;
        }

        table input{
            text-align: center !important;
        }
    </style>
    <main class="main-content">
        <div class="card">
            <div class="card-body">
                <div class="card-title d-flex justify-content-between align-items-center">
                    <h6>ویرایش محصول</h6>
                </div>
                <form action="{{ route('products.update',$product->id) }}" method="post" class="needs-validation" novalidate enctype="multipart/form-data">
                    @csrf
                    @method('PATCH')
                    <div class="row">
                        <div class="col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="title">عنوان<span class="text-danger">*</span></label>
                                <input type="text" name="title" id="title" class="form-control mt-2 @error('title') is-invalid @enderror" value="{{ $product->title }}">
                                @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="slug">اسلاگ<span class="text-danger">*</span></label>
                                <input type="text" name="slug" id="slug" class="form-control mt-2 @error('slug') is-invalid @enderror" value="{{ $product->slug }}">
                                @error('slug')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="brand">برند/مدل<span class="text-danger">*</span></label>
                                <input type="text" name="brand" id="brand" class="form-control mt-2 @error('brand') is-invalid @enderror" value="{{ $product->brand }}">
                                @error('brand')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="price">قیمت (تومان)<span class="text-danger">*</span></label>
                                <input type="text" name="price" id="price" class="form-control mt-2 @error('price') is-invalid @enderror" value="{{ $product->price }}">
                                @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="discount">تخفیف (تومان)</label>
                                <input type="text" name="discount" id="discount" class="form-control mt-2 @error('discount') is-invalid @enderror" value="{{ $product->discount }}">
                                @error('discount')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="">دسته بندی<span class="text-danger">*</span></label>
                                <select name="category_id" id="category_id" class="form-control mt-2 @error('category_id') is-invalid @enderror">
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ $product->category_id == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="">کالکشن</label>
                                <select name="collection_id" id="collection_id" class="form-control mt-2 @error('collection_id') is-invalid @enderror">
                                    <option value="" {{ $product->collection_id == null ? 'selected' : '' }}>بدون کالکشن</option>
                                    @foreach($collections as $collection)
                                        <option value="{{ $collection->id }}" {{ $product->collection_id == $collection->id ? 'selected' : '' }}>{{ $collection->name }}</option>
                                    @endforeach
                                </select>
                                @error('collection_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="">وضعیت<span class="text-danger">*</span></label>
                                <select name="status" id="status" class="form-control mt-2 @error('status') is-invalid @enderror">
                                    <option value="0" {{ $product->status == '0' ? 'selected' : '' }}>منتشر نشده</option>
                                    <option value="1" {{ $product->status == '1' ? 'selected' : '' }}>منتشر شده</option>
                                </select>
                                @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-12 mt-3">
                            <div class="form-group">
                                <label for="desc">توضیحات</label>
                                <textarea name="desc" id="desc" class="form-control mt-2 editor @error('desc') is-invalid @enderror">{!! $product->desc !!}</textarea>
                                @error('desc')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 mt-3">
                            <div class="form-group">
                                <label for="main_image">تصویر اصلی (تک انتخابی)</label>
                                <input type="file" name="main_image" class="form-control" accept="main_image/jpeg,png,jpg">
                                @error('main_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6 mt-3">
                            <div class="form-group">
                                <label for="images">سایر تصاویر (چند انتخابی)</label>
                                <input type="file" name="images[]" class="form-control" accept="image/jpeg,png,jpg" multiple>
                                @error('images')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 mt-4">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" name="hasProperties" id="hasProperties" {{ $product->color ? '' : 'checked' }}>
                                <label class="custom-control-label" for="hasProperties">بدون رنگ و سایز</label>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 mt-3" id="count_sec" style="display: {{ $product->color ? 'inline' : 'none' }}">
                            <div class="form-group">
                                <label for="total_count">تعداد محصول<span class="text-danger">*</span></label>
                                <input type="number" name="total_count" id="total_count" min="0" class="form-control mt-2 @error('total_count') is-invalid @enderror" value="{{ $product->total_count }}">
                                @error('total_count')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-12 mt-3" id="properties_sec">
                            <div class="form-group">
                                <table class="table table-striped text-center">
                                    <thead class="thead-light">
                                    <tr>
                                        <th>سایز</th>
                                        <th>رنگ</th>
                                        <th>تعداد</th>
                                        <th>حذف</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody">
                                    @if($product->size)
                                        @foreach(json_decode($product->size) as $key => $size)
                                            <tr>
                                                <td>
                                                    <div class="form-group">
                                                        <div class="input-group mb-3">
                                                            <div class="input-group-prepend" title="فری سایز">
                                                                <div class="input-group-text">
                                                                    <input type="checkbox" name="free_sizes[]" value="{{ $key }}" {{ json_decode($product->size)[$key] == 0 ? 'checked' : '' }}>
                                                                </div>
                                                            </div>
                                                            <select name="sizes[]" class="form-control">
                                                                <option value="34" {{ $size == '34' ? 'selected' : ''}}>34</option>
                                                                <option value="36" {{ $size == '36' ? 'selected' : ''}}>36</option>
                                                                <option value="38" {{ $size == '38' ? 'selected' : ''}}>38</option>
                                                                <option value="40" {{ $size == '40' ? 'selected' : ''}}>40</option>
                                                                <option value="42" {{ $size == '42' ? 'selected' : ''}}>42</option>
                                                                <option value="44" {{ $size == '44' ? 'selected' : ''}}>44</option>
                                                                <option value="46" {{ $size == '46' ? 'selected' : ''}}>46</option>
                                                                <option value="48" {{ $size == '48' ? 'selected' : ''}}>48</option>
                                                                <option value="50" {{ $size == '50' ? 'selected' : ''}}>50</option>
                                                                <option value="52" {{ $size == '52' ? 'selected' : ''}}>52</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend" title="رنگ خاص">
                                                            <div class="input-group-text">
                                                                <input type="checkbox" name="special_colors[]" value="{{$key}}" {{ json_decode($product->color)[$key] == 'special' ? 'checked' : '' }}>
                                                            </div>
                                                        </div>
                                                        <input type="text" name="colors[]" class="sample-selector-hex form-control text-left colorpicker-element" value="{{ json_decode($product->color)[$key] == 'special' ? null : json_decode($product->color)[$key] }}" {{ json_decode($product->color)[$key] == 'special' ? 'readonly' : '' }} dir="ltr" required>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="number" name="counts[]" class="form-control" min="0" value="{{ json_decode($product->count)[$key++] }}" required>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <button type="button" class="btn btn-sm btn-danger btn_remove"><i class="fa fa-trash"></i></button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-12 my-4 text-right">
                            <button type="button" class="btn btn-success" id="btn_add"><i class="fa fa-plus"></i></button>
                        </div>
                        <div class="col-lg-12 mt-3">
                            <div class="form-group">
                                <button type="submit" class="btn btn-success btn-custom">ثبت</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>
@endsection
@section('script')
    <script src="/assets/tinymce/tinymce.min.js"></script>

    <script type="text/javascript">
        $('.js-example-basic-single').select2();

        checkProperties(document.getElementById('hasProperties'));
        // hasProperties
        $(document).on('change', '#hasProperties', function () {
            checkProperties(this);
        })

        function checkProperties(chbox)
        {
            if (chbox.checked){
                $('#properties_sec').css('display','none');
                $('#btn_add').css('display','none');
                $('#count_sec').css('display','block');
            }else{
                $('#properties_sec').css('display','block');
                $('#btn_add').css('display','inline');
                $('#count_sec').css('display','none');
            }
        }

        // special colors
        $(document).on('change','input[name="special_colors[]"]', function () {
            if ($(this).is(':checked')){
                $(this).parent().parent().siblings().first().prop('required',false).prop('readonly',true)
            }else{
                $(this).parent().parent().siblings().first().prop('required',true).prop('readonly',false)
            }
        })

        // free sizes
        $(document).on('change','input[name="free_sizes[]"]', function () {
            if ($(this).is(':checked')){
                $(this).parent().parent().siblings().first().prop('readonly',true)
            }else{
                $(this).parent().parent().siblings().first().prop('readonly',false)
            }
        })

        // add property
        var i = {{ $product->color ? (count(json_decode($product->color)) ?? 0) : 0 }};

        $('#btn_add').on('click', function(){
            $('#tbody').append(`
        <tr>
            <td>
                <div class="input-group mb-3">
                    <div class="input-group-prepend" title="فری سایز">
                        <div class="input-group-text">
                            <input type="checkbox" name="free_sizes[]" value="${i}">
                        </div>
                    </div>
                    <select name="sizes[]" class="form-control">
                        <option value="34">34</option>
                        <option value="36">36</option>
                        <option value="38">38</option>
                        <option value="40">40</option>
                        <option value="42">42</option>
                        <option value="44">44</option>
                        <option value="46">46</option>
                        <option value="48">48</option>
                        <option value="50">50</option>
                        <option value="52">52</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="input-group mb-3">
                    <div class="input-group-prepend" title="رنگ خاص">
                        <div class="input-group-text">
                            <input type="checkbox" name="special_colors[]" value="${i++}">
                        </div>
                    </div>
                    <input type="text" name="colors[]" class="sample-selector-hex form-control text-left colorpicker-element" value="" dir="ltr" required>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input type="number" name="counts[]" class="form-control" min="0" value="1" required>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <button type="button" class="btn btn-sm btn-danger btn_remove"><i class="fa fa-trash"></i></button>
                </div>
            </td>
        </tr>
    `)

            $('.sample-selector-hex').colorpicker({
                format: 'hex'
            });

        })


        // remove property
        $(document).on('click','.btn_remove', function(){
            $(this).parent().parent().parent().remove();
        })

        {{-- tinymce --}}
        var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

        tinymce.init({
            selector: '.editor',
            plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
            imagetools_cors_hosts: ['picsum.photos'],
            directionality: 'rtl',
            menubar: 'file edit view insert format tools table help',
            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
            toolbar_sticky: true,
            autosave_ask_before_unload: true,
            autosave_interval: '30s',
            autosave_prefix: '{path}{query}-{id}-',
            autosave_restore_when_empty: false,
            autosave_retention: '2m',
            image_advtab: true,
            template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
            template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
            height: 440,
            image_caption: true,
            quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
            noneditable_noneditable_class: 'mceNonEditable',
            toolbar_mode: 'sliding',
            contextmenu: 'link image imagetools table',
            skin: useDarkMode ? 'oxide-dark' : 'oxide',
            content_css:'dark',
            content_style: "@import url('/public/css/fonts.css?family=Vazir FD'); body div{width:100% !important;height:100% !important}",
        });

    </script>
@endsection