@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">Add 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>

                    <form action="{{ route('product.add_product') }}" id="productForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Name :</label>
                            <input type="text" class="form-control" id="product_name" name="product_name"/>
                        </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">
                                        <input class="form-check-input attribute{{ $attribute->id }}" type="checkbox" name="attribute_id[]" id="attribute{{ $attribute->id }}" value="{{ $attribute->id }}" onClick="displayAttr_val({{ $attribute->id }});">
                                        <label class="form-check-label" for="{{ $attribute->attribute_name }}">{{ $attribute->attribute_name }}</label>
                                    </div>
                                    <div class="row" id="show_attr_val{{ $attribute->id }}" style="display:none;margin-left:30px;">
                                        <label for="attribute_name" class="form-label mt-3">Attribute Value&nbsp;&nbsp;&nbsp;&nbsp; </label>
                                        @if(!empty($attribute->attribute_values))
                                            @foreach ($attribute->attribute_values as $attr_val)
                                                <div class="form-check form-check-inline mt-3">
                                                    <input class="form-check-input" type="checkbox" name="attribute_val_id[]" id="attribute_val{{ $attr_val->id }}" value="{{ $attr_val->id }}" onClick="displayAttr_val_img({{ $attr_val->id }},{{ $attribute->id }});">
                                                    <label class="form-check-label" for="{{ $attr_val->attribute_value }}">{{ $attr_val->attribute_value }}</label>
                                                </div>
                                                <div class="row showImage{{ $attr_val->id }}" style="display:none">
                                                    <div class="font-color-wrap">
                                                        @if(!empty($font_colors))
                                                            @if($attribute->id != 2)
                                                                <select name="add_font_color_id[{{ $attribute->id }}][{{ $attr_val->id }}][]">
                                                                    <option value="">Select Font Color</option>
                                                                    @foreach($font_colors as $key => $f_color)
                                                                        @if($attr_val->attribute_value != $f_color->attribute_value)
                                                                            <option value="{{ $f_color->id }}">{{ $f_color->attribute_value }}</option>
                                                                            {{$font_colorsArr[$attr_val->id][$key]['font_color_id'] = $f_color->id}}
                                                                            {{$font_colorsArr[$attr_val->id][$key]['font_color'] = $f_color->attribute_value}}
                                                                        @endif
                                                                    @endforeach
                                                                </select>

                                                                <div><input type="file" name="image_path[{{ $attribute->id }}][{{ $attr_val->id }}][]" required=""/></div>
                                                                <div><input type="file" name="image_thumb[{{ $attribute->id }}][{{ $attr_val->id }}][]" required=""/></div>
                                                            @endif
                                                        @endif
                                                    </div>

                                                    <div class="row" id="new_img{{ $attr_val->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_val->id }}">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/>
                            @foreach ($field_data 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 }})">
                                    <label class="form-check-label" for="{{ $field->field_title }}">{{ $field->field_title }}</label>
                                </div>
                                <br/>
                                <div class="row" id="dis_side{{ $field->id }}" style="display:none;margin-left:30px;">
                                    <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">
                                        <label class="form-check-label" for="FRONT">FRONT</label>
                                    </div>
                                    <div class="mb-3" id="hidden_fields_one{{ $field->id }}" style="display:none;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">
                                            <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">
                                            <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">
                                        <label class="form-check-label" for="BACK">BACK</label>
                                    </div>
                                    <div class="mb-3" id="hidden_fields_two{{ $field->id }}" style="display:none;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
                        </div>
                        <div class="mb-3">
                            <label for="attribute_name" class="form-label">Product Description :</label>
                            <textarea class="form-control" id="description" name="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" />
                            <p id="error1" style="display:none; color:#FF0000;">
                                Invalid Image Format! Image Format Must Be JPG, JPEG, PNG or GIF.
                            </p>
                        </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" />
                            <p id="error2" style="display:none; color:#FF0000;">
                                Maximum File Size Limit is 1MB.
                            </p>
                        </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 value="" selected disabled> --- Select Material --- </option>
                            <option value="PVC">PVC</option>
                            <option value="Wooden">Wooden</option>
                            <option value="Metal">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"/>
                        </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"/>
                        </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"/>
                        </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"/>
                        </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" />
                        </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"></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 value="" disabled> --- Select Status --- </option>
                            <option value="Active" selected>Active</option>
                            <option 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>
@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 fontColorOptions = JSON.parse(font_color_options);
        var selectHtml = '<select name="add_font_color_id['+attribute_id+']['+attribute_value_id+'][]"><option value="">Select Font Color</option>';
        $.each(fontColorOptions[attribute_value_id], function(i, option) {
            selectHtml += '<option value="'+option['font_color_id']+'">'+option['font_color']+'</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' required=''></div><div><img src ='' width='90px'/><input type='file' name='image_thumb["+attribute_id+"]["+attribute_value_id+"][]' class=' mt-2' required=''></div></div>";
        $('#new_img'+attribute_value_id).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');
    }

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

    function add(id,id1){
        var new_input="<div class='col-md-3'><label for='attribute_name' class='form-label mt-3'>Other Attribute Image</label></div><div class='col-md-9'><input type='file' name='image_path["+id+"]["+id1+"][]' class='form-control w-50 mt-2' style='float:left'><button type='reset' class='btn btn-primary mt-2' style='margin-left:10px;'><i class='bx bx-revision'></i></button></div><div class='col-md-3'><label for='attribute_name' class='form-label mt-3'>Other Attribute Thumb</label></div><div class='col-md-9'><input type='file' name='image_thumb["+id+"]["+id1+"][]' class='form-control w-50 mt-2' style='float:left'><button type='reset' class='btn btn-primary mt-2' style='margin-left:10px;'><i class='bx bx-revision'></i></button></div>";
        $('#new_img'+id1).append(new_input);
    }

    function remove(idd1){
      var last_chq_no = $('#img'+idd1).val();
      if(last_chq_no>1){
        $('#new_'+last_chq_no).remove();
        $('#img'+idd1).val(last_chq_no-1);
      }
    }

    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",
            },
            product_image:{
                required : true,
                extension: "jpg|jpeg|png",
            },
            product_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",
        },
    });
</script>
@endsection