@extends('layouts.app')
<script type="text/javascript">
    localStorage.setItem('modulename', '');
    localStorage.setItem('pagename', 'leftmenu_project');
    
</script>

@section('content')
    <div class="content-header row">
        <div class="content-header-left col-12 mb-2 mt-1">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h5 class="content-header-title float-left pr-1 mb-0">{{trans('app.project')}}</h5>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb p-0 mb-0">
                            <li class="breadcrumb-item"><a href="{{route('project.index')}}">
                                    <i class="bx bx-home-alt"></i></a>
                            </li>
                            <li class="breadcrumb-item active"><a href="{{route('project.index')}}">{{trans('app.list')}}</a></li>
                            <li class="breadcrumb-item active">{{trans('app.edit')}}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
    <section id="basic-vertical-layouts">
        <div class="row match-height">
            <div class="col-md-12 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{trans('app.edit')}}</h4>
                        <a href="{{route('project.index')}}" class="btn btn-outline-danger float-right" style="margin-top: -30px"><i class="bx bx-undo"></i>{{trans('app.back')}}</a>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                        
                            {!! Form::open(['route' => ['project.update'], 'class' => 'form form-vertical update-edit-form', 'id' => 'update-project-form','data-toggle' => 'validator','enctype' => 'multipart/form-data','files' => true]) !!}
                            
                                <input type="hidden" id="id" name="id" value="{{ $project_data['id'] }}">
                                <div class="form-body">
                                    <div class="row">

                                        <div class="col-12 mb-1">
                                            <div class="form-group">
                                                <label for="project-vertical">{{trans('project.title')}}</label>
                                                
                                                <input class="form-control" type="text" id="title"
                                                    name="title" autocomplete="off"
                                                    placeholder="{{trans('project.title')}}" required value="{{ $project_data->title }}">
                                            </div>
                                            @component('components.ajax-error',['field'=>'title'])@endcomponent
                                            
                                        </div>

                                        <div class="col-12 mb-1">                                        
                                            <div class="form-group">
                                                <label for="project-vertical">{{trans('project.sort_order')}}</label>
                                                <input class="form-control" type="text" id="sort_order"
                                                    name="sort_order" autocomplete="off"
                                                    placeholder="{{trans('project.sort_order')}}" value="{{ $project_data->sort_order }}">
                                            </div>
                                            @component('components.ajax-error',['field'=>'sort_order'])@endcomponent
                                        </div>
                                        <div class="col-12 mb-1">                                        
                                            <div class="form-group">
                                                <label for="project-vertical">{{trans('project.category')}}</label>
                                                <select class="form-control col-12" name="category_id" id="category_id">
                                                    <option value="">Select Category</option>
                                                    @foreach($categories as $categorie)
                                                        <option value="{{{ $categorie->id }}}" {{ ( $categorie->id==$project_data->category_id) ? 'selected' : '' }}  >{{{ $categorie->title }}}</option>
                                                    @endforeach     
                                                </select>
                                            </div>
                                            @component('components.ajax-error',['field'=>'category'])@endcomponent
                                        </div>
                                        
                                        <div class="col-12 mb-1">                                        
                                            <div class="form-group">
                                                <label for="project-vertical">{{trans('project.diplay_home')}}</label><br/>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="is_show_home" id="is_show_home_yes" value="1" {{ ($project_data->is_show_home=='1') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="inlineRadio1">Yes</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="is_show_home" id="is_show_home_no" value="0" {{ ($project_data->is_show_home=='0') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="inlineRadio2">No</label>
                                                </div>
                                            
                                            </div>
                                            @component('components.ajax-error',['field'=>'category'])@endcomponent
                                        </div>

                                        <div class="col-12 mb-1">                                        
                                            <div class="form-group">
                                                <label for="project-vertical">{{trans('project.area')}}</label>
                                                <div id="snow-container">
                                                    <div class="quill-toolbar" id="toolbar-container_address">
                                                        <span class="ql-formats">                                                    
                                                            <select class="ql-size" id="ql-size">
                                                                <option selected></option>
                                                                <option value="8px">8px</option>
                                                                <option value="9px">9px</option>
                                                                <option value="10px">10px</option>
                                                                <option value="11px">11px</option>
                                                                <option value="12px">12px</option>
                                                                <option value="14px">14px</option>
                                                                <option value="16px">16px</option>
                                                                <option value="18px">18px</option>
                                                                <option value="20px">20px</option>
                                                                <option value="22px">22px</option>
                                                                <option value="24px">24px</option>
                                                                <option value="26px">26px</option>
                                                                <option value="28px">28px</option>
                                                                <option value="36px">36px</option>
                                                                <option value="48px">48px</option>
                                                                <option value="72px">72px</option>
                                                            </select>
                                                            <select class="ql-font">
                                                                <option selected>Sailec Light</option>
                                                                <option value="arial">Arial</option>
                                                                <option value="sofia">Sofia Pro</option>
                                                                <option value="roboto">Roboto Slab</option>
                                                                <option value="inconsolata">Inconsolata</option>
                                                                <option value="ubuntu">Mono</option>
                                                            </select>
                                                            <button class="ql-header" value="1"
                                                                type="button"></button>
                                                            <button class="ql-header" value="2"
                                                                type="button"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-bold"></button>
                                                            <button class="ql-italic"></button>
                                                            <button class="ql-underline"></button>
                                                            <button class="ql-strike" type="button"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-list" value="ordered"></button>
                                                            <button class="ql-list" value="bullet"></button>
                                                            <select class="ql-color" title="Colour">
                                                                <option value="#000000"></option>
                                                                <option value="#ffffff"></option>
                                                                <option value="#e60000"></option>
                                                                <option value="#ff9900"></option>
                                                                <option value="#ffff00"></option>
                                                                <option value="#008a00"></option>
                                                                <option value="#0066cc"></option>
                                                                <option value="#9933ff"></option>
                                                                <option selected="selected"></option>
                                                                <option value="#facccc"></option>
                                                                <option value="#ffebcc"></option>
                                                                <option value="#ffffcc"></option>
                                                                <option value="#cce8cc"></option>
                                                                <option value="#cce0f5"></option>
                                                                <option value="#ebd6ff"></option>
                                                                <option value="#bbbbbb"></option>
                                                                <option value="#f06666"></option>
                                                                <option value="#ffc266"></option>
                                                                <option value="#ffff66"></option>
                                                                <option value="#66b966"></option>
                                                                <option value="#66a3e0"></option>
                                                                <option value="#c285ff"></option>
                                                                <option value="#888888"></option>
                                                                <option value="#a10000"></option>
                                                                <option value="#b26b00"></option>
                                                                <option value="#b2b200"></option>
                                                                <option value="#006100"></option>
                                                                <option value="#0047b2"></option>
                                                                <option value="#6b24b2"></option>
                                                                <option value="#444444"></option>
                                                                <option value="#5c0000"></option>
                                                                <option value="#663d00"></option>
                                                                <option value="#666600"></option>
                                                                <option value="#003700"></option>
                                                                <option value="#002966"></option>
                                                                <option value="#3d1466"></option>
                                                            </select>
                                                            <select class="ql-background ql-picker ql-color-picker"
                                                                title="Colour">
                                                                <option value="#000000"></option>
                                                                <option value="#ffffff"></option>
                                                                <option value="#e60000"></option>
                                                                <option value="#ff9900"></option>
                                                                <option value="#ffff00"></option>
                                                                <option value="#008a00"></option>
                                                                <option value="#0066cc"></option>
                                                                <option value="#9933ff"></option>
                                                                <option selected="selected"></option>
                                                                <option value="#facccc"></option>
                                                                <option value="#ffebcc"></option>
                                                                <option value="#ffffcc"></option>
                                                                <option value="#cce8cc"></option>
                                                                <option value="#cce0f5"></option>
                                                                <option value="#ebd6ff"></option>
                                                                <option value="#bbbbbb"></option>
                                                                <option value="#f06666"></option>
                                                                <option value="#ffc266"></option>
                                                                <option value="#ffff66"></option>
                                                                <option value="#66b966"></option>
                                                                <option value="#66a3e0"></option>
                                                                <option value="#c285ff"></option>
                                                                <option value="#888888"></option>
                                                                <option value="#a10000"></option>
                                                                <option value="#b26b00"></option>
                                                                <option value="#b2b200"></option>
                                                                <option value="#006100"></option>
                                                                <option value="#0047b2"></option>
                                                                <option value="#6b24b2"></option>
                                                                <option value="#444444"></option>
                                                                <option value="#5c0000"></option>
                                                                <option value="#663d00"></option>
                                                                <option value="#666600"></option>
                                                                <option value="#003700"></option>
                                                                <option value="#002966"></option>
                                                                <option value="#3d1466"></option>
                                                            </select>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-list" value="ordered"></button>
                                                            <button class="ql-list" value="bullet"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-link"></button>
                                                            <button class="ql-image"></button>
                                                            <button class="ql-video"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-formula"></button>
                                                            <button class="ql-code-block"></button>
                                                            <button class="ql-indent" value="-1" type="button"></button>
                                                            <button class="ql-indent" value="+1" type="button"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-clean"></button>
                                                            </span>
                                                    </div> 
                                                    <div id="editor_address" class="editor" style="height:100px;" >
                                                       
                                                    </div>
                                                </div>
                                                <!-- <textarea class="form-control" type="text" id="area"
                                                        name="area" autocomplete="off"
                                                        placeholder="{{trans('project.area')}}" >{{ $project_data->address }}</textarea> -->
                                            </div>
                                            @component('components.ajax-error',['field'=>'area'])@endcomponent
                                        </div>

                                        <div class="col-12 mb-1">                                        
                                            <div class="form-group">
                                                <label for="project-vertical">{{trans('project.desc')}}</label>
                                                <div class="snow-container">
                                                    <div class="quill-toolbar" id="toolbar-container">
                                                        <span class="ql-formats">                                                    
                                                            <select class="ql-size" id="ql-size">
                                                                <option selected></option>
                                                                <option value="8px">8px</option>
                                                                <option value="9px">9px</option>
                                                                <option value="10px">10px</option>
                                                                <option value="11px">11px</option>
                                                                <option value="12px">12px</option>
                                                                <option value="14px">14px</option>
                                                                <option value="16px">16px</option>
                                                                <option value="18px">18px</option>
                                                                <option value="20px">20px</option>
                                                                <option value="22px">22px</option>
                                                                <option value="24px">24px</option>
                                                                <option value="26px">26px</option>
                                                                <option value="28px">28px</option>
                                                                <option value="36px">36px</option>
                                                                <option value="48px">48px</option>
                                                                <option value="72px">72px</option>
                                                            </select>
                                                            <select class="ql-font">
                                                                <option selected>Sailec Light</option>
                                                                <option value="arial">Arial</option>
                                                                <option value="sofia">Sofia Pro</option>
                                                                <option value="roboto">Roboto Slab</option>
                                                                <option value="inconsolata">Inconsolata</option>
                                                                <option value="ubuntu">Mono</option>
                                                            </select>
                                                            <button class="ql-header" value="1"
                                                                type="button"></button>
                                                            <button class="ql-header" value="2"
                                                                type="button"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-bold"></button>
                                                            <button class="ql-italic"></button>
                                                            <button class="ql-underline"></button>
                                                            <button class="ql-strike" type="button"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-list" value="ordered"></button>
                                                            <button class="ql-list" value="bullet"></button>
                                                            <select class="ql-color" title="Colour">
                                                                <option value="#000000"></option>
                                                                <option value="#ffffff"></option>
                                                                <option value="#e60000"></option>
                                                                <option value="#ff9900"></option>
                                                                <option value="#ffff00"></option>
                                                                <option value="#008a00"></option>
                                                                <option value="#0066cc"></option>
                                                                <option value="#9933ff"></option>
                                                                <option selected="selected"></option>
                                                                <option value="#facccc"></option>
                                                                <option value="#ffebcc"></option>
                                                                <option value="#ffffcc"></option>
                                                                <option value="#cce8cc"></option>
                                                                <option value="#cce0f5"></option>
                                                                <option value="#ebd6ff"></option>
                                                                <option value="#bbbbbb"></option>
                                                                <option value="#f06666"></option>
                                                                <option value="#ffc266"></option>
                                                                <option value="#ffff66"></option>
                                                                <option value="#66b966"></option>
                                                                <option value="#66a3e0"></option>
                                                                <option value="#c285ff"></option>
                                                                <option value="#888888"></option>
                                                                <option value="#a10000"></option>
                                                                <option value="#b26b00"></option>
                                                                <option value="#b2b200"></option>
                                                                <option value="#006100"></option>
                                                                <option value="#0047b2"></option>
                                                                <option value="#6b24b2"></option>
                                                                <option value="#444444"></option>
                                                                <option value="#5c0000"></option>
                                                                <option value="#663d00"></option>
                                                                <option value="#666600"></option>
                                                                <option value="#003700"></option>
                                                                <option value="#002966"></option>
                                                                <option value="#3d1466"></option>
                                                            </select>
                                                            <select class="ql-background ql-picker ql-color-picker"
                                                                title="Colour">
                                                                <option value="#000000"></option>
                                                                <option value="#ffffff"></option>
                                                                <option value="#e60000"></option>
                                                                <option value="#ff9900"></option>
                                                                <option value="#ffff00"></option>
                                                                <option value="#008a00"></option>
                                                                <option value="#0066cc"></option>
                                                                <option value="#9933ff"></option>
                                                                <option selected="selected"></option>
                                                                <option value="#facccc"></option>
                                                                <option value="#ffebcc"></option>
                                                                <option value="#ffffcc"></option>
                                                                <option value="#cce8cc"></option>
                                                                <option value="#cce0f5"></option>
                                                                <option value="#ebd6ff"></option>
                                                                <option value="#bbbbbb"></option>
                                                                <option value="#f06666"></option>
                                                                <option value="#ffc266"></option>
                                                                <option value="#ffff66"></option>
                                                                <option value="#66b966"></option>
                                                                <option value="#66a3e0"></option>
                                                                <option value="#c285ff"></option>
                                                                <option value="#888888"></option>
                                                                <option value="#a10000"></option>
                                                                <option value="#b26b00"></option>
                                                                <option value="#b2b200"></option>
                                                                <option value="#006100"></option>
                                                                <option value="#0047b2"></option>
                                                                <option value="#6b24b2"></option>
                                                                <option value="#444444"></option>
                                                                <option value="#5c0000"></option>
                                                                <option value="#663d00"></option>
                                                                <option value="#666600"></option>
                                                                <option value="#003700"></option>
                                                                <option value="#002966"></option>
                                                                <option value="#3d1466"></option>
                                                            </select>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-list" value="ordered"></button>
                                                            <button class="ql-list" value="bullet"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-link"></button>
                                                            <button class="ql-image"></button>
                                                            <button class="ql-video"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-formula"></button>
                                                            <button class="ql-code-block"></button>
                                                            <button class="ql-indent" value="-1" type="button"></button>
                                                            <button class="ql-indent" value="+1" type="button"></button>
                                                            </span>
                                                            <span class="ql-formats">
                                                            <button class="ql-clean"></button>
                                                            </span>
                                                    </div> 
                                                    <div id="editor" class="editor" style="height:300px;">
                                                        
                                                    </div>
                                                </div> 
                                                <!-- <textarea class="form-control" type="text" id="desc"
                                                        name="desc" autocomplete="off"
                                                        placeholder="{{trans('project.desc')}}" >{{ $project_data->detail }}</textarea> -->
                                            </div>
                                            @component('components.ajax-error',['field'=>'desc'])@endcomponent
                                        </div>
                                       
                                    <!----------------------------------Custom---------------------------------->
                                    <div class="col-12">
                                        <div class="border mb-1">
                                            <div class="p-1 border-bottom">
                                                <div class="row align-items-center">
                                                    <div class="col">
                                                        <h5 class="m-0">Project Images</h5>
                                                    </div>
                                                    <div class="col-auto">
                                                    <input type="button" class="btn btn-outline-primary" name="btn_image" id="btn_image" value="Add Images"> 
                                                        <input type="file" class="btn btn-outline-primary" name="images[]" id="images" accept="image/*" multiple="multiple" style="display:none;" > 
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-1">
                                                <div id="gallery" class="my-2">        
                                                    <div id="image-container">                                           
                                                        <ul id="image-list" class="img-gallery" >                                            
                                                        @if(count($project_img)>0)
                                                        @foreach($project_img as $image_data)
                                                            <li id="image_{{ $image_data->id }}" >
                                                                <div class="ratio">
                                                                    <img src="{{ url('/frontend/images/project/'.$image_data->image_url) }}" >
                                                                    
                                                                    <button type="button" class="btn btn-danger btn-sm" onclick="removeProject_img({{ $image_data->id }})"> Delete</button>
                                                                </div>
                                                            </li>                                                        
                                                        @endforeach
                                                        @endif
                                                        </ul>

                                                    </div> 
                                                </div>
                                            </div>
                                        </div>
                                    
                                    </div>   
                                    
                                    
                                    
                                    <!----------------------------------End Custom---------------------------------->
                                        <div class="col-12 d-flex ">
                                            <!--<input type="button" id="submit" name="submit" value="Arrange" class="btn btn-primary mr-1 mb-1">-->
                                            <button type="submit" class="btn btn-primary mr-1 mb-1">{{trans('app.update')}}</button>
                                            <button type="reset" class="btn btn-light-secondary mr-1 mb-1">{{trans('app.reset')}}</button>
                                        </div>
                                    </div>
                                </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@push('pagestyle')
@endpush
@push('pagescript')
    @include('stacks.js.datatables')
    @include('stacks.js.modules.project.edit')
    <script>
    
    $('#btn_image').on('click',function(){
        $( "#images" ).trigger( "click" );
    })

    function removedata(id){
        //alert(id);
        //$(".rm_cls-"+id).remove();
    }

    function removeProject_img(id) {
        
        swal({
            title: "{{trans('project.delete_project_img_message')}}",
            text: "",
            icon: "error",
            buttons: true,
            dangerMode: true,
            buttons: ["{{trans('app.cancel')}}","{{trans('app.confirm')}}"],
        })
            .then((willDelete) => {
                if (willDelete) {
                    
                    
                    $.ajax({
                        url: '{!! route('project_img.delete')  !!}',
                        type: 'POST',
                        data:  JSON.stringify({id: id}),
                        contentType: "application/json",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (result) {
                            if (result.type === 'SUCCESS') {
                                toastr.success(result.message);
                                setTimeout(
                                function() 
                                {
                                    
                                }, 2000);
                                location.reload();
                            } else {
                                toastr.error(result.message);
                            }
                        }
                    });
                }
            });
    }
</script>

<script>    
let Font = Quill.import('formats/font');
let Size = Quill.import('attributors/style/size');
Size.whitelist = [false,'8px','9px','10px','11px','12px','14px','16px','18px','20px','22px','24px','26px','28px','36px','48px','72px'];
// We do not add Sans Serif since it is the default
Font.whitelist = ['inconsolata', 'roboto', 'mirza', 'arial','sofia','slabo','ubuntu'];
Quill.register(Size, true);
Quill.register(Font, true); 
var options = {
  modules: {
    toolbar: '#toolbar-container'
  },
  placeholder: 'Description',
  theme: 'snow'
};
var editor = new Quill('#editor', options);

var options = {
  modules: {
    toolbar: '#toolbar-container_address'
  },
  placeholder: 'Area',
  theme: 'snow'
};
var editor2 = new Quill('#editor_address', options);
var string = "{!! nl2br($project_data['detail']) !!}"; 
$("#editor .ql-editor").text('');
$("#editor .ql-editor").append(string);

var string_area = "{!! nl2br($project_data['address']) !!}";
$("#editor_address .ql-editor").text('');
$("#editor_address .ql-editor").append(string_area);
</script>


<script src="{{ asset('assets/js/jquery-ui.js') }}" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        var dropIndex;
        $("#image-list").sortable({
                update: function(event, ui) { 
                    dropIndex = ui.item.index();
            }
        });

        /*$('#submit').click(function (e) {
            var imageIdsArray = [];
            $('#image-list li').each(function (index) {
                //console.log(index+'<='+dropIndex);
                //if(index <= dropIndex) {
                    var id = $(this).attr('id');
                    var split_id = id.split("_");
                    imageIdsArray.push(split_id[1]);
                //}
            });
            //alert(imageIdsArray);
            $.ajax({
                url: '{!! route('project.order_sequence')  !!}',
                type: 'post',
                data:  JSON.stringify({imageIds: imageIdsArray}),
                contentType: "application/json",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (result) {

                    if (result.type === 'SUCCESS') {
                        toastr.success(result.message);
                        //$('#project-table').DataTable().ajax.reload();
                        //location.reload();
                    } else {
                        toastr.error(result.message);
                    }
                    //console.log(response);
                    //$("#txtresponse").css('display', 'inline-block'); 
                    //$("#txtresponse").text(response);
                }
            });
            //alert(imageIdsArray);
            e.preventDefault();
        });*/
    });

    </script>
@endpush