<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Agenda</title>
    <link rel="stylesheet" href="<?=base_url()?>assets/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row justify-content-center mt-2">
            <div class="col-md-5 text-center">
                <h4>Agendar cita</h4>
            </div>
        </div>
        <div class="row justify-content-center mt-2">
            <div class="col-md-8 col-lg-5 border border-secondary pl-5 pr-5 py-4">
                <form action="<?=base_url()?>appointment/appointment_post" method="POST">
                    <div class="form-group">
                        <?php if($this->session->flashdata("error")) { ?>
                            <div class="alert alert-danger"><?=$this->session->flashdata('error');?></div>

                        <?php } elseif($this->session->flashdata("success")) { ?>
                            <div class="alert alert-success"><?=$this->session->flashdata('success');?></div>
                        <?php }?>
                    </div>
                    <div class="form-group">
                        <label>Nombre</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Tel&eacute;fono</label>
                        <input type="text" name="phone" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Correo</label>
                        <input type="text" name="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Fecha</label>
                        <input type="date" name="request_date" id="request_date" 
                            min="<?=$start_date?>" max="<?=$end_date?>" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Hora</label>
                        <select name="request_time" id="request_time" class="form-control" required>
                            <option value="">Seleccione una hora</option>
                        </select>
                        <!-- <small class="text-danger">No hay citas disponibles, favor de elegir otro dia</small> -->
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary col-12 my-2">
                            Solicitar Cita
                        </button>
                    </div>
                </form>
            </div>            
        </div>
    </div>
</body>
</html>
<script src="<?=base_url()?>assets/js/jquery.min.js"></script>
<script>
    $(document).ready(function() {

        $('#request_date').change(function() {
            get_hours($(this).val());
        });

        function get_hours(search_date) {
            $.ajax({
                url: '<?=base_url()?>appointment/hours_get',
                type: 'get',
                data: { request_date: search_date },
                success: function(response) {
                    result = JSON.parse(response);
                    $('#request_time').empty();
                    $('#request_time').append('<option value="">Seleccione una hora</option>');

                    if (result.length > 0) {
                        $.each(result, function( index, value ) {
                            $('#request_time').append('<option value="'+value+'">'+ value +'</option>');
                        });

                    } else {
                        alert('No hay citas disponibles, favor de elegir otro día');
                    }
                    
                }
            });
        }
    });
</script>