@extends('layouts.front')
@section('content')
@section('css')
<style>
    .alert-info{
        text-align: left;
        margin: 30px;
    }
</style>
@endsection

@php $home = \App\HomePage::findorFail(1); @endphp
<div class="inner-page-banner-area" style="background: url({{asset('/laravel_code/public/banner/' . $home->inner_banner)}}); background-repeat: no-repeat; background-size: cover;">
    <div class="container">
        <div class="pagination-area">
            <h2>Reserva Marmi Ristorante</h2>
            <ul>
                <li><a href="{{route('home')}}">Home</a> - </li>
                <li>Reserva Marmi Ristorante</li>
            </ul>
        </div>
    </div>
</div>

<div class="reservation-page-area">
    <div class="container">
        <div class="reservation-page-inner">
            <p class="alert alert-info hidden-md hidden-lg">Our service hours at MARMI RISTORANTE are<br> from 12:30 to 7:30 pm</p>
            <div class="reservation-page-left">
                <div class="reservation-page-form">
                    <span>Mesa</span>
                    <h2>RESERVA</h2>
                    <form id="reservation-form">
                        <div class="reservation-page-input-box">
                            <input type="text" class="form-control" placeholder="Nombre" name="name" id="form-name"
                                data-error="Subject field is required" required />
                        </div>
                        <div class="reservation-page-input-box">
                            <input type="text" class="form-control" placeholder="Correo electrónico" name="email" id="form-subject"
                                data-error="Subject field is required" required />
                        </div>
                        <div class="reservation-page-input-box">
                            <input type="text" class="form-control" placeholder="Teléfono" name="phone" id="form-phone"
                                data-error="Subject field is required" required />
                        </div>
                        <div class="reservation-page-input-box">
                            <i class="fa fa-calendar" aria-hidden="true"></i>
                            <input type="text" class="form-control rt-date" placeholder="Fecha" name="date"
                                id="form-date" data-error="Subject field is required" required />
                        </div>
                        <div class="reservation-page-input-box">
                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                            <input type="text" class="form-control rt-time" placeholder="Horario" name="time"
                                id="form-time" data-error="Subject field is required" required />
                        </div>
                        <div class="reservation-page-input-box">
                            <input type="text" class="form-control" placeholder="Numero de Personas" name="person" id="form-person"
                                data-error="Subject field is required" required />
                        </div>
                        <div class="reservation-page-input-box">
                            <textarea class="form-control" placeholder="Mensaje" name="message" id="form-message"
                                data-error="Message field is required" required></textarea>
                        </div>
                        <button type="submit" class="book-now-btn">Reservas Marmi Ristorante</button>
                        <div class='form-response'></div>
                    </form>
                </div>
            </div>
            <div class="reservation-page-right">
                <p class="alert alert-info">Our service hours at MARMI RISTORANTE are<br> from 12:30 to 7:30 pm</p>
                <img src="assets/front/img/reservation-banner.png" width="70%" class="img-responsive" alt="reservation-banner">
            </div>
        </div>
    </div>
</div>

@section('js')
<script>
    var reservationForm = $('#reservation-form');
    if (reservationForm.length) {

        reservationForm.validator().on('submit', function (e) {
            var $this = $(this),
                $target = reservationForm.find('.form-response');
            if (e.isDefaultPrevented()) {
                $target.html("<div class='alert alert-success'><p>Please select all required field.</p></div>");
            } else {
                // Ajax call to load php file to process mail function
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    url: "{{route('bookTable')}}",
                    type: "POST",
                    data: reservationForm.serialize() + '&_token=' + CSRF_TOKEN,
                    beforeSend: function () {
                        $target.html("<div class='alert alert-info'><p>Loading ...</p></div>");
                    },
                    success: function (response) {
                        if (response.status) {
                            //firebase
                            // firebase.database().ref('reservation_alerts').child(1).update({
                            //     'id': Date.now()
                            // });
                            $this[0].reset();
                            $target.html(
                                "<div class='alert alert-success'><p>Message has been sent successfully.</p></div>"
                            );
                        } else {
                            $target.html(
                                "<div class='alert alert-success'><p>Something goes wrong! Plase try again.</p></div>"
                            );
                        }
                    }
                });
                return false;
            }
        });
    }
</script>
@endsection
@endsection