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

@section('content')
    <!-- begin::page loader-->
    @include('panel.layouts.sidebar')
    @include('panel.layouts.header')
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

    <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.store') }}" method="post" class="needs-validation" novalidate enctype="multipart/form-data">
                            @csrf
                            <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="{{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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 }}" {{ old('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="" {{ old('collection_id') == null ? 'selected' : '' }}>بدون کالکشن</option>
                                            @foreach($collections as $collection)
                                                <option value="{{ $collection->id }}" {{ old('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" {{ old('status') == '0' ? 'selected' : '' }}>منتشر نشده</option>
                                            <option value="1" {{ old('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">{!! old('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">تصویر اصلی (تک انتخابی)<span class="text-danger">*</span></label>
                                        <input type="file" name="main_image" class="form-control" required 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">
                                        <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">
                                    <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="{{ old('total_count') ?? 1 }}">
                                        @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">
                                            </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 = 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