@extends('layout.master')
@section('meta_title', 'Book Your Free IT Consultation')
@section('meta_description', 'Schedule a free consultation with our experts to discuss your project, explore the right technology solutions, and take the first step toward growing your business.')
@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush
@section('content')
    <div class="page-header bg-main-section parallaxie">
        <div class="page-header-box">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">

                        <div class="page-header-content">
                            <h1 class="wow fadeInUp">Schedule A <span>Call</span></h1>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-book-appointment">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-4">
                    <div class="book-appointment-content">
                        <div class="section-title">
                            <h2 class="wow fadeInUp">Book Your <span>Free Consultation</span></h2>
                            <p class="wow fadeInUp" data-wow-delay="0.2s">
                                Every big success begins with a conversation. Schedule your call today
                                and take the first step toward growth.</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-8">
                    <div class="appointment-form">
                        <p class="wow fadeInUp">Fill out the form below to request your business couch appointment.
                            We'll confirm your time and send you a reminder.</p>
                        <form id="appointmentForm" action="{{ route('schedule.submit') }}" method="POST"
                            data-toggle="validator" class="wow fadeInUp" data-wow-delay="0.25s">
                            @csrf
                            <div class="row">
                                <div class="form-group col-md-6 mb-4">
                                    <input type="text" name="name" class="form-control" id="name"
                                        placeholder="Enter your name" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                                <div class="form-group col-md-6 mb-4">
                                    <input type="email" name="email" class="form-control" id="email"
                                        placeholder="Enter your email" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                                <div class="form-group col-md-6 mb-4">
                                    <input type="tel" name="phone" class="form-control" id="phone"
                                        placeholder="Enter your phone number" required>
                                    <div class="help-block with-errors"></div>
                                </div>
                                <div class="form-group col-md-6 mb-4">
                                    <input type="text" name="location" class="form-control" id="location"
                                        placeholder="Enter your location" required>
                                    <div class="help-block with-errors"></div>
                                </div>

                                <div class="form-group col-md-6 mb-4">
                                    <input type="text" name="datetime" id="datetime" class="form-control"
                                        placeholder="Select Date & Time" required>
                                </div>
                                <div class="col-md-12">
                                    <button type="submit" class="btn-default">book an appointment</button>
                                    <div id="msgSubmit" class="h3 hidden"></div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        $(document).ready(function() {

           flatpickr("#datetime", {
    enableTime: true,
    dateFormat: "Y-m-d H:i K",   // UI AM/PM
    altInput: true,
    altFormat: "Y-m-d h:i K",    // user sees AM/PM
    time_12hr: true
});

        });
        $(document).ready(function() {

            $('#appointmentForm').submit(function(e) {
                e.preventDefault();

                let form = $(this);
                let btn = form.find('button[type="submit"]');

                btn.prop('disabled', true).text('Booking...');

                $.ajax({
                    url: form.attr('action'),
                    type: "POST",
                    data: form.serialize(),

                    success: function(res) {

                        btn.prop('disabled', false).text('book an appointment');

                        toastr.success(res.message);

                        form[0].reset();
                    },

                    error: function(xhr) {

                        btn.prop('disabled', false).text('book an appointment');

                        if (xhr.status === 422) {

                            let errors = xhr.responseJSON.errors;

                            $.each(errors, function(key, value) {
                                toastr.error(value[0]);
                            });

                        } else {
                            toastr.error('Something went wrong!');
                        }
                    }
                });

            });

        });
    </script>
@endpush