@extends('layouts.master')

@section('title') @lang('translation.Terms & Condition') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/css/custom-dropzone.css') }}" rel="stylesheet" type="text/css" />

<style>
    .checklist-create-btn{
        float: right;
        margin-top: -53px;
        position: relative;
        left: 20px;
    }
    .question-id{        
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #9EA2A9;
        font-size: 20px;
        text-align: center;
        padding: 5px;
        margin: 5px;
    }
    .question-section{
        display: flex;
        margin-top: 20px !important;
    }
    .question-input-section{
        display: flex;
        width: 100%;
        border: 1px solid;
        border-radius: 8px;
        border-top: 5px solid #0058B6;
        padding: 5px;
        box-sizing: border-box;
    }
    .question-input{
        width: 50%;
        display: flex;
    }
    .question-input input {
        /* width: 50%;      
        border: none;
        background: #F8F9FA; */
    }
    .question-input select {  
        width: 47%;      
        /* border: none;
        background: #F8F9FA; */
    }
    .media-link{
        width: 4%;
        height: 32px;
        padding: 3px 6px;
        border: 1px solid;
        border-radius: 10px;
        background: #E8E8E8;
        margin-left: 20px;
        position: relative;
    }
    .media-link i{
        font-size: 20px;
    }
    .question-info{
        width: 40%;
        text-align: center;
        padding: 5px;
    }
    .instruction-box {
        
        height: 100%;
        border: 2px dashed #eff2f7 !important;
    }
    img{
        width:100px;
        height:100px;
    }
</style>

