@extends('layouts.app')

@section('page-title')
    Rendez-vous
@stop

@section('content')
<div class="hr"></div>
@include('includes.breadcrumb')
<div id="form-appointment" class="container wrapper">
    <div class="grid grid-phone-1 grid-tablet-1 grid-2 grid-m-3">
        <div class="form cell cell-phone-12 cell-tablet-12 cell-7 mb-phone-4">
            {!! Form::open(['url' => 'contact', 'method' => 'post' ]) !!}
            <header class="form-header">
                <h3 class="heading mb-3">Prendre rendez-vous en magasin</h3>
            </header>
            <div class="form-body clearfix">
                <div class="grid grid-phone-1 grid-2 grid-m-2 mb-2">
                    <div class="form-group cell cell-phone-12 cell-6 mb-phone-2">
                        {{ Form::label('lastname', 'Nom', [ 'class' => 'mb-1' ]) }}
                        {{ Form::text('lastname', null, [ 'placeholder' => 'Nom' ]) }}
                    </div>
                    <div class="form-group cell cell-phone-12 cell-6">
                        {{ Form::label('firtname', 'Prénom', [ 'class' => 'mb-1' ]) }}
                        {{ Form::text('firstname', null, [ 'placeholder' => 'Prénom' ]) }}
                    </div>
                </div>

                <div class="grid grid-phone-1 grid-2 grid-m-2 mb-2">
                    <div class="form-group cell cell-phone-12 cell-6 mb-phone-2">
                        {{ Form::label('email', 'Adresse email', [ 'class' => 'mb-1' ]) }}
                        {{ Form::email('email', null, [ 'placeholder' => 'Adresse email' ]) }}
                    </div>
                    <div class="form-group cell cell-phone-12 cell-6">
                        {{ Form::label('phone', 'Téléphone', [ 'class' => 'mb-1' ]) }}
                        {{ Form::tel('phone', null, [ 'placeholder' => 'Téléphone' ]) }}
                    </div>
                </div>
                <div class="grid grid-phone-1 grid-2 grid-m-2 mb-4">
                    <div class="form-group cell cell-phone-12 cell-6 mb-phone-2">
                        {{ Form::label('text', 'Date', [ 'class' => 'mb-1' ]) }}
                        <datepicker :disabled="state.disabled" :highlighted="state.highlighted" language="fr" placeholder="Date" v-on:input="updateAppointmentForm" v-model="appointmentDate"></datepicker>
                    </div>
                    <div class="form-group cell cell-phone-12 cell-6">
                        {{ Form::label('text', 'Période', [ 'class' => 'mb-1' ]) }}
                        <div class="clearfix">
                            <input type="radio" name="period" value="morning" id="appointment-period-morning" required :disabled="!appointmentAllowedMorning">
                            {{ Form::label('appointment-period-morning', 'Matin') }}
                        </div>
                        <div class="clearfix" disabled="appointmentOpeningHours != null && appointmentOpeningHours.length > 1">
                            <input type="radio" name="period" value="afternoon" id="appointment-period-afternoon" required :disabled="!appointmentAllowedAfternoon">
                            {{ Form::label('appointment-period-afternoon', 'Après-midi') }}
                        </div>
                    </div>
                </div>
                <div class="grid grid-m-2">
                    <div class="form-group mb-2">
                        {{ Form::label('text', 'L\'objet du rendez-vous', [ 'class' => 'mb-1' ]) }}
                        {{ Form::textarea('message', null, [ 'placeholder' => '', 'rows' => 6 ]) }}
                    </div>
                    <div class="form-group">
                        <p class="legend">Une confirmation du rendez-vous vous sera adressée sous 24 heures</p>
                    </div>
                </div>

            </div>
            <footer class="form-footer clearfix">
                {{ Form::submit('Confirmer', [ 'class' => 'btn btn-size-2 btn-blue float-right' ]) }}
            </footer>
            {!! Form::close() !!}
        </div>
        <div id="timetable" class="cell cell-phone-12 cell-tablet-12 cell-5">
            <h3 class="heading mb-3"><i class="fa fa-clock-o mr-4" aria-hidden="true"></i>Horaires</h3>
            <timetable :hours="hours" :days="days"></timetable>
        </div>
    </div>
</div>
@stop