@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;
        }
    </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">

        <div class="row mt-3">
            <div class="col-12">
                <div class="card-box mb-1 py-2">
                    <div class="row">
                        <div class="col">
                            <div class="button-list">
                                <div class="button-list">

                                    <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 Asistencia x IIEE</button>


                                </div>
                            </div>
                        </div> <!-- end col -->
                    </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">
                                                                        <input type="text"
                                                                            name="asistencia_usuario{{ $usuario->id }}_{{ $ano }}-{{ $mes }}-{{ $dia }}"
                                                                            class="asistencia-input" disabled>
                                                                    </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_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</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 calendario<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>
                    </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 -->
@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/diarias.js') }}"></script>
    <script>
        /* $('#estado_edit').select2({
                        theme: "bootstrap-5",
                        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
                        placeholder: $(this).data('placeholder'),
                    });*/
        $('#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';
                }
            }
        });
        $('#estado_edit').select2({
            dropdownParent: '#modal_editar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        });
    </script>
@endsection