@extends('landingpage.layouts.main')

@section('content')

<section class="cabang-section">
    <div class="container">


        {{-- HEADER --}}
        <div class="text-center section-header">
            <h2 class="section-title">
                Pekanbaru Perfumery Store
            </h2>

            <p class="section-subtitle">
                Kunjungi toko Pekanbaru Perfumery dan temukan berbagai koleksi parfum premium dengan pelayanan terbaik.
            </p>

            <div class="branch-search-wrapper">
                <div class="branch-search-box">

                    <input
                        type="text"
                        id="branchSearch"
                        class="branch-search"
                        placeholder="Cari lokasi toko..."
                    >

                    <button type="button" class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>

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

        {{-- ================= DKI JAKARTA ================= --}}
        <h3 class="province-title">
            <i class="bi bi-geo-alt-fill"></i>
            Pekanbaru
        </h3>

        <div class="row g-4 align-items-stretch">

            {{-- Tebet 1 --}}
            <div class="col-lg-4 col-md-6 branch-item">
                <div class="branch-card">
                    <div class="branch-header">
                        <h5>Pekanbaru Perfumery - Rejosari</h5>
                    </div>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3989.6510899648692!2d101.4662643!3d0.5245902!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31d5ad006a22b69b%3A0xff6e9df2b798f0eb!2sPekanbaru%20Parfumery!5e0!3m2!1sid!2sid!4v1783670434578!5m2!1sid!2sid" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>
                    <div class="branch-info">
                        <p><i class="fas fa-location-dot"></i>Jl. Hangtuah, Rejosari, Tenayan Raya, Kota Pekanbaru, Riau 28111</p>
                        <p><i class="fas fa-clock"></i>08.00 - 22.00 WIB</p>
                    </div>
                </div>
            </div>

            {{-- Tebet 2 --}}
            <div class="col-lg-4 col-md-6 branch-item">
                <div class="branch-card">
                    <div class="branch-header">
                        <h5>Pekanbaru Perfumery - Adi Sucipto</h5>
                    </div>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31917.50010818443!2d101.38229097431636!3d0.46395670000000094!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31d5a9f1d224a70d%3A0xe4279bb08becad2a!2sPekanbaru%20Perfumery%20Adi%20Sucipto!5e0!3m2!1sid!2sid!4v1783670485228!5m2!1sid!2sid" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>
                    <div class="branch-info">
                        <p><i class="fas fa-location-dot"></i>Jl. Adisucipto No.568, Sidomulyo Tim., Marpoyan Damai, Kota Pekanbaru, Riau 28289</p>
                        <p><i class="fas fa-clock"></i>08.00 - 22.00 WIB</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<style>
    body,
    main{
        background:#F8F5EF;
        color:#2F2F2F;
    }
    .cabang-section{
        position:relative;
        padding:120px 0 80px;
        overflow:hidden;

        background:
            radial-gradient(circle at top right,
            rgba(200,154,75,.08),
            transparent 35%),
            #F8F5EF;
    }
    .cabang-section::before{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        background:
            radial-gradient(circle at top left,
            rgba(200,154,75,.08),
            transparent 35%),

            radial-gradient(circle at bottom right,
            rgba(255,255,255,.9),
            transparent 45%);
    }
    .section-header{
        position:relative;
        z-index:2;
        text-align:center;
        margin-bottom:65px;
    }
    .section-title{
        margin-bottom:12px;
        color:#2B2B2B;
        font-size:46px;
        font-weight:700;
        letter-spacing:2px;
        text-transform:uppercase;
    }
    .section-subtitle{
        color:#6E6558;
        max-width:700px;
        margin:auto;
    line-height:1.9;
        font-size:15px;
    }
    .branch-search-wrapper{
        display:flex;
        justify-content:center;
        margin-top:28px;
    }
    .branch-search-box{
        position:relative;
        width:100%;
        max-width:500px;
    }
    .branch-search{
        width:100%;
        height:58px;
        padding:0 78px 0 24px;
        background:#fff;
        border:1.5px solid #E8DCC2;
        border-radius:16px;
        color:#2B2B2B;
        font-size:15px;
        outline:none;
        transition:.3s ease;
        box-shadow:
            0 10px 30px rgba(0,0,0,.05);
    }
    .branch-search::placeholder{
        color:#8A7C67;
    }
    .branch-search:focus{
        border-color:#C89A4B;

        box-shadow:
            0 0 0 4px rgba(200,154,75,.12),
            0 12px 30px rgba(200,154,75,.15);
    }
    .search-btn{
        position:absolute;
        top:50%;
        right:8px;
        transform:translateY(-50%);
        width:44px;
        height:44px;
        border:none;
        border-radius:12px;
        background:#C89A4B;
        color:#fff;
        transition:.3s;
        box-shadow:0 8px 20px rgba(200,154,75,.25);
    }
    .search-btn:hover{
        transform:translateY(-50%) scale(1.05);
        background:#B8893D;
    }
    .province-title{
        display:flex;
        align-items:center;
        gap:12px;
        margin:15px 0 30px;
        color:#2B2B2B;
        font-size:26px;
        font-weight:700;
        letter-spacing:.5px;
    }
    .province-title i{
        color:#C89A4B;
        font-size:24px;
    }
    .province-title::after{
        content:"";
        flex:1;
        height:1px;
        background:linear-gradient(
            to right,
            #D7C4A1,
            transparent
        );
    }
    .branch-card{
        background:#fff;
        border:1px solid #E8DCC2;
        border-radius:24px;
        overflow:hidden;
        transition:.35s;
        box-shadow:0 15px 35px rgba(0,0,0,.06);
    }
    .branch-card::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:5px;
        background:linear-gradient(
            to right,
            #C89A4B,
            #F2E4C8,
            #C89A4B
        );
    }
    .branch-card::after{
        display:none;
    }
    .branch-card:hover{
        transform:translateY(-8px);
        box-shadow:0 25px 45px rgba(0,0,0,.12);
        border-color:#D7C4A1;
    }
    .branch-header{
        position:relative;
        padding:22px 20px;
        text-align:center;
        background:#FCF8F2;
        border-bottom:1px solid #EEE3CF;
    }
    .branch-header h5{
        margin:0;
        color:#2B2B2B;
        font-size:16px;
        font-weight:700;
        letter-spacing:.8px;
        text-transform:uppercase;
    }
    .branch-card iframe{
        width:100%;
        height:210px;
        display:block;
        border:none;
        filter:none;
        border-bottom:
        1px solid rgba(255,255,255,.05);
    }
    .branch-info{
        padding:24px;
    }
    .branch-info p{
        display:flex;
        align-items:flex-start;
        gap:10px;
        margin-bottom:14px;
        color:#555;
        font-size:15px;
        font-weight:500;
        line-height:1.7;
    }
    .branch-info p:last-child{
        margin-bottom:0;
    }
    .branch-info i{
        width:18px;
        flex-shrink:0;
        margin-top:3px;
        color:#C89A4B;
        opacity:.9;
    }
    .branch-item{
        display:flex;
    }
    .branch-card{
        display:flex;
        flex-direction:column;
        width:100%;
        height:100%;
    }
    .branch-info{
        flex:1;
    }
    .row.g-4{
        --bs-gutter-y:1.6rem;
    }
    @media(max-width:768px){
        .cabang-section{
            padding-top:100px;
        }
        .section-title{
            font-size:30px;
        }
        .section-subtitle{
            font-size:14px;
        }
        .province-title{
            font-size:22px;
        }
        .branch-search{
            height:54px;
            border-radius:10px;
            font-size:14px;
        }
        .search-btn{
            width:42px;
            height:42px;
        }
        .branch-header{
            padding:18px;
        }
        .branch-header h5{
            font-size:14px;
        }
        .branch-card iframe{
            height:180px;
        }
        .branch-info{
            padding:18px;
        }
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {

        const searchInput = document.getElementById('branchSearch');
        const branchItems = document.querySelectorAll('.branch-item');

        searchInput.addEventListener('keyup', function () {

            const keyword = this.value.toLowerCase();

            branchItems.forEach(item => {

                const title = item.querySelector('.branch-header h5')
                                  .textContent
                                  .toLowerCase();

                if(title.includes(keyword)){
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }

            });
        });

    });
</script>
@endsection