@extends('layouts.index')

@section('estilos')
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('adminlte/plugins/fontawesome-free/css/fontawesome.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <script src="{{ asset('js/jquery.slim.min.js') }}" defer></script>
@stop

@section('menu')
    @include('menu.index')
@stop

@section('content')
    <div class="container-fluid">
        <form method="POST" action="{{route('odontologos.agenda')}}" >
            @csrf
            <div class="row">
                <div class="col-md-10">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-muted color_pag">Creacion de Agenda Odontologica</h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-lg-4 col-4 espacio7">
                                    <label class="form-label">Región</label>
                                    <select id="region" onchange="region_select()" name="region" class="form-control form-control-sm espaciomenos7 bg-fondo-ip color_pag" tabindex="1">
                                        
                                        <option value="">Seleccionar</option>
                                        @foreach ($regiones as $dato)
                                            <option value="{{$dato->codigo}}">{{$dato->nombre}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4 col-4 espacio7">
                                    <label class="form-label">Provincia</label>
                                    <select id="provincia" onchange="provincia_select()" name="provincia" class="form-control form-control-sm espaciomenos7 bg-fondo-ip color_pag" tabindex="2">
                                        <option value="">Seleccionar</option>
                                    </select>
                                </div>
                                <div class="col-lg-4 col-4 espacio7">
                                    <label class="form-label">Comuna</label>
                                    <select id="comuna" required name="comuna_id" class="form-control form-control-sm espaciomenos7 bg-fondo-ip color_pag" tabindex="3">
                                        <option value="">Seleccionar</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-lg-3 col-4 espacio7">
                                    <label class="form-label">Fecha Agenda</label>
                                    <select id="fecha" name="fecha" required class="form-control form-control-sm espaciomenos7 bg-fondo-ip color_pag" tabindex="4">
                                        <option value="">Seleccionar</option>
                                        @foreach ($fechas as $dato)
                                            <option value="{{$dato}}">{{$dato}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row espacio20">
                        <div class="col-md-7">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label class="form-label">Hora Inicio</label>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <input id="hora_inicio" name="hora_inicio" type="time" class="form-control form-control-sm espaciomenos7 bg-fondo-ip text-center" tabindex="5">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 espaciomenos4">
                                            <label class="form-label">Hora : Minuto</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-4 espaciomenos3">
                                            <label class="form-label">Hora Termino</label>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <input id="hora_termino" name="hora_termino" type="time" class="form-control form-control-sm espaciomenos7 bg-fondo-ip text-center" tabindex="7">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 espaciomenos4">
                                            <label class="form-label">Hora : Minuto</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 espacio12">
                            <button type="button" onclick="generar_jornada()" class="btn btn-sm btn-primary" tabindex="9">Generar Jornada</button>
                            <input type="hidden" id="jornadas" name="jornadas" />
                        </div>
                    </div>
                    <div class="row espacio10">
                        <div class="col-md-12">
                            <h3 class="text-center text-muted color_pag">Agenda</h3>
                        </div>
                    </div>
                    

                    <div class="row">
                        <div class="col-md-4 espaciomenos10">
                            <table id="agenda" class="table table-striped table-bordered shadow-lg mt-4 dt-responsive nowrap" style="width:100%">
                                <thead class="bg-primary text-white">
                                    <tr>
                                        <th scope="col" width="55%">{{'Jornada'}}</th>
                                        <th id="fecha_agenda" scope="col" width="45%">{{'Seleccion'}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-3 espacio30">
                            <button type="submit" class="btn btn-sm btn-primary">Guardar Agenda</button>
                        </div>  
                    </div>

                    
                </div>
                <div class="col-md-2">
                </div>
            </div>
        </form>
    </div>
@stop

@section('scripts')
    <script src="{{ asset('js/jquery-3.5.1.js') }}" defer></script>
    <script src="{{ asset('js/popper.min.js') }}" defer></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" defer></script>
    <script src="{{ asset('js/scripts.js') }}" defer></script>
    <script src="{{ asset('js/jornada.js') }}" defer></script>
@endsection