@extends('frontEnd.layouts.master')
@section('title','Contact Us')
@php
    $generalsetting = \App\Models\GeneralSetting::first();
@endphp
@section('content')

<style>
    .contact-wrapper {
        padding: 80px 20px;
        background-color: #f8fafc;
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contact-card {
        background: #ffffff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 50px rgba(0,0,0,0.05);
        border: 1px solid #f1f5f9;
        width: 100%;
        max-width: 900px;
        display: flex;
        flex-wrap: wrap;
    }

    .contact-info-side {
        width: 40%;
        background: #1e293b;
        color: white;
        padding: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .contact-form-side {
        width: 60%;
        padding: 50px;
        background: #fff;
    }

    .info-header h2 {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 15px;
        color: #ffffff;
    }

    .info-header p {
        opacity: 0.8;
        font-size: 15px;
        line-height: 1.6;
        color: #ffffff;
    }

    .info-list {
        margin-top: 40px;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 25px;
    }

    .info-item i {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #E31019;
        font-size: 18px;
    }

    .info-item div h5 {
        font-size: 14px;
        font-weight: 700;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.7;
        color: #ffffff;
    }

    .info-item div p {
        font-size: 15px;
        margin: 5px 0 0;
        color: #ffffff;
    }

    .form-header h3 {
        font-size: 24px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 30px;
    }

    .form-group-custom {
        margin-bottom: 20px;
    }

    .form-group-custom label {
        display: block;
        font-weight: 700;
        font-size: 13px;
        color: #334155;
        margin-bottom: 8px;
        text-transform: uppercase;
    }

    .modern-input {
        width: 100%;
        padding: 12px 15px;
        border: 1.5px solid #e2e8f0;
        border-radius: 10px;
        font-size: 14px;
        transition: all 0.3s;
        background: #fdfdfd;
    }

    .modern-input:focus {
        border-color: #E31019;
        outline: none;
        box-shadow: 0 0 0 4px rgba(227, 16, 25, 0.1);
        background: #fff;
    }

    .submit-btn {
        width: 100%;
        padding: 15px;
        background: #E31019;
        color: white;
        border: none;
        border-radius: 10px;
        font-weight: 700;
        font-size: 16px;
        cursor: pointer;
        transition: 0.3s;
        margin-top: 10px;
    }

    .submit-btn:hover {
        background: #c20d15;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(227, 16, 25, 0.2);
    }

    @media (max-width: 991px) {
        .contact-info-side, .contact-form-side { width: 100%; padding: 40px 25px; }
        .contact-info-side { order: 2; }
        .contact-form-side { order: 1; }
    }
</style>

<div class="contact-wrapper">
    <div class="contact-card">
        {{-- Left Side: Info --}}
        <div class="contact-info-side">
            <div class="info-header">
                <h2>Contact Info</h2>
                <p>আমাদের সাথে সরাসরি কথা বলতে বা আপনার সমস্যার কথা জানাতে নিচের তথ্যগুলো ব্যবহার করুন।</p>
            </div>

            <div class="info-list">
                <div class="info-item">
                    <i class="fa-solid fa-location-dot"></i>
                    <div>
                        <h5>Location</h5>
                        <p>{{ $contact->address ?? 'Bangladesh' }}</p>
                    </div>
                </div>
                <div class="info-item">
                    <i class="fa-solid fa-phone"></i>
                    <div>
                        <h5>Hotline</h5>
                        <p>{{ $contact->hotline ?? '' }}</p>
                    </div>
                </div>
                <div class="info-item">
                    <i class="fa-solid fa-envelope"></i>
                    <div>
                        <h5>Email Address</h5>
                        <p>{{ $contact->email ?? '' }}</p>
                    </div>
                </div>
            </div>
            
            <div class="social-links" style="display: flex; gap: 15px; margin-top: 30px;">
                @foreach($socialicons as $social)
                    <a href="{{ $social->link }}" target="_blank" style="color: white; font-size: 18px; opacity: 0.6; transition: 0.3s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.6">
                        <i class="{{ $social->icon }}"></i>
                    </a>
                @endforeach
            </div>
        </div>

        {{-- Right Side: Form --}}
        <div class="contact-form-side">
            <div class="form-header">
                <h3>Send Message</h3>
            </div>

            @if(session('success'))
                <div class="alert alert-success border-0 shadow-sm mb-4" style="border-radius: 10px;">
                    {{ session('success') }}
                </div>
            @endif

            <form action="{{ route('frontend.contact.store') }}" method="POST">
                @csrf
                <input type="hidden" name="status" value="0">

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Name</label>
                            <input type="text" name="full_name" class="modern-input" placeholder="আপনার নাম" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Phone</label>
                            <input type="text" name="mobile" class="modern-input" placeholder="০১xxx-xxxxxx" required>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group-custom">
                            <label>Email Address</label>
                            <input type="email" name="email" class="modern-input" placeholder="example@mail.com">
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group-custom">
                            <label>Subject</label>
                            <input type="text" name="subject" class="modern-input" placeholder="কি বিষয়ে জানতে চান?">
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group-custom">
                            <label>Message</label>
                            <textarea name="details" class="modern-input" rows="4" placeholder="আপনার মেসেজ লিখুন..." required></textarea>
                        </div>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="submit-btn">
                            মেসেজ পাঠান <i class="fa-solid fa-paper-plane ms-2" style="font-size: 14px;"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('script')
<script src="https://unpkg.com/feather-icons"></script>
<script>
    feather.replace();
</script>
@endpush
