@extends('adminlte::page')

@section('title', 'Editar Periodos')

@section('plugins.Datatables', true)
@section('plugins.Date-picker', true)

@section('content_header')
    <h1>Periodos</h1>
@stop

@section('content')
    @include('admin.parts.info')

    <div class="card card-dark">
        <div class="card-header" data-card-widget="collapse">
            <h3 class="card-title">Editar Periodo</h3>
            <div class="card-tools">
                <!-- Collapse Button -->
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
            </div>
        <!-- /.card-tools -->
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <p>(*) Campos obligatorios</p>
            <form method="POST" action="{{route ('periods.update', $period)}}">
                @csrf @method('PATCH')
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label>Nombre Asignado al Periodo Académico (*)</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{old('name',$period->name)}}" placeholder="Nombre" required>
                    </div>
                    <div class="form-group col-md-6">
                        <label>Fecha de Inicio (*)</label>
                        <div class="input-group date" id="reservationdate_start" data-target-input="nearest">
                            <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate_start" id="data_start" name="data_start" value="{{old('data_start',$period->data_start)}}" placeholder="Fecha de Inicio" required>
                            <div class="input-group-append" data-target="#reservationdate_start" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label>Fecha de Fin (*)</label>
                        <div class="input-group date" id="reservationdate_end" data-target-input="nearest">
                            <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate_end" id="data_end" name="data_end" value="{{old('data_end',$period->data_end)}}" placeholder="Fecha de Fin" required>
                            <div class="input-group-append" data-target="#reservationdate_end" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-dark">Actualizar datos del Periodo</button>
            </form>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
@stop
@section('js')
    <script>
        $(function () {
            //Date range picker
            $('#reservationdate_start').datetimepicker({
                locale: 'es',
                //defaultDate: moment(),
                format: 'YYYY-MM-DD'
            }); 
            //Date range picker
            $('#reservationdate_end').datetimepicker({
                locale: 'es',
                //defaultDate: moment(),
                format: 'YYYY-MM-DD'
            });  
        });
    </script>
@stop