@extends('layouts.main')

@section('content')

<style>
#main-footer{
    margin-top:0;
}

.form-box{
    max-width:900px;
    margin:67px auto 20px;
    background:#fff;
    padding:25px;
    border-radius:10px;
    border:2px solid #d73232;
}

.form-box h3{
    text-align:center;
    color:#d73232;
    margin-bottom:20px;
    font-size:30px;
    font-weight:600;
}

.options{
    display:flex;
    justify-content:space-around;
    gap:0;
}

.option-card{
    flex:1;
    width:290px;
    border:1px solid #d73232;
    padding:20px;
    text-align:center;
    border-radius:10px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:.3s;
}

.icon-box svg{
    width:70px;
    height:70px;
    stroke:#d73232;
    fill:none;
    stroke-width:4;
    margin-bottom:10px;
    transition:.3s;
}

.radiobtn{
    margin-top:10px;
    transform:scale(1.2);
    accent-color:#d73232;
    cursor:pointer;
}

.option-card.active{
    border:2px solid #d73232;
    box-shadow:0 6px 18px rgba(215,50,50,.3);
    transform:translateY(-2px);
}

.option-card.active svg{
    stroke:#d73232;
}

.option-card:hover{
    border:2px solid #d73232;
    box-shadow:0 4px 12px rgba(215,50,50,.2);
}

label{
    display:block;
    margin:10px 0 5px;
    font-size:19px;
}

input,
select,
textarea{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:6px;
}

textarea{
    resize:vertical;
    min-height:120px;
}

.row{
    display:flex;
    gap:10px;
}

.row .col{
    flex:1;
}

.submit{
    background:#d73232;
    color:#fff;
    border:none;
    padding:12px 25px;
    border-radius:25px;
    margin-top:20px;
    cursor:pointer;
    font-size:20px;
    font-weight:600;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

button{
    background:#d73232;
    color:#fff;
    border:none;
    padding:12px 25px;
    border-radius:25px;
    cursor:pointer;
}

.captcha-box{
    background:#d73232;
    color:#fff;
    padding:10px 15px;
    font-weight:bold;
    letter-spacing:2px;
    border-radius:5px;
}

.refresh-btn{
    background:#fff;
    border:3px solid #d73232;
    color:#d73232;
    padding:8px 10px;
    cursor:pointer;
    font-size:20px;
    font-weight:600;
}

.error{
    color:red;
    text-align:center;
}

.success{
    color:green;
    text-align:center;
}

body{
    background:#d73232;
}

#ss_top_header{
    padding:7px 0;
}

@media(max-width:768px){

.options{
    flex-direction:column;
    gap:20px;
}

.row{
    flex-direction:column;
}

.option-card{
    width:100%;
}

.submit{
    width:100%;
}
}
</style>

<div class="form-box">

<h3>{{ __('messages.supplies-request-form_requesting_supplies') }}</h3>

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

@if($errors->any())
<div class="error">
    {{ $errors->first() }}
