@extends('layout.app')

@section('page-title', 'Apply – Trade Partner Program')

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <a href="{{ url('new-design/trade-partner-program/') }}" class="text">Trade Partner Program</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">Apply</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="trade-program" class="wt-pages trade-partner-apply-page">
        <section class="apply-main-section flat-spacing-wt">
            <div class="container">
                <div class="apply-page-header-row">
                    <div class="apply-intro-badge">
                        <img src="{{ url('new-design/images/pages/trade-partner-program/cocarda_B2B.svg') }}"
                             alt="Trade Partner Program" class="cocarda-badge">
                    </div>
                    <div class="apply-page-header-text">
                        <p class="apply-intro-kicker">Apply to</p>
                        <h1 class="apply-intro-title">Westminster Teak's Design Trade Program</h1>
                    </div>
                </div>
                <div class="apply-page-layout">
                    <aside class="apply-page-sidebar">
                        <p class="apply-intro-subtitle">
                            Takes about 1–2 minutes. We'll first ask for basic details about you and your business.
                        </p>
                        <div class="apply-callback-banner">
                            <div class="apply-callback-banner-icon" aria-hidden="true">
                                <img src="{{ url('new-design/images/icons/operater.svg') }}" alt="operater icon">
                            </div>
                            <div class="apply-callback-banner-title">Prefer a more personal approach?</div>
                            <p class="apply-callback-banner-text">Leave your details and we'll walk you through it.</p>
                            <button type="button"
                                    class="apply-callback-banner-btn tf-btn"
                                    data-bs-toggle="modal"
                                    data-bs-target="#trade-apply-callback">
                                Get a callback
                            </button>
                        </div>
                    </aside>

                    <div class="apply-form-main">
                        <div class="apply-form-wrapper">
                            <div class="apply-step-tabs" role="tablist">
                                <button type="button" class="apply-step-tab active" data-step="1" aria-selected="true">
                                    <span class="apply-step-tab-num">1</span>
                                    <span class="apply-step-tab-label">We'll start with your contact &amp; company basics.</span>
                                </button>
                                <button type="button" class="apply-step-tab" data-step="2" aria-selected="false">
                                    <span class="apply-step-tab-num">2</span>
                                    <span class="apply-step-tab-label">Help us understand your business (optional).</span>
                                </button>
                            </div>

                            <form id="trade-partner-register-form" method="POST"
                                  action="{{ url('new-design/trade-partner-program/ajax/register.php') }}"
                                  enctype="multipart/form-data"
                                  class="apply-form"
                            >
                                <input type="hidden" name="action_name" value="register">
                                <input type="hidden" name="success_redirect"
                                       value="{{ url('new-design/trade-partner-program/apply.php?done=1') }}"
                                >
                                <div class="form-errors"></div>

                                {{-- Step 1 --}}
                                <div class="apply-step-panel active" data-step="1">
                                    <div class="apply-step-right tf-login-form apply-form-step-inner">
                                        <div class="apply-form-grid">
                                            <div class="apply-form-col">
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-contactName" class="required">Contact name *</label>
                                                        <input type="text"
                                                               name="contactName"
                                                               id="trade-register-contactName"
                                                               class="form-control"
                                                               required
                                                        >
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-title">Title</label>
                                                        <input type="text" name="title" id="trade-register-title" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-company" class="required">Company *</label>
                                                        <input type="text" name="company" id="trade-register-company" class="form-control" required>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-email" class="required">Work email *</label>
                                                        <input type="email" name="email" id="trade-register-email" class="form-control" required>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-telephone" class="required">Phone *</label>
                                                        <input type="text" name="telephone" id="trade-register-telephone" class="form-control" required>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-telephone-alt">Alternative phone</label>
                                                        <input type="text" name="telephone_alt" id="trade-register-telephone-alt" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-website">Website</label>
                                                        <input type="text" name="resellerWebsite" id="trade-register-website" class="form-control">
                                                    </fieldset>
                                                </div>
                                            </div>
                                            <div class="apply-form-col">
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-address1" class="required">Address (line 1) *</label>
                                                        <input type="text" name="address1" id="trade-register-address1" class="form-control" required>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-address2">Address (line 2)</label>
                                                        <input type="text" name="address2" id="trade-register-address2" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-city" class="required">City *</label>
                                                        <input type="text" name="city" id="trade-register-city" class="form-control" required>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-state">State / province / region</label>
                                                        <select name="state" id="trade-register-state" class="form-control">
                                                            <option value="">Select State</option>
                                                            @if(isset($states))
                                                                @foreach($states as $stateCode => $stateName)
                                                                    <option value="{{ $stateCode }}">{{ $stateName }}</option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-zip" class="required">ZIP / postal code *</label>
                                                        <input type="text" name="zip" id="trade-register-zip" class="form-control" required>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-country" class="required">Country *</label>
                                                        <select name="country" id="trade-register-country" class="form-control" required>
                                                            <option value="">Select Country</option>
                                                            @if(isset($countries))
                                                                @foreach($countries as $countryCode => $countryName)
                                                                    <option value="{{ $countryCode }}">{{ $countryName }}</option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-bizType" class="required">Type of business *</label>
                                                        <select name="bizType" id="trade-register-bizType" class="form-control" required>
                                                            <option value="">Select business type</option>
                                                            <option value="Architect">Architect</option>
                                                            <option value="Designer">Designer</option>
                                                            <option value="Showroom">Showroom</option>
                                                            <option value="Retail Store">Retail Store</option>
                                                            <option value="Online Retailer">Online Retailer</option>
                                                            <option value="Purchasing Agent">Purchasing Agent</option>
                                                            <option value="Boat/Yacht/Marina Builder / Contractor / Developer">Boat/Yacht/Marina Builder / Contractor / Developer</option>
                                                            <option value="Event / Lifestyle Partner">Event / Lifestyle Partner</option>
                                                            <option value="Hospitality / Club">Hospitality / Club</option>
                                                            <option value="Media / PR / Influencer">Media / PR / Influencer</option>
                                                            <option value="Other">Other</option>
                                                        </select>
                                                    </fieldset>
                                                </div>
                                                <div class="apply-step-actions">
                                                    <button type="button"
                                                            class="apply-btn-continue tf-btn btn-outline animate-hover-btn radius-3 justify-content-center"
                                                            data-next="2"
                                                    >
                                                        <span class="text-uppercase">Continue</span>
                                                        <span class="apply-btn-chevron" aria-hidden="true">›</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Step 2: business + verification + submit --}}
                                <div class="apply-step-panel" data-step="2">
                                    <div class="apply-step-right tf-login-form apply-form-step-inner">
                                        <div class="apply-form-grid apply-form-grid--step2">
                                            <div class="apply-form-col">
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-bizYears">Number of years in business</label>
                                                        <input type="text" name="bizYears" id="trade-register-bizYears" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-bizShowroom">Retail space or showroom</label>
                                                        <select name="bizShowroom" id="trade-register-bizShowroom" class="form-control">
                                                            <option value="">Select</option>
                                                            <option value="yes">Yes</option>
                                                            <option value="no">No</option>
                                                        </select>
                                                    </fieldset>
                                                </div>
                                                <div class="apply-step-refs-heading">Social / profiles (optional)</div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-linkedin">LinkedIn profile</label>
                                                        <input type="text" name="linkedin" id="trade-register-linkedin" class="form-control" placeholder="URL or username">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-instagram">Instagram handle</label>
                                                        <input type="text" name="instagram" id="trade-register-instagram" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-houzz">Houzz profile / link to Houzz profile</label>
                                                        <input type="text" name="houzz" id="trade-register-houzz" class="form-control" placeholder="URL">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-accounting_email">Accounting department email</label>
                                                        <input type="email" name="accounting_email" id="trade-register-accounting_email" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-salesTaxCert">Sales tax certificate # (if applicable)</label>
                                                        <input type="text" name="salesTaxCert" id="trade-register-salesTaxCert" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-salesBusinessLic">Business license # (if applicable)</label>
                                                        <input type="text" name="salesBusinessLic" id="trade-register-salesBusinessLic" class="form-control">
                                                    </fieldset>
                                                </div>
                                            </div>
                                            <div class="apply-form-col">
                                                <div class="tf-field tf-field--textarea-tall">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-marketing">Description of your business, products you sell, and how you plan to market our products</label>
                                                        <textarea name="marketing" id="trade-register-marketing" class="form-control" rows="10"></textarea>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-hdyfu">Where did you first hear about us?</label>
                                                        <select name="hdyfu" id="trade-register-hdyfu" class="form-control">
                                                            <option value="">Select</option>
                                                            <option value="Google Search">Google Search</option>
                                                            <option value="Referral">Referral</option>
                                                            <option value="Trade Show">Trade Show</option>
                                                            <option value="Magazine">Magazine</option>
                                                            <option value="Social Media">Social Media</option>
                                                            <option value="Other">Other</option>
                                                        </select>
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field" id="trade-register-hdyfu-other-wrapper" style="display: none;">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-hdyfu_other">If &quot;Other,&quot; please specify</label>
                                                        <input type="text" name="hdyfu_other" id="trade-register-hdyfu_other" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-pinterest">Pinterest profile</label>
                                                        <input type="text" name="pinterest" id="trade-register-pinterest" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-facebook">Facebook handle</label>
                                                        <input type="text" name="facebook" id="trade-register-facebook" class="form-control">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-yelp">Link to Yelp profile</label>
                                                        <input type="text" name="yelp" id="trade-register-yelp" class="form-control" placeholder="URL">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field tf-field--file">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-sales_tax_cert_file">Upload sales tax certificate</label>
                                                        <p class="apply-file-hint">Accepted formats: PDF, JPG, PNG (max 10MB)</p>
                                                        <input type="file" name="sales_tax_cert_file" id="trade-register-sales_tax_cert_file" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                                                    </fieldset>
                                                </div>
                                                <div class="tf-field tf-field--file">
                                                    <fieldset class="fieldset msg-wrapper">
                                                        <label for="trade-register-sales_business_lic_file">Upload business license</label>
                                                        <p class="apply-file-hint">Accepted formats: PDF, JPG, PNG (max 10MB)</p>
                                                        <input type="file" name="sales_business_lic_file" id="trade-register-sales_business_lic_file" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                                                    </fieldset>
                                                </div>
                                                @if(!empty($recaptcha_site_key))
                                                    <div id="recaptcha_wrapper" class="tf-field apply-recaptcha-field">
                                                        <div class="g-recaptcha" data-sitekey="{{ $recaptcha_site_key }}"></div>
                                                        <div class="form-errors recaptcha-error" style="display: none;"></div>
                                                    </div>
                                                @endif
                                                <div class="apply-step-actions apply-step-actions-submit">
                                                    <button type="button"
                                                            class="apply-btn-back tf-btn btn-outline animate-hover-btn radius-3 justify-content-center"
                                                            data-prev="1"
                                                    >
                                                        <span class="apply-btn-chevron apply-btn-chevron--back" aria-hidden="true">‹</span>
                                                        <span class="text-uppercase">Back</span>
                                                    </button>
                                                    <button type="submit"
                                                            class="apply-btn-start tf-btn btn-outline animate-hover-btn radius-3 justify-content-center"
                                                    >
                                                        <span class="text-uppercase btn-text">Apply Now</span>
                                                        <span class="text-uppercase btn-loading" style="display: none;">Applying…</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="apply-login-link-section">
                            <a href="#trade-partner-login"
                               data-bs-toggle="modal"
                               class="btn-link">
                                Already have an account? Log in here
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('modals')
    @include('partials.modals._trade_apply_callback')
    @include('partials.modals._trade_partner_login')
    @include('partials.modals._trade_partner_forgot_password')
@endsection

@push('after-foot-js')
    @if(!empty($recaptcha_site_key))
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif
    <script type="text/javascript" src="{{ asset('new-design/js/trade-partner-apply-tabs.js') }}"></script>
    <script type="text/javascript" src="{{ asset('new-design/js/trade-partner-auth.js') }}"></script>
@endpush