@extends('layouts.app')

@section('title', $title)

@section('content')

@if(session('success'))
    <div class="container mt-3">
        <div class="alert alert-success text-center">
            {{ session('success') }}
        </div>
    </div>
@endif

<br />
<br />
<br />

<style>
    /* İletişim Sayfası Özel Stilleri */
    :root {
        --primary-color: #1d3b7d;
        --primary-dark: #142d5e;
        --primary-light: #2a4c96;
        --primary-glow: rgba(29, 59, 125, 0.1);
    }

    .branch-hero {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        border-radius: 24px;
        padding: 40px;
        margin-bottom: 40px;
        position: relative;
        overflow: hidden;
    }

    .branch-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 1%, transparent 1%);
        background-size: 50px 50px;
        animation: shimmer 20s linear infinite;
    }

    @keyframes shimmer {
        0% {
            transform: translate(0, 0);
        }

        100% {
            transform: translate(50px, 50px);
        }
    }

    .hero-title {
        font-size: 32px;
        font-weight: 700;
        color: white;
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
    }

    .hero-subtitle {
        font-size: 16px;
        color: rgba(255,255,255,0.9);
        margin-bottom: 0;
        position: relative;
        z-index: 1;
    }

    /* Grid Sistemi - Tek bir grid içinde tüm kartlar */
    .branch-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }

    .branch-card {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        border: 1px solid #eef2f6;
        position: relative;
    }

    .branch-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(29, 59, 125, 0.15);
        border-color: var(--primary-color);
    }

    .branch-card.active {
        border: 2px solid var(--primary-color);
        box-shadow: 0 12px 28px rgba(29, 59, 125, 0.2);
    }

    .branch-card-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
        padding: 18px;
        position: relative;
    }

    .branch-icon {
        width: 45px;
        height: 45px;
        background: rgba(255,255,255,0.2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }

    .branch-icon i {
        font-size: 22px;
        color: white;
    }

    .branch-name {
        font-size: 15px;
        font-weight: 700;
        color: white;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .branch-location {
        font-size: 11px;
        color: rgba(255,255,255,0.85);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .branch-location i {
        font-size: 10px;
    }

    .branch-card-body {
        padding: 16px;
        background: white;
    }

    .branch-address {
        font-size: 12px;
        color: #4a5568;
        line-height: 1.5;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 54px;
    }

    .branch-contact-info {
        border-top: 1px solid #eef2f6;
        padding-top: 12px;
        margin-top: 8px;
    }

    .branch-phone {
        font-size: 12px;
        font-weight: 600;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
    }

    .branch-phone a {
        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .branch-phone a:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

    .branch-phone i {
        font-size: 11px;
        color: #8b8b8b;
    }

    .branch-email {
        font-size: 11px;
        display: flex;
        align-items: center;
        gap: 6px;
        word-break: break-all;
    }

    .branch-email a {
        color: #6c757d;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .branch-email a:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }

    .branch-email i {
        font-size: 11px;
        flex-shrink: 0;
        color: #8b8b8b;
    }

    .branch-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(255,255,255,0.9);
        color: var(--primary-color);
        font-size: 10px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 20px;
    }

    /* Ana İçerik Alanı */
    .main-content-wrapper {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 30px;
        margin-top: 40px;
    }

    /* Harita Bölümü */
    .map-section {
        background: #f8fafc;
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid rgba(29, 59, 125, 0.1);
        height: 550px;
        display: flex;
        flex-direction: column;
    }

    .map-header {
        padding: 18px 24px;
        background: white;
        border-bottom: 1px solid #eef2f6;
    }

    .map-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .map-title i {
        font-size: 22px;
    }

    .map-address {
        font-size: 13px;
        color: #6c757d;
        margin-bottom: 0;
    }

    .map-container {
        flex: 1;
        background: #eef2f6;
        position: relative;
    }

    .map-placeholder {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
    }

    .map-placeholder-icon {
        width: 70px;
        height: 70px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
    }

    .map-placeholder-icon i {
        font-size: 32px;
        color: var(--primary-color);
        opacity: 0.6;
    }

    .map-placeholder p {
        font-size: 14px;
        color: #6c757d;
    }

    /* Sağ Panel - Şube Listesi */
    .branches-sidebar {
        background: white;
        border-radius: 24px;
        border: 1px solid #eef2f6;
        overflow: hidden;
        height: 550px;
        display: flex;
        flex-direction: column;
    }

    .sidebar-header {
        padding: 18px 20px;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
        color: white;
    }

    .sidebar-header h4 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .sidebar-header p {
        font-size: 12px;
        opacity: 0.85;
        margin-bottom: 0;
    }

    .branches-list {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
    }

    .branches-list::-webkit-scrollbar {
        width: 4px;
    }

    .branches-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .branches-list::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 10px;
    }

    .sidebar-branch-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 8px;
        border: 1px solid transparent;
    }

    .sidebar-branch-item:hover {
        background: var(--primary-glow);
        border-color: rgba(29, 59, 125, 0.2);
    }

    .sidebar-branch-item.active {
        background: var(--primary-glow);
        border-color: var(--primary-color);
    }

    .sidebar-branch-icon {
        width: 40px;
        height: 40px;
        background: var(--primary-glow);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .sidebar-branch-icon i {
        font-size: 18px;
        color: var(--primary-color);
    }

    .sidebar-branch-info {
        flex: 1;
    }

    .sidebar-branch-name {
        font-size: 14px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 2px;
    }

    .sidebar-branch-location {
        font-size: 11px;
        color: #6c757d;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .sidebar-branch-location i {
        font-size: 10px;
    }

    /* İletişim Formu Bölümü */
    .contact-section {
        margin-top: 30px;
        background: white;
        border-radius: 24px;
        padding: 32px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.03);
        border: 1px solid #eef2f6;
        display: none;
    }

    .contact-section.active {
        display: block;
        animation: fadeInUp 0.4s ease;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .contact-title {
        font-size: 22px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 8px;
    }

    .contact-subtitle {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 2px solid #eef2f6;
    }

    /* Form Stilleri */
    .form-control {
        border: 1px solid #e0e4e8;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px var(--primary-glow);
        outline: none;
    }

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

    .btn-submit {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
        border: none;
        border-radius: 12px;
        padding: 12px 28px;
        font-weight: 600;
        color: white;
        transition: all 0.3s ease;
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(29, 59, 125, 0.3);
    }

    /* Responsive Düzenlemeler */
    @media (max-width: 1400px) {
        .branch-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }
    }

    @media (max-width: 1200px) {
        .branch-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .main-content-wrapper {
            grid-template-columns: 1fr;
        }

        .branches-sidebar {
            height: auto;
            max-height: 400px;
        }
    }

    @media (max-width: 768px) {
        .branch-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .branch-hero {
            padding: 30px 20px;
        }

        .hero-title {
            font-size: 24px;
        }

        .contact-section {
            padding: 24px;
        }

        .map-section {
            height: 400px;
        }
    }

    @media (max-width: 480px) {
        .branch-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
    }
</style>

<section class="p-0 overflow-hidden">
    <div class="container">
        <div class="branch-hero">
            <h1 class="hero-title">{{ __('Şubelerimiz') }}</h1>
            <p class="hero-subtitle">{{ __('Size en yakın şubemizi seçin, size özel çözümler için hemen ulaşın') }}</p>
        </div>

        <div class="branch-grid" id="branchGrid">
            <div class="branch-card" data-branch="rami" data-name="Bayrampaşa (Rami) Şube" data-email="murat@cetinkayametal.com.tr" data-phone="0212 616 35 08" data-address="Rami Kışla Cad. Emintaş Aktoker San.Sit.No:69 Bayrampaşa – Rami / İstanbul" data-map="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d192570.73520219701!2d28.912020999999996!3d41.048928!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caba78b49f3321%3A0x7442b196dcace232!2s%C3%87etinkaya%20Metal%20Ticaret%20A.%C5%9E.!5e0!3m2!1str!2str!4v1733386667690!5m2!1str!2str">
                <div class="branch-card-header">
                    <div class="branch-icon">
                        <i class="bi bi-building"></i>
                    </div>
                    <div class="branch-name">Bayrampaşa (Rami) Şube</div>
                    <div class="branch-location">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>Bayrampaşa / İstanbul</span>
                    </div>
                    <span class="branch-badge">İstanbul</span>
                </div>
                <div class="branch-card-body">
                    <div class="branch-address">
                        Rami Kışla Cad. Emintaş Aktoker San.Sit.No:69 Bayrampaşa – Rami / İstanbul
                    </div>
                    <div class="branch-contact-info">
                        <div class="branch-phone">
                            <i class="bi bi-telephone-fill"></i> <a href="tel:+902126163508">0212 616 35 08</a>
                        </div>
                        <div class="branch-email">
                            <i class="bi bi-envelope-fill"></i> <a href="mailto:murat@cetinkayametal.com.tr">murat@cetinkayametal.com.tr</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="branch-card" data-branch="beyoglu" data-name="Beyoğlu Şube" data-email="kasim@cetinkayametal.com.tr" data-phone="0212 297 56 14" data-address="Yolcuzade İskender Cad. Karagül İş Merkezi No:10-1 Şişhane / İstanbul" data-map="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d192635.90432977103!2d28.969069!3d41.026656!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cab9910f72cd19%3A0xfe42c01c27b2573f!2s%C3%87etinkaya%20Metal!5e0!3m2!1str!2str!4v1733386237558!5m2!1str!2str">
                <div class="branch-card-header">
                    <div class="branch-icon">
                        <i class="bi bi-shop"></i>
                    </div>
                    <div class="branch-name">Beyoğlu Şube</div>
                    <div class="branch-location">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>Beyoğlu / İstanbul</span>
                    </div>
                    <span class="branch-badge">İstanbul</span>
                </div>
                <div class="branch-card-body">
                    <div class="branch-address">
                        Yolcuzade İskender Cad. Karagül İş Merkezi No:10-1 Şişhane / İstanbul
                    </div>
                    <div class="branch-contact-info">
                        <div class="branch-phone">
                            <i class="bi bi-telephone-fill"></i> <a href="tel:+902122975614">0212 297 56 14</a>
                        </div>
                        <div class="branch-email">
                            <i class="bi bi-envelope-fill"></i> <a href="mailto:kasim@cetinkayametal.com.tr">kasim@cetinkayametal.com.tr</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="branch-card" data-branch="tuzla" data-name="Tuzla Şube" data-email="veysi@cetinkayametal.com.tr" data-phone="0216 314 20 10" data-address="Mescit Mah. Demokrasi Cd. Birmes San.Sit No:3 B9 Blok Tuzla / İstanbul" data-map="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6033.0227667534045!2d29.345942000000004!3d40.882596!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cad96d725028fb%3A0x259f6600b4b1a200!2zw4dFVMSwTktBWUEgTUVUQUwgVMSwQyBBLsWe!5e0!3m2!1str!2str!4v1733386761822!5m2!1str!2str">
                <div class="branch-card-header">
                    <div class="branch-icon">
                        <i class="bi bi-geo-alt"></i>
                    </div>
                    <div class="branch-name">Tuzla Şube</div>
                    <div class="branch-location">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>Tuzla / İstanbul</span>
                    </div>
                    <span class="branch-badge">İstanbul</span>
                </div>
                <div class="branch-card-body">
                    <div class="branch-address">
                        Mescit Mah. Demokrasi Cd. Birmes San.Sit No:3 B9 Blok Tuzla / İstanbul
                    </div>
                    <div class="branch-contact-info">
                        <div class="branch-phone">
                            <i class="bi bi-telephone-fill"></i> <a href="tel:+902163142010">0216 314 20 10</a>
                        </div>
                        <div class="branch-email">
                            <i class="bi bi-envelope-fill"></i> <a href="mailto:veysi@cetinkayametal.com.tr">veysi@cetinkayametal.com.tr</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="branch-card" data-branch="corlu" data-name="Çorlu Tekirdağ Şube" data-email="yilmaz@cetinkayametal.com.tr" data-phone="0282 673 23 21" data-address="Zafer mahallesi Şehit yüzbaşı yücel kenter caddesi No:2010 A No:8 Çorlu/Tekirdağ" data-map="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d48073.141289117506!2d27.839075!3d41.143883!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14b4e6d8d287a8dd%3A0x95c01bd103fc454!2zw4dFVMSwTktBWUEgTUVUQUwgVMSwQ0FSRVQgQS7Fni4!5e0!3m2!1str!2str!4v1733386874033!5m2!1str!2str">
                <div class="branch-card-header">
                    <div class="branch-icon">
                        <i class="bi bi-building"></i>
                    </div>
                    <div class="branch-name">Çorlu Tekirdağ Şube</div>
                    <div class="branch-location">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>Çorlu / Tekirdağ</span>
                    </div>
                    <span class="branch-badge">Tekirdağ</span>
                </div>
                <div class="branch-card-body">
                    <div class="branch-address">
                        Zafer mahallesi Şehit yüzbaşı yücel kenter caddesi No:2010 A No:8 Çorlu/Tekirdağ
                    </div>
                    <div class="branch-contact-info">
                        <div class="branch-phone">
                            <i class="bi bi-telephone-fill"></i> <a href="tel:+902826732321">0282 673 23 21</a>
                        </div>
                        <div class="branch-email">
                            <i class="bi bi-envelope-fill"></i> <a href="mailto:yilmaz@cetinkayametal.com.tr">yilmaz@cetinkayametal.com.tr</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="branch-card" data-branch="ikitelli" data-name="İkitelli Şube" data-email="bulent@cetinkayametal.com.tr" data-phone="0212 671 44 98" data-address="İosb Demirciler San Sit B-6 Blok no.133 İkitelli/ İSTANBUL" data-map="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3008.0664360143487!2d28.803588875748105!3d41.0675404157741!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa5840c930519%3A0x6c7fac6525945397!2s%C3%87etinkaya%20Metal%20Tic.%20A.%C5%9E.!5e0!3m2!1str!2str!4v1768485347039!5m2!1str!2str">
                <div class="branch-card-header">
                    <div class="branch-icon">
                        <i class="bi bi-building"></i>
                    </div>
                    <div class="branch-name">İkitelli Şube</div>
                    <div class="branch-location">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>İkitelli / İstanbul</span>
                    </div>
                    <span class="branch-badge">İstanbul</span>
                </div>
                <div class="branch-card-body">
                    <div class="branch-address">
                        İosb Demirciler San Sit B-6 Blok no.133 İkitelli/ İSTANBUL
                    </div>
                    <div class="branch-contact-info">
                        <div class="branch-phone">
                            <i class="bi bi-telephone-fill"></i> <a href="tel:+902126714498">0212 671 44 98 - 0212 671 44 99</a>
                        </div>
                        <div class="branch-email">
                            <i class="bi bi-envelope-fill"></i> <a href="mailto:bulent@cetinkayametal.com.tr">bulent@cetinkayametal.com.tr</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="branch-card" data-branch="ihracat" data-name="İhracat Ofisi" data-email="satis@cetinkayametal.com.tr" data-phone="0212 251 34 12" data-address="Şenlikköy Mah. Avcılar Sk. Mecit Kaptan Konağı No:51/2 Florya Bakırköy İstanbul" data-map="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6024.0497628077055!2d28.798227!3d40.980936!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14caa3ba530e2a99%3A0x57986af9f520aad8!2zTWVjaXQgS2FwdGFuIEtvbmHEn8Sx!5e0!3m2!1str!2str!4v1733387077183!5m2!1str!2str">
                <div class="branch-card-header">
                    <div class="branch-icon">
                        <i class="bi bi-globe"></i>
                    </div>
                    <div class="branch-name">İhracat Ofisi</div>
                    <div class="branch-location">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>Bakırköy / İstanbul</span>
                    </div>
                    <span class="branch-badge">İstanbul</span>
                </div>
                <div class="branch-card-body">
                    <div class="branch-address">
                        Şenlikköy Mah. Avcılar Sk. Mecit Kaptan Konağı No:51/2 Florya Bakırköy İstanbul
                    </div>
                    <div class="branch-contact-info">
                        <div class="branch-phone">
                            <i class="bi bi-telephone-fill"></i> <a href="tel:+902122513412">0212 251 34 12</a>
                        </div>
                        <div class="branch-email">
                            <i class="bi bi-envelope-fill"></i> <a href="mailto:satis@cetinkayametal.com.tr">satis@cetinkayametal.com.tr</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="branch-card" data-branch="bursa" data-name="Bursa Şube" data-email="anil@cetinkayametal.com.tr" data-phone="0224 503 37 37" data-address="Nilüfer Ticaret Merkezi Alaatin Bey Mh. 629 Sk. No 2-C Nilüfer Bursa" data-map="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d786.2719546818585!2d28.928172401982515!3d40.20865783825951!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14ca116a0b24c8cd%3A0x348a0a82d8b7b4b9!2sAlaaddinbey%2C%20629.%20Sk.%20No%3A2%2FC%2C%2016120%20Ni%CC%87l%C3%BCfer%2FBursa!5e1!3m2!1str!2str!4v1770824648925!5m2!1str!2str">
                <div class="branch-card-header">
                    <div class="branch-icon">
                        <i class="bi bi-building"></i>
                    </div>
                    <div class="branch-name">Bursa Şube</div>
                    <div class="branch-location">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>Nilüfer / Bursa</span>
                    </div>
                    <span class="branch-badge">Bursa</span>
                </div>
                <div class="branch-card-body">
                    <div class="branch-address">
                        Nilüfer Ticaret Merkezi Alaatin Bey Mh. 629 Sk. No 2-C Nilüfer Bursa
                    </div>
                    <div class="branch-contact-info">
                        <div class="branch-phone">
                            <i class="bi bi-telephone-fill"></i> <a href="tel:+902245033737">0224 503 37 37</a>
                        </div>
                        <div class="branch-email">
                            <i class="bi bi-envelope-fill"></i> <a href="mailto:anil@cetinkayametal.com.tr">anil@cetinkayametal.com.tr</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="branch-card" data-branch="ottocool" data-name="Bursa Ottocool" data-email="anil@cetinkayametal.com.tr" data-phone="0224 502 44 50" data-address="Alaaddinbey Mah 635. Sk. No: 10/C Elsan Plaza Nilüfer Bursa" data-map="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3047.0215669398967!2d28.929162500000004!3d40.2085832!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14ca11307fdb4111%3A0xf27a3b4b1e33df44!2s%C3%87etinkaya%20metal%20bursa!5e0!3m2!1str!2str!4v1773838988327!5m2!1str!2str">
                <div class="branch-card-header">
                    <div class="branch-icon">
                        <i class="bi bi-snow2"></i>
                    </div>
                    <div class="branch-name">Bursa Ottocool</div>
                    <div class="branch-location">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>Nilüfer / Bursa</span>
                    </div>
                    <span class="branch-badge">Bursa</span>
                </div>
                <div class="branch-card-body">
                    <div class="branch-address">
                        Alaaddinbey Mah 635. Sk. No: 10/C Elsan Plaza Nilüfer Bursa
                    </div>
                    <div class="branch-contact-info">
                        <div class="branch-phone">
                            <i class="bi bi-telephone-fill"></i> <a href="tel:+902245024450">0224 502 44 50</a>
                        </div>
                        <div class="branch-email">
                            <i class="bi bi-envelope-fill"></i> <a href="mailto:anil@cetinkayametal.com.tr">anil@cetinkayametal.com.tr</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="branch-card" data-branch="muhasebe" data-name="Muhasebe" data-email="muhasebe@cetinkaya-group.com" data-phone="0212 251 34 13" data-address="Merkez Mah. Ali Galip Bey Cad. Diyar İş Merkezi No:15 Ofis No:26 Gaziosmanpaşa / İSTANBUL" data-map="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d48073.141289117506!2d27.839075!3d41.143883!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14b4e6d8d287a8dd%3A0x95c01bd103fc454!2zw4dFVMSwTktBWUEgTUVUQUwgVMSwQ0FSRVQgQS7Fni4!5e0!3m2!1str!2str!4v1733386874033!5m2!1str!2str">
                <div class="branch-card-header">
                    <div class="branch-icon">
                        <i class="bi bi-calculator"></i>
                    </div>
                    <div class="branch-name">Muhasebe</div>
                    <div class="branch-location">
                        <i class="bi bi-geo-alt-fill"></i>
                        <span>Gaziosmanpaşa / İstanbul</span>
                    </div>
                    <span class="branch-badge">İstanbul</span>
                </div>
                <div class="branch-card-body">
                    <div class="branch-address">
                        Merkez Mah. Ali Galip Bey Cad. Diyar İş Merkezi No:15 Ofis No:26 Gaziosmanpaşa / İSTANBUL
                    </div>
                    <div class="branch-contact-info">
                        <div class="branch-phone">
                            <i class="bi bi-telephone-fill"></i> <a href="tel:+902122513413">0212 251 34 13</a>
                        </div>
                        <div class="branch-email">
                            <i class="bi bi-envelope-fill"></i> <a href="mailto:muhasebe@cetinkaya-group.com">muhasebe@cetinkaya-group.com</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-content-wrapper">
            <div class="map-section">
                <div class="map-header">
                    <div class="map-title">
                        <i class="bi bi-map-fill"></i>
                        <span id="selectedBranchName">Konum Seçiniz</span>
                    </div>
                    <div class="map-address" id="selectedBranchAddress"></div>
                </div>
                <div class="map-container" id="mapContainer">
                    <div class="map-placeholder">
                        <div class="map-placeholder-icon">
                            <i class="bi bi-pin-map-fill"></i>
                        </div>
                        <p>Bir şube seçerek konumunu haritada görüntüleyin</p>
                    </div>
                </div>
            </div>

            <div class="branches-sidebar">
                <div class="sidebar-header">
                    <h4>{{ __('Şubelerimiz') }}</h4>
                    <p>{{ __('Şube adına tıklayarak konumu görüntüleyin') }}</p>
                </div>
                <div class="branches-list" id="branchesList">
                </div>
            </div>
        </div>

        <div class="contact-section" id="contactSection">
            <h3 class="contact-title">{{ __('Size Nasıl Yardımcı Olabiliriz?') }}</h3>
            <p class="contact-subtitle" id="selectedBranchContactText">{{ __('Seçtiğiniz şube için formu doldurun, en kısa sürede size dönüş yapalım') }}</p>

            <div id="form-rami" class="branch-contact-form" style="display: none;">
                <form method="post" action="{{ url('/iletisim?branch=rami') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="AdSoyad" class="form-control" placeholder="Adınız Soyadınız *" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="tel" name="Telefon" class="form-control" placeholder="Telefon Numaranız *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="email" name="Email" class="form-control" placeholder="E-posta Adresiniz *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="text" name="Konu" class="form-control" placeholder="Konu">
                        </div>
                        <div class="col-md-12 mb-3">
                            <textarea name="Mesaj" class="form-control" rows="5" placeholder="Mesajınız *" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <input type="hidden" name="Sube" value="RAMİ">
                            <button type="submit" class="btn btn-submit w-100">Gönder</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="form-beyoglu" class="branch-contact-form" style="display: none;">
                <form method="post" action="{{ url('/iletisim?branch=beyoglu') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="AdSoyad" class="form-control" placeholder="Adınız Soyadınız *" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="tel" name="Telefon" class="form-control" placeholder="Telefon Numaranız *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="email" name="Email" class="form-control" placeholder="E-posta Adresiniz *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="text" name="Konu" class="form-control" placeholder="Konu">
                        </div>
                        <div class="col-md-12 mb-3">
                            <textarea name="Mesaj" class="form-control" rows="5" placeholder="Mesajınız *" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <input type="hidden" name="Sube" value="SİSHANE">
                            <button type="submit" class="btn btn-submit w-100">Gönder</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="form-tuzla" class="branch-contact-form" style="display: none;">
                <form method="post" action="{{ url('/iletisim?branch=tuzla') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="AdSoyad" class="form-control" placeholder="Adınız Soyadınız *" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="tel" name="Telefon" class="form-control" placeholder="Telefon Numaranız *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="email" name="Email" class="form-control" placeholder="E-posta Adresiniz *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="text" name="Konu" class="form-control" placeholder="Konu">
                        </div>
                        <div class="col-md-12 mb-3">
                            <textarea name="Mesaj" class="form-control" rows="5" placeholder="Mesajınız *" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <input type="hidden" name="Sube" value="TUZLA">
                            <button type="submit" class="btn btn-submit w-100">Gönder</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="form-corlu" class="branch-contact-form" style="display: none;">
                <form method="post" action="{{ url('/iletisim?branch=corlu') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="AdSoyad" class="form-control" placeholder="Adınız Soyadınız *" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="tel" name="Telefon" class="form-control" placeholder="Telefon Numaranız *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="email" name="Email" class="form-control" placeholder="E-posta Adresiniz *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="text" name="Konu" class="form-control" placeholder="Konu">
                        </div>
                        <div class="col-md-12 mb-3">
                            <textarea name="Mesaj" class="form-control" rows="5" placeholder="Mesajınız *" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <input type="hidden" name="Sube" value="ÇORLU">
                            <button type="submit" class="btn btn-submit w-100">Gönder</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="form-ikitelli" class="branch-contact-form" style="display: none;">
                <form method="post" action="{{ url('/iletisim?branch=ikitelli') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="AdSoyad" class="form-control" placeholder="Adınız Soyadınız *" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="tel" name="Telefon" class="form-control" placeholder="Telefon Numaranız *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="email" name="Email" class="form-control" placeholder="E-posta Adresiniz *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="text" name="Konu" class="form-control" placeholder="Konu">
                        </div>
                        <div class="col-md-12 mb-3">
                            <textarea name="Mesaj" class="form-control" rows="5" placeholder="Mesajınız *" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <input type="hidden" name="Sube" value="İKİTELLİ">
                            <button type="submit" class="btn btn-submit w-100">Gönder</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="form-ihracat" class="branch-contact-form" style="display: none;">
                <form method="post" action="{{ url('/iletisim?branch=ihracat') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="AdSoyad" class="form-control" placeholder="Adınız Soyadınız *" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="tel" name="Telefon" class="form-control" placeholder="Telefon Numaranız *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="email" name="Email" class="form-control" placeholder="E-posta Adresiniz *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="text" name="Konu" class="form-control" placeholder="Konu">
                        </div>
                        <div class="col-md-12 mb-3">
                            <textarea name="Mesaj" class="form-control" rows="5" placeholder="Mesajınız *" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <input type="hidden" name="Sube" value="İHRACAT">
                            <button type="submit" class="btn btn-submit w-100">Gönder</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="form-bursa" class="branch-contact-form" style="display: none;">
                <form method="post" action="{{ url('/iletisim?branch=bursa') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="AdSoyad" class="form-control" placeholder="Adınız Soyadınız *" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="tel" name="Telefon" class="form-control" placeholder="Telefon Numaranız *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="email" name="Email" class="form-control" placeholder="E-posta Adresiniz *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="text" name="Konu" class="form-control" placeholder="Konu">
                        </div>
                        <div class="col-md-12 mb-3">
                            <textarea name="Mesaj" class="form-control" rows="5" placeholder="Mesajınız *" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <input type="hidden" name="Sube" value="BURSA">
                            <button type="submit" class="btn btn-submit w-100">Gönder</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="form-ottocool" class="branch-contact-form" style="display: none;">
                <form method="post" action="{{ url('/iletisim?branch=ottocool') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="AdSoyad" class="form-control" placeholder="Adınız Soyadınız *" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="tel" name="Telefon" class="form-control" placeholder="Telefon Numaranız *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="email" name="Email" class="form-control" placeholder="E-posta Adresiniz *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="text" name="Konu" class="form-control" placeholder="Konu">
                        </div>
                        <div class="col-md-12 mb-3">
                            <textarea name="Mesaj" class="form-control" rows="5" placeholder="Mesajınız *" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <input type="hidden" name="Sube" value="OTTOCOOL BURSA">
                            <button type="submit" class="btn btn-submit w-100">Gönder</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="form-muhasebe" class="branch-contact-form" style="display: none;">
                <form method="post" action="{{ url('/iletisim?branch=muhasebe') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="AdSoyad" class="form-control" placeholder="Adınız Soyadınız *" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <input type="tel" name="Telefon" class="form-control" placeholder="Telefon Numaranız *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="email" name="Email" class="form-control" placeholder="E-posta Adresiniz *" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <input type="text" name="Konu" class="form-control" placeholder="Konu">
                        </div>
                        <div class="col-md-12 mb-3">
                            <textarea name="Mesaj" class="form-control" rows="5" placeholder="Mesajınız *" required></textarea>
                        </div>
                        <div class="col-md-12">
                            <input type="hidden" name="Sube" value="MUHASEBE">
                            <button type="submit" class="btn btn-submit w-100">Gönder</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<br />

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const branchCards = document.querySelectorAll('.branch-card');
        const mapContainer = document.getElementById('mapContainer');
        const contactSection = document.getElementById('contactSection');
        const selectedBranchNameSpan = document.getElementById('selectedBranchName');
        const selectedBranchAddressSpan = document.getElementById('selectedBranchAddress');
        const selectedBranchContactText = document.getElementById('selectedBranchContactText');
        const branchesList = document.getElementById('branchesList');

        const allForms = {
            rami: document.getElementById('form-rami'),
            beyoglu: document.getElementById('form-beyoglu'),
            tuzla: document.getElementById('form-tuzla'),
            corlu: document.getElementById('form-corlu'),
            ikitelli: document.getElementById('form-ikitelli'),
            ihracat: document.getElementById('form-ihracat'),
            bursa: document.getElementById('form-bursa'),
            ottocool: document.getElementById('form-ottocool'),
            muhasebe: document.getElementById('form-muhasebe')
        };

        function showForm(branchType) {
            Object.values(allForms).forEach(form => {
                if (form) form.style.display = 'none';
            });
            const selectedForm = allForms[branchType];
            if (selectedForm) {
                selectedForm.style.display = 'block';
            }
        }

        function buildSidebarList() {
            let html = '';
            branchCards.forEach((card, index) => {
                const branchName = card.getAttribute('data-name');
                const branchType = card.getAttribute('data-branch');
                const locationText = card.querySelector('.branch-location span')?.innerText || '';
                let iconClass = 'bi-building';

                if (branchType === 'beyoglu') iconClass = 'bi-shop';
                else if (branchType === 'tuzla') iconClass = 'bi-geo-alt';
                else if (branchType === 'ihracat') iconClass = 'bi-globe';
                else if (branchType === 'ottocool') iconClass = 'bi-snow2';
                else if (branchType === 'muhasebe') iconClass = 'bi-calculator';

                html += `
                    <div class="sidebar-branch-item" data-branch-index="${index}">
                        <div class="sidebar-branch-icon">
                            <i class="bi ${iconClass}"></i>
                        </div>
                        <div class="sidebar-branch-info">
                            <div class="sidebar-branch-name">${branchName}</div>
                            <div class="sidebar-branch-location">
                                <i class="bi bi-geo-alt-fill"></i>
                                <span>${locationText}</span>
                            </div>
                        </div>
                    </div>
                `;
            });
            branchesList.innerHTML = html;

            document.querySelectorAll('.sidebar-branch-item').forEach(item => {
                item.addEventListener('click', function() {
                    const index = parseInt(this.getAttribute('data-branch-index'));
                    const targetCard = branchCards[index];
                    if (targetCard) {
                        loadBranch(targetCard);
                        document.querySelectorAll('.sidebar-branch-item').forEach(el => el.classList.remove('active'));
                        this.classList.add('active');
                    }
                });
            });
        }

        function loadBranch(branchCard) {
            branchCards.forEach(card => card.classList.remove('active'));
            branchCard.classList.add('active');

            const branchName = branchCard.getAttribute('data-name');
            const branchType = branchCard.getAttribute('data-branch');
            const address = branchCard.getAttribute('data-address');
            const mapUrl = branchCard.getAttribute('data-map');

            selectedBranchNameSpan.innerText = branchName;
            selectedBranchAddressSpan.innerText = address;
            selectedBranchContactText.innerText = `${branchName} şubemiz için formu doldurun, en kısa sürede size dönüş yapalım`;

            mapContainer.innerHTML = `
                <iframe src="${mapUrl}"
                        style="border:0; width:100%; height:100%;"
                        allowfullscreen=""
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            `;

            showForm(branchType);
            contactSection.classList.add('active');

            const sidebarItems = document.querySelectorAll('.sidebar-branch-item');
            sidebarItems.forEach((item, idx) => {
                const card = branchCards[idx];
                if (card && card.getAttribute('data-name') === branchName) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });

            if (history.replaceState) {
                history.replaceState(null, '', `#${branchType}`);
            }
        }

        branchCards.forEach(card => {
            card.addEventListener('click', function(e) {
                e.preventDefault();
                loadBranch(this);
                const mainWrapper = document.querySelector('.main-content-wrapper');
                if (mainWrapper) {
                    mainWrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });

        buildSidebarList();

        if (window.location.hash) {
            const hashBranch = window.location.hash.substring(1);
            const targetCard = Array.from(branchCards).find(card =>
                card.getAttribute('data-branch') === hashBranch
            );
            if (targetCard) {
                setTimeout(() => {
                    loadBranch(targetCard);
                    targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
            }
        }
    });
</script>
@endsection