@extends('layouts.app')

@section('content')
    <div class="inner-banner-three text-center">
        <div class="contact-container text-center" style="background-color:#b0008e;">
            <div class="container">
                <img src="images/background/Palm tree-02.png" class="Palm-tree" alt="">
                <div class="title-style-five">
                    <h2 class="main-title fw-bold">{!! nl2br(e($page->banner_title)) !!}
                    </h2>
                </div>
                <p class="fs-20 mt-30 lg-mt-20 c-p">{!! nl2br(e($page->banner_text)) !!}</p>
            </div>
            <div class="container">
                <div class="contact-section-two text-start mt-80 lg-mt-60">
                    <div class="row">
                        <div class="col-lg-7 order-last order-md-first">
                            <div class="form-style-three md-mb-60 wow fadeInLeft">
                                <form action="{{ route('distributor-form') }}" id="" data-toggle="" method="POST">
                                    @csrf
                                    <div class="messages"></div>
                                    <div class="row controls">
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-35">
                                                <label class="d-block" for="">Full Name*</label>
                                                <input type="text" placeholder="" name="name" required="required"
                                                    data-error="Name is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Phone Number</label>
                                                <input type="text" placeholder="" name="phone"
                                                    data-error="Valid phone is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Email Address*</label>
                                                <input type="email" placeholder="" name="email" required="required"
                                                    data-error="Valid email is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Company Name</label>
                                                <input type="text" placeholder="" name="company"
                                                    data-error="Valid company is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Business Sector</label>
                                                <div class="form-check">
                                                    <input type="radio" class="form-check-input" id="radio1"
                                                        name="business_sector"
                                                        value="Retail (ex. Markets, groceries, natural products store...)"
                                                        checked>
                                                    <label class="form-check-label circle-padding" for="radio1">Retail
                                                        (ex. Markets, groceries, natural products store...)</label>
                                                </div>
                                                <div class="clearfix"></div>
                                                <div class="form-check">
                                                    <input type="radio" class="form-check-input" id="radio2"
                                                        name="business_sector"
                                                        value="Food-related service (eg restaurant, cafeteria, bakery, hotel, inn, kiosk on the beach...)">
                                                    <label class="form-check-label circle-padding"
                                                        for="radio2">Food-related service (eg restaurant, cafeteria,
                                                        bakery, hotel, inn, kiosk
                                                        on the beach...)</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Address</label>
                                                <input type="text" placeholder="" name="address"
                                                    data-error="Valid address is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">City</label>
                                                <input type="text" placeholder="" name="city"
                                                    data-error="Valid city is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Which products are of
                                                    interest?</label>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="checkbox1"
                                                        name="products[]" value="Original (200mL)" checked>
                                                    <label class="form-check-label circle-padding"
                                                        for="checkbox1">Original (200mL)</label>
                                                </div>
                                                <div class="clearfix"></div>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="checkbox2"
                                                        name="products[]" value="Banana (200mL)">
                                                    <label class="form-check-label circle-padding" for="checkbox2">Banana
                                                        (200mL)</label>
                                                </div>
                                                <div class="clearfix"></div>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="checkbox3"
                                                        name="products[]" value="Blackberry (200mL)">
                                                    <label class="form-check-label circle-padding"
                                                        for="checkbox3">Blackberry (200mL)</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-30">
                                                <label class="d-block" for="">Additional Message</label>
                                                <textarea placeholder="" name="message" data-error="Please,leave us a message."></textarea>
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                                        <div class="g-recaptcha" id="feedback-recaptcha"
                                            data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                                        <div class="col-12"><button type="submit"
                                                class="fw-500 w-100 fs-14 d-block btn-form">Send</button></div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.form-style-three -->
                        </div>
                        <div class="col-xl-4 col-lg-5 ms-auto wow fadeInRight">
                            <div class="address-block-three d-flex mb-70 lg-mb-40 mt-20">
                                <div class="text">
                                    <h2 class="main-title-c fw-bold">{!! nl2br(e($page->section_1_title)) !!}
                                    </h2>
                                    <p>{!! nl2br(e($page->section_1_text)) !!}
                                    </p>
                                    <img src="{{ Voyager::image($page->section_1_image) }}" class="br-25 mt-20"
                                        width="100%" alt="">
                                </div>
                            </div>
                            <!-- /.address-block-three -->
                        </div>
                    </div>
                </div>
                <!-- /.contact-section-two -->
            </div>
            <!-- /.container -->
            <div class="container">
                <div class="contact-section-two text-start mt-80 lg-mt-60">
                    <div class="row">
                        <div class="col-lg-7 order-last order-md-first">
                            <div class="form-style-three md-mb-60 wow fadeInLeft">
                                <form action="{{ route('contact-form') }}" id="" data-toggle="" method="POST">
                                    @csrf
                                    <div class="messages"></div>
                                    <div class="row controls">
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-35">
                                                <label class="d-block" for="">Full Name*</label>
                                                <input type="text" placeholder="" name="name" required="required"
                                                    data-error="Name is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Phone Number</label>
                                                <input type="text" placeholder="" name="phone"
                                                    data-error="Valid phone is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Email Address*</label>
                                                <input type="email" placeholder="" name="email" required="required"
                                                    data-error="Valid email is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">City</label>
                                                <input type="text" placeholder="" name="city"
                                                    data-error="Valid city is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Subject*</label>
                                                <input type="text" placeholder="" name="subject" required
                                                    data-error="Valid subject is required.">
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        {{-- <div class="col-12">
                                            <div class="input-group-meta form-group mb-40">
                                                <label class="d-block" for="">Subject*</label>
                                                <div class="help-block with-errors"></div>
                                                <select class="form-select form-select-lg select-contact">
                                                    <option>select</option>
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                </select>
                                            </div>
                                        </div> --}}
                                        <div class="col-12">
                                            <div class="input-group-meta form-group mb-30">
                                                <label class="d-block" for="">Message*</label>
                                                <textarea placeholder="" name="message" required="required" data-error="Please,leave us a message."></textarea>
                                                <div class="help-block with-errors"></div>
                                            </div>
                                        </div>
                                        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                                        <div class="g-recaptcha" id="feedback-recaptcha"
                                            data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                                        <div class="col-12"><button type="submit"
                                                class="btn-form fw-500 w-100 fs-14 d-block">Send</button></div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.form-style-three -->
                        </div>
                        <div class="col-xl-4 col-lg-5 ms-auto wow fadeInRight">
                            <div class="address-block-three d-flex mb-70 lg-mb-40 mt-20">
                                <div class="text">
                                    <h2 class="main-title-c fw-bold">{!! nl2br(e($page->section_2_title)) !!}
                                    </h2>
                                    <img src="{{ Voyager::image($page->section_2_image) }}" class="br-25" width="100%"
                                        alt="">
                                </div>
                            </div>
                            <!-- /.address-block-three -->
                        </div>
                    </div>
                </div>
                <!-- /.contact-section-two -->
            </div>
            <!-- /.container -->
        </div>
    </div>
@endsection