@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="{!! asset('files_custom') !!}/bower_components/select2/css/select2.min.css" />

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet" />

<link rel="stylesheet" href="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
<!-- <link rel="stylesheet" href="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/vendors/tempusdominus-bootstrap-4/tempusdominus-bootstrap-4.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<!-- <link rel="stylesheet" href="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/css/demo_1/style.css"> -->
<!-- <link rel="stylesheet" href="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/css/demo_1/style.css"> -->

<link href="{!! asset('css'); !!}/styles.css" rel="stylesheet" />
<link href="{!! asset('css'); !!}/locales.css" rel="stylesheet" />

<style>
    .select2-dropdown {
        z-index: 999999999 !important;
    }
</style>
@endsection

@section('content')

<div class="page-header">
    <h3 class="page-title">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-table-large menu-icon"></i>
        </span> citas </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">
                <a href="{!! URL('/citas')!!} "><span>vista general</span></a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <span></span>editar cita<i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left">editar cita</h4>
                </div>
                <div class="espacio_vertical"></div>
                @include('adminlte-templates::common.errors')
                <div>
                    <form action="{!!asset('citas/cita-editar')!!}/{!! $cita->id !!}" method="POST" role="form" id="form_id">
                        {{ method_field("PATCH") }}
                        {{ csrf_field() }}
                        <div class="form-group row">
                            <div class="col-md-6">
                                <h5>Selecciona el servicio que buscas</h5>
                                <br>
                                <select id="selectServicio" class="js-example-data-array " style="margin-top:15px;" name="servicio">
                                    <option selected value="{!! $servicios[0]->id !!}">{!! $servicios[0]->nombre !!}</option>
                                    @foreach($array_service as $services)
                                    <option value="{!! $services->id !!}">{!! $services->nombre !!}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <h5>Fecha de agendado de cita</h5>
                                <br>
                                <p class="mt-2">{{date('d-m-Y H:i', strtotime($cita->created_at ))}}</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6" style="margin-top:30px;">
                                <h5>Elige la hora de la cita</h5>
                                <br>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="hora" name="hora" value="{!! $hora !!}">
                                    <div class="input-group-addon input-group-append"><i class="mdi mdi-clock input-group-text"></i></div>
                                </div>
                            </div>
                            <div class="col-md-6" style="margin-top:30px;">
                                <h5>Elige la fecha de la cita</h5>
                                <br>
                                <div id="datepicker-popup" class="input-group date datepicker">
                                    <input type="text" class="form-control" name="fecha" id="fecha" value="{!! $fecha !!}">
                                    <span class="input-group-addon input-group-append border-left">
                                        <span class="mdi mdi-calendar input-group-text"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6" style="margin-top:30px;">
                                <h5>Elige el estatus de cita</h5>
                                <br>
                                <select id="estatus" class="select2 js-example-data-array " style="margin-top:15px; width:100%" name="estatus">
                                    <option value="Cancelada" {!! $estatus=='Cancelada' ? 'selected' :''; !!}>Cancelada</option>
                                    <option value="Asistida" {!! $estatus=='Asistida' ? 'selected' :''; !!}>Asistida</option>
                                    <option value="Apartada" {!! $estatus=='Apartada' ? 'selected' :''; !!}>Apartada</option>
                                </select>
                            </div>
                            <div class="col-md-6" style="margin-top:30px;">
                                <h5>Elige barbera</h5>
                                <br>
                                <select name="empleado_id" id="empleado_id" class="select2 js-example-data-array " style="margin-top:15px; width:100%" >
                                    @foreach($array_empleados as $array_empleado)
                                        @if ($array_empleado->id  ==  $cita->empleado_id )
                                            <option selected value="{!! $array_empleado->id !!}">{!! $array_empleado->usuario->name !!}</option>
                                        @else
                                            <option value="{!! $array_empleado->id !!}">{!! $array_empleado->usuario->name !!}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="form-group row">
                            <h1 class="pull-right ">
                                <button class="btn btn-primary_local pull-right" style="margin-left:15px; margin-top:30px;" type="submit">Guardar</button>
                            </h1>
                            <h1 class="pull-right ">
                                <a class="btn btn-secondary pull-right" style="margin-left:50px; margin-top:30px;" href="{!! route('citas.index') !!}">Cancelar</a>
                            </h1>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/moment/js/moment.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>

<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<!-- <script src="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script> -->
<script type="text/javascript" src="{!! asset('librerias') !!}/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>


<!-- <script src="http://www.bootstrapdash.com/demo/purple/jquery/template/assets/vendors/tempusdominus-bootstrap-4/tempusdominus-bootstrap-4.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>

<script src="{!! asset('/librerias/inputmask/inputmask.js') !!}"></script>

<script>
    $('#datepicker-popup').datepicker({
        format: 'dd/mm/yyyy',
    });

    $(".js-example-data-array").select2();

    var url_dinamica = "{!! URL::to('/') !!}";
    // $('#selectServicios').change(function() {
    //     var obtener_id = $(this).val();

    //     $.ajax({
    //         url: url_dinamica + "/api/citas/obtener/" + obtener_id,
    //         type: "GET",
    //         dataType: "json",
    //         success: function(data) {
    //             $('#selectSala').empty().append();
    //             $.each(data.data, function(key, value) {
    //                 $('#selectSalas').append(
    //                     '<option value="' + value.sala_id + '">' + value.nombre + '</option>'
    //                 );

    //             });
    //         },
    //         error: function(xhr, estado, error) {
    //             console.log(xhr);
    //             console.log(estado);
    //             console.log(error);
    //         }
    //     });

    // });

    var dateToday = new Date();

    $("#dropper-border").change(function() {
        var updatedDate = $(this).val();
        var instance = $(this).data("datepicker");
        var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

        if (date < dateToday) {
            $(this).datepicker("setDate", dateToday);
        }
    });

    $("#hora").inputmask({
        mask: "99:99"
    });

    $(document).ready(function() {
        $('#selectServicio').change(function() {
            var servicio_id = $(this).val();

            console.log('entra');
            $('#loader_cliente').show();
            $('#selectSalaDiv').hide();
            $.ajax({
                url: url_dinamica + "/api/citas/obtener/" + servicio_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#selectSala').empty().append();
                    $('#selectSala').append('<option value="Seleccina una opción">Seleccina una opción</option>');

                    $.each(data.data, function(key, value) {
                        $('#selectSala').append(
                            '<option value="' + value.sala_id + '">' + value.nombre + '</option>'
                        );
                    });

                    $('#loader_cliente').hide();
                    $('#selectSalaDiv').show();
                },
                error: function(xhr, estado, error) {
                    console.log(xhr);
                    console.log(estado);
                    console.log(error);
                }
            });
        });



    });
</script>
@endsection