@extends('layouts.app')

@section('form-title') {{ __('Send appointment confirmations to enduser and client') }} @endsection
@section('form-sub-title') {{ $project->client->name }} @endsection

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('projects.index') }}">{{ __('Projects') }}</a> </li>
<li class="breadcrumb-item">{{ __('Send appointment confirmations to enduser and client') }}</li>
@endsection

@section('content')

<style>
    .wizard > .content > .body input.error {
        background: none;
        border-bottom-color: 1px solid #37474f !important;
        color: #ed1308;
    }
    .wizard > .content > .body label.error {
        color: #ed1308 !important;
    }
    .wizard > .content
    {
        height: 1000px !important;
    }
    .filepond--item{
        list-style: none;
    }
</style>

<div class="pcoded-inner-content">
    <div class="main-body">
        <div class="page-wrapper">
            <div class="page-body">
                <div class="row">
                    <div class="card">
                        {{-- <div class="card-header">
                            <h5>{{ __('Send report to client and enduser') }}</h5>
                        </div> --}}
                        <div class="card-block">
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="wizard">
                                        <section>
                                            <form class="wizard-form" id="frm-wizard-appointment-confirmation" method="post" enctype="multipart/form-data" action="{{ route('appointment.confirmation.send', $project->uuid) }}">
                                                @csrf
                                                @include('projects.appointment-confirmation.enduser')
                                                @include('projects.appointment-confirmation.client')
                                            </form>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('child-scripts')
<script>
$(document).ready(function() {
    $(".multiple").select2();
    FilePond.registerPlugin(FilePondPluginFileValidateType);

    FilePond.setOptions({
        server: {
            url: '/upload',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }
    });

    $('input[type="file"]').each(function(index, inputElement){
        const pond = FilePond.create(inputElement,{
            //acceptedFileTypes: ['image/*', 'pdf', 'doc', 'docx', 'excel', 'txt'],
            credits: false,
            allowMultiple: true,
            labelIdle: `Drag & Drop your files or <span class="filepond--label-action">Browse</span>`,
            // imagePreviewHeight: 170,
            // imageCropAspectRatio: '1:1',
            // imageResizeTargetWidth: 200,
            // imageResizeTargetHeight: 200,
            //stylePanelLayout: 'compact circle',
            // styleLoadIndicatorPosition: 'center bottom',
            // styleProgressIndicatorPosition: 'right bottom',
            // styleButtonRemoveItemPosition: 'left bottom',
            // styleButtonProcessItemPosition: 'right bottom',
        });
    });

    document.addEventListener('focusin', function (e) { 
        if (e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null) { 
            e.stopImmediatePropagation(); 
        } 
    });
        
    functionInitilizeCkEditor('note_enduser', 500);
    functionInitilizeCkEditor('note_client', 500);

    $('select[name="default_answer"]').change(function() {
        let note_type = $(this).data('note-type');
        let default_answer = $(this).val();
        let editor = CKEDITOR.instances[note_type];

        $.ajax({
            url: "{{ route('default-answers.show', ':default_answer') }}".replace(':default_answer', default_answer),
            success: function(answer){
                editor.setData(answer);
            }
        });
    });
});
</script>
@endpush