@extends('layouts.base')

@include('ticket::sidebar')

@section('breadcrumb')
    <a href="{{ route('admin.home') }}" class="breadcrumb-item">
        <i class="icon-home2 mr-2"></i>
        Inicio
    </a>
    <span class="breadcrumb-item active">
        Administraci&oacute;n de Tickets
    </span>
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Creando Ticket</h5>
        </div>
        <form
            id="createTicketForm"
            class="dropzone"
            enctype="multipart/form-data"
        >
            <div class="card-body">
                @csrf
                <x-forms.input
                    type="hidden"
                    name="type_id"
                    :value="request('type')"
                />
                @if ((int) request('type') === 2)
                    <div class="form-group">
                        <x-forms.label>Seleccione al vecino interesado</x-forms.label>
                        <x-forms.selects.ajax
                            name="person_id"
                            :url="route('people.persons.find')"
                            placeholder="Buscar vecino"
                            template="templateSelectPersons"
                        />
                    </div>
                @endif
                <div class="form-group">
                    <x-forms.label>Destinado a la oficina</x-forms.label>
                    <x-forms.selects.basic
                        name="department_id"
                        :value="old('department_id')"
                        :items="$formData->departments"
                        item-value-field="id"
                        item-text-field="name"
                        placeholder="Seleccionar oficina"
                        template="templateSelectDepartments"
                        :data-tags="['parent_name']"
                        id="department_id"
                    />
                </div>
                <div class="form-group">
                    <x-forms.label>Tipo de tr&aacute;mite</x-forms.label>
                    <x-forms.selects.basic
                        name="procedure_id"
                        :value="null"
                        :items="[]"
                        item-value-field="id"
                        item-text-field="name"
                        placeholder="Seleccionar tipo de trámite"
                        id="procedure_id"
                    />
                </div>
                <div class="form-group">
                    <x-forms.label>Destinado al usuario</x-forms.label>
                    <x-forms.selects.multiple
                        name="send_to[]"
                        :values="null"
                        :items="[]"
                        item-value-field="id"
                        item-text-field="name"
                        placeholder="Área completa"
                        id="send_to"
                    />
                </div>
                <div class="form-group">
                    <x-forms.label>Mensaje</x-forms.label>
                    <x-forms.textarea
                        name="description"
                        :value="old('description')"
                        placeholder="Mensaje"
                    />
                </div>
                <div class="form-group">
                    <x-forms.label>Prioridad</x-forms.label>
                    <x-forms.selects.basic
                        name="priority_id"
                        :value="old('priority_id')"
                        :items="$formData->priorities"
                        item-value-field="id"
                        item-text-field="name"
                        placeholder="Seleccionar prioridad"
                    />
                </div>
                <div class="form-group">
                    <x-forms.label>Adjuntar documentaci&oacute;n</x-forms.label>
                    <div class="fallback">
                        <input name="attachments" type="file" multiple>
                    </div>
                    <div id="cont_dropzone">
                        <div class="dz-message needsclick">
                            <div class="dropzone-previews"></div>
                            <button type="button" class="dz-button btn p-2 mb-3">Arrastre o haga clic aquí para adjuntar sus archivos</button>
                            <br>
                            <span class="note needsclick">(Puede seleccionar más de un archivo o arrastrar varias veces)</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <x-forms.label>Ubicación</x-forms.label>
                    <x-forms.custom.map/>
                </div>
            </div>
            <div class="card-footer text-right">
                <button type="submit" class="btn btn-success">
                    Crear ticket
                    <i class="mi-add-circle ml-2"></i>
                </button>
                <a
                    href="{{ route($templateData->routes['index']) }}"
                    class="btn btn-danger"
                >
                    Cancelar
                    <i class="mi-backspace ml-2"></i>
                </a>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        Dropzone.options.createTicketForm = {
            acceptedFiles: 'image/*,application/pdf',
            addRemoveLinks: true,
            autoProcessQueue: false,
            dictInvalidFileType: 'El formato del archivo seleccionado no es válido',
            dictRemoveFile: 'Eliminar',
            maxFiles: 100,
            paramName: 'attachments',
            parallelUploads: 100,
            previewsContainer: '.dropzone-previews',
            uploadMultiple: true,
            url: "{{ route($templateData->routes['store']) }}",

            init: function() {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    if (myDropzone.getQueuedFiles().length > 0) {
                        myDropzone.processQueue();
                    } else {
                        var blob = new Blob();
                        blob.upload = {chunked: myDropzone.defaultOptions.chunking};
                        myDropzone.uploadFile(blob);
                    }
                });

                this.on("sendingmultiple", function() {
                    //
                });

                this.on("successmultiple", function(files, response) {
                    window.location.replace("{{ route($templateData->routes['index'], ['f' => 'pending']) }}")
                });

                this.on("errormultiple", function(files, response) {
                    $.each(myDropzone.files, function(i, file) {
                        file.status = Dropzone.QUEUED;
                    });

                    Object.values(response.errors).forEach(errors => {
                        errors.forEach(error => {
                            $('.content').prepend(`<div class="alert alert-danger alert-styled-left alert-dismissible"><button type="button" class="close" data-dismiss="alert"><span>&times;</span></button><span class="font-weight-semibold">${error}</span></div>`);
                        });
                    });

                    window.scrollTo(0, 0);
                });

                $('#createTicketForm').removeClass('dropzone');
                $('#cont_dropzone').addClass('dropzone');
            }
        };

        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#department_id").change(function () {
                $.ajax({
                    type: "POST",
                    url: "{{ route('auth.users.get-from-department') }}",
                    data: {
                        id: this.value,
                    },
                    success: function (data) {
                        $("#send_to").empty().trigger("change");

                        if (data.length !== 0) {
                            data.forEach(element => {
                                const newOption = new Option(element.text, element.id);

                                $("#send_to").append(newOption).trigger("change");
                            });
                        }

                        $("#send_to").val(null).trigger("change");
                    },
                    dataType: "JSON"
                });

                $.ajax({
                    type: "POST",
                    url: "{{ route('ticket.procedures.get-from-department') }}",
                    data: {
                        id: this.value,
                    },
                    success: function (data) {
                        $("#procedure_id").empty().trigger("change");

                        if (data.length !== 0) {
                            data.forEach(element => {
                                const newOption = new Option(element.text, element.id);

                                $("#procedure_id").append(newOption).trigger("change");
                            });
                        }

                        $("#procedure_id").val(null).trigger("change");
                    },
                    dataType: "JSON"
                });
            });
        });
    </script>
@endpush