</div>
@endif
<form action="{{ route('supplies-request.store') }}" method="POST" id="suppliesForm">

    @csrf

    <!-- Supply Options -->

    <div class="options">

        <div>

            <label class="option-card">

                <div class="icon-box">

                    <svg viewBox="0 0 64 64">
                        <rect x="10" y="8" width="36" height="48" rx="4"/>
                        <rect x="18" y="14" width="12" height="10" rx="2"/>
                        <line x1="18" y1="30" x2="42" y2="30"/>
                    </svg>

                </div>

                <span>{{ __('messages.supplies-request-form_need_paper_scripts') }}</span>

            </label>

            <input type="checkbox"
                   class="radiobtn"
                   name="supply[]"
                   value="Need Paper Scripts"
                   {{ is_array(old('supply')) && in_array('Need Paper Scripts', old('supply')) ? 'checked' : '' }}>

        </div>

        <div>

            <label class="option-card">

                <div class="icon-box">

                    <svg viewBox="0 0 64 64">
                        <rect x="8" y="16" width="48" height="32" rx="4"/>
                        <path d="M8 20 L32 36 L56 20"/>
                    </svg>

                </div>

                <span>{{ __('messages.supplies-request-form_email_shipping_labels') }}</span>

            </label>

            <input type="checkbox"
                   class="radiobtn"
                   name="supply[]"
                   value="Email Shipping Labels"
                   {{ is_array(old('supply')) && in_array('Email Shipping Labels', old('supply')) ? 'checked' : '' }}>

        </div>

    </div>

    <!-- Practice -->

    <label>{{ __('messages.supplies-request-form_practice_name') }}</label>

    <input type="text"
           name="practice"
           value="{{ old('practice') }}"
           required>

    <!-- Doctor -->

    <label>{{ __('messages.supplies-request-form_doctor_name') }}</label>

    <div class="row">

        <div class="col">

            <input type="text"
                   name="fname"
                   placeholder="{{ __('messages.supplies-request-form_first') }}"
                   value="{{ old('fname') }}"
                   required>

        </div>

        <div class="col">

            <input type="text"
                   name="lname"
                   placeholder="{{ __('messages.supplies-request-form_last') }}"
                   value="{{ old('lname') }}"
                   required>

        </div>

    </div>

    <!-- Email -->

    <label>{{ __('messages.supplies-request-form_email') }}</label>

    <input type="email"
           name="email"
           value="{{ old('email') }}"
           required>

    <!-- Phone -->

    <label>{{ __('messages.supplies-request-form_phone') }}</label>

    <div style="display:flex;align-items:center;gap:5px;">

        <span style="padding:5px;border:1px solid #b5adad;border-radius:8px;">
            +1
        </span>

        <input type="text"
               id="phone"
               maxlength="10"
               name="phone"
               value="{{ old('phone') }}"
               required>

    </div>

    <!-- Address -->

    <label>{{ __('messages.supplies-request-form_address') }}</label>

    <input type="text"
           name="address1"
           placeholder="{{ __('messages.supplies-request-form_address_line_1') }}"
           value="{{ old('address1') }}"
           style="margin-bottom:5px;"
           required>

    <input type="text"
           name="address2"
           placeholder="{{ __('messages.supplies-request-form_address_line_2') }}"
           value="{{ old('address2') }}">

    <div class="row">

        <div class="col">

            <label>{{ __('messages.supplies-request-form_city') }}</label>

            <input type="text"
                   name="city"
                   value="{{ old('city') }}">

        </div>

        <div class="col">

            <label>{{ __('messages.supplies-request-form_state') }}</label>

            <input type="text"
                   name="state"
                   value="{{ old('state') }}">

        </div>

    </div>

    <!-- ZIP -->

    <label>{{ __('messages.supplies-request-form_zip_code') }}</label>

    <input type="text"
           id="zip"
           maxlength="5"
           name="zip"
           value="{{ old('zip') }}">

    <small id="zipError"
           style="color:red;display:none;">
        {{ __('messages.supplies-request-form_zip_error') }}
    </small>

    <!-- Notes -->

    <label>{{ __('messages.supplies-request-form_notes_special_instructions') }}</label>

    <textarea
        name="notes"
        placeholder="{{ __('messages.supplies-request-form_enter_your_notes') }}">{{ old('notes') }}</textarea>

    <!-- Hidden Fields -->

        <input type="hidden" name="utm_source" value="{{ old('utm_source', $tracking['utm_source'] ?? 'website') }}">
        <input type="hidden" name="utm_medium" value="{{ old('utm_medium', $tracking['utm_medium']) }}">
        <input type="hidden" name="utm_campaign" value="{{ old('utm_campaign', $tracking['utm_campaign']) }}">
        <input type="hidden" name="matchtype" value="{{ old('matchtype', $tracking['matchtype']) }}">
        <input type="hidden" name="device" value="{{ old('device', $tracking['device']) }}">
        <input type="hidden" name="network" value="{{ old('network', $tracking['network']) }}">
        <input type="hidden" name="creative" value="{{ old('creative', $tracking['creative']) }}">
        <input type="hidden" name="keyword1" value="{{ old('keyword1', $tracking['keyword1']) }}">
        <input type="hidden" name="devicemodel" value="{{ old('devicemodel', $tracking['devicemodel']) }}">
        <input type="hidden" name="target" value="{{ old('target', $tracking['target']) }}">
        <input type="hidden" name="adgroupid1" value="{{ old('adgroupid1', $tracking['adgroupid1']) }}">
        <input type="hidden" name="campaignid1" value="{{ old('campaignid1', $tracking['campaignid1']) }}">
        <input type="hidden" name="ip_address" value="{{ old('ip_address', $tracking['ip_address']) }}">
        <input type="hidden" name="url" value="{{ old('url', $tracking['url']) }}">
    <!-- Captcha -->

    <div class="captcha-field @error('captcha') ss-field-error-state @enderror">
          <div class="captcha-field-row">
            <div class="captcha-box">
              <img id="captchaImg" src="{{ captcha_src('math') }}" alt="Captcha">
                <button type="button" class="captcha-refresh-btn"  id="reload" aria-label="Refresh captcha">
              <i class="fa-solid fa-rotate"></i>
            </button>
            </div>
            <input type="text" class="captcha-answer" name="captcha" placeholder="{{ __('messages.supplies-request-form_type_your_answer') }}" autocomplete="off">
          </div>
         </div>

    <button type="submit"
            class="submit">{{ __('messages.supplies-request-form_submit') }}
    </button>

