@extends('admin.layouts.app')
@section('page_content')
<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">Project Add</h4>
            </div>
            <!-- <a href="{{route('admin.projects.add')}}" class="btn btn-success pull-right">Add Project</a> -->
        </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">
                        <div class="card-body">
                            <!-- <h4 class="card-title">Default form</h4> -->
                            <form class="forms-sample" method="post" enctype="multipart/form-data" action="{{route('admin.projects.save')}}">
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="name">Project Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="name" name="name" required placeholder="Project Name">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="ar_name">Project Name (Arabic)</label>
                                        <input type="text" class="form-control" id="ar_name" name="ar_name" placeholder="Project Name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="thumb_image">Thumb Image <span class="text-danger">*</span></label>
                                    <!-- <input type="file" class="form-control" id="thumb_image" name="thumb_image" style="padding: 10px;"> -->
                                    <div class="custom-file">
                                        <input type="file" name="thumb_image" required class="custom-file-input form-control" id="customFile">
                                        <label class="custom-file-label" for="customFile">Choose file</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="banner_image">Banner Image <span class="text-danger">*</span></label>
                                    <!-- <input type="file" class="form-control" id="banner_image" name="banner_image" style="padding: 10px;"> -->
                                    <div class="custom-file">
                                        <input type="file" name="banner_image" required class="custom-file-input form-control" id="customFile">
                                        <label class="custom-file-label" for="customFile">Choose file</label>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="location">Location <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="location" name="location" required placeholder="Location">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="ar_location">Location (Arabic)</label>
                                        <input type="text" class="form-control" id="ar_location" name="ar_location" placeholder="Location">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="headline">HeadLine Title</label>
                                        <input type="text" class="form-control" id="headline" name="headline" placeholder="HeadLine Title">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="ar_headline">HeadLine Title (Arabic)</label>
                                        <input type="text" class="form-control" id="ar_headline" name="ar_headline" placeholder="HeadLine Title">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="description">Project Description</label>
                                    <textarea type="text" rows="6" class="form-control" name="description" id="description" placeholder="Project Description.."></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="ar_description">Project Description (Arabic)</label>
                                    <textarea type="text" rows="6" class="form-control" name="ar_description" id="ar_description" placeholder="Project Description.."></textarea>
                                </div>


                                <div class="form-group">
                                    <h5>Specifications</h5>
                                    <div class="specifications_box field_wrapper" id="specifications_box">
                                        <div class="row mt-4">
                                            <div class="col-md-11">
                                                <div class="row">
                                                    <div class="col-md-4 form-group">
                                                        <input type="text" class="form-control" name="Specification_title[]" required id="SpecificationTitle" placeholder="Title *">
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <input type="text" class="form-control" name="ar_specification_title[]" id="ar_specificationTitle" placeholder="Title in Arabic">
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <select class="form-control" name="Specification_title_font_size[]" required id="SpecificationIcon">
                                                            <option value="">Font Size *</option>
                                                            @foreach($font_sizes as $key => $font_size)
                                                                <option value="{{$key}}">{{$font_size}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <input type="text" class="form-control" name="Specification_name[]" required id="SpecificationName" placeholder="Sub Title *">
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <input type="text" class="form-control" name="ar_specification_name[]" id="ar_specificationName" placeholder="Sub Title in Arabic">
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <select class="form-control" name="Specification_sub_title_font_size[]" required id="SpecificationIcon">
                                                            <option value="">Font Size *</option>
                                                            @foreach($font_sizes as $key => $font_size)
                                                                <option value="{{$key}}">{{$font_size}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <input type="text" class="form-control" name="Specification_value[]" required id="SpecificationValue" placeholder="Value *">
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <input type="text" class="form-control" name="ar_specification_value[]" id="ar_specificationValue" placeholder="Value in Arabic">
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <select class="form-control" name="Specification_value_font_size[]" required id="SpecificationIcon">
                                                            <option value="">Font Size *</option>
                                                            @foreach($font_sizes as $key => $font_size)
                                                                <option value="{{$key}}">{{$font_size}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <select class="form-control" name="Specification_icon[]" required id="SpecificationIcon">
                                                            <option value="">Select Icon *</option>
                                                            @foreach($sicons as $key => $sicon)
                                                                <option value="{{$key}}">{{$sicon}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 form-group">
                                                        <select class="form-control" name="Specification_theme[]" required id="SpecificationIcon">
                                                            <option value="">Select Theme *</option>
                                                            @foreach($themes as $key => $theme)
                                                                <option value="{{$key}}">{{$theme}}</option>
                                                            @endforeach
                                                        </select>
                                                    </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>

                                <div class="form-group">
                                    <label for="exampleInputEmail1">Gallery Images</label>
                                    <input type="file" class="form-control fileInput4" accept=".jpg,.png,.jpeg" id="galleryImages" multiple="" name="gallery_images[]" style="padding: 10px;">
                                </div>
                                <button type="submit" class="btn btn-green btn-rounded mr-2">Save</button>
                                <!-- <button class="btn btn-light btn-rounded">Cancel</button> -->
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>
<script>
    CKEditorChange('description','only_biu_options.js');
    CKEditorChange('ar_description','only_biu_options.js');
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML = '<div class="row"><div class="col-md-11"><div class="row"><div class="col-md-4 form-group"><input type="text" class="form-control" name="Specification_title[]" id="SpecificationTitle" placeholder="Title"></div><div class="col-md-4 form-group"><input type="text" class="form-control" name="ar_specification_title[]" id="ar_specificationTitle" placeholder="Title in Arabic"></div><div class="col-md-4 form-group"><input type="text" class="form-control" name="Specification_name[]" id="SpecificationName" placeholder="Sub Title"></div><div class="col-md-4 form-group"><input type="text" class="form-control" name="ar_specification_name[]" id="ar_specificationName" placeholder="Sub Title in Arabic"></div><div class="col-md-4 form-group"><input type="text" class="form-control" name="Specification_value[]" id="SpecificationValue" placeholder="Value"></div><div class="col-md-4 form-group"><input type="text" class="form-control" name="ar_specification_value[]" id="ar_specificationValue" placeholder="Value in Arabic"></div><div class="col-md-4 form-group"><select class="form-control" name="Specification_icon[]" id="SpecificationIcon"><option value="">Select Icon</option><option value="colour-temperature.svg">Colour Temperature </option><option value="degree.svg">Degree </option><option value="luminous.svg">Luminous </option><option value="wattage.svg">Wattage </option></select></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
            $.ajax({
                type: "GET",
                url: "{{route('admin.specification.add')}}",
                success: function (response) {
                    $("#specifications_box").append(response);
                }
            });
        });
        
        //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