@extends('admin.layouts.app')
@section('page_content')
<script>
    function getProductSeries(category_id){  
        if(category_id != null || category_id != ''){
            $.ajax({
                type: "GET",
                url: "{{route('admin.get.products.series')}}?category_id="+category_id,
                success: function (response) {
                    // console.log(response);
                    if(response.length > 0){
                        $("#productSeries").removeAttr('disabled');
                        $("#productSeries").empty();
                        $("#productSeries").append("<option value=''>Select Product Series *</option>");
                        $.each(response,function(key,value){
                            $("#productSeries").append('<option value="'+value.id+'">'+value.name+'</option>');
                        });
                    }else{
                        $("#productSeries").attr('disabled', 'disabled');
                        $("#productSeries").empty();
                        $("#productSeries").append("<option value=''>No Models Found</option>");
                    }
                }
            });
        }
    }

    function getProductModels(series_id){  
        let category_id = $('#productCategory').val();
        if((series_id != null || series_id != '') && (category_id != null || category_id != '')){
            $.ajax({
                type: "GET",
                url: "{{route('admin.products.models')}}?category_id="+category_id+"&series_id="+series_id,
                success: function (response) {
                    // console.log(response);
                    if(response.length > 0){
                        $("#productModels").removeAttr('disabled');
                        $("#productModels").empty();
                        $("#productModels").append("<option value=''>Select Product Model</option>");
                        $.each(response,function(key,value){
                            $("#productModels").append('<option value="'+value.id+'">'+value.model+'</option>');
                        });
                    }else{
                        $("#productModels").attr('disabled', 'disabled');
                        $("#productModels").empty();
                        $("#productModels").append("<option value=''>No Models Found</option>");
                    }
                }
            });
        }else{
        }
    }
</script>
<div class="content-wrapper">
    <!-- Page Title Header Starts-->
    <div class="row page-title-header">
        <div class="col-12">
            <div class="page-header">
                <h4 class="page-title">Add Frame</h4>
                <ul>
                    <li><a href="{{route('admin.products.frames')}}" class="filled_green_btn">Back</a></li> 
                </ul>
            </div>
        </div>
    </div>
    <!-- Page Title Header Ends-->

    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row flex-grow">
                <div class="col-12">
                    <div class="card cms_homepage_card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <form class="row" method="post" action="{{route('admin.products.frames.save')}}" enctype="multipart/form-data">
                                        @csrf

                                        <div class="col-md-4 form-group">
                                            <label for="title">Select Category<span class="text-danger">*</span></label>
                                            <select class="form-control" onChange="getProductSeries(this.value)" id="productCategory" required name="category_id">
                                                <option value="">Select Category <span class="text-danger">*</span></option>
                                                @foreach($products as $key => $value)
                                                    <option value="{{$value->id}}">{{$value->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-4 form-group">
                                            <label for="title">Select Series<span class="text-danger">*</span></label>
                                            <select class="form-control" disabled id="productSeries" onChange="getProductModels(this.value)" required name="series_id">
                                                <option value="">Select Series <span class="text-danger">*</span></option>
                                            </select>
                                        </div>

                                        <div class="col-md-4 form-group">
                                            <label for="title">Select Product Model<span class="text-danger">*</span></label>
                                            <select class="form-control" disabled id="productModels" required name="product_id">
                                                <option value="">Select Product Model <span class="text-danger">*</span></option>
                                            </select>
                                        </div>
                                        
                                        <div class="col-md-12 product_frames">
                                            <h5>Add Frames</h5>
                                            <div class="row mb-3">
                                                <div class="col-md-11">
                                                    <div class="row">
                                                        <div class="form-group col-md-3">
                                                            <input type="text" class="form-control" required id="housing_name" name="housing_name[]" placeholder="Housing Name *">
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <input type="text" class="form-control" id="ar_housing_name" name="ar_housing_name[]" placeholder="Housing Name (Arabic)">
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <input type="text" class="form-control" required id="frame_size" name="frame_size[]" placeholder="Frame Size *">
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <input type="text" class="form-control" id="ar_frame_size" name="ar_frame_size[]" placeholder="Frame Size (Arabic)">
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <input type="text" class="form-control" required id="frame_cutout" name="frame_cutout[]" placeholder="Frame Cutout *">
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <input type="text" class="form-control" id="ar_frame_cutout" name="ar_frame_cutout[]" placeholder="Frame Cutout (Arabic)">
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <input type="text" class="form-control" id="frame_ip_rating" name="frame_ip_rating[]" placeholder="Frame IP Rating">
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <input type="text" class="form-control" id="ar_frame_ip_rating" name="ar_frame_ip_rating[]" placeholder="Frame IP Rating (Arabic)">
                                                        </div>
                                                        <div class="form-group col-md-12">
                                                            <div class="custom-file">
                                                                <input type="file" name="thumb_image[]" required class="custom-file-input form-control" id="thumb_image" accept=".jpg,.png,.svg,.jpeg">
                                                                <label class="custom-file-label" for="thumb_image">Choose Frame Thumb Image * </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-1">
                                                    <a href="javascript:0;" class="add_button btn btn-success green_filled"><i class="fa fa-plus"></i></a>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <button type="submit" class="btn btn-green btn-rounded mt-3 mr-2">Save</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.product_frames'); //Input field wrapper
        var fieldHTML = '<div class="row mb-3"><div class="col-md-11"><div class="row"><div class="form-group col-md-3"><input type="text" class="form-control" required id="housing_name" name="housing_name[]" placeholder="Housing Name *"></div><div class="form-group col-md-3"><input type="text" class="form-control" id="ar_housing_name" name="ar_housing_name[]" placeholder="Housing Name (Arabic)"></div><div class="form-group col-md-3"><input type="text" class="form-control" required id="frame_size" name="frame_size[]" placeholder="Frame Size *"></div><div class="form-group col-md-3"><input type="text" class="form-control" id="ar_frame_size" name="ar_frame_size[]" placeholder="Frame Size (Arabic)"></div><div class="form-group col-md-3"><input type="text" class="form-control" required id="frame_cutout" name="frame_cutout[]" placeholder="Frame Cutout *"></div><div class="form-group col-md-3"><input type="text" class="form-control" id="ar_frame_cutout" name="ar_frame_cutout[]" placeholder="Frame Cutout (Arabic)"></div><div class="form-group col-md-3"><input type="text" class="form-control" id="frame_ip_rating" name="frame_ip_rating[]" placeholder="Frame IP Rating "></div><div class="form-group col-md-3"><input type="text" class="form-control" id="ar_frame_ip_rating" name="ar_frame_ip_rating[]" placeholder="Frame IP Rating (Arabic)"></div><div class="form-group col-md-12"><div class="custom-file"><input type="file" name="thumb_image[]" required  accept=".jpg,.png,.svg,.jpeg" class="custom-file-input form-control" id="thumb_image"><label class="custom-file-label" for="thumb_image">Choose Frame Thumb Image * </label></div></div></div></div><div class="col-md-1"><a href="javascript:0;" class="remove_button btn btn-danger"><i class="fa fa-minus"></i></a></div></div>'; //New input field html 
        

        
        var x = 1; //Initial field counter is 1
        
        //Once add button is clicked
        $(addButton).click(function(){
            //Check maximum number of input fields
            $(wrapper).append(fieldHTML);
            fileuploadfiled();
        });
        
        //Once remove button is clicked
        $(wrapper).on('click', '.remove_button', function(e){
            e.preventDefault();
            $(this).parent().parent().remove(); //Remove field html
            x--; //Decrement field counter
        });
    });
</script>
@endsection