@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Terms & Condition @endslot
@slot('title') Edit Terms & Condition @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="edit_form" action="{{ route('cms.walkaround-checklist.update', ['walkaround_checklist' => $walkaroundChecklist->id] ) }}" method="post" enctype="multipart/form-data" novalidate>
    @method('put')
    @csrf
    <input name="id" type="hidden"  value="{{ $walkaroundChecklist->id }}" />
    
        <div class="card">
            <div class="card-body">
                <h5>Create Walkaround Checklist Details</h5><br>
                <div class="mb-3 row">
                    <label for="product_type_id" class="col-md-2 col-form-label">Product Type<span class="required-sym">*</span></label>
                    <div class="col-md-6">
                        <select name="product_type_id" id="product_type_id" class="form-control select2" required>
                            <option value=''>Select</option>
                            @foreach($productTypeList as $productType)
                                <option value="{{ $productType->id }}" {{ $walkaroundChecklist->product_type_id == $productType->id ? 'selected' : '' }}>{{ $productType->product_type}}</option>
                            @endforeach 
                        </select>
                        <div  id="product_type_id_errors"  class="invalid-feedback">
                            Product Type Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="product_model" class="col-md-2 col-form-label">Product Model<span class="required-sym">*</span></label>
                    <div class="col-md-6">
                        <select name="product_model" id="product_model" class="form-control select2" required>
                            <option value=''>Select</option>
                            @foreach($assetList as $asset)
                                <option value="{{ $asset->model_name }}" {{ $walkaroundChecklist->product_model == $asset->model_name ? 'selected' : '' }}>{{ $asset->model_name}}</option>
                            @endforeach 
                        </select>
                        <div  id="product_model_errors"  class="invalid-feedback">
                            Product Model Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="subscription_plan_id" class="col-md-2 col-form-label">Subscription Policy<span class="required-sym">*</span></label>
                    <div class="col-md-6">
                        <select name="subscription_plan_id" id="subscription_plan_id" class="form-control select2" required>
                            <option value=''>Select</option>
                            @foreach($subscriptionPolicyList as $subscriptionPolicy)
                                <option value="{{ $subscriptionPolicy->id }}"  {{ $walkaroundChecklist->subscription_plan_id == $subscriptionPolicy->id ? 'selected' : '' }}>{{ $subscriptionPolicy->plan_name}}</option>
                            @endforeach 
                        </select>
                        <div  id="subscription_plan_id_errors"  class="invalid-feedback">
                        Subscription Policy * Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="mobile_user" class="col-md-2 col-form-label">Mobile User<span class="required-sym">*</span></label>
                    <div class="col-md-6">
                        <select id="mobile_user" name="mobile_user" class="form-select" required>
                            <option value=''>Select...</option>
                            <option value="Customer App" {{ $walkaroundChecklist->mobile_user == 'Customer App' ? 'selected' : '' }}>Customer App</option>
                            <option value="Angel Driver" {{ $walkaroundChecklist->mobile_user == 'Angel Driver' ? 'selected' : '' }}>Angel Driver</option>
                            <option value="OPS Angel" {{ $walkaroundChecklist->mobile_user == 'OPS Angel' ? 'selected' : '' }}>OPS Angel</option>
                        </select>
                        <div  id="mobile_user_errors"  class="invalid-feedback">
                            Mobile User Required
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                
                <div class="mb-3 row">
                    <div class="col-md-10">
                        <h5>Checklist Parameters Details </h5>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="category-modal add_category btn btn-primary waves-effect waves-light" >Add Category</button>
                    </div>
                </div>
                <hr>
                <div class="repeater" enctype="multipart/form-data">
                    
                    <div data-repeater-list="checklist-item">
                        @if(isset($walkaroundChecklist->walkaroundQuestions[0]))
                        @foreach ($walkaroundChecklist->walkaroundQuestions as $walkaroundQuestions)
                            <div data-repeater-item class="row">
                                
                                <div class="collapse media-section">
                                    <input type="hidden" class="form-controll instruction-field" name="instructions" value="{{ $walkaroundQuestions->instruction }}" />
                                    <input type="file" class="dropzone-field" name="media" multiple/>
                                </div>
                                <input type="hidden" name="question_id" value="{{ $walkaroundQuestions->id }}" />
                                <div class="mb-3 row">
                                    <div class="col-md-10 question-section">
                                        <div class="question-id">1</div>
                                        <div class="question-input-section" >
                                            <div class="question-input" >
                                                <select name="walkaround_category_id" id="walkaround_category_id" class="form-select" >
                                                    <option value=''>Select Category</option>
                                                    @foreach($categoryList as $category)
                                                        <option value="{{ $category->id }}"  {{ $walkaroundQuestions->walkaround_category_id == $category->id  ? 'selected' : ''}}>{{ $category->category_name }}</option>
                                                    @endforeach 
                                                </select>
                                                <input id="question" name="question" type="text" class="form-control" value="{{ $walkaroundQuestions->question }}"  placeholder="Type your question here" />
                                            </div>
                                            <button name="save-media" data-question-id="{{ $walkaroundQuestions->id }}" data-images="{{ $walkaroundQuestions->media}}" data-instruction="{{ $walkaroundQuestions->instructions }}" id="add_checklist_ins" type="button" class="add-checklist-ins-modal media-link"><i class="dripicons-photo"></i></button>
                                            <div class="question-info">Single choice </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @else
                        <div data-repeater-item class="row">
                            <div class="mb-3 row">
                                <div class="col-md-10 question-section">
                                    <div class="collapse media-section">
                                        <input type="hidden" class="form-controll instruction-field" name="instruction" />
                                        <input type="file" class="dropzone-field" name="media" multiple/>
                                    </div>
                                    <div class="question-id">1</div>
                                    <div class="question-input-section" >
                                        <div class="question-input" >
                                            <select name="walkaround_category_id" id="walkaround_category_id" class="form-select" >
                                                <option value=''>Select Category</option>
                                                @foreach($categoryList as $category)
                                                    <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                                @endforeach 
                                            </select>
                                            <input id="question" name="question" type="text" class="form-control" placeholder="Type your question here" />
                                        </div>
                                        <button name="save-media" id="add_checklist_ins" type="button" class="add-checklist-ins-modal media-link"><i class="dripicons-photo"></i></button>
                                        <div class="question-info">Single choice </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                    <div class="mb-3 row">
                        <div class="col-md-11">
                            <div class="d-flex flex-wrap gap-2 checklist-create-btn">                            
                                <input data-repeater-create type="button" class="add_checklist btn btn-primary mt-3 mt-lg-0 permission-add-btn" value="Add Checklist" />
                            </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card btn-card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2 btn-sm-end">
                    <button type="submit" class="btn btn-primary waves-effect waves-light">Update</button>
                </div>
            </div>
        </div>
   </form>
   <div class="modal fade" id="category_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Create Walkaround Checklist Category</h5>
                <button type="button" class="close-category-modal  close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form  class="needs-validation" id="category_form" action="#" method="post" enctype="multipart/form-data" >
                @csrf
                    <div class="mb-3 row">
                        <input name="walkaround_checklis_id" type="hidden"  value="{{ $walkaroundChecklist->id }}" />

                        <label for="category_name" class="col-md-4 col-form-label">Category Name</label>
                        <div class="col-md-8">
                            <input id="category_name" name="category_name" type="text" class="form-control" placeholder="Type here" />
                            <div  id="category_name_errors"  class="invalid-feedback">
                            >Category Name Required
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="no_images" class="col-md-4 col-form-label">No of images</label>
                        <div class="col-md-8">
                            <select name="no_images" id="no_images" class="form-select" >
                                <option value=''>Select</option>
                                @foreach(range(1,5) as $range)
                                    <option value="{{ $range }}">{{ $range }}</option>
                                @endforeach 
                            </select>
                            <div  id="no_images_errors"  class="invalid-feedback">
                            No of images Required
                            </div>
                        </div>
                    </div>
                </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="close-category-modal btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id="save_category" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bd-example-modal-lg" id="checklist_ins_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Insert Instruction </h5>
                    
                    <button type="button" class="close-checklist-ins-modal close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <small>The instruction is for the mobile user. Provide image / video instruction and text instruction as support material  .</small>
                    <form  class="needs-validation" id="checklist_ins_form" action="#" method="post" enctype="multipart/form-data" >
                    @csrf
                    <input type="hidden" id="media_id" />
                        <div class="mb-3 row">
                            <div class="col-md-6">
                                <textarea id="modal_instructions" name="instructions" type="text" class="instruction-box form-control" placeholder="Type your Instructions here" ></textarea>
                                <div  id="instructionsn_errors"  class="invalid-feedback">
                                Instructions Required
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div action="#" class="instruction-box dropzone_file">
                                    <div class="fallback">
                                        <input name="media" type="file" multiple="multiple">
                                    </div>
                                    <div class="dz-message needsclick">
                                        <div class="mb-3">
                                            <i class="display-4 text-muted bx bxs-cloud-upload"></i>
                                        </div>

                                        <h4>Drop files here or click to upload.</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    </div>
                    <div class="modal-footer">
                        <!-- <button type="button" class="close-category-modal btn btn-secondary" data-dismiss="modal">Close</button> -->
                        <button type="button" id="save_instruction" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
