@extends('client.topCargo.layouts.layout')

@section('title', 'Request a Quote')

@section('content')

    <!--Page Header-->
    <div class="page-header title-area">
        <div class="header-title">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <h1 class="page-title">Request A Quote</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="breadcrumb-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-sm-12 col-xs-12 site-breadcrumb">
                        <nav class="breadcrumb">
                            <a class="home" href="{{ route('home') }}"><span>Home</span></a>
                            <i class="fa fa-angle-right" aria-hidden="true"></i>
                            <span>Request A Quote</span>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Page Header end-->

    <!--Request a Quote -->
    <section class="whychoose-1 secpadd">
        <div class="container">
            <div class="row quote1top">
                <div class="col-md-8">
                    <div class="fh-section-title clearfix  text-left version-dark paddbtm40">
                        <h2>Request a Quote</h2>
                    </div>
                    <p>We’re always interested in new projects, big or small. Send us an email and we’ll get in touch
                        shortly, or phone between 8:00 am and 7:00 pm Sunday to Friday.</p>
                </div>
            </div>
            <div class="row quote1forms">
                <div class="col-md-12">
                    <form action="{{ route('send-email') }}" id="quote-enquiry" method="POST">
                        @csrf
                        <div id="loading" style="display:none"><img
                                src="{{ asset('topCargo/assets/images/ajax-loader.png') }}" alt="loading" /></div>
                        <div class="quote-form-message"></div>
                        <input type="hidden" name="identifier" value="quote">
                        <div class="fh-form request-form">
                            <div class="row">
                                <div class="field col-md-4">
                                    <label>First Name<span class="require">*</span></label>
                                    <input placeholder="First Name" type="text" name="firstname">
                                </div>
                                <div class="field col-md-4">
                                    <label>Last Name<span class="require">*</span></label>
                                    <input placeholder="Last Name" type="text" name="lastname">
                                </div>
                                <div class="field col-md-4">
                                    <label>Email Address<span class="require">*</span></label>
                                    <input name="email" placeholder="Email Address" type="email">
                                </div>
                                <div class="col-md-8 request-row">
                                    <p class="field first-row">
                                        <label>City Departure</label>
                                        <input type="text" name="citydeparture">
                                    </p>
                                    <p class="field last-row">
                                        <label>Delivery City</label>
                                        <input type="text" name="DeliverCity">
                                    </p>
                                    <p class="field first-row">
                                        <label>Parcel Type</label>
                                        <select id="parceltype">
                                            <option value="FOB">FOB</option>
                                            <option value="Option 1">Option 1</option>
                                            <option value="Option 2">Option 2</option>
                                            <option value="Option 3">Option 3</option>
                                        </select>
                                    </p>
                                    <p class="field last-row">
                                        <label>Weight(kg)</label>
                                        <input type="text" name="weight">
                                    </p>
                                    <p class="field single-field">
                                        <label>Special Info</label>
                                        <textarea name="specialinfo"></textarea>
                                    </p>
                                </div>
                                <div class="col-md-4">
                                    <p class="field check-box">
                                        <label>Freight Type<span class="require">*</span></label>
                                        <span class="checkbox-box">
                                            <span class="checkbox_item"><label><input type="checkbox" name="freightType[]"
                                                        value="Warehousing Services">Warehousing Services</label></span>
                                            <span class="checkbox_item"><label><input type="checkbox" name="freightType[]"
                                                        value="Road Transportation">Road Transportation</label></span>
                                            <span class="checkbox_item"><label><input type="checkbox" name="freightType[]"
                                                        value="Air Transportation">Air Transportation</label></span>
                                            <span class="checkbox_item"><label><input type="checkbox" name="freightType[]"
                                                        value="Sea Transportation">Sea Transportation</label></span>
                                            <span class="checkbox_item"><label><input type="checkbox" name="freightType[]"
                                                        value="Logistics Planning">Logistics Planning</label></span>
                                        </span>
                                    </p>
                                    <p class="field submit">
                                        <input value="Submit" class="fh-btn" type="submit">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!--Request a Quote end -->

    @push('js')
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function() {
                $('#quote-enquiry').submit(function(e) {
                    e.preventDefault();
                    var form = $(this);
                    var formData = form.serialize();
                    var url = form.attr('action');

                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: formData,
                        beforeSend: function() {
                            $('#loading').show();
                        },
                        success: function(response) {
                            if (response.success) {
                                $('.quote-form-message').html('<div class="alert alert-success">' +
                                    response.success + '</div>');
                                form.trigger('reset');
                                setTimeout(function() {
                                    $('.quote-form-message').fadeOut();
                                }, 2000);
                            } else {
                                $('.quote-form-message').html('<div class="alert alert-danger">' +
                                    response.error + '</div>');
                                setTimeout(function() {
                                    $('.quote-form-message').fadeOut();
                                }, 2000);
                            }
                        },
                        error: function(xhr, status, error) {
                            var errorMessage = xhr.status + ': ' + xhr.statusText;
                            $('.quote-form-message').html(
                                '<div class="alert alert-danger">Error - ' + errorMessage +
                                '</div>');
                            setTimeout(function() {
                                $('.quote-form-message').fadeOut();
                            }, 2000);
                        },
                        complete: function() {
                            $('#loading').hide();
                        }
                    });
                });
            });
        </script>
    @endpush


@endsection