@extends('admin.layout.master')

{{-- extra css files --}}
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('admin/app-assets/vendors/css/extensions/sweetalert2.min.css')}}">
<style>
    .form_head {
        background: #7367f0;
        border-radius: 5px;
        padding: 10px;
        margin-top: 8px;
        margin-bottom: 30px;
    }
</style>
@endsection
{{-- extra css files --}}

@section('content')
<section id="multiple-column-form">
    <div class="row match-height">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{'إضافة مجموعات من السمات للمنتج رقم ' . $product->id}}</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">

                        <div class="row align-items-center">
                            <div class="col-12">
                                @foreach($product->featuresHasMany as $feature)
                                <div class="form-group">
                                    <label for="first-name-column">{{$feature->feature->name}}</label>
                                    <select class="form-control select_feature" name="productfeatures_ids[]">
                                        @foreach($feature->productFeatureOptions as $featureOption)
                                        <option value="{{$featureOption->option->id}}">{{$featureOption->option->name}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                @endforeach
                            </div>
                            <div class="col-12">
                                <div class="option-btn d-flex justify-content-center ">
                                    <button type="button" class="btn btn-primary mt-2 mb-2 add_groub">{{'انشاء
                                        مجموعة'}}</button>
                                </div>
                            </div>
                        </div>

                        <div class=" append_div">
                            @foreach ($product->variants->where('options_ids' , '!=' , null) as $variant)
                            <form action="{{ route('admin.products.groups.update') }}" style="width: 100%"
                                class="groub_form">
                                @csrf
                                <input type="hidden" name="variant_id" value="{{$variant->id}}">
                                <input type="hidden" name="product_id" value="{{$product->id}}">
                                <input id="{{$variant->options_ids}}" type="hidden" name="options_ids" class="main_div"
                                    value="{{$variant->options_ids}}">
                                <div class=" row w-100">

                                    <div class="d-flex justify-content-around col-12 form_head">
                                        @foreach ($variant->options_data as $prop)
                                        <h6 class="m-0">{{$prop->name}}</h6>
                                        @endforeach
                                    </div>

                                    <div class="col-12 row main_parent_discount">
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="first-name-column">{{__('site.price')}}<span
                                                        class="text-danger"> *</span></label>
                                                <div class="controls">
                                                    <input type="text" name="price" value="{{$variant->price}}"
                                                        class="form-control"
                                                        placeholder="{{__('site.write') . __('site.price')}}" required
                                                        data-validation-required-message="{{__('admin.this_field_is_required')}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="first-name-column">{{__('admin.qty')}}<span
                                                        class="text-danger"> *</span></label>
                                                <div class="controls">
                                                    <input type="text" name="qty" value="{{$variant->qty}}"
                                                        class="form-control"
                                                        placeholder="{{__('site.write') . __('admin.qty')}}" required
                                                        data-validation-required-message="{{__('admin.this_field_is_required')}}">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="first-name-column">{{'SKU (وحدة حفظ المخزون)'}}<span
                                                        class="text-danger"> *</span></label>
                                                <div class="controls">
                                                    <input type="text" value="{{$variant->sku}}" name="sku"
                                                        class="form-control sku" placeholder="SKU" required
                                                        data-validation-required-message="{{__('admin.this_field_is_required')}}">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="first-name-column">{{__('admin.discount_type')}}<span
                                                        class="text-success"> ({{ __('admin.optional')
                                                        }})</span></label>
                                                <div class="controls">
                                                    <select name="discount_type" class="discount_type form-control">
                                                        <option value>{{__('admin.select')}}
                                                            {{__('admin.discount_type')}}</option>
                                                        <option {{$variant->discount_type == null ? 'selected' : ''}}
                                                            value>{{__('admin.nothing')}}</option>
                                                        <option {{$variant->discount_type == 'ratio' ? 'selected' : ''}}
                                                            value="ratio">{{__('admin.ratio')}}</option>
                                                        <option {{$variant->discount_type == 'number' ? 'selected' :
                                                            ''}} value="number">{{__('admin.number')}}</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div
                                            class="col-md-4 col-12 discount_amount {{$variant->discount_type != null ? '' : 'd-none'}} ">
                                            <div class="form-group">
                                                <label
                                                    for="first-name-column">{{__('admin.discount_amount_or_ratio')}}<span
                                                        class="text-danger"> *</span></label>
                                                <div class="controls">
                                                    <input type="text" value="{{$variant->discount_amount}}"
                                                        name="discount_amount" class="form-control discount_amount"
                                                        placeholder="{{__('site.write') . __('admin.discount_amount')}}">
                                                </div>
                                            </div>
                                        </div>

                                        <div
                                            class="col-md-4 col-12 discount_date_to {{$variant->discount_type != null ? '' : 'd-none'}}">
                                            <div class="form-group">
                                                <label for="first-name-column">{{__('admin.discount_date_to')}}<span
                                                        class="text-danger"> *</span></label>
                                                <div class="controls">
                                                    <input type="datetime-local" value="{{$variant->discount_date_to}}"
                                                        name="discount_date_to" class="form-control"
                                                        placeholder="{{__('site.write') . __('admin.discount_date_to')}}">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-12 align-items-center mb-2 d-flex justify-content-center">
                                        <i class="fa fa-trash text-danger delete_group m-2" style="font-size: 25px"
                                            data-id="{{$variant->id}}" aria-hidden="true"></i>
                                        <a href="#" type="submit " class="submit_form">
                                            <i class="fa fa-edit" style="font-size: 25px" aria-hidden="true"></i>
                                        </a>
                                    </div>

                                </div>
                            </form>

                            @endforeach
                        </div>

                        <div class="col-12">
                            <div class="option-btn d-flex justify-content-center ">
                                <a style="color: white"
                                    href="{{ route('admin.products.index', ['provider_id'=>$product->provider_id]) }}"
                                    type="button" class=" btn btn-primary mt-2 mb-2 ">{{'انهاء المنتج'}}</a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script src="{{asset('admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
<script src="{{asset('admin/app-assets/js/scripts/extensions/sweet-alerts.js')}}"></script>
<script>
$(document).on('change' , '.sku' , function () {
    $(this).val(  $(this).val().replace(/\s/g, '')) 
});

$(document).on('click', '.add_groub', function () {
    var array = [];
    var names = [];
    var prop = '';
    var count = 0;

    $('.select_feature').each(function (i, obj) {
        array.push($(this).val())
        names.push($(this).find(":selected").text())

    });

    $('.main_div').each(function (i, obj) {
        var array2 = JSON.parse(this.id)
        if (array.sort().join(',') === array2.sort().join(',')) {
            count = count + 1
        }
    });

    $(names).each(function (i, obj) {
        prop += `<h6 class="m-0">${obj}</h6>`;
    });


    if (count == 0) {
        $('.append_div').prepend(`
<form action="{{ route('admin.products.groups.update') }}" style="width: 100%"
    class="d-flex mt-1 d-flex align-center groub_form">
    @csrf
    <input type="hidden" name="variant_id" value="" class="variant_id">
    <input type="hidden" name="product_id" value="{{$product->id}}">
    <input id="[${array}]" type="hidden" name="options_ids" class="main_div" value="[${array}]">

    <div class=" row w-100">
        <div class="d-flex justify-content-around col-12 form_head">
            ${prop}
        </div>

        <div class="col-12 row main_parent_discount">
            <div class="col-md-4 col-12">
                <div class="form-group">
                    <label for="first-name-column">{{__('site.price')}}<span class="text-danger"> *</span></label>
                    <div class="controls">
                        <input type="text" name="price" class="form-control"
                            placeholder="{{__('site.write') . __('site.price')}}" required
                            data-validation-required-message="{{__('admin.this_field_is_required')}}">
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-12">
                <div class="form-group">
                    <label for="first-name-column">{{__('admin.qty')}}<span class="text-danger"> *</span></label>
                    <div class="controls">
                        <input type="text" name="qty" class="form-control"
                            placeholder="{{__('site.write') . __('admin.qty')}}" required
                            data-validation-required-message="{{__('admin.this_field_is_required')}}">
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-12">
                <div class="form-group">
                    <label for="first-name-column">{{'SKU(وحدة حفظ المخزون)'}}<span class="text-danger">
                            *</span></label>
                    <div class="controls">
                        <input type="text" name="sku" class="form-control sku" placeholder="SKU" required
                            data-validation-required-message="{{__('admin.this_field_is_required')}}">
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-12">
                <div class="form-group">
                    <label for="first-name-column">{{__('admin.discount_type')}}<span class="text-success"> ({{
                            __('admin.optional') }})</span></label>
                    <div class="controls">
                        <select name="discount_type" class="discount_type form-control">
                            <option value>{{__('admin.select')}} {{__('admin.discount_type')}}</option>
                            <option value>{{__('admin.nothing')}}</option>
                            <option value="ratio">{{__('admin.ratio')}}</option>
                            <option value="number">{{__('admin.number')}}</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-12 discount_amount d-none">
                <div class="form-group">
                    <label for="first-name-column">{{__('admin.discount_amount_or_ratio')}}<span class="text-danger">
                            *</span></label>
                    <div class="controls">
                        <input type="text" name="discount_amount" class="form-control discount_amount"
                            placeholder="{{__('site.write') . __('admin.discount_amount')}}">
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-12 discount_date_to d-none">
                <div class="form-group">
                    <label for="first-name-column">{{__('admin.discount_date_to')}}<span class="text-danger">
                            *</span></label>
                    <div class="controls">
                        <input type="datetime-local" name="discount_date_to" class="form-control"
                            placeholder="{{__('site.write') . __('admin.discount_date_to')}}">
                    </div>
                </div>
            </div>

        </div>

        <div class="col-12 align-items-center mb-2 d-flex justify-content-center">
            <i class="fa fa-trash text-danger delete_group m-2" style="font-size: 25px" aria-hidden="true"></i>
            <a href="#" type="submit " class="submit_form">
                <i class="fa fa-check" style="font-size: 25px" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</form>
`)
    } else {
        toastr.error('{{"تم اضافة المجموعة سابقا"}}')
    }
});

$(document).ready(function () {
    $(document).on('submit', '.groub_form', function (e) {
        e.preventDefault();
        var url = $(this).attr('action')
        $.ajax({
            url: url,
            method: 'post',
            data: new FormData($(this)[0]),
            dataType: 'json',
            processData: false,
            contentType: false,
            success: (response) => {
                toastr.success('{{"تم العملية بنجاح "}}')
                $(this).find('.submit_form').html(`<i class="fa fa-edit" style="font-size: 25px" aria-hidden="true"></i>`);
                $(this).find('.variant_id').val(response.variant.id);
            }, error: function (xhr) {

                $.each(xhr.responseJSON.errors, function (key, value) {
                    toastr.error(value)
                });
            },
        });

    });
});

$(document).on('click', '.submit_form', function (e) {
    e.preventDefault();
    $(this).parents('.groub_form').submit()
})

$(document).on('click', '.delete_group', function (e) {
    e.preventDefault();
    var id = $(this).data('id')
    if (id) {
        $.ajax({
            url: '{{url("admin/products/group-delete")}}',
            method: 'post',
            data: { id: id },
            dataType: 'json',
            success: (response) => {
                toastr.success('{{"تم حذف المجموعة بنجاح"}}')
                $(this).parents('.groub_form').remove()
            },
            error: function (xhr) {
                Swal.fire({
                    position: 'top-start',
                    type: 'warning',
                    title: xhr.responseJSON.message,
                    showConfirmButton: false,
                    timer: 1500,
                    confirmButtonClass: 'btn btn-warning',
                    buttonsStyling: false,
                });
            }
        });
    } else {
        $(this).parents('.groub_form').remove()
    }

});

$(document).on('change', '.discount_type', function (e) {
    e.preventDefault()
    var value = $(this).val()
    if (value == null || value == '') {
        $(this).parents('.main_parent_discount').find('.discount_date_to').addClass('d-none')
        $(this).parents('.main_parent_discount').find('.discount_date_to input').val(null)
        $(this).parents('.main_parent_discount').find('.discount_amount').addClass('d-none')
        $(this).parents('.main_parent_discount').find('.discount_amount input').val(null)
    } else {
        $(this).parents('.main_parent_discount').find('.discount_date_to').removeClass('d-none')
        $(this).parents('.main_parent_discount').find('.discount_amount').removeClass('d-none')

    }
});
</script>
@endsection