@extends('channels.layouts.master')

@push('style')
<style>
    :root {
        --primary-color: #2c3e50;
        --secondary-color: #34495e;
        --accent-color: #3498db;
        --text-dark: #2c3e50;
        --text-light: #7f8c8d;
        --border-color: #dfe6e9;
        --bg-light: #f8f9fa;
    }

    /* Page Header */
    .page-header {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        padding: 100px 0 70px;
        position: relative;
        overflow: hidden;
    }

    .page-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
        background-size: cover;
        opacity: 0.5;
    }

    .page-header-content {
        position: relative;
        z-index: 1;
    }

    .breadcrumb-custom {
        background: rgba(255,255,255,0.1);
        padding: 12px 24px;
        border-radius: 30px;
        display: inline-flex;
        align-items: center;
        margin-bottom: 25px;
    }

    .breadcrumb-custom a {
        color: #ecf0f1;
        text-decoration: none;
        font-size: 20px;
        font-weight: 500;
    }

    .breadcrumb-custom a:hover {
        color: #fff;
    }

    .breadcrumb-custom span {
        color: rgba(255,255,255,0.6);
        margin: 0 12px;
        font-size: 20px;
    }

    .page-title {
        color: #fff;
        font-size: 4rem;
        font-weight: 700;
        margin-bottom: 20px;
        letter-spacing: -0.5px;
    }

    .page-subtitle {
        color: #ecf0f1;
        font-size: 1.7rem;
        font-weight: 300;
    }

    /* Main Content */
    .contact-main {
        margin-top: -40px;
        padding-bottom: 80px;
    }

    /* Contact Info Cards */
    .info-cards-section {
        margin-bottom: 40px;
    }

    .info-card {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 35px 30px;
        height: 100%;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
        height: 300px !important;

    }

    .info-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--accent-color);
        transform: scaleY(0);
        transition: transform 0.3s;
    }

    .info-card:hover {
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transform: translateY(-5px);
    }

    .info-card:hover::before {
        transform: scaleY(1);
    }

    .info-card-icon {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #3498db, #2980b9);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
        color: #fff;
        font-size: 32px;
    }

    .info-card-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 18px;
    }

    .info-card-content {
        font-size: 1.35rem;
        line-height: 2;
        color: var(--text-dark);
    }

    .info-card-content strong {
        color: var(--primary-color);
        font-weight: 600;
    }

    /* Office Details Section */
    .office-details {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 45px;
        margin-bottom: 30px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .section-title {
        font-size: 2.7rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 35px;
        padding-bottom: 18px;
        border-bottom: 3px solid var(--accent-color);
        position: relative;
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 90px;
        height: 3px;
        background: var(--accent-color);
    }

    .office-box {
        background: var(--bg-light);
        border-left: 4px solid var(--accent-color);
        padding: 35px;
        margin-bottom: 28px;
        border-radius: 4px;
    }

    .office-title {
        font-size: 2.1rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 25px;
        display: flex;
        align-items: center;
    }

    .office-title i {
        margin-right: 15px;
        color: var(--accent-color);
        font-size: 2.2rem;
    }

    .office-subtitle {
        font-size: 1.7rem;
        font-weight: 600;
        color: var(--secondary-color);
        margin: 25px 0 15px;
    }

    .office-text {
        font-size: 1.4rem;
        line-height: 2.2;
        color: var(--text-dark);
        margin-bottom: 0;
    }

    .office-text strong {
        font-weight: 600;
    }

    /* Contact Form */
    .contact-form-wrapper {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 45px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .form-label {
        font-size: 1.35rem;
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 10px;
        display: block;
    }

    .form-control {
        border: 2px solid var(--border-color);
        border-radius: 4px;
        padding: 16px 20px;
        font-size: 1.3rem;
        transition: all 0.3s;
        width: 100%;
    }

    .form-control:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.15);
        outline: none;
    }

    textarea.form-control {
        min-height: 180px;
        resize: vertical;
    }

    .form-group {
        margin-bottom: 25px;
    }

    .btn-submit {
        background: linear-gradient(135deg, #3498db, #2980b9);
        border: none;
        padding: 18px 40px;
        font-size: 1.45rem;
        font-weight: 600;
        color: #fff;
        border-radius: 4px;
        transition: all 0.3s;
        width: 100%;
    }

    .btn-submit:hover {
        background: linear-gradient(135deg, #2980b9, #21618c);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
        color: #fff;
    }

    .btn-submit i {
        margin-right: 10px;
        font-size: 1.4rem;
    }

    /* Map Section */
    .map-wrapper {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        margin-top: 30px;
    }

    .map-header {
        background: var(--bg-light);
        padding: 25px 35px;
        border-bottom: 1px solid var(--border-color);
    }

    .map-title {
        font-size: 2.1rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0;
    }

    .map-title i {
        margin-right: 12px;
        color: var(--accent-color);
        font-size: 2rem;
    }

    .map-container {
        height: 500px;
    }

    .map-container iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    /* Alert Messages */
    .alert {
        border-radius: 4px;
        padding: 20px 25px;
        margin-bottom: 25px;
        font-size: 1.3rem;
        border-left: 4px solid;
    }

    .alert i {
        margin-right: 10px;
        font-size: 1.4rem;
    }

    .alert-success {
        background: #d4edda;
        border-color: #28a745;
        color: #155724;
    }

    .alert-danger {
        background: #f8d7da;
        border-color: #dc3545;
        color: #721c24;
    }

    .text-danger {
        color: #dc3545;
        font-size: 1.1rem;
        margin-top: 5px;
        display: block;
    }

    /* Quick Contact Links */
    .quick-contact {
        background: var(--bg-light);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 35px;
        margin-bottom: 30px;
    }

    .quick-contact-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 25px;
    }

    .contact-link {
        display: flex;
        align-items: center;
        padding: 16px 0;
        color: var(--text-dark);
        text-decoration: none;
        border-bottom: 1px solid var(--border-color);
        transition: all 0.3s;
        font-size: 1.3rem;
    }

    .contact-link:last-child {
        border-bottom: none;
    }

    .contact-link:hover {
        color: var(--accent-color);
        padding-left: 10px;
        text-decoration: none;
    }

    .contact-link i {
        width: 35px;
        color: var(--accent-color);
        font-size: 22px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .page-title {
            font-size: 2.5rem;
        }

        .page-subtitle {
            font-size: 1.3rem;
        }

        .breadcrumb-custom a,
        .breadcrumb-custom span {
            font-size: 16px;
        }

        .info-card-title {
            font-size: 1.5rem;
        }

        .info-card-content {
            font-size: 1.2rem;
        }

        .office-details,
        .contact-form-wrapper {
            padding: 30px 25px;
        }

        .section-title {
            font-size: 2rem;
        }

        .office-title {
            font-size: 1.7rem;
        }

        .office-subtitle {
            font-size: 1.4rem;
        }

        .office-text {
            font-size: 1.2rem;
        }

        .form-label {
            font-size: 1.2rem;
        }

        .form-control {
            font-size: 1.15rem;
            padding: 14px 18px;
        }

        .btn-submit {
            font-size: 1.25rem;
        }

        .map-title {
            font-size: 1.6rem;
        }

        .map-container {
            height: 350px;
        }

        .info-card {
            margin-bottom: 20px;
            padding: 25px 20px;
        }
    }

    /* Loading State */
    .btn-submit.loading {
        pointer-events: none;
        opacity: 0.7;
        position: relative;
    }

    .btn-submit.loading::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        top: 50%;
        right: 25px;
        margin-top: -9px;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header">
    <div class="container">
        <div class="page-header-content text-center">
            <div class="breadcrumb-custom">
                <a href="{{ url('/') }}"><i class="fa fa-home"></i> Home</a>
                <span>/</span>
                <span>Contact Us</span>
            </div>
            <h1 class="page-title">Contact Us</h1>
            <p class="page-subtitle">Get in touch with us | আমাদের সাথে যোগাযোগ করুন</p>
        </div>
    </div>
</div>

<!-- Main Content -->
<div class="contact-main">
    <div class="container">
        <!-- Info Cards -->
        <div class="info-cards-section">
            <div class="row">
                <div class="col-md-4">
                    <div class="info-card">
                        <div class="info-card-icon">
                            <i class="fa fa-map-marker"></i>
                        </div>
                        <h3 class="info-card-title">Our Address</h3>
                        <div class="info-card-content">
                            @if(setting()->title)
                            <strong>{{ setting()->title }}</strong><br>
                            @endif
                            @if(setting()->address)
                            {!! nl2br(e(setting()->address)) !!}
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-card">
                        <div class="info-card-icon">
                            <i class="fa fa-phone"></i>
                        </div>
                        <h3 class="info-card-title">Call Us</h3>
                        <div class="info-card-content">
                            @if(setting()->phone)
                            <strong>Phone:</strong> {{ setting()->phone }}<br>
                            @endif
                            @if(setting()->email)
                            <strong>Email:</strong> {{ setting()->email }}
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-card">
                        <div class="info-card-icon">
                            <i class="fa fa-envelope"></i>
                        </div>
                        <h3 class="info-card-title">Email Us</h3>
                        <div class="info-card-content">
                            @if(setting()->email)
                            <strong>General:</strong> {{ setting()->email }}<br>
                            @endif
                            @if(setting()->ceo)
                            <strong>CEO:</strong> {{ setting()->ceo }}<br>
                            @endif
                            @if(setting()->sompadok)
                            <strong>Editor:</strong> {{ setting()->sompadok }}
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Office Details & Contact Form -->
        <div class="row">
            <!-- Office Details -->
            <div class="col-lg-6">
                <div class="office-details">
                    <h2 class="section-title">যোগাযোগ / Contact Information</h2>

                    <!-- Bangla Office Info -->
                    <div class="office-box">
                        <h4 class="office-title">
                            <i class="fa fa-building"></i>
                            প্রধান কার্যালয়
                        </h4>
                        <p class="office-text">
                            @if(setting()->title)
                            <strong>{{ setting()->title }}</strong><br>
                            @endif
                            @if(setting()->tagline)
                            {{ setting()->tagline }}<br>
                            @endif
                            @if(setting()->address)
                            ঠিকানা: {!! nl2br(e(setting()->address)) !!}<br>
                            @endif
                            @if(setting()->phone)
                            ফোন নম্বর: {{ setting()->phone }}<br>
                            @endif
                            @if(setting()->email)
                            ই-মেইল: {{ setting()->email }}
                            @endif
                        </p>

                        @if(setting()->ceo || setting()->director || setting()->sompadok)
                        <h5 class="office-subtitle">কর্মকর্তাবৃন্দ</h5>
                        <p class="office-text">
                            @if(setting()->ceo)
                            <strong>CEO:</strong> {{ setting()->ceo }}<br>
                            @endif
                            @if(setting()->director)
                            <strong>Director:</strong> {{ setting()->director }}<br>
                            @endif
                            @if(setting()->sompadok)
                            <strong>সম্পাদক:</strong> {{ setting()->sompadok }}
                            @endif
                        </p>
                        @endif
                    </div>

                    <!-- English Office Info -->
                    <div class="office-box">
                        <h4 class="office-title">
                            <i class="fa fa-building-o"></i>
                            Head Office
                        </h4>
                        <p class="office-text">
                            @if(setting()->title)
                            <strong>{{ setting()->title }}</strong><br>
                            @endif
                            @if(setting()->tagline)
                            {{ setting()->tagline }}<br>
                            @endif
                            @if(setting()->address)
                            Address: {!! nl2br(e(setting()->address)) !!}<br>
                            @endif
                            @if(setting()->phone)
                            Telephone No: {{ setting()->phone }}<br>
                            @endif
                            @if(setting()->email)
                            E-mail: {{ setting()->email }}
                            @endif
                        </p>

                        @if(setting()->ceo || setting()->director || setting()->sompadok)
                        <h5 class="office-subtitle">Management</h5>
                        <p class="office-text">
                            @if(setting()->ceo)
                            <strong>CEO:</strong> {{ setting()->ceo }}<br>
                            @endif
                            @if(setting()->director)
                            <strong>Director:</strong> {{ setting()->director }}<br>
                            @endif
                            @if(setting()->sompadok)
                            <strong>Editor:</strong> {{ setting()->sompadok }}
                            @endif
                        </p>
                        @endif
                    </div>
                </div>

                <!-- Quick Contact -->

            </div>

            <!-- Contact Form -->
            <div class="col-lg-6">
                <div class="contact-form-wrapper">
                    <h2 class="section-title">Send Message / বার্তা পাঠান</h2>

                    @if(session('success'))
                    <div class="alert alert-success">
                        <i class="fa fa-check-circle"></i> {{ session('success') }}
                    </div>
                    @endif

                    @if($errors->any())
                    <div class="alert alert-danger">
                        <i class="fa fa-exclamation-triangle"></i> Please fix the errors below
                    </div>
                    @endif

                    <form action="{{ route('contact.store') }}" method="POST" id="contactForm">
                        @csrf

                        <div class="form-group">
                            <label class="form-label">নাম / Full Name *</label>
                            <input
                                type="text"
                                class="form-control @error('name') is-invalid @enderror"
                                name="name"
                                value="{{ old('name') }}"
                                placeholder="Enter your full name"
                                required>
                            @error('name')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label class="form-label">ইমেইল / Email Address *</label>
                            <input
                                type="email"
                                class="form-control @error('email') is-invalid @enderror"
                                name="email"
                                value="{{ old('email') }}"
                                placeholder="your.email@example.com"
                                required>
                            @error('email')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">ফোন / Phone *</label>
                                    <input
                                        type="tel"
                                        class="form-control @error('phone') is-invalid @enderror"
                                        name="phone"
                                        value="{{ old('phone') }}"
                                        placeholder="+880 1XXX-XXXXXX"
                                        required>
                                    @error('phone')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">ঠিকানা / Address *</label>
                                    <input
                                        type="text"
                                        class="form-control @error('address') is-invalid @enderror"
                                        name="address"
                                        value="{{ old('address') }}"
                                        placeholder="Your address"
                                        required>
                                    @error('address')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">বার্তা / Message *</label>
                            <textarea
                                class="form-control @error('message') is-invalid @enderror"
                                name="message"
                                placeholder="Write your message here..."
                                required>{{ old('message') }}</textarea>
                            @error('message')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-submit">
                            <i class="fa fa-paper-plane"></i>
                            Send Message / বার্তা পাঠান
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Map Section -->
        <div class="map-wrapper">
            <div class="map-header">
                <h3 class="map-title">
                    <i class="fa fa-map-marker"></i>
                    Our Location / আমাদের অবস্থান
                </h3>
            </div>
            <div class="map-container">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3651.9068842429817!2d90.39084831543302!3d23.750221494645425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b8bda1c88e7b%3A0x9c1e97a9ed64c57a!2sSegunbagicha%2C%20Dhaka!5e0!3m2!1sen!2sbd!4v1234567890123!5m2!1sen!2sbd"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>
    </div>
</div>

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('contactForm');
        const submitBtn = form.querySelector('.btn-submit');

        form.addEventListener('submit', function(e) {
            submitBtn.classList.add('loading');
            submitBtn.disabled = true;
        });

        // Remove loading state if form has errors
        @if($errors->any())
            submitBtn.classList.remove('loading');
            submitBtn.disabled = false;
        @endif
    });
</script>
@endpush
@endsection