@extends('layouts.menu')

@section('tittle')
    OTRAS JUSTIFICACIONES
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="card card-table comman-shadow shadow-lg">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="page-title">OTRAS JUSTIFICACIONES</h3>
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Desde</label>
                            <input type="date" id="periodoInicio" class="form-control form-control-sm pickedDate"
                                value="{{ $date1 }}">
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Hasta</label>
                            <input type="date" id="periodoFinal" class="form-control form-control-sm pickedDate"
                                value="{{ $date }}">
                        </div>
                        <div class="col-auto text-end float-end ms-auto download-grp">
                            <a href="#" type="button" class="btn btn-primary" id="btnNuevo" title="Crear Nuevo"
                                alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table id="otrasJustificacionesTable"
                            class="table table-hover table-center table-bordered table-striped" style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-wrap">Fecha Creado</th>
                                    <th class="text-center">Asunto</th>
                                    <th class="text-center">Descripción</th>
                                    <th class="text-wrap text-center">Tiempo Justificación</th>
                                    <th class="text-center">Asignado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- MODAL PARA NUEVA FALTA --}}
    <div class="modal fade" id="modalJustificaciones" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                </div>
                <form id="formJustificaciones">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Asunto:</label>
                                    <input type="text" class="form-control form-control-sm" name="asuntoBox"
                                        id="asuntoBox">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Tiempo Justificación:</label>
                                    <input type="text" class="form-control form-control-sm" name="tiempoFalta"
                                        id="tiempoFalta">
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Responsable:</label>
                                    <select class="form-select form-select-sm" aria-label="Default select example"
                                        id="responsable" name="responsable">
                                        <option value="0" selected>Seleccione una opción</option>
                                        @foreach ($responsablesData as $responsable)
                                            <option value="{{ $responsable->pkUsuario }}">{{ $responsable->fullName }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Descripción:</label>
                                    <textarea name="descripcionText" id="descripcionText" class="form-control form-control-sm" cols="20"
                                        rows="3"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <input type="hidden" id="hidden_id">
                                <button type="submit" id="btnGuardar" class="btn btn-success">Guardar</button>
                                <button type="button" class="btn btn-danger" id="btnCancelar"
                                    data-dismiss="modal">Cancelar</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#solicitudesMenu, #otrasJustificacionesMenu').addClass('active');

            $('#tiempoFalta').numbersOnly();

            getOtrasJustificaciones();

            $('.pickedDate').change(function(e) {
                e.preventDefault();

                getOtrasJustificaciones();
            });

            function getOtrasJustificaciones() {
                var periodoInicio = $('#periodoInicio').val();
                var periodoFinal = $('#periodoFinal').val();
                var varTipo = 18;

                otrasJustificacionesTable = $("#otrasJustificacionesTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    ajax: {
                        url: "{{ url('/admin/list/faltas/justificaciones') }}" + "/" + varTipo + "/" +
                            periodoInicio + "/" + periodoFinal,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_justificacion"
                        },
                        {
                            data: "fecha_hora_creado",
                            className: "text-wrap"
                        },
                        {
                            data: "asunto",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "tiempo",
                            className: "text-center"
                        },
                        /* {
                            data: "tiempo_falta",
                            className: "text-center"
                        }, */
                        {
                            data: "name_asignado_por",
                            className: "text-wrap"
                        },

                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-warning btn-sm btnEdit' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button></div></div>",
                        },
                    ],
                    order: [
                        [0, "DESC"]
                    ]
                    /* columnDefs: [{
                        targets: invisibleColumns,
                        visible: false,
                    }, ], */
                });
            }

            /* FUNCTION OPEN MODAL + NEW FALTA */
            $('#btnNuevo').click(function(e) {
                e.preventDefault();

                $("#hidden_id").val('0')

                $("#formJustificaciones").trigger("reset");
                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-header").css({
                    color: "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Nueva Justificación");
                $('#modalJustificaciones').modal("show");
            });

            /*
             * --------------------------- FUNCTION CLOSE MODAL ---------------------------
             */
            $("#btnCancelar").click(function() {
                $("#modalJustificaciones").modal("hide");
            });

            /* FORM JUSTIFICACIONES */
            $("#formJustificaciones").submit(function(e) {
                e.preventDefault();

                justificacion_id = $.trim($("#hidden_id").val());

                asuntoBox = $.trim($("#asuntoBox").val());
                tiempoFalta = $.trim($("#tiempoFalta").val());
                descripcionText = $.trim($("#descripcionText").val());

                id_responsable = $.trim($("#responsable").val());
                responsable_select = $.trim($("#responsable option:selected").text());

                if (!$.trim($("#asuntoBox").val()) || !$.trim($("#descripcionText").val()) ||
                    id_responsable == 0 || !$.trim($("#tiempoFalta").val())) {
                    Swal.fire("", "¡Llene todos los Campos!", "error");
                } else {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]').attr('content'));
                                }
                            },
                            url: "{{ url('/admin/justificaciones/insert/new') }}",
                            type: "POST",
                            data: {
                                falta_id: justificacion_id,
                                asuntoBox: asuntoBox,
                                descripcionText: descripcionText,
                                tiempoFalta: tiempoFalta,
                                id_responsable: id_responsable,
                                responsable_select: responsable_select,
                                varTipo: 18
                            },
                            success: function(data) {
                                Swal.fire("", "Justificación Creada!", "success");
                                otrasJustificacionesTable.ajax.reload(null, false);
                                $("#modalJustificaciones").modal("hide");
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                }
            });

            /* FUNCTION EDIT JUSTIFICACION */
            $(document).on("click", ".btnEdit", function() {
                $("#formJustificaciones").trigger("reset");

                fila = $(this).closest("tr");
                justificacion_id = parseInt(fila.find("td:eq(0)").text());
                $('#hidden_id').val(justificacion_id);

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]').attr('content'));
                            }
                        },
                        url: "{{ url('/admin/faltas/justificaciones/get/data') }}",
                        method: "POST",
                        data: {
                            falta_id: justificacion_id,
                            opcion: 18
                        },
                        success: function(data) {
                            console.log(data.estado);

                            $('#asuntoBox').val(data.asunto);
                            $('#descripcionText').val(data.descripcion);
                            $('#tiempoFalta').val(data.tiempo);
                            $('#responsable').val(data.id_asignado_por).change();
                        },
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }

                $(".modal-header").css("background-color", "#007bff");
                $(".modal-header").css({
                    color: "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Editar Justificación # " + justificacion_id);
                $("#modalJustificaciones").modal("show");
            });

        });
    </script>
@endsection