@extends('layouts.frontend')

@section('title', 'Contact Us - Federation of Tax Practitioners of Tamilnadu')

@section('content')
<style>
    /* Contact Page Custom Styles */
    .contact-page-section {
        padding: 80px 0;
        background: #0d282d;
        position: relative;
    }
    
    .contact-info-card {
        background: #12353b;
        border: 1px solid rgba(212, 170, 44, 0.25);
        border-radius: 20px;
        padding: 40px 32px;
        height: 100%;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
        position: relative;
        overflow: hidden;
    }
    .contact-info-card::before {
        content: '';
        position: absolute;
        top: -60px;
        right: -60px;
        width: 180px;
        height: 180px;
        background: radial-gradient(circle, rgba(212, 170, 44, 0.15) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }
    
    .contact-info-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(212, 170, 44, 0.15);
        border: 1px solid rgba(212, 170, 44, 0.4);
        color: #d4aa2c;
        padding: 6px 16px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    
    .contact-info-title {
        color: #ffffff;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 16px;
    }
    .contact-info-desc {
        color: #bcd4d9;
        font-size: 14.5px;
        line-height: 1.7;
        margin-bottom: 30px;
    }
    
    .contact-item-box {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        margin-bottom: 16px;
        transition: all 0.3s ease;
    }
    .contact-item-box:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(212, 170, 44, 0.4);
        transform: translateY(-2px);
    }
    
    .contact-item-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(212, 170, 44, 0.15);
        color: #d4aa2c;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }
    .contact-item-text h6 {
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 4px;
    }
    .contact-item-text p, 
    .contact-item-text a {
        color: #bcd4d9;
        font-size: 13.5px;
        margin-bottom: 0;
        text-decoration: none;
        transition: color 0.2s;
    }
    .contact-item-text a:hover {
        color: #eec74b;
    }
    
    /* Right Side Form Card */
    .contact-form-container {
        background: #12353b;
        border: 1px solid rgba(212, 170, 44, 0.25);
        border-radius: 20px;
        padding: 30px 28px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    }
    
    .contact-form-container .form-group {
        margin-bottom: 12px;
    }
    
    .contact-form-container label {
        color: #ffffff;
        font-size: 13.5px;
        font-weight: 600;
        margin-bottom: 5px;
        display: block;
    }
    .contact-form-container label span.req {
        color: #ef4444;
    }
    
    .custom-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }
    .custom-input-wrap i.field-icon {
        position: absolute;
        left: 14px;
        color: #d4aa2c;
        font-size: 14px;
        pointer-events: none;
        z-index: 2;
    }
    .custom-input-wrap input,
    .custom-input-wrap select,
    .custom-textarea-wrap textarea {
        width: 100%;
        background: rgba(8, 25, 29, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        color: #ffffff;
        font-size: 14px;
        padding: 10px 14px 10px 38px;
        transition: all 0.3s ease;
        outline: none;
    }
    .custom-textarea-wrap textarea {
        padding: 10px 14px;
        resize: vertical;
        min-height: 80px;
    }
    
    .custom-input-wrap input:focus,
    .custom-input-wrap select:focus,
    .custom-textarea-wrap textarea:focus {
        border-color: #d4aa2c;
        background: rgba(8, 25, 29, 0.95);
        box-shadow: 0 0 0 3px rgba(212, 170, 44, 0.2);
    }
    
    .custom-input-wrap select {
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }
    .custom-input-wrap select option {
        background: #12353b;
        color: #ffffff;
    }
    .custom-input-wrap i.select-chevron {
        position: absolute;
        right: 14px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 12px;
        pointer-events: none;
    }
    
    .btn-contact-submit {
        background: #d4aa2c;
        color: #0d282d;
        font-weight: 700;
        font-size: 14.5px;
        padding: 10px 24px;
        border-radius: 10px;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 42px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 6px 20px rgba(212, 170, 44, 0.35);
    }
    .btn-contact-submit:hover {
        background: #eed165;
        color: #061719;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(212, 170, 44, 0.5);
    }
</style>

<!-- Page Header Start -->
<section class="page-header">
    <div class="container">
        <div class="page-header-inner">
            <span class="page-label">
                <i class="fa-solid fa-headset"></i> Get In Touch
            </span>
            <h1>Contact Us</h1>
            <ul class="breadcrumb">
                <li><a href="{{ route('home') }}">Home</a></li>
                <li><span>/</span></li>
                <li>Contact</li>
            </ul>
        </div>
    </div>
</section>
<!-- Page Header End -->

<!-- Contact Page Main Section -->
<section class="contact-page-section">
    <div class="container">
        <div class="row g-4 align-items-stretch">
            
            <!-- Left Column: Official Contact Info -->
            <div class="col-lg-5 col-md-12 d-flex">
                <div class="contact-info-card w-100 d-flex flex-column justify-content-between">
                    <div>
                        <span class="contact-info-badge">
                            <i class="fa-solid fa-shield-halved"></i> Registered State Federation
                        </span>
                        <h2 class="contact-info-title" style="font-size: 25px; margin-bottom: 12px;">Let's Connect With Our Practitioners</h2>
                        <p class="contact-info-desc" style="font-size: 13.5px; line-height: 1.6; margin-bottom: 20px;">
                            Federation of Tax Practitioners of Tamilnadu (Regd. No. 138/1988) represents certified tax practitioners, advocates, and accountants statewide. Reach out for any inquiries, guidance, or membership details.
                        </p>

                        <!-- Office Address -->
                        <div class="contact-item-box" style="padding: 12px 16px; margin-bottom: 12px;">
                            <div class="contact-item-icon" style="width: 38px; height: 38px; font-size: 16px;">
                                <i class="fa-solid fa-location-dot"></i>
                            </div>
                            <div class="contact-item-text">
                                <h6 style="font-size: 14px; margin-bottom: 2px;">Registered Office</h6>
                                <p style="font-size: 12.5px; line-height: 1.4;">No.19, Sodanayyakar Street,<br>Bishop Road, Puthur 4 Road,<br>Rearside of Udayam Complex,<br>Trichy, Tamil Nadu - 620017.</p>
                            </div>
                        </div>

                        <!-- Email Address -->
                        <div class="contact-item-box" style="padding: 12px 16px; margin-bottom: 12px;">
                            <div class="contact-item-icon" style="width: 38px; height: 38px; font-size: 16px;">
                                <i class="fa-solid fa-envelope"></i>
                            </div>
                            <div class="contact-item-text">
                                <h6 style="font-size: 14px; margin-bottom: 2px;">Official Email</h6>
                                <a href="mailto:ftptmailnadu@gmail.com" style="font-size: 13px;">ftptmailnadu@gmail.com</a>
                            </div>
                        </div>

                        <!-- Working Hours / Support -->
                        <div class="contact-item-box" style="padding: 12px 16px; margin-bottom: 12px;">
                            <div class="contact-item-icon" style="width: 38px; height: 38px; font-size: 16px;">
                                <i class="fa-solid fa-clock"></i>
                            </div>
                            <div class="contact-item-text">
                                <h6 style="font-size: 14px; margin-bottom: 2px;">Office Hours</h6>
                                <p style="font-size: 12.5px;">Monday – Saturday: 9:30 AM – 6:30 PM (IST)</p>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Trust Highlights -->
                    <div class="row g-2 mt-2 pt-2 border-top border-secondary border-opacity-25 text-center">
                        <div class="col-6">
                            <div class="p-2 rounded bg-black bg-opacity-25">
                                <h4 class="text-warning fw-bold mb-0" style="font-size: 20px;">35+</h4>
                                <small class="text-white-50" style="font-size: 11px;">Years of Service</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 rounded bg-black bg-opacity-25">
                                <h4 class="text-warning fw-bold mb-0" style="font-size: 20px;">100%</h4>
                                <small class="text-white-50" style="font-size: 11px;">State Representation</small>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Right Column: Contact Form (Compact & Perfectly Balanced) -->
            <div class="col-lg-7 col-md-12 d-flex">
                <div class="contact-form-container w-100 d-flex flex-column justify-content-between">
                    
                    <div>
                        <div class="mb-3">
                            <span class="badge bg-warning text-dark fw-bold px-3 py-1 rounded-pill mb-2" style="font-size: 12px;">
                                <i class="fa-solid fa-paper-plane me-1"></i> Send Us A Message
                            </span>
                            <h3 class="text-white fw-bold mb-1" style="font-size: 23px;">Get In Touch With Us</h3>
                            <p class="text-white-50 mb-0" style="font-size: 13.5px; line-height: 1.6;">
                                Have questions regarding practitioner membership, tax advisory services, or state federation initiatives? Fill out the form below and our federation team will reach out to you promptly with complete guidance and support.
                            </p>
                        </div>

                        {{-- Success Message Alert --}}
                        @if(session('success'))
                            <div class="alert alert-success d-flex align-items-center mb-3 py-2 px-3 rounded-3 border-0 bg-success bg-opacity-25 text-white" role="alert" style="border: 1px solid #10b981 !important;">
                                <i class="fa-solid fa-circle-check fs-5 me-2 text-success"></i>
                                <div>
                                    <strong class="d-block text-white" style="font-size: 13.5px;">Thank You!</strong>
                                    <span class="text-white-50" style="font-size: 12.5px;">{{ session('success') }}</span>
                                </div>
                            </div>
                        @endif

                        {{-- Validation Errors Alert --}}
                        @if($errors->any())
                            <div class="alert alert-danger mb-3 py-2 px-3 rounded-3 border-0 bg-danger bg-opacity-25 text-white" role="alert" style="border: 1px solid #ef4444 !important; font-size: 13px;">
                                <ul class="mb-0 ps-3">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('contact.submit') }}" method="POST">
                            @csrf
                            
                            <div class="row g-2">
                                
                                <!-- 1. Full Name (Text only) -->
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="name">Full Name <span class="req">*</span></label>
                                        <div class="custom-input-wrap">
                                            <i class="fa-regular fa-user field-icon"></i>
                                            <input type="text" id="name" name="name" 
                                                   placeholder="Enter full name" 
                                                   value="{{ old('name') }}" 
                                                   pattern="[a-zA-Z\s.]+" 
                                                   title="Please enter letters and spaces only" 
                                                   oninput="this.value = this.value.replace(/[^a-zA-Z\s.]/g, '')"
                                                   required>
                                        </div>
                                    </div>
                                </div>

                                <!-- 2. Email Address -->
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="email">Email Address <span class="req">*</span></label>
                                        <div class="custom-input-wrap">
                                            <i class="fa-regular fa-envelope field-icon"></i>
                                            <input type="email" id="email" name="email" placeholder="name@example.com" value="{{ old('email') }}" required>
                                        </div>
                                    </div>
                                </div>

                                <!-- 3. Phone Number (10 digits only, starts with 6, 7, 8, 9) -->
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="phone">Mobile Number <span class="text-white-50 small" style="font-size: 11px;">(10 digits, starts with 6-9)</span></label>
                                        <div class="custom-input-wrap">
                                            <i class="fa-solid fa-phone field-icon"></i>
                                            <input type="tel" id="phone" name="phone" 
                                                   placeholder="10-digit mobile" 
                                                   value="{{ old('phone') }}"
                                                   maxlength="10"
                                                   pattern="[6-9][0-9]{9}"
                                                   inputmode="numeric"
                                                   title="Please enter a 10-digit mobile number starting with 6, 7, 8, or 9"
                                                   oninput="validatePhoneInput(this)">
                                        </div>
                                        <small id="phoneError" class="text-warning d-none" style="font-size: 11.5px; margin-top: 2px; display: block;"></small>
                                    </div>
                                </div>

                                <!-- 4. Service Interest -->
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="service_interest">Service Interest</label>
                                        <div class="custom-input-wrap">
                                            <i class="fa-solid fa-layer-group field-icon"></i>
                                            <select id="service_interest" name="service_interest">
                                                <option value="" {{ old('service_interest') == '' ? 'selected' : '' }}>-- Select a Service --</option>
                                                <option value="Book Keeping" {{ old('service_interest') == 'Book Keeping' ? 'selected' : '' }}>Book Keeping</option>
                                                <option value="GST and Income Tax Return Filling" {{ old('service_interest') == 'GST and Income Tax Return Filling' ? 'selected' : '' }}>GST and Income Tax Return Filling</option>
                                                <option value="Bank Loans - Prepare Documents" {{ old('service_interest') == 'Bank Loans - Prepare Documents' ? 'selected' : '' }}>Bank Loans - Prepare Documents</option>
                                                <option value="Authorised Representative Upto Tribunal" {{ old('service_interest') == 'Authorised Representative Upto Tribunal' ? 'selected' : '' }}>Authorised Representative Upto Tribunal</option>
                                                <option value="GST and Income Tax Notice Reply" {{ old('service_interest') == 'GST and Income Tax Notice Reply' ? 'selected' : '' }}>GST and Income Tax Notice Reply</option>
                                                <option value="Membership Inquiry" {{ old('service_interest') == 'Membership Inquiry' ? 'selected' : '' }}>Membership Inquiry</option>
                                                <option value="Other / General Query" {{ old('service_interest') == 'Other / General Query' ? 'selected' : '' }}>Other / General Query</option>
                                            </select>
                                            <i class="fa-solid fa-chevron-down select-chevron"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- 5. Your Message -->
                                <div class="col-12">
                                    <div class="form-group mb-2">
                                        <label for="message">Your Message <span class="req">*</span></label>
                                        <div class="custom-textarea-wrap">
                                            <textarea id="message" name="message" rows="3" placeholder="Write your message or inquiry here..." required>{{ old('message') }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                @php
                                    $cNum1 = session('contact_math_num1', $num1 ?? rand(1, 9));
                                    $cNum2 = session('contact_math_num2', $num2 ?? rand(1, 9));
                                    if (!session()->has('contact_math_answer')) {
                                        session([
                                            'contact_math_num1' => $cNum1,
                                            'contact_math_num2' => $cNum2,
                                            'contact_math_answer' => $cNum1 + $cNum2,
                                        ]);
                                    }
                                @endphp

                                <!-- 6. Inline Anti-Spam Security Math & Submit Button Row -->
                                <div class="col-12 mt-1">
                                    <div class="row g-2 align-items-end">
                                        
                                        <!-- Security Math Calculation (Left) -->
                                        <div class="col-md-7 col-12">
                                            <div class="form-group mb-0">
                                                <label for="math_captcha" class="d-flex align-items-center gap-1 mb-1">
                                                    <i class="fa-solid fa-shield-halved text-warning"></i> 
                                                    <span style="font-size: 12.5px;">Security Check <span class="req">*</span></span>
                                                </label>
                                                <div class="d-flex align-items-center gap-2">
                                                    <div class="d-flex align-items-center justify-content-center px-2 py-1 rounded-2 text-nowrap flex-shrink-0" style="background: rgba(8, 25, 29, 0.85); border: 1px solid rgba(212, 170, 44, 0.35); height: 42px;">
                                                        <span class="text-white fw-bold" style="font-size: 13.5px;">
                                                            <span class="text-warning fw-bold">{{ $cNum1 }}</span> + <span class="text-warning fw-bold">{{ $cNum2 }}</span> = ?
                                                        </span>
                                                    </div>
                                                    <div class="custom-input-wrap flex-grow-1">
                                                        <i class="fa-solid fa-calculator field-icon" style="left: 12px; font-size: 13px;"></i>
                                                        <input type="text" id="math_captcha" name="math_captcha" 
                                                               placeholder="Sum" 
                                                               required 
                                                               inputmode="numeric"
                                                               pattern="[0-9]*"
                                                               autocomplete="off"
                                                               oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                                               class="@error('math_captcha') border-danger @enderror"
                                                               style="height: 42px; padding: 8px 12px 8px 34px; font-size: 13.5px;">
                                                    </div>
                                                </div>
                                                @error('math_captcha')
                                                    <small class="text-warning mt-1 d-block" style="font-size: 11.5px;"><i class="fa-solid fa-circle-exclamation me-1"></i>{{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>

                                        <!-- Submit Button (Right) -->
                                        <div class="col-md-5 col-12">
                                            <div class="form-group mb-0">
                                                <button type="submit" class="btn-contact-submit">
                                                    <span>Send Message</span>
                                                    <i class="fa-solid fa-paper-plane ms-1"></i>
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>

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

                </div>
            </div>

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

@push('scripts')
<script>
function validatePhoneInput(el) {
    const errorEl = document.getElementById('phoneError');
    // Remove any non-digits
    let val = el.value.replace(/\D/g, '');

    // Check first digit: must be 6, 7, 8, or 9
    if (val.length > 0 && !/^[6-9]/.test(val)) {
        val = '';
        if (errorEl) {
            errorEl.textContent = 'Mobile number must start with 9, 8, 7, or 6';
            errorEl.classList.remove('d-none');
            setTimeout(() => { if (errorEl) errorEl.classList.add('d-none'); }, 3000);
        }
    } else if (errorEl) {
        errorEl.classList.add('d-none');
    }

    // Truncate to maximum 10 digits
    if (val.length > 10) {
        val = val.substring(0, 10);
    }

    el.value = val;
}

document.addEventListener('DOMContentLoaded', function() {
    const nameInput = document.getElementById('name');
    const phoneInput = document.getElementById('phone');

    if (nameInput) {
        nameInput.addEventListener('keypress', function(e) {
            const char = String.fromCharCode(e.which || e.keyCode);
            // Allow letters, spaces, dots and control keys
            if (!/^[a-zA-Z\s.]$/.test(char) && e.which !== 0 && e.keyCode !== 8 && e.keyCode !== 9 && e.keyCode !== 13) {
                e.preventDefault();
            }
        });
    }

    if (phoneInput) {
        phoneInput.addEventListener('keypress', function(e) {
            const char = String.fromCharCode(e.which || e.keyCode);
            // Allow control keys
            if (e.which === 0 || e.keyCode === 8 || e.keyCode === 9 || e.keyCode === 13) return;

            // Block non-digits
            if (!/^[0-9]$/.test(char)) {
                e.preventDefault();
                return;
            }

            // Block starting digit if not 6, 7, 8, or 9
            if (this.value.length === 0 && !/^[6-9]$/.test(char)) {
                e.preventDefault();
                const errorEl = document.getElementById('phoneError');
                if (errorEl) {
                    errorEl.textContent = 'Mobile number must start with 9, 8, 7, or 6';
                    errorEl.classList.remove('d-none');
                    setTimeout(() => { if (errorEl) errorEl.classList.add('d-none'); }, 3000);
                }
                return;
            }

            // Block input exceeding 10 digits
            if (this.value.length >= 10) {
                e.preventDefault();
            }
        });

        phoneInput.addEventListener('paste', function(e) {
            e.preventDefault();
            const pasteData = (e.clipboardData || window.clipboardData).getData('text');
            let clean = pasteData.replace(/\D/g, '');
            if (clean.length > 0 && /^[6-9]/.test(clean)) {
                this.value = clean.slice(0, 10);
            }
        });
    }
});
</script>
@endpush
@endsection