@extends('layouts.app')

@section('title', 'Partner | ' . config('app.name'))

@push('styles')
    @vite('resources/css/pages/partner.css')
@endpush

@section('content')

<div class="partner-page">


    <!--==================================================
    HERO
    ===================================================-->

     <x-page-video-header
        page="partner"
        title="Partners"
        
    />

    <!--==================================================
    BECOME A PARTNER  +  FORM
    ===================================================-->

    <section class="partner-connect">

       

        <div class="container">

            <div class="row justify-content-center align-items-start ">


                <!-- LEFT -->

                <div class="col-lg-5 col-xl-4 partner-connect-intro-section">

                    <div class="partner-intro">

                        <h2 class="partner-title">
                            Become a
                            <span>Technology Partner</span>
                        </h2>

                        <p>
                            Collaborate with us to deliver cutting-edge solutions and drive innovation.
                            Submit the form below to explore partnership opportunities.
                        </p>

                    </div>

                </div>


                <!-- RIGHT -->

                <div class="col-lg-6 col-xl-5">

                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    <div class="partner-card">

                        <form class="partner-form"
                              id="partnerForm"
                              method="POST"
                              action="{{ route('partner.submit') }}"
                              data-recaptcha-key="{{ config('services.recaptcha.key') }}"
                              data-recaptcha-action="partner_submit"
                              novalidate>

                            @csrf

                            {{-- honeypot: real people never see it, bots fill it in --}}
                            <div class="partner-hp" aria-hidden="true">
                                <label for="partner_website">Website</label>
                                <input type="text" id="partner_website" name="website" tabindex="-1" autocomplete="off">
                            </div>

                            <div class="partner-field">
                                <label class="partner-sr" for="partner_company">Company name</label>
                                <input type="text"
                                       id="partner_company"
                                       name="company"
                                       class="form-control"
                                       placeholder="Company name*"
                                       value="{{ old('company') }}"
                                       autocomplete="organization"
                                       required>
                                @error('company')<span class="partner-error">{{ $message }}</span>@enderror
                            </div>

                            <div class="partner-field">
                                <label class="partner-sr" for="partner_name">Your name</label>
                                <input type="text"
                                       id="partner_name"
                                       name="name"
                                       class="form-control"
                                       placeholder="Your name*"
                                       value="{{ old('name') }}"
                                       autocomplete="name"
                                       required>
                                @error('name')<span class="partner-error">{{ $message }}</span>@enderror
                            </div>

                            <div class="partner-field">
                                <label class="partner-sr" for="partner_email">Your email address</label>
                                <input type="email"
                                       id="partner_email"
                                       name="email"
                                       class="form-control"
                                       placeholder="Your email address*"
                                       value="{{ old('email') }}"
                                       autocomplete="email"
                                       required>
                                @error('email')<span class="partner-error">{{ $message }}</span>@enderror
                            </div>

                            <div class="partner-field">
                                <label class="partner-sr" for="partner_phone">Your phone</label>
                                <input type="tel"
                                       id="partner_phone"
                                       name="phone"
                                       class="form-control"
                                       placeholder="Your phone*"
                                       value="{{ old('phone') }}"
                                       autocomplete="tel"
                                       required>
                                @error('phone')<span class="partner-error">{{ $message }}</span>@enderror
                            </div>

                            <div class="partner-field">
                                <label class="partner-sr" for="partner_message">Your message</label>
                                <textarea id="partner_message"
                                          name="message"
                                          class="form-control"
                                          rows="5"
                                          placeholder="Your message">{{ old('message') }}</textarea>
                                @error('message')<span class="partner-error">{{ $message }}</span>@enderror
                            </div>

                            <p class="partner-privacy d-none">
                                We are committed to protecting your privacy.  
                            </p>


                            <!--==================================================
                            reCAPTCHA v3  (invisible, score based)
                            The token is generated at submit time, not page load,
                            because it expires after two minutes.
                            ===================================================-->

                            <input type="hidden" name="g-recaptcha-response" id="recaptchaToken">

                            @error('captcha')<span class="partner-error partner-error--captcha">{{ $message }}</span>@enderror

                            <p class="partner-recaptcha-note d-none">
                                Protected by reCAPTCHA. Google's
                                <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Privacy Policy</a>
                                and <a href="https://policies.google.com/terms" target="_blank" rel="noopener">Terms of Service</a> apply.
                            </p>
                            <button type="submit" class="partner-btn sx-flap" data-sx-type="hover">Submit</button>

                        </form>

                    </div>

                </div>


            </div>

        </div>

    </section>


</div>

@endsection


@push('scripts')

    @if(config('services.recaptcha.key'))
        <!-- <script src="https://www.recaptcha.net/recaptcha/api.js?render={{ config('services.recaptcha.key') }}"></script> -->
    @endif

    @vite('resources/js/partner.js')

@endpush