</form>

</div>

<script>

// ============================================
// Active Card
// ============================================

let cards = document.querySelectorAll('.option-card');
let radios = document.querySelectorAll('.radiobtn');

cards.forEach(card => {

    card.addEventListener('click', function () {

        let checkbox = this.parentElement.querySelector('.radiobtn');

        checkbox.checked = !checkbox.checked;

        if (checkbox.checked) {
            this.classList.add('active');
        } else {
            this.classList.remove('active');
        }

    });

});

radios.forEach(radio => {

    radio.addEventListener('change', function () {

        let card = this.parentElement.querySelector('.option-card');

        if (this.checked) {
            card.classList.add('active');
        } else {
            card.classList.remove('active');
        }

    });

});


// ============================================
// Phone Validation
// ============================================

document.getElementById("phone").addEventListener("input", function () {

    this.value = this.value.replace(/[^0-9]/g, '');

    if (this.value.length > 10) {
        this.value = this.value.substring(0,10);
    }

});


// ============================================
// ZIP Validation
// ============================================

const US_ZIP_ARRAY = [

"10001","10002","10003","10004","10005",
"90001","90002","90003","90004","90005",
"30301","30302","30303",
"60601","60602","60603",
"73301","73344",
"85001","85002"

];

document.getElementById("zip").addEventListener("input", function(){

    this.value=this.value.replace(/[^0-9]/g,'');

});

function validateZip(){

    let zip=document.getElementById("zip").value.trim();

    let error=document.getElementById("zipError");

    if(zip==""){

        error.style.display="none";

        return true;

    }

    if(US_ZIP_ARRAY.includes(zip)){

        error.style.display="none";

        return true;

    }

    error.style.display="block";

    return false;

}

document.getElementById("zip").addEventListener("blur",validateZip);


// ============================================
// URL
// ============================================

document.getElementById("url").value = window.location.href;


// ============================================
// UTM
// ============================================

const params = new URLSearchParams(window.location.search);

document.querySelector('[name="utm_medium"]').value =
params.get('utm_medium') ?? '';

document.querySelector('[name="utm_campaign"]').value =
params.get('utm_campaign') ?? '';


// ============================================
// IP Address
// ============================================

fetch('https://api.ipify.org?format=json')

.then(response => response.json())

.then(data => {

    document.getElementById("ip").value = data.ip;

});

document.getElementById("suppliesForm").addEventListener("submit",function(e){

    if(!validateZip()){

        e.preventDefault();

        return false;

    }

});

</script>

@endsection