@extends('frontend::layouts.master')

@php
$assetPath = 'frontend_assets';
$langCode = session('lang_code', 'en');
$customerSupport = $customerSupport ?? null;
@endphp

<script>
    window.pageName = 'contact_us';
</script>

@section('content')
    <div class="container-fluid px-2 px-lg-5">
        <div class="main-header-bar">
            <a href="javascript:history.back()" class="back-btn">
                <img src="{{ asset($assetPath . '/icons/back.png') }}" alt="{{ webTrans('back', 'contact') }}">
            </a>
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="py-3">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item item-nav"><a href="{{ route('frontend.home') }}">{{ webTrans('home', 'contact') }}</a></li>
                    <li class="breadcrumb-item item-nav active" aria-current="page">{{ webTrans('contact', 'contact') }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <section class="container py-5 contact-page">
        <div class="row justify-content-between align-items-start g-4">
            <div class="col-lg-5">
                <h2 class="section-title mb-4">{{ webTrans('get_in_touch', 'contact') }}</h2>
                <p class="text-muted mb-4 contact-intro">
                    {{ webTrans('get_in_touch_desc', 'contact') }}
                </p>

                @if ($customerSupport)
                <div class="contact-info-box">
                    @if ($customerSupport->support_number)
                    <div class="mb-4 contact-block">
                        <h5 class="fw-bold d-flex align-items-center gap-2">
                            <span class="">
                                <img class="img-contact me-2" src="{{ asset($assetPath . '/images/icons8-phone-48.png') }}" alt="{{ webTrans('phone', 'contact') }}">
                            </span>
                            <span>{{ webTrans('phone_number', 'contact') }}</span>
                        </h5>
                        <p class="mb-1">
                            <a class="contact-link" href="tel:{{ preg_replace('/\s+/', '', $customerSupport->support_number) }}">
                                {{ $customerSupport->support_number }}
                            </a>
                        </p>
                    </div>
                    @endif

                    @if ($customerSupport->email)
                    <div class="mb-4 contact-block">
                        <h5 class="fw-bold d-flex align-items-center gap-2">
                            <span class="">
                                <img src="{{ asset($assetPath . '/images/icons8-email-24.png') }}" alt="{{ webTrans('email', 'contact') }}">
                            </span>
                            <span>{{ webTrans('email_address', 'contact') }}</span>
                        </h5>
                        <p class="mb-1">
                            <a class="contact-link" href="mailto:{{ $customerSupport->email }}">{{ $customerSupport->email }}</a>
                        </p>
                    </div>
                    @endif

                    @if ($customerSupport->office_address)
                    <div class="contact-block">
                        <h5 class="fw-bold d-flex align-items-center gap-2">
                            <span class="">
                                <img src="{{ asset($assetPath . '/images/icons8-address-24.png') }}" alt="{{ webTrans('address', 'contact') }}">
                            </span>
                            <span>{{ webTrans('office_address', 'contact') }}</span>
                        </h5>
                        <p class="mb-0 contact-address">{{ $customerSupport->office_address }}</p>
                    </div>
                    @endif
                </div>
                @else
                <div class="contact-info-box">
                    <p class="text-muted mb-0">{{ webTrans('no_contact_info', 'contact') }}</p>
                </div>
                @endif
            </div>

            <div class="col-lg-6">
                <h2 class="section-title mb-4">{{ webTrans('wholesale_title', 'contact') }}</h2>
                <p class="text-muted mb-4">{{ webTrans('wholesale_desc', 'contact') }}</p>

                @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ webTrans('close', 'contact') }}"></button>
                </div>
                @endif

                @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul class="mb-0 ps-3">
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ webTrans('close', 'contact') }}"></button>
                </div>
                @endif

                <div class="contact-form-card">
                    <form action="{{ route('frontend.contact.submit') }}" method="POST" id="contactForm">
                        @csrf

                        <div class="mb-3">
                            <label for="customerName" class="form-label">{{ webTrans('customer_name', 'contact') }}</label>
                            <input type="text" class="form-control contact-input" id="customerName" name="name" value="{{ old('name') }}" placeholder="{{ webTrans('customer_name_placeholder', 'contact') }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="customerEmail" class="form-label">{{ webTrans('email_address', 'contact') }}</label>
                            <input type="email" class="form-control contact-input" id="customerEmail" name="email" value="{{ old('email') }}" placeholder="{{ webTrans('email_placeholder', 'contact') }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="customerPhone" class="form-label">{{ webTrans('contact_number', 'contact') }}</label>
                            <input type="tel" class="form-control contact-input" id="customerPhone" name="phone" value="{{ old('phone') }}" placeholder="{{ webTrans('phone_placeholder', 'contact') }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="customerSubject" class="form-label">{{ webTrans('subject', 'contact') }}</label>
                            <input type="text" class="form-control contact-input" id="customerSubject" name="subject" value="{{ old('subject') }}" placeholder="{{ webTrans('subject_placeholder', 'contact') }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="enquiryDetails" class="form-label">{{ webTrans('message', 'contact') }}</label>
                            <textarea class="form-control contact-input" id="enquiryDetails" name="message" rows="4" placeholder="{{ webTrans('message_placeholder', 'contact') }}" required>{{ old('message') }}</textarea>
                        </div>

                        <button type="submit" class="btn btn-buy-now w-100 mb-2 mb-md-0" id="contactSubmitBtn">
                            <span id="submitBtnText">{{ webTrans('submit_enquiry', 'contact') }}</span>
                            <span id="submitBtnSpinner" class="d-none">
                                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                {{ webTrans('submitting', 'contact') }}....
                            </span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

{{-- styles and script unchanged --}}
@endsection