@extends('layouts.base')

@include('record::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 Expedientes
    </span>
@endsection

@section('content')
    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title">Creando Expediente</h5>
        </div>
        <form id="formNewRecord" class="dropzone" enctype="multipart/form-data">
            <div class="card-body">
                @csrf
                <div class="row mb-4">
                    <div class="col-sm-12">
                        <x-forms.label>Seleccione el tipo de solicitante</x-forms.label>
                    </div>
                </div>
                <div class="row text-center mb-4">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="form-check-label text-center">
                                <input
                                    type="radio"
                                    name="applicant_type"
                                    value="person"
                                    autocomplete="off"
                                    required
                                >
                                <br>
                                Persona física
                            </label>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="form-check-label text-center">
                                <input
                                    type="radio"
                                    name="applicant_type"
                                    value="department"
                                    autocomplete="off"
                                >
                                <br>
                                Oficina municipal
                            </label>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="form-check-label text-center">
                                <input
                                    type="radio"
                                    name="applicant_type"
                                    value="manual"
                                    autocomplete="off"
                                >
                                <br>
                                Ingreso manual
                            </label>
                        </div>
                    </div>
                    <div class="col-12 text-left">
                        <div id="person" class="toHide" style="display:none;">
                            <div class="form-group">
                                <x-forms.label>Seleccione a la persona</x-forms.label>
                                <x-forms.selects.ajax
                                    name="applicant_person_id"
                                    :url="route('people.persons.find')"
                                    placeholder="Buscar persona"
                                    template="templateSelectPersons"
                                />
                            </div>
                            <div class="form-group">
                                <x-forms.label>&iquest;Lo inicia m&aacute;s de una persona? (Agregar "y otros")</x-forms.label>
                                <x-forms.custom.switchery
                                    name="applicant_and_others"
                                    :value="null"
                                    on-label="Agregar 'y otros'"
                                />
                            </div>
                        </div>
                        <div id="department" class="toHide" style="display:none;">
                            <div class="form-group">
                                <x-forms.label>Seleccione la oficina</x-forms.label>
                                <x-forms.selects.basic
                                    name="applicant_department_id"
                                    :value="null"
                                    :items="$formData->departments"
                                    item-value-field="id"
                                    item-text-field="name"
                                    placeholder="Seleccionar oficina"
                                    template="templateSelectDepartments"
                                    :data-tags="['parent_name']"
                                />
                            </div>
                        </div>
                        <div id="manual" class="toHide" style="display:none;">
                            <div class="form-group">
                                <x-forms.label>Ingrese el solicitante</x-forms.label>
                                <x-forms.input
                                    type="text"
                                    name="applicant_manual"
                                    :value="null"
                                    placeholder="Ingrese el solicitante"
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <x-forms.label>Mesa de entrada</x-forms.label>
                            <x-forms.selects.basic
                                name="registry_id"
                                :value="null"
                                :items="$formData->registries"
                                item-value-field="id"
                                item-text-field="name"
                                placeholder="Seleccionar mesa de entrada"
                                id="registry_id"
                            />
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <x-forms.label>&iquest;Qu&eacute; tipo de tr&aacute;mite desea realizar?</x-forms.label>
                            <x-forms.selects.basic
                                name="procedure_id"
                                :value="null"
                                :items="$formData->procedures"
                                item-value-field="id"
                                item-text-field="name"
                                placeholder="Seleccionar tipo de trámite"
                                id="procedure_id"
                                :data-tags="['registry_id']"
                            />
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <x-forms.label>Car&aacute;tula</x-forms.label>
                            <x-forms.input
                                type="text"
                                name="name"
                                :value="null"
                                placeholder="Carátula"
                            />
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <x-forms.label>&iquest;A qu&eacute; oficina va dirigido inicialmente?</x-forms.label>
                            <x-forms.selects.basic
                                name="department_id"
                                :value="null"
                                :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>
                    <div class="col-lg-12">
                        <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>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <x-forms.label>Descripci&oacute;n</x-forms.label>
                            <x-forms.textarea
                                name="description"
                                :value="null"
                                placeholder="Descripción"
                            />
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <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>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="text-right col-12">
                        <div class="form-group">
                            <button type="submit" class="btn bg-blue-800">
                                Generar expediente
                                <i class="mi-save ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        Dropzone.options.formNewRecord = {
            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' => 'ongoing']) }}")
                });

                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);
                });

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

        $(document).ready(function(){
            $('input[type=radio]').on('change', function() {
                val = this.value;
                $('.toHide').hide();
                $('#'+val).show();
            })

            $('#registry_id').on('change', function() {
                val = this.value;
                $('#procedure_id option').attr('disabled', 'disabled');
                $('#procedure_id option[data-registry_id="'+val+'"]').removeAttr('disabled');
                $('#procedure_id').val(null).trigger('change');
            })

            // para la primer carga de la página
            $('#registry_id').trigger('change');

            $.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"
                });
            });
        });
    </script>
@endpush