@extends('layouts.pagina')
@section('css')
<link rel="stylesheet" href="{{asset('css/alcalde.css') }}">

@endsection
@section('js')
<script>
    var tipo='{!!$tipo!!}';
</script>
    <script src="{{asset('js/agendas.js')}}"></script>
    <script>
        const actualYear=2024
    </script>
@endsection
@section('head')
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@endsection
@section('banner')
    <img src="{{url('/img/banner_historia.jpg')}}" alt="">
@endsection
@section('contenido')
<div class="container-xl mb-4">
    <div class="reglon">
        <h3 class="titulo mt-4">Agenda del {{$tipo=="alcaldia"? 'Alcadec':'Gerente Municipal' }}</h3>  
    </div>
    <div class="row">      
   
        <div class="container py-4">
            <div class="text-center text-md-start mb-4">
                <img src="{{ asset('img/logo-horizontal.png') }}" height="60" alt="">
            </div>
            <div class="page-header">
                <div class="row align-items-center">           
                </div>
            </div>
            <hr class="my-2">
            <div class="page-body">  
                <div class="row">
                    <div class="col-md-10 mb-2">
                        <h2 id="mes_actual" class="text-muted m-0">-</h2>
                    </div>
                    <div class="col-md-2 mb-2">
                        <div class="btn-group w-100">
                            <button type="button" class="btn btn-primary btn-icon" onclick="mes_act();" title="MES ACTUAL">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="5" width="16" height="16" rx="2" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="4" y1="11" x2="20" y2="11" /><rect x="8" y="15" width="2" height="2" /></svg>
                            </button>
                            <button type="button" class="btn btn-icon" onclick="mes_ant();" title="MES ANTERIOR">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="11" x2="12" y2="5" /><line x1="6" y1="11" x2="12" y2="5" /></svg>
                            </button>
                            <button type="button" class="btn btn-icon" onclick="mes_sig();" title="MES SIGUIENTE">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="13" x2="12" y2="19" /><line x1="6" y1="13" x2="12" y2="19" /></svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <table class="calendario table table-vcenter card-table table-sm">
                                <thead>
                                    <tr>
                                        <th class="c-dia">LUN</th>
                                        <th class="c-dia">MAR</th>
                                        <th class="c-dia">MIE</th>
                                        <th class="c-dia">JUE</th>
                                        <th class="c-dia">VIE</th>
                                        <th class="c-dia">SAB</th>
                                        <th class="c-dia">DOM</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="c-celda-alt" data-celda="1">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="2">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="3">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="4">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="5">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="6">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="7">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="c-celda-alt" data-celda="8">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="9">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="10">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="11">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="12">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="13">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="14">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="c-celda-alt" data-celda="15">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="16">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="17">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="18">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="19">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="20">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="21">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="c-celda-alt" data-celda="22">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="23">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="24">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="25">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="26">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="27">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="28">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="c-celda-alt" data-celda="29">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="30">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="31">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="32">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="33">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="34">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="35">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="c-celda-alt" data-celda="36">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="37">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="38">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="39">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="40">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="41">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                        <td class="c-celda-alt" data-celda="42">
                                            <div class="c-dia-numero">00</div>
                                            <div class="c-dia-contenido-alt"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>                    
                        </div>
                    </div>
                </div>
            </div>    
        </div>

        <div id="detalle" class="modal modal-blur fade" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Detalles</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">  
                        <div class="row">
                            <div class="col-4">
                                <dl>
                                    <dt>Fecha</dt>
                                    <dd id="det_fecha">-</dd>
                                </dl>
                            </div>
                            <div class="col-4">
                                <dl>
                                    <dt>Hora Inicio</dt>
                                    <dd id="det_inicio">-</dd>
                                </dl>
                            </div>
                            <div class="col-4">
                                <dl>
                                    <dt>Hora Fin</dt>
                                    <dd id="det_fin">-</dd>
                                </dl>
                            </div>
                        </div>
                        <dl class="mb-0">
                            <dt>Oficina</dt>
                            <dd id="det_dependencia">-</dd>
                            <dt>Titulo</dt>
                            <dd id="det_titulo">-</dd>
                            <dt>Descripción</dt>
                            <dd id="det_descripcion" style="text-align: justify;">-</dd>
                            <dt>Lugar</dt>
                            <dd id="det_lugar">-</dd>
                        </dl>                   
                    </div>   
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link link-secondary ms-auto" data-bs-dismiss="modal">Cerrar</button>
                    </div>       
                </div>
            </div>
        </div>
    </div>
</div>
@endsection