@extends(ucfirst(activeGuard()).'.'.layout())
@section('pagetitle',__('trans.products'))

@push('css')
<style>
    select[readonly] {
        pointer-events: none;
        background-color: #f9f9f9; /* Optional: to visually indicate that the select is read-only */
        color: #999; /* Optional: to further indicate that the select is read-only */
    }
</style>
@endpush


@push('js')
    
    <script>
        $(document).on('change', '#discountDiscount', function() {
            if ($(this).val() === '1') {
                $('.discount').removeClass('hide');
            } else {
                $('.discount').addClass('hide');
                $('#discount').val('');
                $('#discount_from').val('');
                $('#discount_to').val('');
            }
        });
    </script>
@endpush


@section('content')
    <form method="POST" action="{{ route(activeGuard() . '.products.update',$Model) }}" enctype="multipart/form-data" data-parsley-validate>
        @csrf
        @method('PUT')
        <div class="row">
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.category')</label>
                <select name="categories[]" required class="form-control selectpicker w-100" multiple  data-live-search="true">
                    {!! $Categories !!}
                </select>
            </div>

            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.code')</label>
                <input type="text" name="code" value="{{ $Model->code }}"  placeholder="@lang('trans.code')" class="form-control">
            </div>
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.title_ar')</label>
                <input type="text" name="title_ar" value="{{ $Model->title_ar }}" required placeholder="@lang('trans.title_ar')" class="form-control">
            </div>
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.title_en')</label>
                <input type="text" name="title_en" value="{{ $Model->title_en }}" required placeholder="@lang('trans.title_en')" class="form-control">
            </div>
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.desc_ar')</label>
                <textarea name="desc_ar" placeholder="@lang('trans.desc_ar')" class="form-control">{{ $Model->desc_ar }}</textarea>
            </div>
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.desc_en')</label>
                <textarea name="desc_en" placeholder="@lang('trans.desc_en')" class="form-control">{{ $Model->desc_en }}</textarea>
            </div>
    
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.price')</label>
                <input required type="number" min="0" step="0.001" name="price" value="{{ $Model->price }}"  placeholder="@lang('trans.price')" class="form-control">
            </div>
    
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.quantity')</label>
                <input required type="number" min="0" name="quantity" value="{{ $Model->quantity }}"  placeholder="@lang('trans.quantity')" class="form-control">
            </div>
    
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.weight')</label>
                <input required type="number" min="0" step="0.001" name="weight" value="{{ $Model->weight }}"  placeholder="@lang('trans.weight')" class="form-control">
            </div>
                        
            <div class="col-12 col-md-6">
                <label class="my-1">
                    <span>@lang('trans.isThereDiscount')</span>
                </label>
                <select id="discountDiscount" name="have_discount" required class="form-control">
                    <option {{  $Model?->discount > 0 ? 'selected' : '' }} value="1">@lang('trans.yes')</option>
                    <option {{  $Model?->discount > 0 ? '' : 'selected' }} value="0">@lang('trans.no')</option>
                </select>
            </div>
            <div class="col-12 col-md-6 discount {{  $Model?->discount <= 0 ? 'hide' : '' }}">
                <label class="my-1">@lang('trans.discount_from')</label>
                <input value="{{ $Model?->from }}" id="discount_from" type="date" name="from" placeholder="@lang('trans.discount_from')" class="form-control">
            </div>
            <div class="col-12 col-md-6 discount {{  $Model?->discount <= 0 ? 'hide' : '' }}">
                <label class="my-1">@lang('trans.discount_to')</label>
                <input value="{{ $Model?->to }}" id="discount_to" type="date" name="to" placeholder="@lang('trans.discount_to')" class="form-control">
            </div>
            <div class="col-12 col-md-6 discount {{  $Model?->discount <= 0 ? 'hide' : '' }}">
                <label class="my-1">@lang('trans.discount') <span class="h4">%</span></label>
                <input value="{{ $Model?->discount }}" id="discount" type="number" step="any" name="discount" placeholder="@lang('trans.discount')" class="form-control">
            </div>
            <div class="form-group my-1 col-md-6 discount {{  $Model?->discount <= 0 ? 'hide' : '' }}">
                <label class="my-1">@lang('trans.discount_type')</label>
                <select name="discount_type" class="form-control">
                    <option @selected($Model->discount_type == 'percentage') value="percentage">@lang('trans.percentage')</option>
                    <option @selected($Model->discount_type == 'fixed') value="fixed">@lang('trans.fixed')</option>
                </select>
            </div>

            
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.VAT')</label>
                <select class="form-control " required name="VAT">
                    <option hidden selected disabled>@lang('trans.Select')</option>
                    <option {{ $Model->VAT ==  'exclusive' ? 'selected' : '' }} value="exclusive">@lang('trans.exclusive')</option>
                    <option {{ $Model->VAT ==  'inclusive' ? 'selected' : '' }} value="inclusive">@lang('trans.inclusive')</option>
                </select>
            </div>
    
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.show_product')</label>
                <select class="form-control " required name="status">
                    <option {{ $Model->status ==  '0' ? 'selected' : '' }} value="0">@lang('trans.hidden')</option>
                    <option {{ $Model->status ==  '1' ? 'selected' : '' }} value="1">@lang('trans.visible')</option>
                </select>
            </div>
        
            
    
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.pre_order')</label>
                <select class="form-control " required name="pre_order">
                    <option {{ $Model->pre_order ==  '0' ? 'selected' : '' }} value="0">@lang('trans.no')</option>
                    <option {{ $Model->pre_order ==  '1' ? 'selected' : '' }} value="1">@lang('trans.yes')</option>
                </select>
            </div>
        
            
            <div class="form-group my-1 col-md-6 col-sm-12">
                <label class="my-1">@lang('trans.images')</label>
                <label class="file-input btn  btn-secondary btn-file w-100">
                    <input accept="image/*" type="file" type="file" name="images[]" multiple>
                    @lang("trans.Browse")
                </label>
            </div>
    
          
            
            <hr>
            <div class="form-group col-md-12">
                <div id="sections">    
                    @foreach($Model->Sections as $Section)        
                    <div class="row border border-primary p-3 my-2">
                        <input type="hidden" name="sections[{{ $loop->index }}][id]" value="{{ $Section->id }}">
                        <div class="col-12">  
                            <h3><i class="fa-regular fa-circle-xmark destroysection text-danger"></i>@lang('trans.section')</h3>
                        </div>
                        <div class="col-md-3 my-2">
                            <label>@lang('trans.title_ar')</label>
                            <input type="text" name="sections[{{ $loop->index }}][title_ar]" value="{{ $Section->title_ar }}" class="form-control border-3">
                        </div>
                        <div class="col-md-3 my-2">
                            <label>@lang('trans.title_en')</label>
                            <input type="text" name="sections[{{ $loop->index }}][title_en]" value="{{ $Section->title_en }}" class="form-control border-3">
                        </div>
                        <div class="col-md-2 my-2">
                            <label>@lang("trans.select_type")</label>
                            <select class="form-control" name="sections[{{ $loop->index }}][select_type]">
                                <option @selected($Section->select_type == 'single')  value="single">@lang("trans.single_select")</option>
                                <option @selected($Section->select_type == 'multi')  value="multi">@lang("trans.multi_select")</option>
                            </select>
                        </div>
                        <div class="col-md-2 my-2">
                            <label>@lang("trans.required")</label>
                            <select class="form-control" name="sections[{{ $loop->index }}][required]">
                                <option @selected($Section->required == 1)  value="1">@lang("trans.yes")</option>
                                <option @selected($Section->required == 0)  value="0">@lang("trans.no")</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <h3>@lang('trans.items')</h3>
                        </div>
                        <div class="col-12">
                            <div class="items">
                                @foreach($Section->Items as $Item)
                                    <div class="row border border-dark p-3 my-2">
                                        <input type="hidden" name="sections[{{ $loop->parent->index }}][items][{{ $loop->index }}][id]" value="{{ $Item->id }}">
                                        <div class="col-md-2">
                                            <label>@lang('trans.title_ar')</label>
                                            <input type="text" name="sections[{{ $loop->parent->index }}][items][{{ $loop->index }}][title_ar]" value="{{ $Item->title_ar }}" class="form-control">
                                        </div>
                                        <div class="col-md-2">
                                            <label>@lang('trans.title_en')</label>
                                            <input type="text" name="sections[{{ $loop->parent->index }}][items][{{ $loop->index }}][title_en]" value="{{ $Item->title_en }}" class="form-control">
                                        </div>
                                        <div class="col-md-2">
                                            <label>@lang('trans.barcode')</label>
                                            <input type="text" name="sections[{{ $loop->parent->index }}][items][{{ $loop->index }}][barcode]" value="{{ $Item->barcode }}" class="form-control">
                                        </div>
                                        <div class="col-md-1">
                                            <label>@lang('trans.price')</label>
                                            <input type="text" name="sections[{{ $loop->parent->index }}][items][{{ $loop->index }}][price]" value="{{ $Item->price }}" class="form-control">
                                        </div>
                                        <div class="col-md-1">
                                            <label>@lang('trans.cost_price')</label>
                                            <input type="text" name="sections[{{ $loop->parent->index }}][items][{{ $loop->index }}][cost_price]" value="{{ $Item->cost_price }}" class="form-control">
                                        </div>
                                        <div class="col-md-1">
                                            <label>@lang('trans.quantity')</label>
                                            <input type="text" name="sections[{{ $loop->parent->index }}][items][{{ $loop->index }}][quantity]" value="{{ $Item->quantity }}" class="form-control">
                                        </div>
                                        <div class="col-md-1 my-2">
                                            <label>@lang("trans.show_item")</label>
                                            <select class="form-control" name="sections[{{ $loop->parent->index }}][items][{{ $loop->index }}][show]">
                                                <option @selected($Item->show == 1) value="1">@lang("trans.yes")</option>
                                                <option @selected($Item->show == 0) value="0">@lang("trans.no")</option>
                                            </select>
                                        </div>
       
                                        <div class="col-md-1 d-flex justify-content-center align-items-end">
                                            <button type="button" class="btn btn-danger destroy">-</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="col-md-12 my-2 d-flex justify-content-center align-items-end">
                                <button type="button" data-section="{{ $loop->index }}" class="btn btn-primary AddNewitem">+</button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <div class="col-md-12 my-2 d-flex justify-content-center align-items-end">
                    <button type="button" id="Addsection" class="main-btn btn-hover px-5">@lang('trans.add') @lang('trans.section')</button>
                </div>
            </div>
            
            
            @push('js')
            <script>
            
                $(document).on('click', '.destroysection', function() {
                    $(this).parent().parent().parent().remove();
                });
        
                ans_increment = 9999;
                $(document).on('click', '.destroy', function(){
                    $(this).parent().parent().remove(); 
                });
                $(document).on('click', '.AddNewitem', function(){
                    $(this).parent().parent().find('.items').append( 
                        '<div class="row border border-dark p-3 my-2">'+
                            '<div class="col-md-2">'+
                                '<label>@lang("trans.title_ar")</label>'+
                                '<input type="text" name="sections['+$(this).attr("data-section")+'][items]['+ans_increment+'][title_ar]" class="form-control">'+
                            '</div>'+
                            '<div class="col-md-2">'+
                                '<label>@lang("trans.title_en")</label>'+
                                '<input type="text" name="sections['+$(this).attr("data-section")+'][items]['+ans_increment+'][title_en]" class="form-control">'+
                            '</div>'+
                            '<div class="col-md-2">'+
                                '<label>@lang("trans.barcode")</label>'+
                                '<input type="text" name="sections['+$(this).attr("data-section")+'][items]['+ans_increment+'][barcode]" class="form-control">'+
                            '</div>'+
                            '<div class="col-md-1">'+
                                '<label>@lang("trans.price")</label>'+
                                '<input type="number" min="0" step="0.001" name="sections['+$(this).attr("data-section")+'][items]['+ans_increment+'][price]" class="form-control">'+
                            '</div>'+
                            '<div class="col-md-1">'+
                                '<label>@lang("trans.cost_price")</label>'+
                                '<input type="number" min="0" step="0.001" name="sections['+$(this).attr("data-section")+'][items]['+ans_increment+'][cost_price]" class="form-control">'+
                            '</div>'+
                            '<div class="col-md-1">'+
                                '<label>@lang("trans.quantity")</label>'+
                                '<input type="number" min="0" name="sections['+$(this).attr("data-section")+'][items]['+ans_increment+'][quantity]" class="form-control">'+
                            '</div>'+
                            '<div class="col-md-1">'+
                                '<label>@lang("trans.show_item")</label>'+
                                '<select class="form-control" name="sections['+$(this).attr("data-section")+'][items]['+ans_increment+'][show]">'+
                                    '<option value="1">@lang("trans.yes")</option>'+
                                    '<option value="0">@lang("trans.no")</option>'+
                                '</select>'+
                            '</div>'+
        
                            '<div class="col-md-1 d-flex justify-content-center align-items-end">'+
                                '<button type="button" class="btn btn-danger destroy">-</button>'+
                            '</div>'+
                        '</div>'
                    );
                    ans_increment++;
                });

                q_increment = 99999;
                $(document).on('click', '#Addsection', function(){
                    $('#sections').append( 
                        '<div class="row border border-primary p-3 my-2">'+
                            '<div class="col-12">  '+
                                '<h3><i class="fa-regular fa-circle-xmark destroysection text-danger"></i>@lang("trans.section")</h3>'+
                            '</div>'+
                            '<div class="col-md-3 my-2">'+
                                '<label>@lang("trans.title_ar")</label>'+
                                '<input type="text" name="sections['+q_increment+'][title_ar]" class="form-control border-3">'+
                            '</div>'+
                            '<div class="col-md-3 my-2">'+
                                '<label>@lang("trans.title_en")</label>'+
                                '<input type="text" name="sections['+q_increment+'][title_en]" class="form-control border-3">'+
                            '</div>'+
                            '<div class="col-md-2 my-2">'+
                                '<label>@lang("trans.select_type")</label>'+
                                '<select class="form-control" name="sections['+q_increment+'][select_type]">'+
                                    '<option value="single">@lang("trans.single_select")</option>'+
                                    '<option value="multi">@lang("trans.multi_select")</option>'+
                                '</select>'+
                            '</div>'+
                            '<div class="col-md-2 my-2">'+
                                '<label>@lang("trans.required")</label>'+
                                '<select class="form-control" name="sections['+q_increment+'][required]">'+
                                    '<option value="1">@lang("trans.yes")</option>'+
                                    '<option value="0">@lang("trans.no")</option>'+
                                '</select>'+
                            '</div>'+

                            '<div class="col-12">'+
                                '<h3>@lang("trans.items")</h3>'+
                                '<div class="items">'+
                                    '<div class="row border border-dark p-3 my-2">'+
                                        '<div class="col-md-2">'+
                                            '<label>@lang("trans.title_ar")</label>'+
                                            '<input type="text" name="sections['+q_increment+'][items][0][title_ar]" class="form-control">'+
                                        '</div>'+
                                        '<div class="col-md-2">'+
                                            '<label>@lang("trans.title_en")</label>'+
                                            '<input type="text" name="sections['+q_increment+'][items][0][title_en]" class="form-control">'+
                                        '</div>'+
                                        '<div class="col-md-2">'+
                                            '<label>@lang("trans.barcode")</label>'+
                                            '<input type="text" name="sections['+q_increment+'][items][0][barcode]" class="form-control">'+
                                        '</div>'+
                                        '<div class="col-md-1">'+
                                            '<label>@lang("trans.price")</label>'+
                                            '<input type="number" min="0" step="0.001" name="sections['+q_increment+'][items][0][price]" class="form-control">'+
                                        '</div>'+
                                        '<div class="col-md-1">'+
                                            '<label>@lang("trans.cost_price")</label>'+
                                            '<input type="number" min="0" step="0.001" name="sections['+q_increment+'][items][0][cost_price]" class="form-control">'+
                                        '</div>'+
                                        '<div class="col-md-1">'+
                                            '<label>@lang("trans.quantity")</label>'+
                                            '<input type="number" min="0" name="sections['+q_increment+'][items][0][quantity]" class="form-control">'+
                                        '</div>'+
                                        '<div class="col-md-1">'+
                                            '<label>@lang("trans.show_item")</label>'+
                                            '<select class="form-control" name="sections['+q_increment+'][items][0][show]">'+
                                                '<option value="1">@lang("trans.yes")</option>'+
                                                '<option value="0">@lang("trans.no")</option>'+
                                            '</select>'+
                                        '</div>'+
                                    
                                        '<div class="col-md-1 d-flex justify-content-center align-items-end">'+
                                            '<button type="button" class="btn btn-danger destroy">-</button>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'+
                                '<div class="col-md-12 my-2 d-flex justify-content-center align-items-end">'+
                                    '<button type="button"  data-section="'+q_increment+'" class="btn btn-primary AddNewitem">+</button>'+
                                '</div>'+
                            '</div>'+
                        '</div>'
                    );
                    q_increment++;
                });

            </script>
            @endpush
            
            
             <div class="clearfix"></div>
         
    
            <div class="clearfix"></div>
            <div class="col-12 my-4">
                <div class="button-group">
                    <button type="submit" class="main-btn  btn-hover btn-hover w-100 text-center">
                        {{ __('trans.Submit') }}
                    </button>
                </div>
            </div>
        </div>
    </form>



    @if (count($Model->images) > 0)
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th style="text-align:center;">@lang('trans.images')</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                    @foreach ($Model->images as $key => $image)
                        <tr class="gradeX {{ $image['id'] }}">
                            <td style="text-align:center;">{{ $key + 1 }}</td>
                            <td style="text-align:center;">
                                <label  for="ImageStatus{{ $image['id'] }}"><img src="{{ $image['image'] }}" alt="{{ $Model['title_en'] }}" width="150"></label>
                            </td>
                            <td class="actions">
                                <a onclick="DeleteSelected('product_images',{{ $image['id'] }})">
                                    <i class="fa-solid fa-trash-can cursor-pointer"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
            </tbody>
        </table>
    @endif


@endsection




@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .select2-results__options[aria-multiselectable="true"] li {
            padding-left: 30px;
            position: relative
        }

        .select2-results__options[aria-multiselectable="true"] li:before {
            position: absolute;
            left: 8px;
            opacity: .6;
            top: 6px;
            font-family: "FontAwesome";
            content: "\f0c8";
        }

        .select2-results__options[aria-multiselectable="true"] li[aria-selected="true"]:before {
            content: "\f14a";
            color: green;
        }
    </style>
@endpush
@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <script>
        $(document).ready(function() {
            $(".selectpicker").select2({
                language: "{{ lang() }}",
                dir: "{{ lang('ar') ? 'rtl' : 'ltr' }}",
                closeOnSelect: false,
            });
        });
    </script>
@endpush
