@extends('layouts.signed')
@section('title', 'Agendar')
@section('content')
<div id="app" class="row justify-content-center mt-4">
    <div class="col-md-4 col-sm-6">
        <form action="{{ route('appointments-store') }}" method="POST">
            @csrf
            <!-- Centro -->
            <select v-on:change="getCenter($event)" name="center_id" id="" class="form-select">
                <option selected disabled hidden>Seleccione un centro</option>
                @foreach($centers as $center)
                <option value="{{ $center->id }}">{{ $center->name }}</option>
                @endforeach
                <!-- Otros centros -->
            </select>
            <!-- Time -->
            <input v-model="date" v-on:change="getDay($event); getTimes();" class="form-control" id="date_id" type="date" name="date">

            <v-select :options="options" v-model="times" placeholder="Seleccione un horario">
                <span slot="no-options">
                    Por favor, una fecha.
                </span>
            </v-select>
            <input name="hour" type="hidden" :value="times.label" />

            <div class="d-flex btn-group container text-center mt-3">
                <button type="submit" class="btn btn-pink">Agendar</button>
                <a href="{{ route('appointments') }}" class="btn btn-pink">Cancelar</a>
            </div>
        </form>
        <div>
            @if($errors->any())
            <div class="alert alert-warning mt-2" role="alert">
                <p>Por favor, corriga estos errores: </p>
                @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </div>
            @endif
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.6.1/vue-resource.min.js" integrity="sha512-NuUIe6TWdEivPTcxnihx2e6r2xQFEFPrJfpdZWoBwZF6G51Rphcf5r/1ZU/ytj4lyHwLd/YGMix4a5LqAN15XA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<script>
    Vue.component('v-select', VueSelect.VueSelect)
    var app = new Vue({
        el: '#app',
        data: {
            center_id: '',
            date: '',
            day: '',
            options: [],
            times: [],
            time: '',
            token: '',
        },
        methods: {
            getCenter: function(event) {
                this.center_id = event.target.value;
            },
            getDay: function(event) {
                let days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
                let dObject = new Date(this.date);
                this.day = days[dObject.getDay()];
            },
            getTimes: function() {
                this.token = "{{ csrf_token() }}";
                let constData = {
                    _token: this.token,
                    center_id: this.center_id,
                    date: this.date,
                    day: this.day,
                };
                this.$http.post('/dashboard/appointments/avaiability', constData).then(function(response) {
                    console.log(response.data)
                    this.options = response.data;
                });
            }
        }
    })
</script>
@endsection