@extends('admin.layouts.app')
@section('page_content')
<script>
    function deleteImage(galleryId){
        if(confirm('Do you want to delete image?')){
            $.ajax({
                type: "GET",
                url: "{{url('cms/projects/gallery/delete')}}/"+galleryId,
                success: function (response) {
                    console.log(response);
                    if(response.res == true){
                        $("#image_"+galleryId).remove();
                    }
                }
            });
        }
    }
</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">Project Edit</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.update')}}">
                                @csrf
                                <input type="hidden" name="id" value="{{$project->id}}">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="name">Project Name </label>
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Project Name" value="{{$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" value="{{$project->ar_name}}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label for="thumb_image">Thumb Image</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" class="custom-file-input form-control" id="customFile">
                                                <label class="custom-file-label" for="customFile">Choose file</label>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            @if(file_exists($project->thumb_image))
                                                <a href="{{asset($project->thumb_image)}}" target="_blank"><img src="{{asset($project->thumb_image)}}" style="width:100%;"></a>
                                            @else
                                                
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <label for="banner_image">Banner Image</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" class="custom-file-input form-control" id="customFile">
                                                <label class="custom-file-label" for="customFile">Choose file</label>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            @if(file_exists($project->banner_image))
                                                <a href="{{asset($project->banner_image)}}" target="_blank"><img src="{{asset($project->banner_image)}}" style="width:100%;"></a>
                                            @else
                                                
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="location">Location</label>
                                        <input type="text" class="form-control" id="location" name="location" placeholder="Location" value="{{$project->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" value="{{$project->ar_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" value="{{$project->head_line_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" value="{{$project->ar_head_line_title}}" 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..">{{$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..">{{$project->ar_description}}</textarea>
                                </div>
                                <div class="form-group">
                                    <h5>Specifications</h5>
                                    <div class="specifications_box field_wrapper" id="specifications_box">
                                        @if(count($project->specifications) > 0)
                                            @php($i = 0)
                                            @foreach($project->specifications as $key => $specification)
                                                <input value="{{$specification->id}}" name="specification_ids[]" type="hidden">
                                                <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[]" id="SpecificationTitle" placeholder="Title" value="{{$specification->title}}">
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <input type="text" class="form-control" name="ar_specification_title[]" id="ar_specificationTitle" value="{{$specification->ar_title}}" placeholder="Title in Arabic">
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <select class="form-control" name="Specification_title_font_size[]" id="SpecificationIcon">
                                                                    <option value="">Font Size </option>
                                                                    @foreach($font_sizes as $key => $font_size)
                                                                        <option value="{{$key}}" {{($specification->name_font_size == $key)?'selected':'' }} >{{$font_size}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <input type="text" class="form-control" name="Specification_name[]" id="SpecificationName" placeholder="Sub Title" value="{{$specification->name}}">
                                                            </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" value="{{$specification->ar_name}}">
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <select class="form-control" name="Specification_sub_title_font_size[]" id="SpecificationIcon">
                                                                    <option value="">Font Size </option>
                                                                    @foreach($font_sizes as $key => $font_size)
                                                                        <option value="{{$key}}" {{($specification->title_font_size == $key)?'selected':'' }}  >{{$font_size}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <input type="text" class="form-control" name="Specification_value[]" id="SpecificationValue" placeholder="Value" value="{{$specification->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" value="{{$specification->ar_value}}">
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <select class="form-control" name="Specification_value_font_size[]" id="SpecificationIcon">
                                                                    <option value="">Font Size </option>
                                                                    @foreach($font_sizes as $key => $font_size)
                                                                        <option value="{{$key}}" {{($specification->value_font_size == $key)?'selected':'' }} >{{$font_size}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <select class="form-control" name="Specification_icon[]" id="SpecificationIcon">
                                                                    <option value="">Select Icon</option>
                                                                    @foreach($sicons as $key => $sicon)
                                                                        <option value="{{$key}}" {{($specification->icon == $key)?'selected':'' }}>{{$sicon}} </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="col-md-4 form-group">
                                                                <select class="form-control" name="Specification_theme[]" id="SpecificationIcon">
                                                                    <option value="">Select Theme </option>
                                                                    @foreach($themes as $key => $theme)
                                                                        <option value="{{$key}}" {{($specification->theme == $key)?'selected':'' }} >{{$theme}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1">
                                                        @if($i == 0)
                                                            <a href="javascript:0;" class="add_button btn btn-success green_filled"><i class="fa fa-plus"></i></a>
                                                        @else
                                                            <a href="javascript:0;" class="remove_button btn btn-danger"><i class="fa fa-minus"></i></a>
                                                        @endif
                                                    </div>
                                                </div>
                                                @php($i = $i+1)
                                            @endforeach
                                        @else
                                            <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>
                                        @endif
                                    </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;">
                                    @if(count($project->galleryImages) > 0)
                                        <div class="gallery_box row mt-3">
                                            @foreach($project->galleryImages as $galleryImage)
                                                @if(file_exists($galleryImage->image))
                                                    <div class="col-md-2 text-center" id="{{'image_'.$galleryImage->id}}">
                                                        <a href="{{asset($galleryImage->image)}}" target="_blank"><img src="{{asset($galleryImage->image)}}" style="width:100%;height:100px;"></a>
                                                        <a href="javascript:0;" onclick="deleteImage({{$galleryImage->id}});" style="text-decoration:none;" class="text-danger"><small><i class="fa fa-trash-o"></i> Delete Image</small></a>
                                                    </div>
                                                @else
                                                    
                                                @endif
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                                <button type="submit" class="btn btn-green btn-rounded mr-2">Update</button>
                                <!-- <button class="btn btn-light btn-rounded">Cancel</button> -->
                            </form>
                        </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 = $('.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>
<script>
    CKEditorChange('description','only_biu_options.js');
    CKEditorChange('ar_description','only_biu_options.js');
</script>
@endsection