@extends('home')
@section('css')
    <!-- Plugins css -->

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <link rel="stylesheet" href="{{ asset('css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .asistencia-input {
            width: 24px;
            border: 1px solid #999;
        }

        .red {
            background-color: #ea818d;
        }

        .day {
            background-color: #a2c0e1;
        }

        th,
        td {
            font-size: 10px;
            padding: 1px !important;
        }

        .selected {
            background-color: #0D6EFD;
            /* Color de fondo para la fila seleccionada */
            color: white;
        }
    </style>
@endsection
@section('content')
    @php
        function convertir_mes($mes)
        {
            $meses = [
                '0',
                'ENERO',
                'FEBRERO',
                'MARZO',
                'ABRIL',
                'MAYO',
                'JUNIO',
                'JULIO',
                'AGOSTO',
                'SETIEMBRE',
                'OCTUBRE',
                'NOVIEMBRE',
                'DICIEMBRE',
            ];

            return $meses[$mes];
        }
    @endphp
    <div class="container-fluid">

        <!-- start page title -->

        <input type="text" value="{{ $calendario }}" id="id_calendario" hidden>
        <div class="row mt-3 ">
            <div class="col-12">
                <div class="card-box mb-1 py-2">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="button-list">
                                <button type="button" title="Crear calendario mensual"
                                    class="btn btn-success waves-effect waves-light" data-toggle="modal" id="agregar"
                                    data-target="#modal_registrar"><i class="far fa-calendar-alt mr-1"></i> Crear calendario
                                    mensual</button>
                                <button type="button" title="Cargar personal activo"
                                    class="btn btn-success waves-effect waves-light" data-toggle="modal" id="agregar"
                                    data-target="#modal_seleccionar"><i class="fas fa-database mr-1"></i> Cargar personal
                                    activo</button>
                                <button id="generar_reporte" title="Generar y Firmar Anexo" class="btn btn-success"><i
                                        class="fas fa-tasks mr-1"></i> Generar y Firmar Anexo 03 </button>
                                <button id="marcar_a" title="Marcar A para todos" class="btn btn-success">A</button>



                            </div>
                        </div> <!-- end col -->
                        <div>


                        </div>

                    </div> <!-- end row -->
                </div> <!-- end card-box-->
            </div> <!-- end col -->
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        @if ($ano == '0' && $mes == '0')
                            <div class="alert alert-danger mb-2 text-center" role="alert">
                                @if (isset($error))
                                    <b>{{ $error }}</b>
                                @else
                                    <b>Seleccione un mes por favor!</b>
                                @endif
                            </div>
                        @else
                            <div class="alert alert-success mb-2 text-center" role="alert">
                                <b>ANEXO 03 - {{ convertir_mes($mes) }} {{ $ano }}</b>
                            </div>
                        @endif

                        <div id="datatable-buttons_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">

                            <div class="row">
                                <div class="col-md-12">
                                    @php
                                        $primerDia = date('Y-m-01', strtotime("$ano-$mes"));
                                        $ultimoDia = date('Y-m-t', strtotime("$ano-$mes"));

                                        $diasSemana = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
                                    @endphp

                                    <div class="table-responsive">
                                        @if ($mes != null)
                                            <table id="tabla_calendario" class="table w-100">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>DNI</th>
                                                        <th>NOMBRES Y APELLIDOS</th>
                                                        @for ($dia = 1; $dia <= date('t', strtotime("$ano-$mes")); $dia++)
                                                            @php
                                                                $fecha = date("$ano-$mes-$dia");
                                                                $diaSemana = date('w', strtotime($fecha));
                                                            @endphp
                                                            @if ($diasSemana[$diaSemana] == 'Dom' || $diasSemana[$diaSemana] == 'Sab')
                                                                <th class="red text-center">
                                                                    {{ $dia }}<br>{{ $diasSemana[$diaSemana] }}
                                                                </th>
                                                            @else
                                                                <th class="day text-center">
                                                                    {{ $dia }}<br>{{ $diasSemana[$diaSemana] }}
                                                                </th>
                                                            @endif
                                                        @endfor
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                        $cont = 1;
                                                    @endphp


                                                    <!-- Agrega filas para cada usuario con celdas de entrada -->
                                                    @foreach ($usuarios as $usuario)
                                                        <tr>
                                                            <td>{{ $cont++ }}</td>
                                                            <td>{{ $usuario->dni }}</td>
                                                            <td style="white-space: nowrap;">{{ $usuario->nombre }}
                                                                {{ $usuario->paterno }} {{ $usuario->materno }}</td>
                                                            @for ($dia = 1; $dia <= date('t', strtotime("$ano-$mes")); $dia++)
                                                                @php
                                                                    $fecha = date("$ano-$mes-$dia");
                                                                    $diaSemana = date('w', strtotime($fecha));
                                                                @endphp
                                                                @if ($diasSemana[$diaSemana] == 'Dom' || $diasSemana[$diaSemana] == 'Sab')
                                                                    <td class="text-center">
                                                                        @if (Auth::user()->institucion->nivel =='EBA INICIAL - INTERMEDIO' || Auth::user()->institucion->nivel =='EBA - AVANZADO')
                                                                            <input type="text"
                                                                                id="{{ $usuario->id }}_{{ $ano }}-{{ $mes }}-{{ $dia }}"
                                                                                class="asistencia-input text-center days-input"
                                                                                data-fecha="{{ $ano }}-{{ $mes }}-{{ $dia }}"
                                                                                data-calendario="{{ $calendario }}"
                                                                                onclick="mostrarAlerta(this)">
                                                                        @else
                                                                            <input type="text" class="asistencia-input "
                                                                                disabled>
                                                                        @endif

                                                                    </td>
                                                                @else
                                                                    <td class="text-center">
                                                                        <input type="text"
                                                                            id="{{ $usuario->id }}_{{ $ano }}-{{ $mes }}-{{ $dia }}"
                                                                            class="asistencia-input text-center days-input"
                                                                            data-fecha="{{ $ano }}-{{ $mes }}-{{ $dia }}"
                                                                            data-calendario="{{ $calendario }}"
                                                                            onclick="mostrarAlerta(this)">
                                                                    </td>
                                                                @endif
                                                            @endfor
                                                        </tr>
                                                    @endforeach

                                                </tbody>
                                            </table>
                                        @endif
                                    </div>

                                </div>
                            </div>

                        </div>

                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div>
        <!-- end row-->
    </div>


    <div id="modal_registrar" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Crear calendario mensual</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body p-4">
                    <div class="row">
                        <!--<div class="col-md-12">
                            <div class="form-group">
                                <label for="etiqueta" class="control-label">Etiqueta</label>
                                <input type="text" class="form-control" id="etiqueta">
                            </div>
                        </div>-->
                        <div class="alert alert-info" role="alert">
                            <i class="mdi mdi-alert-circle-outline mr-1"></i> <b>Nota!</b>  Seleccionar el mes y año que Ud. desea informar. 
                        </div>
                        <div class="col-md-6 mb-2">
                            <label for="mes" class="control-label">Mes<span class="text-danger">*</span></label>
                            <select class="form-select" id="mes">
                                <option value=""></option>
                                <option value="1">ENERO</option>
                                <option value="2">FEBRERO</option>
                                <option value="3">MARZO</option>
                                <option value="4">ABRIL</option>
                                <option value="5">MAYO</option>
                                <option value="6">JUNIO</option>
                                <option value="7">JULIO</option>
                                <option value="8">AGOSTO</option>
                                <option value="9">SEPTIEMBRE</option>
                                <option value="10">OCTUBRE</option>
                                <option value="11">NOVIEMBRE</option>
                                <option value="12">DICIEMBRE</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="anio" class="control-label">Año<span class="text-danger">*</span></label>
                            <select class="form-select" id="anio">
                                <option value=""></option>
                                @for ($i = 2024; $i <= date('Y'); $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Cerrar</button>
                    <button type="button" id="registrar"
                        class="btn btn-success waves-effect waves-light">Crear</button>
                </div>
            </div>
        </div>
    </div><!-- /.modal -->
    <div id="modal_seleccionar" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Seleccionar Calendario Mensual</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="calendario" class="control-label">Selecionar mes<span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="calendario">
                            </select>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Cerrar</button>
                    <button type="button" id="cargar" class="btn btn-success waves-effect waves-light">Cargar
                        Datos</button>
                </div>
            </div>
        </div>
    </div><!-- /.modal -->
    <div id="modal_dia" class="modal fade" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Agregar asistencia del dia</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body p-4">
                    <div class="row">
                        <label for="estado_dia" class="control-label">Estado de asistencia<span
                                class="text-danger">*</span></label>
                        <div class="col-md-12 mb-2">

                            <div class="radio radio-info mb-1">
                                <input type="radio" id="inlineRadio1" value="A" name="radioInline"
                                    checked="">
                                <label for="inlineRadio1">(A) Día laborado </label>
                            </div>
                            <div class="radio radio-info mb-1">
                                <input type="radio" id="inlineRadio2" value="I" name="radioInline">
                                <label for="inlineRadio2">( I ) Inasistencia injustificada </label>
                            </div>
                            <div class="radio radio-info mb-1">
                                <input type="radio" id="inlineRadio3" value="J" name="radioInline">
                                <label for="inlineRadio3">(J ) Inasistencia justificada (licencia, permiso,vacaciones)
                                </label>
                            </div>
                            <div class="radio radio-info mb-1">
                                <input type="radio" id="inlineRadio4" value="L" name="radioInline">
                                <label for="inlineRadio4">(L ) Licencia sin goce de remuneraciones </label>
                            </div>
                            <div class="radio radio-info mb-1">
                                <input type="radio" id="inlineRadio5" value="P" name="radioInline">
                                <label for="inlineRadio5">(P) Permiso sin goce de remuneraciones </label>
                            </div>
                            <div class="radio radio-info mb-1">
                                <input type="radio" id="inlineRadio6" value="T" name="radioInline">
                                <label for="inlineRadio6">(T) Tardanza </label>
                            </div>
                            <div class="radio radio-info mb-1">
                                <input type="radio" id="inlineRadio7" value="H" name="radioInline">
                                <label for="inlineRadio7">(H) Huelga o paro </label>
                            </div>
                            <div class="radio radio-info mb-1">
                                <input type="radio" id="inlineRadio8" value="F" name="radioInline">
                                <label for="inlineRadio8">(F) Feriado/Día no laborable </label>
                            </div>
                            <div class="radio radio-info mb-1">
                                <input type="radio" id="inlineRadio9" value="-" name="radioInline">
                                <label for="inlineRadio9">(-) En blanco </label>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Cerrar</button>
                    <button type="button" id="guardar_asistencia"
                        class="btn btn-success waves-effect waves-light">Guardar Asistencia</button>
                </div>
            </div>
        </div>
    </div><!-- /.modal -->
    <!-- Modal agregar-->
    <div id="modal_ver" class="modal fade" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="lbl_reporte_r"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-12">
                            <iframe id="pdf_doc" width="100%" height="500" src=""></iframe>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div><!-- /.modal -->

@endsection

@section('js')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ asset('js/calendario.js') }}"></script>
    <script src="{{ asset('js/asistencia.js') }}"></script>

    <script>
        $('#calendario').select2({
            dropdownParent: '#modal_seleccionar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
            placeholder: 'Seleccionar',
            language: {
                noResults: function() {
                    return 'No se encontraron resultados';
                }
            }
        });
        $('#mes').select2({
            dropdownParent: '#modal_registrar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
            placeholder: 'Seleccionar',
        });
        $('#anio').select2({
            dropdownParent: '#modal_registrar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
            placeholder: 'Seleccionar',
        });
        $('#dia').select2({
            dropdownParent: '#modal_personalizar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
            placeholder: 'Seleccionar',
        });
        $('#estado_edit').select2({
            dropdownParent: '#modal_editar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        });
        $('#tipo_edit').select2({
            dropdownParent: '#modal_editar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        });
        $(document).ready(function() {
            $('#tabla_calendario tbody').on('click', 'tr', function() {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                } else {
                    $('#tabla_calendario tbody tr').removeClass('selected');
                    $(this).addClass('selected');
                }
            });
        });
    </script>
@endsection