{% extends "public/base.html" %}
{% load static %}

{% block title %}Contact — {{ site.site_name }}{% endblock %}
{% block meta_description %}{% firstof site.meta_description site.site_name %}{% endblock %}

{% block extra_head %}
<style>
.hp-wrap { position:absolute!important;left:-9999px!important;top:auto!important;
           width:1px!important;height:1px!important;overflow:hidden!important; }
</style>

<style>
/* --- Custom phone picker --- */
.phone-picker { position:relative; display:flex; gap:.5rem; align-items:stretch; }
.phone-flag-btn {
    display:flex; align-items:center; gap:.4rem;
    padding:13px 20px;
    border:1px solid #16517b; border-radius:30px;
    background:transparent; cursor:pointer; flex-shrink:0;
    font-size:.85rem; font-weight:600; color:#FCFCFC;
    transition:border-color .2s; white-space:nowrap; outline:none;
}
.phone-flag-btn:hover,
.phone-flag-btn.open { border-color:var(--accent-color); }
.phone-flag-btn .pf-flag { font-size:1.2rem; line-height:1; }
.phone-flag-btn .pf-code { color:#FCFCFC; min-width:2.5rem; }
.phone-flag-btn .pf-arrow { font-size:.6rem; color:rgba(255,255,255,.55); transition:transform .2s; }
.phone-flag-btn.open .pf-arrow { transform:rotate(180deg); }
.phone-dropdown {
    display:none; position:absolute; top:calc(100% + 4px); left:0;
    width:260px; background:#0d2137;
    border:1.5px solid rgba(255,255,255,.12); border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    z-index:9999; overflow:hidden;
}
.phone-dropdown.open { display:flex; flex-direction:column; max-height:240px; }
.pd-search { padding:.5rem .75rem; border-bottom:1px solid rgba(255,255,255,.08); background:#0d2137; flex-shrink:0; }
.pd-search input {
    width:100%; border:1.5px solid rgba(255,255,255,.15); border-radius:6px;
    padding:.35rem .6rem; font-size:.8rem; outline:none;
    color:#fff; background:rgba(255,255,255,.07);
}
.pd-search input:focus { border-color:#ff404b; }
.pd-list { overflow-y:auto; }
.phone-ci {
    display:flex; align-items:center; gap:.5rem;
    padding:.45rem .75rem; cursor:pointer; font-size:.82rem; color:rgba(255,255,255,.85);
}
.phone-ci:hover { background:rgba(255,255,255,.06); }
.phone-ci .ci-flag { font-size:1.1rem; flex-shrink:0; }
.phone-ci .ci-name { flex:1; }
.phone-ci .ci-code { color:rgba(255,255,255,.45); font-weight:600; flex-shrink:0; }
</style>
{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    <h1>Contact</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="hero-container">
            <div class="d-flex flex-column gspace-2">

                <div class="row row-cols-lg-4 row-cols-md-2 row-cols-1 grid-spacer-2">
                    <div class="col">
                        {% if site.address %}
                        <a href="{% firstof site.google_maps_url '#' %}"{% if site.google_maps_url %} target="_blank"{% endif %} style="text-decoration:none;display:block">
                        <div class="card contact-card">
                            <div class="icon-circle"><i class="fa-solid fa-location-dot"></i></div>
                            <p class="description text-center">{{ site.address }}</p>
                        </div>
                        </a>
                        {% endif %}
                    </div>
                    <div class="col">
                        {% if site.working_hours %}
                        <div class="card contact-card">
                            <div class="icon-circle"><i class="fa-solid fa-clock"></i></div>
                            <p class="description text-center">{{ site.working_hours }}</p>
                        </div>
                        {% endif %}
                    </div>
                    <div class="col">
                        {% if site.phone %}
                        <a href="tel:{{ site.phone }}" style="text-decoration:none;display:block">
                        <div class="card contact-card">
                            <div class="icon-circle"><i class="fa-solid fa-phone"></i></div>
                            <p class="description text-center">{{ site.phone }}</p>
                        </div>
                        </a>
                        {% endif %}
                    </div>
                    <div class="col">
                        <a href="{% url 'assessment' %}" style="text-decoration:none;display:block">
                        <div class="card contact-card">
                            <div class="icon-circle"><i class="fa-solid fa-file-invoice"></i></div>
                            <p class="description text-center">Get Your Free Quote Today</p>
                        </div>
                        </a>
                    </div>
                </div>

                <div class="contact-spacer"></div>

                <div class="row row-cols-lg-2 row-cols-1 grid-spacer-2">
                    <div class="col">
                        <div class="contact-details">
                            <div class="sub-heading">
                                <i class="fa-regular fa-circle-dot"></i>
                                <h6 class="font-1">Get In Touch</h6>
                            </div>
                            <h2 class="animate-box animate__animated animated" data-animate="animate__fadeInUp">
                                Let's Discuss How We Can Support Your Success
                            </h2>
                            <div class="section p-0">
                                {% if site.google_maps_embed %}
                                <iframe loading="lazy" class="maps"
                                    src="{{ site.google_maps_embed }}"
                                    title="{{ site.site_name }} office"
                                    aria-label="{{ site.site_name }} office">
                                </iframe>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        {% if success_message %}
                        <div style="text-align:center;padding:4rem 1rem;">
                            <div style="font-size:3.5rem;color:var(--accent-color,#ff404b);margin-bottom:1rem;">
                                <i class="fa-solid fa-circle-check"></i>
                            </div>
                            <h2 style="margin-bottom:.75rem;">Thank you!</h2>
                            <p style="opacity:.75;">Your message has been received. Reference: #{{ success_message }}</p>
                        </div>
                        {% else %}
                        {% if error_message %}
                        <div style="background:#4a1a1a;border:1px solid #7a2d2d;border-radius:12px;padding:20px 24px;display:flex;align-items:center;gap:14px;color:#fff;margin-bottom:16px;">
                            <i class="fa-solid fa-circle-xmark fa-xl" style="color:#f87171;flex-shrink:0;"></i>
                            <p style="margin:0;font-size:.95rem;">{{ error_message }}</p>
                        </div>
                        {% endif %}

                        <div class="card form-card">
                            <form method="post" action="{% url 'contact' %}" class="form d-flex flex-column gspace-2" id="contactForm">
                                {% csrf_token %}
                                <input type="hidden" name="ts" value="{{ form_ts }}">
                                <div class="hp-wrap" aria-hidden="true">
                                    <label for="cf-website">Website</label>
                                    <input type="text" name="website" id="cf-website"
                                           tabindex="-1" autocomplete="off">
                                </div>
                                <input type="hidden" name="g-recaptcha-response" id="cf-rc-token">
                                <div class="d-flex flex-column gspace-2">
                                    <input type="text" name="name" placeholder="Full Name"
                                           value="{{ form_data.name|default:'' }}" required />
                                </div>
                                <div class="d-flex flex-column gspace-2">
                                    <input type="email" name="email" id="cf-email" placeholder="Email Address"
                                           value="{{ form_data.email|default:'' }}" required />
                                </div>
                                <div class="d-flex flex-column gspace-2">
                                    <div class="phone-picker">
                                        <button type="button" class="phone-flag-btn" id="cf-trigger" onclick="togglePicker('cf')">
                                            <span class="pf-flag">🇬🇧</span>
                                            <span class="pf-code" id="cf-disp">+44</span>
                                            <i class="fa-solid fa-chevron-down pf-arrow"></i>
                                        </button>
                                        <input type="hidden" id="cf-code" value="+44">
                                        <div class="phone-dropdown" id="cf-dropdown">
                                            <div class="pd-search">
                                                <input type="text" placeholder="Search country…" oninput="filterPicker(this,'cf')">
                                            </div>
                                            <div class="pd-list" id="cf-list"></div>
                                        </div>
                                        <input type="hidden" name="phone_code" id="cf-code-submit" value="+44">
                                        <input type="tel" name="phone_number" id="cf-phone" placeholder="Phone number"
                                               oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                                    </div>
                                </div>
                                <div class="d-flex flex-column gspace-2">
                                    <input type="text" name="subject" id="cf-subject" placeholder="Subject (optional)"
                                           value="{{ form_data.subject|default:'' }}" />
                                </div>
                                <div class="d-flex flex-column gspace-2">
                                    <textarea rows="4" name="message" placeholder="Ask your question here" required>{{ form_data.message|default:'' }}</textarea>
                                </div>
                                <button type="submit" class="btn btn-accent">Send Message</button>
                            </form>
                        </div>
                        {% endif %}
                    </div>
                </div>

            </div>
        </div>
    </div>

    {% include "public/includes/logos_strip.html" with logos=global_clients %}

</div>
{% endblock %}

{% block recaptcha %}
{% if site.recaptcha_site_key %}
<script src="https://www.google.com/recaptcha/api.js?render={{ site.recaptcha_site_key }}"></script>
<style>.grecaptcha-badge{display:none!important}</style>
<script>
(function () {
  var form = document.getElementById('contactForm');
  if (!form) { return; }
  var sent = false;
  form.addEventListener('submit', function (ev) {
    if (sent) { return; }
    ev.preventDefault();
    var go = function () { sent = true; form.submit(); };
    var timer = setTimeout(go, 5000);
    try {
      grecaptcha.ready(function () {
        grecaptcha.execute('{{ site.recaptcha_site_key }}', { action: 'contact' })
          .then(function (token) {
            document.getElementById('cf-rc-token').value = token;
            clearTimeout(timer); go();
          })
          .catch(function () { clearTimeout(timer); go(); });
      });
    } catch (e) { clearTimeout(timer); go(); }
  });
})();
</script>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
/* ---- Country picker ---- */
var COUNTRIES=[
    {d:'+44',f:'🇬🇧',n:'United Kingdom'},{d:'+1',f:'🇺🇸',n:'United States'},
    {d:'+971',f:'🇦🇪',n:'UAE'},{d:'+90',f:'🇹🇷',n:'Turkey'},
    {d:'+98',f:'🇮🇷',n:'Iran'},{d:'+49',f:'🇩🇪',n:'Germany'},
    {d:'+33',f:'🇫🇷',n:'France'},{d:'+39',f:'🇮🇹',n:'Italy'},
    {d:'+34',f:'🇪🇸',n:'Spain'},{d:'+31',f:'🇳🇱',n:'Netherlands'},
    {d:'+46',f:'🇸🇪',n:'Sweden'},{d:'+47',f:'🇳🇴',n:'Norway'},
    {d:'+45',f:'🇩🇰',n:'Denmark'},{d:'+41',f:'🇨🇭',n:'Switzerland'},
    {d:'+43',f:'🇦🇹',n:'Austria'},{d:'+32',f:'🇧🇪',n:'Belgium'},
    {d:'+48',f:'🇵🇱',n:'Poland'},{d:'+7',f:'🇷🇺',n:'Russia'},
    {d:'+966',f:'🇸🇦',n:'Saudi Arabia'},{d:'+965',f:'🇰🇼',n:'Kuwait'},
    {d:'+974',f:'🇶🇦',n:'Qatar'},{d:'+973',f:'🇧🇭',n:'Bahrain'},
    {d:'+968',f:'🇴🇲',n:'Oman'},{d:'+961',f:'🇱🇧',n:'Lebanon'},
    {d:'+20',f:'🇪🇬',n:'Egypt'},{d:'+91',f:'🇮🇳',n:'India'},
    {d:'+92',f:'🇵🇰',n:'Pakistan'},{d:'+86',f:'🇨🇳',n:'China'},
    {d:'+81',f:'🇯🇵',n:'Japan'},{d:'+82',f:'🇰🇷',n:'South Korea'},
    {d:'+65',f:'🇸🇬',n:'Singapore'},{d:'+61',f:'🇦🇺',n:'Australia'},
    {d:'+64',f:'🇳🇿',n:'New Zealand'},{d:'+55',f:'🇧🇷',n:'Brazil'},
    {d:'+52',f:'🇲🇽',n:'Mexico'},
];
function buildPicker(prefix){
    var list=document.getElementById(prefix+'-list');
    if(!list)return;
    list.innerHTML=COUNTRIES.map(function(c){
        return '<div class="phone-ci" data-d="'+c.d+'" data-f="'+c.f+'" onclick="pickCountry(event,\''+prefix+'\')">'
            +'<span class="ci-flag">'+c.f+'</span>'
            +'<span class="ci-name">'+c.n+'</span>'
            +'<span class="ci-code">'+c.d+'</span></div>';
    }).join('');
}
function togglePicker(prefix){
    var btn=document.getElementById(prefix+'-trigger');
    var dd=document.getElementById(prefix+'-dropdown');
    var wasOpen=dd.classList.contains('open');
    document.querySelectorAll('.phone-dropdown.open').forEach(function(d){d.classList.remove('open');});
    document.querySelectorAll('.phone-flag-btn.open').forEach(function(b){b.classList.remove('open');});
    if(!wasOpen){btn.classList.add('open');dd.classList.add('open');var si=dd.querySelector('input');if(si)si.focus();}
}
function pickCountry(e,prefix){
    var item=e.currentTarget;
    var d=item.getAttribute('data-d');
    document.getElementById(prefix+'-code').value=d;
    document.getElementById(prefix+'-disp').textContent=d;
    document.getElementById(prefix+'-trigger').querySelector('.pf-flag').textContent=item.getAttribute('data-f');
    document.getElementById(prefix+'-trigger').classList.remove('open');
    document.getElementById(prefix+'-dropdown').classList.remove('open');
    // keep hidden submit field in sync
    var sub=document.getElementById(prefix+'-code-submit');
    if(sub) sub.value=d;
}
function filterPicker(input,prefix){
    var q=input.value.toLowerCase();
    document.getElementById(prefix+'-list').querySelectorAll('.phone-ci').forEach(function(item){
        item.style.display=item.textContent.toLowerCase().indexOf(q)>=0?'':'none';
    });
}
document.addEventListener('click',function(e){
    document.querySelectorAll('.phone-dropdown.open').forEach(function(dd){
        var prefix=dd.id.replace('-dropdown','');
        var btn=document.getElementById(prefix+'-trigger');
        if(btn&&!btn.contains(e.target)&&!dd.contains(e.target)){
            btn.classList.remove('open');dd.classList.remove('open');
        }
    });
});
buildPicker('cf');
</script>
{% endblock %}