@extends('layout.main')

@push('title')

<title>Book your Ride with SVT Tour and Travels</title>

@endpush
@section('main-section')
    <main class="main">

        <div class="site-breadcrumb" style="background: url({{asset('public/assets/img/breadcrumb/01.jpg')}})">
            <div class="container">
                <h2 class="breadcrumb-title">Book A Ride</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="{{url('/')}}">Home</a></li>
                    <li class="active">Book A Ride</li>
                </ul>
            </div>
        </div>


        <div class="book-ride py-50">
            <div class="container">
                <div class="row">
                    <div class="col-md-10 mx-auto">
                        <div class="booking-form">
                            <div class="book-ride-head">
                                <h4 class="booking-title">Make Your Booking Today</h4>
                                <p>Book your taxi by filling up all necessary details of journey with us.</p>
                            </div>
                            <form action="{{url('/main-form')}}" method="post">
                                {!! csrf_field() !!}
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label>Full Name</label>
                                            <input type="text" name="name" class="form-control" placeholder="Your Name">
                                            <i class="far fa-user"></i>
                                            <div style="color: #f13352;margin: 0 15px;">
                                                @error('name')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Phone Number</label>
                                            <input type="tel" name="phone" class="form-control" placeholder="Your Phone">
                                            <i class="far fa-phone"></i>
                                            <div style="color: #f13352;margin: 0 15px;">
                                                @error('phone')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Email</label>
                                            <input type="email" name="email" value="{{old('email')}}" class="form-control" placeholder="Your Email">
                                            <i class="far fa-envelope"></i>
                                            <div style="color: #f13352;margin: 0 15px;">
                                                @error('email')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Pick Up Location</label>
                                            <input type="text" name="pickup" value="{{old('pickup')}}" class="form-control" placeholder="Type Location">
                                            <i class="far fa-location-dot"></i>
                                            <div style="color: #f13352;margin: 0 15px;">
                                                @error('pickup')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Drop Off Location</label>
                                            <input type="text" name="drop" value="{{old('drop')}}" class="form-control" placeholder="Type Location">
                                            <i class="far fa-location-dot"></i>
                                            <div style="color: #f13352;margin: 0 15px;">
                                                @error('drop')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Pick Up Date</label>
                                            <input type="text" name="date" value="{{old('date')}}" class="form-control date-picker" placeholder="MM/DD/YY">
                                            <i class="far fa-calendar-days"></i>
                                            <div style="color: #f13352;margin: 0 15px;">
                                                @error('date')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 mx-auto">
                                        <button class="theme-btn" type="submit">Book Your Taxi
                                            <i class="fas fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>
@endsection