@extends('admin.admin_app')

@section('content')
<div class="content-wrapper">

    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="col-md-12">
            <div class="card mb-4">
            <h5 class="card-header">Edit New Product</h5>
                <div class="card-body">

                    <div id="login_success">
                        @if(session()->has('success'))
                        <div class="alert alert-success" role="alert">
                            {{ session()->get('success') }}
                        </div>
                        @endif
                    </div>

                    <div id="login_success">
                        @if(session()->has('error'))
                        <div class="alert alert-danger" role="alert">
                            {{ session()->get('error') }}
                        </div>
                        @endif
                    </div>

                    <form action="{{ route('product.edit_product') }}" id="productForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <div class="mb-3">
                            <input type="hidden" name="pr_id" id="pr_id" value="{{ $data->id }}" />
                            <label for="attribute_name" class="form-label">Product Name :</label>
                            <input type="text" class="form-control" id="product_name" name="product_name" value="{{ $data->product_name }}"/>
                        </div>
                        <!-- <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Slug :</label>
                            <input type="text" class="form-control" id="product_slug" name="product_slug" value="{{ $data->product_slug }}" readonly/>
                            <div id="login_error" style="display:none">
                                   <span style="color:red"> Entered product slug already exists </a>
                            </div>
                        </div> -->

                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Attribute : &nbsp;&nbsp;&nbsp;&nbsp; </label><br/>
                            @if(!empty($attribute_data))
                                @foreach ($attribute_data as $attribute)
                                    <div class="form-check form-check-inline mt-3 d-block">
                                        <input class="form-check-input attribute{{ $attribute->id }}" type="checkbox" name="attribute_id[]" id="attribute{{ $attribute->id }}" value="{{ $attribute->id }}" @if(in_array($attribute->id,$product_attr)) checked @endif  onClick="displayAttr_val({{ $attribute->id }});">
                                        <label class="form-check-label" for="{{ $attribute->attribute_name }}"><strong style="font-size:16px;">{{ $attribute->attribute_name }}</strong></label>
                                    </div>
                                    <div class="row" id="show_attr_val{{ $attribute->id }}" style="margin-left:30px; @if(!in_array($attribute->id,$product_attr)) display: none; @endif">
                                        @if(!empty($attribute->attribute_values))
                                            @foreach($attribute->attribute_values as $attr_value)
                                                <div class="form-check form-check-inline mt-3">
                                                    <input class="form-check-input" type="checkbox" name="attribute_val_id[]" id="attribute_val{{ $attr_value->id }}" value="{{ $attr_value->id }}" @if(in_array($attr_value->id,$product_attr_val)) checked @endif onClick="displayAttr_val_img({{ $attr_value->id }},{{ $attribute->id }});">
                                                    <label class="form-check-label" for="{{ $attr_value->attribute_value }}"><strong>{{ $attr_value->attribute_value }}</strong></label>
                                                </div>
                                                <div class="showImage{{ $attr_value->id }}" @if(in_array($attr_value->id,$product_attr_val)) style='display: block;' @else style='display: none;' @endif>
                                                    @if(!empty($attr_value->attribute_images))
                                                        @foreach ($attr_value->attribute_images as $image)
                                                            <div class="font-color-wrap">
                                                                <div class="mb-2" id="show_img{{$image->pr_img_id}},{{ $image->pr_attr_id }},{{ $image->pr_id}}">
                                                                    @if(!empty($font_colors))
                                                                    <select name="font_color_id[{{ $attribute->id }}][{{ $attr_value->id }}][]">
                                                                        <option>Select Font Color</option>
                                                                        @foreach ($font_colors as $key => $f_color)
                                                                            @if($attr_value->attribute_value != $f_color->attribute_value)
                                                                                <option value="{{$f_color->id}}" @if($image->font_color_id == $f_color->id) selected @endif>{{$f_color->attribute_value}}</option>
                                                                                {{-- {{$font_colorsArr[$attr_value->id][$key]['font_color_id'] = $f_color->id}}
                                                                                {{$font_colorsArr[$attr_value->id][$key]['font_color'] = $f_color->attribute_value}} --}}
                                                                            @endif
                                                                        @endforeach
                                                                    </select>
                                                                    @endif
                                                                    <div>
                                                                        <img src = "{{ asset($image->image_path) }}" width="90px"/>
                                                                        <input type="hidden" name="old_image_path_value[{{ $attribute->id }}][{{ $attr_value->id }}][]"  value="{{$image->pr_img_id}}"/>
                                                                        <input type="hidden" name="old_image_path[]"  id="img{{ $attr_value->id }}" value="{{$image->pr_img_id}}"/>
                                                                        <input type="file" name="update_image_path[{{ $attribute->id }}][{{ $attr_value->id }}][]" />
                                                                    </div>
                                                                    <div>
                                                                        <input type="hidden" name="old_image_thumb[]" value="{{$image->pr_img_id}}"/>
                                                                        <img src = "{{ asset($image->image_thumb) }}" width="90px"/>
                                                                        <input type="file" name="update_image_thumb[{{ $attribute->id }}][{{ $attr_value->id }}][]" />
                                                                    </div>
                                                                    <button type="button" class="btn btn-primary mt-2 remove-product-image" style="margin-left:10px;">&times;</button>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                    <div class="row" id="new_img{{ $attr_value->id }}">

                                                    </div>
                                                    <div class="col-md-12">
                                                        @if($attribute->id != 2)
                                                            <button type="button" class="btn btn-primary add-color-image-btn" style="margin-top:12px;" data-attribute_id="{{ $attribute->id }}" data-attribute_value_id="{{ $attr_value->id }}" data-current_color="{{$attr_value->attribute_value}}">Add Image</button>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Fields &nbsp;&nbsp;</label><br/>
                            @if(!empty($disp_field))
                                @foreach($disp_field as $field)
                                    <div class="form-check form-check-inline mt-3">
                                        <input class="form-check-input" type="checkbox" name="field_id[]" id="field{{ $field->id }}" value="{{ $field->id }}"  onClick="show_side({{ $field->id }})" @if(isset($product_field[$field->id])) checked @endif>
                                        <label class="form-check-label" for="{{ $field->field_title }}">{{ $field->field_title }}</label>
                                    </div>
                                    <br/>
                                    <div class="row" id="dis_side{{ $field->id }}" style="margin-left:30px;display:none">
                                                                        <label for="attribute_name" class="form-label">Fields Side&nbsp;&nbsp;</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input side_type" type="checkbox" name="field_side[{{ $field->id }}][]" id="side_type" data-trigger="hidden_fields_one{{ $field->id }}" value="FRONT" @if(isset($product_field[$field->id]) &&   $product_field[$field->id]->side_type == 'FRONT') checked @endif>
                                        <label class="form-check-label" for="FRONT">FRONT</label>
                                    </div>
                                    <div class="mb-3" id="hidden_fields_one{{ $field->id }}" style="margin-left:30px;">
                                        <label class="form-label">Field Required? </label>
                                        <div class="form-check form-check-inline mt-3">
                                            <input class="form-check-input side_type" type="checkbox" name="is_required[{{ $field->id }}][FRONT][]" id="is_required" value="1" @if(isset($product_field[$field->id]) && $product_field[$field->id]->is_required == '1') checked @endif>
                                            <label class="form-check-label" for="Yes">Yes</label>
                                        </div>
                                        <div class="form-check form-check-inline mt-3">
                                            <input class="form-check-input" type="checkbox" name="is_required[{{ $field->id }}][FRONT][]" id="is_required" value="0" @if(isset($product_field[$field->id]) && $product_field[$field->id]->is_required == '0') checked @endif>
                                            <label class="form-check-label" for="No">No</label>
                                        </div>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input side_type" type="checkbox" name="field_side[{{ $field->id }}][]" id="side_type" data-trigger="hidden_fields_two{{ $field->id }}" value="BACK" @if(isset($product_field[$field->id]) && $product_field[$field->id]->side_type == 'BACK') checked @endif>
                                        <label class="form-check-label" for="BACK">BACK</label>
                                    </div>
                                    <div class="mb-3" id="hidden_fields_two{{ $field->id }}" style="margin-left:30px;">
                                        <label class="form-label">Field Required? </label>
                                        <div class="form-check form-check-inline mt-3">
                                            <input class="form-check-input" type="checkbox" name="is_required[{{ $field->id }}][BACK][]" id="is_required" value="1">
                                            <label class="form-check-label" for="Yes">Yes</label>
                                        </div>
                                        <div class="form-check form-check-inline mt-3">
                                            <input class="form-check-input" type="checkbox" name="is_required[{{ $field->id }}][BACK][]" id="is_required" value="0">
                                            <label class="form-check-label" for="No">No</label>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @endif
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Description :</label>
                            <textarea class="form-control" id="description" name="description">{{ $data->description }}</textarea>
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Image :</label>
                            <input type="file" class="form-control" id="product_image" name="product_image"/>
                            <input type="hidden" name="old_product_image" id="old_product_image" value="{{$data->product_image}}"/>
                            @if($data->product_image != '')
                                <img src="{{ asset($data->product_image) }}" width="100" height="100" alt="" />
                            @endif
                        </div>

                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Thumb Image :</label>
                            <input type="file" class="form-control" id="product_image_thumb" name="product_image_thumb"/>
                            <input type="hidden" name="old_product_image_thumb" id="old_product_image_thumb" value="{{$data->product_image_thumb}}"/>
                            @if($data->product_image_thumb)
                                <img src="{{ asset($data->product_image_thumb) }}" width="100" height="100" alt="" />
                            @endif
                        </div>

                        <div class="mb-3">
                        <label for="status" class="form-label">Material</label>
                        <select class="form-select" id="material" name="material" aria-label="Default select example">
                            <option selected> --- Select Material --- </option>
                            <option value="PVC" @if($data->material == 'PVC') selected  @endif>PVC</option>
                            <option value="Wooden" @if($data->material == 'Wooden') selected  @endif>Wooden</option>
                            <option value="Metal" @if($data->material == 'Metal') selected  @endif>Metal</option>
                        </select>
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Price :</label>
                            <input type="text" class="form-control" id="product_price" name="product_price" value="{{ $data->product_price }}"/>
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Sale Price :</label>
                            <input type="text" class="form-control" id="product_sale_price" name="product_sale_price" value="{{ $data->product_sale_price }}"/>
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Meta Title :</label>
                            <input type="text" class="form-control" id="meta_title" name="meta_title" value="{{ $data->meta_title }}"/>
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Page Title :</label>
                            <input type="text" class="form-control" id="page_title" name="page_title" value="{{ $data->page_title }}"/>
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Meta Keyword :</label>
                            <input type="text" class="form-control" id="meta_keywords" name="meta_keywords" value="{{ $data->meta_keywords }}"/>
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Meta Description :</label>
                            <textarea class="form-control" id="meta_description" name="meta_description">{{ $data->meta_description }}</textarea>
                        </div>
                        <div class="mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select" id="status" name="status" aria-label="Default select example">
                            <option selected> --- Select Status --- </option>
                            <option @if($data->status == 'Active') selected  @endif
                                value="Active"> Active</option>
                            <option @if($data->status == 'Inactive') selected  @endif
                                value="Inactive"> Inactive</option>
                        </select>
                        </div>
                        <button type="submit" name="submit" id="productSubmit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_open" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCenterTitle">Alert !!</h5>
                <button type="button"
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
                ></button>
            </div>
            <div class="modal-body">
                If your delete Attribute it will delete your all dependecies
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                Close
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    CKEDITOR.replace( 'description' );

    var font_color_options = '';
    $(document).on('click', '.add-color-image-btn', function() {
        var attribute_id = $(this).attr('data-attribute_id');
        var attribute_value_id = $(this).attr('data-attribute_value_id');
        var current_color = $(this).attr('data-current_color')

        var fontColorOptions = JSON.parse(font_color_options);
        console.log(font_color_options)
        var selectHtml = '<select name="add_font_color_id['+attribute_id+']['+attribute_value_id+'][]"><option value="">Select Font Color</option>';
        $.each(fontColorOptions, function(i, option) {
            if(current_color != option['attribute_value']) {
                selectHtml += '<option value="'+option['id']+'">'+option['attribute_value']+'</option>';
            }
        })
        selectHtml += '</select>';

        var new_input="<div>"+selectHtml+"<div><img src ='' width='90px'/><input type='file' name='image_path["+attribute_id+"]["+attribute_value_id+"][]' class=' mt-2' ></div><div><img src ='' width='90px'/><input type='file' name='image_thumb["+attribute_id+"]["+attribute_value_id+"][]' class=' mt-2'></div></div>";
        $('#new_img'+attribute_value_id).append(new_input);
    })
    function add(id,id1){

        // var new_chq_no = parseInt($('#img').val())+1;
        var new_input="<div><input type='file' name='image_path["+id+"]["+id1+"][]' class='form-control w-50 mt-2' style='float:left'></div><div><input type='file' name='image_thumb["+id+"]["+id1+"][]' class='form-control w-50 mt-2' style='float:left'></div><div class='col-md-12'></div>";
        $('#new_img'+id1).append(new_input);
    }

    function displayAttr_val(id){
        var idd = id;
        if($('#attribute'+id).is(":checked"))
            $("#show_attr_val"+idd).slideDown('slow');
        else
            $("#show_attr_val"+idd).slideUp('slow');
            // $('#modal').modal('show');
            // setTimeout(() => {
            //     location.reload();
            // }, 2000);
    }

    function displayAttr_val_img(id){
        var attrid = id;
        if($('#attribute_val'+id).is(":checked")){
            $(".showImage"+attrid).slideDown('slow');
        }
        else{
            $(".showImage"+attrid).slideUp('slow');
        }
    }

    $(document).on('click', '.remove-product-image', function() {
        if(confirm("Are you sure you want to delete?") == true) {
            $(this).parents('.mb-2').remove();
        }
    })

    function show_side(id){
        var idd = id;
        if($('#field'+idd).is(":checked"))
            $("#dis_side"+idd).slideDown('slow');
        else
            $("#dis_side"+idd).slideUp('slow');
    }

    $(".side_type").change(function(){
        var hiddenId = $(this).attr("data-trigger");
        if ($(this).is(':checked')) {
            $("#" + hiddenId).slideDown('slow');
        }
        else {
            $("#" + hiddenId).slideUp('slow');
        }
    });

    $("#productForm").validate({
        rules: {
            product_name : 'required',
            'attribute_id[]':{
                required : true,
            },
            'attribute_val_id[]':{
                required : true,
            },
            // 'field_id[]':{
            //     required : true,
            // },
            'side_type[]':{
                require : true,
            },
            'is_required[]':{
                require : true,
            },
            description:'required',
            material:'required',
            product_price:{
                'required': true,
                'number': true
            },
            product_sale_price:'number',
            page_title:'required',
            meta_title:'required',
            meta_description:'required',
            meta_keywords : 'required',
            'image_path[]':{
                required : true,
                extension: "jpg|jpeg|png",
            },
            'image_thumb[]':{
                required : true,
                extension: "jpg|jpeg|png",
            }
        },
        messages: {
            product_name : "Please enter product name",
            'attribute_id[]':{
                required: "You must check at least 1 attribute",
            },
            'attribute_val_id[]':{
                required : "You must check at least 1 attribute Value",
            },
            'field_id[]':{
                required : "You must check at least 1 Field Value",
            },
            'side_type[]':{
                required : "You must check side type",
            },
            'is_required[]' :{
                required : "You must check required Field",
            },
            description : "Please enter description",
            material:"Please select material",
            product_price : "Please enter price",
            meta_title : "Please enter meta titile",
            meta_description : "Please enter meta description",

            'image_path[]' :{
                required : "Please enter attribute image",
            },
            'image_thumb[]':{
                required : "Please enter attribute thumb image",
            },
            product_image : "Please enter Product Image",
            product_image_thumb : "Please enter Product Thumb Image",
        },
    });

    $(document).on('change', 'input[type="file"]', function(){
        var thisvar = $(this);
        if(thisvar.parent('div').find('img').length > 0) {
            const file = this.files[0];
            // console.log(file);
            if (file){
            let reader = new FileReader();
            reader.onload = function(event){
                // console.log(event.target.result);
                thisvar.parent('div').find('img').attr('src', event.target.result);
            }
            reader.readAsDataURL(file);
            }
        }
      });
</script>
@endsection