@extends('website.layout.master')

@section('title')
    Get a quote
@endsection

@section('content')
    <style>
        .contact-page .container {
            max-width: 770px;
        }

        .nice-select .option {
            background-color: black;
        }

        .nice-select .list {
            background-color: black;
        }

        .contact-page {
            position: relative;
            display: block;
            padding: 0px 0 120px;
        }
    </style>
    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg"
             style="background-image: url({{ URL::asset('website/images/backgrounds/page-header-bg.jpg')}})">
        </div>
        <div class="page-header__overly"></div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route("home")}}">Home</a></li>
                    <li><span>/</span></li>
                    <li>Get a Quote</li>
                </ul>
                <h2>Get a Quote</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Contact Page Start-->
    <section class="contact-page" style="background-color: black;">
        <div class="container">
            <div class="row">

                <div class="col-md-12" style="padding: 25px 20px">
                    <div class="section-title text-center">
                        <h2 class="section-title__title MyWhite">REQUEST A QUOTE</h2>
                        <p class="MyWhite">
                            Ready to get started? fill out the form <br> below and we’ll send you a
                            personalized quote based on your needs.
                        </p>
                    </div>
                    <div class="contact-page__inner">
                        <form action="{{ route('save_quote') }}" class="MyForm" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="contact-page__input-box">
                                        <input type="text" placeholder="Your Name" name="name" required>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="contact-page__input-box">
                                        <input type="email" placeholder="Email Address" name="email" required>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="contact-page__input-box">
                                        <input type="text" placeholder="Phone Number" name="phone" required>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="contact-page__input-box">
                                        <input type="text" placeholder="Company" name="company" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-md-3">
                                    <input type="checkbox" id="l1" value="Gas Certificate" name="type[]">
                                    <label for="l1" class="MyWhite">Gas Certificate</label>
                                </div>

                                <div class="col-md-3">
                                    <input type="checkbox" id="l6" value="Floor plan" name="type[]">
                                    <label for="l6" class="MyWhite">Floor plan</label>
                                </div>

                                <div class="col-md-3">
                                    <input type="checkbox" id="l8" value="PAT Test" name="type[]">
                                    <label for="l8" class="MyWhite">PAT Test</label>
                                </div>

                                <div class="col-md-3">
                                    <input type="checkbox" id="l3" value="EPC" name="type[]">
                                    <label for="l3" class="MyWhite">EPC</label>
                                </div>

                                <div class="col-md-6">
                                    <input type="checkbox" id="l2" value="Electrical Installation Condition Report"
                                           name="type[]">
                                    <label for="l2" class="MyWhite">Electrical Installation Condition Report</label>
                                </div>

                                <div class="col-md-5">
                                    <input type="checkbox" id="l4" value="Fire Risk Assessment" name="type[]">
                                    <label for="l4" class="MyWhite">Fire Risk Assessment</label>
                                </div>

                                <div class="col-md-6">
                                    <input type="checkbox" id="l5" value="Emergency Lightnings Certificate"
                                           name="type[]">
                                    <label for="l5" class="MyWhite">Emergency Lightnings Certificate</label>
                                </div>

                                <div class="col-md-6">
                                    <input type="checkbox" id="l7" value="Fire Alarm Certificate" name="type[]">
                                    <label for="l7" class="MyWhite">Fire Alarm Certificate</label>
                                </div>
                                <br>
                                <div class="col-xl-12 mt-3">
                                    <div class="contact-page__input-box dropdown-box">
                                        <textarea name="detail" rows="7" placeholder="Details . . . "
                                                  required></textarea>
                                    </div>
                                </div>
                                <div class="col-xl-12" style="margin-top: 5%">
                                    <div class="contact-page__btn-box">
                                        <button type="submit" class="thm-btn contact-page__btn MyButton"
                                                style="background-color:#221c13">Submit
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Contact Page End-->

@endsection