<!-- end row -->
 <!-- Modal -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <!-- dropzone plugin -->
    <script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!--tinymce js-->
    <script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/form-editor.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/jquery-repeater/jquery-repeater.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-repeater.int.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/custom.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        var fd = new FormData();

        $('input[type=radio][name=publish]').change(function() {
            if (this.value == 'Document') {
                $('.pdf-doc').show();
                $('.html-link').hide();
            }else if (this.value == 'HTML') {
                $('.pdf-doc').hide();
                $('.html-link').show();
            }
        });
        $( "#edit_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('cms.walkaround-checklist.validate') }}";
            form = $( "#edit_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    $.each(form.serializeArray(), function(index, item) {
                        fd.append(item.name, item.value);
                    });
                    actionUrl = form.attr('action')
                    $.ajax({
                        type: "POST",
                        url: actionUrl,
                        data:  fd,
                        contentType: false,
                        processData: false,
                        success: function(response){ 
                            console.log(response);
                            if(response.mode == true){
                                window.location.href = "{{ url()->previous() }}";
                            }
                        },
                        error: function (data) {
                            console.log('An error occurred.');
                        },
                    });
                    //form.unbind().submit(); 
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.mode == false){
                        $.each(response.errors, function(i, item) {
                             $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
        $(document).on('click', '.category-modal', function(event) {

            options = {

            };
            $('#category_modal').modal('show');

        });
        $(document).on('click', '.close-category-modal', function(event) {
            $('#category_modal').modal('hide');
        });

        $(document).on('click', '.add-checklist-ins-modal', function(event) {
            $('#media_id').val($(this).attr('name'));
            $('#modal_instructions').val('');
            instruction = $(this).attr('data-instruction');
            if(instruction != ''){
                $('#modal_instructions').val(instruction);
            }
            questionId = $(this).attr('data-question-id');
            //myDropzone.removeAllFiles();
            myDropzone.files.forEach(function(file) { 
                file.previewElement.remove(); 
            });
            if(questionId){
                images = $(this).attr('data-images');
                if(images){                    
                    $('.dz-message').hide();
                    images = jQuery.parseJSON( images );
                    html = '';
                    $.each(images, function(index, item) {
                        // html.append('
                        // <img src="item" />
                        // ');
                        var tarr = item.split('/');      // ["static","images","banner","blue.jpg"]
                        var name = tarr[tarr.length-1]; // "blue.jpg"
                        var type = name.split('.')[1]; 
                        var mockFile = { 
                            name: name,
                            size: 12345, 
                            type: 'audio/*,image/*', 
                            status: Dropzone.ADDED, 
                            url: '/storage'+item,
                            "question_id": questionId,
                            "path": item
                        };

                        // Call the default addedfile event handler
                        myDropzone.emit("addedfile", mockFile);

                        // And optionally show the thumbnail of the file:
                        myDropzone.emit("thumbnail", mockFile, '/storage'+item);

                        myDropzone.files.push(mockFile);
                    });

                }else{
                    $('.dz-message').show();
                }
                
            }else{
                $('.dz-message').show();
            }
            $('#checklist_ins_modal').modal('show');

        });
        $(document).on('click', '.close-checklist-ins-modal', function(event) {
            $('#checklist_ins_modal').modal('hide');
        });

        $(document).on('click', '#save_category', function(event) {
            event.preventDefault();
            actionUrl = "{{ route('cms.walkaround-checklist.create-category') }}";
            form = $( "#category_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('#category_modal').modal('hide');
                    $("#edit_form").unbind().submit(); 
                    //location.reload(true);
                },
                error: function (data) {
                    response = data.responseJSON;
                    if(response.mode == false){
                        $.each(response.errors, function(i, item) {
                             $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
        
        $(document).on('click', '#save_instruction', function(event) {
            event.preventDefault();
            $('#checklist_ins_modal').modal('hide');
            form = $( "#checklist_ins_form" );
            
            mediaId = $('#media_id').val();
            mediaId = mediaId.slice(15, 16);
            instructionInput = 'checklist-item[' + mediaId + '][instruction]';
            mediaInput = 'checklist-item[' + mediaId + '][media][]';
            

            data = form.serialize();
            curentIns = $('#modal_instructions').val();
            currentFile = myDropzone.getQueuedFiles();


            $(".media-section").each(function(index) {
                currentInstruction = $(this).find('.instruction-field');
                currentDropZone = $(this).find('.dropzone-field');
                if(currentInstruction.attr('name') == instructionInput){
                    currentInstruction.val(curentIns);
                }
                if(currentDropZone.attr('name') == mediaInput){
                    $.each(currentFile, function(index, item) {
                        fd.append(currentDropZone.attr('name'), item);
                        
                    });
                    myDropzone.files.forEach(function(file) { 
                        file.previewElement.remove(); 
                    });
                    $('.dz-message').show();
                    //myDropzone.removeAllFiles();
                }else{
                    console.log(currentDropZone.attr('name'));
                }
                $('#modal_instructions').val('');
            });

            // actionUrl = "{{ route('cms.walkaround-checklist.add-nistruction-checklist') }}";
            // form = $( "#category_form" );
            // $.ajax({
            //     type: "POST",
            //     url: actionUrl,
            //     data: form.serialize(), // serializes the form's elements.
            //     success: function(data){ 
            //         $('#category_modal').modal('hide');
            //         $("#edit_form").unbind().submit(); 
            //         //location.reload(true);
            //     },
            //     error: function (data) {
            //         console.log('An error occurred.');
            //         response = data.responseJSON;
            //     },
            // });
        });

        
        Dropzone.autoDiscover = false;
        var myDropzone  = new Dropzone(".dropzone_file", { 
            autoProcessQueue: false,
            addRemoveLinks:true,
            parallelUploads: 5
        });
        myDropzone.on("removedfile", function(file) {
            console.log(file);
            var name = file.name;
            $.ajax({
                type: 'POST',
                url: "{{ route('cms.walkaround-checklist.delete-media-file')}} ",
                data: {
                    "name":name,
                    "id": "{{ $walkaroundChecklist->id }}",
                    "question_id": file.question_id,
                    "path": file.path,
                    "_token": "{{ csrf_token() }}"
                },
                dataType: 'html'
            });
        });
        $(document).on('click', '.add_checklist', function(event) {
            
            event.preventDefault();
            var total = $('.question-id').length;
            console.log(total);
            $(".question-id").each(function(index) {
                if (index === total - 1) {
                    $(this).html(total);
                }
            });
            var total = $('.add-checklist-ins-modal').length;
            console.log(total);
            $(".add-checklist-ins-modal").each(function(index) {
                if (index === total - 1) {
                    $(this).attr('data-question-id', '');
                    $(this).attr('data-images', '');
                    $(this).attr('data-instruction', '');
                }
            });
            
        });
        


    });
    
    </script>
@endsection