@extends('layouts.master')

@section('title', 'Multi Currency')

@section('content')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
    :root {
        --sky: #0ea5e9;
        --sky-deep: #0369a1;
        --sky-light: #38bdf8;
        --sky-ghost: rgba(14,165,233,0.07);
        --sky-border: rgba(14,165,233,0.2);

        --white: #ffffff;
        --off: #f7fbff;
        --surface: #eef6fd;
        --border: #daeaf8;

        --fd: 'Cormorant Garamond', Georgia, serif;
        --fb: 'DM Sans', system-ui, sans-serif;
        --ease: cubic-bezier(0.22, 1, 0.36, 1);

        --shadow: 0 10px 40px rgba(14,165,233,0.13), 0 4px 12px rgba(0,0,0,0.06);
        --shadow-md: 0 8px 24px rgba(14,165,233,0.10);
    }

    .main-content { background: var(--off); font-family: var(--fb); }

    .tx-page {
        max-width: 1100px;
        margin: 0 auto;
        padding: 44px 24px 72px;
        animation: pageIn 0.55s var(--ease) both;
    }
    @keyframes pageIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

    .tx-breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: rgba(3,105,161,0.55);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 22px;
    }
    .tx-breadcrumb a { color: rgba(3,105,161,0.55); text-decoration: none; }
    .tx-breadcrumb a:hover { color: var(--sky); }
    .tx-breadcrumb .sep { font-size: 10px; color: rgba(3,105,161,0.28); }
    .tx-breadcrumb .current { color: var(--sky-deep); }

    .tx-hero {
        background: linear-gradient(135deg, var(--sky-deep) 0%, var(--sky) 65%, var(--sky-light) 100%);
        border-radius: 22px;
        padding: 30px 36px;
        color: var(--white);
        box-shadow: var(--shadow);
        margin-bottom: 18px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }
    .tx-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 14px);
        pointer-events: none;
    }

    .hero-text { position: relative; z-index: 1; }
    .hero-text h1 { margin: 0; font-family: var(--fd); font-size: 40px; line-height: 1.05; }
    .hero-text p { margin: 6px 0 0; font-size: 13px; color: rgba(255,255,255,0.94); }

    .hero-stat {
        position: relative;
        z-index: 1;
        background: rgba(255,255,255,0.18);
        border: 1px solid rgba(255,255,255,0.35);
        border-radius: 14px;
        padding: 14px 18px;
        text-align: center;
        min-width: 140px;
    }
    .hero-stat .val { font-family: var(--fd); font-weight: 700; font-size: 30px; line-height: 1; }
    .hero-stat .lab { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }

    .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin: 14px 0 18px;
    }
    .toolbar-left { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

    .btnx {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 10px;
        border: 1px solid var(--sky-border);
        background: var(--white);
        color: var(--sky-deep);
        text-decoration: none;
        font-weight: 700;
        font-size: 13px;
        transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
        user-select: none;
    }
    .btnx.primary { background: linear-gradient(135deg, var(--sky-deep), var(--sky)); color: var(--white); border-color: var(--sky-deep); }
    .btnx:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

    .search-wrap { position: relative; }
    .search-icon { position: absolute; left: 12px; top: 9px; color: var(--sky-deep); }
    .search-wrap input {
        width: 320px;
        max-width: 100%;
        padding: 10px 14px 10px 34px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--white);
        color: #0c0f14;
        font-size: 13px;
        outline: none;
    }
    .search-wrap input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(14,165,233,0.12); }

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 14px;
    }

    .cardx {
        border: 1px solid var(--sky-border);
        background: var(--white);
        border-radius: 16px;
        padding: 18px;
        text-decoration: none;
        transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
        box-shadow: 0 6px 18px rgba(14,165,233,0.10);
        display: block;
    }
    .cardx:hover { transform: translateY(-2px); background: var(--sky-ghost); box-shadow: var(--shadow-md); }
    .cardx h3 { margin: 0; font-family: var(--fd); font-size: 20px; color: var(--sky-deep); font-weight: 700; }
    .cardx p { margin: 8px 0 0; font-size: 13px; color: rgba(3,105,161,0.9); }

    .empty {
        display: none;
        margin-top: 18px;
        padding: 18px;
        border-radius: 14px;
        border: 1px dashed var(--sky-border);
        background: var(--white);
        color: rgba(3,105,161,0.9);
        text-align: center;
        font-weight: 700;
    }

    @media (max-width: 760px) {
        .tx-hero { padding: 24px 20px; flex-direction: column; align-items: flex-start; }
        .hero-text h1 { font-size: 32px; }
        .hero-stat { width: 100%; }
        .search-wrap input { width: 100%; }
    }
</style>

<div class="tx-page">
    <nav class="tx-breadcrumb">
        <a href="{{ route('modules.edit') }}">Edit Menu</a>
        <span class="sep">›</span>
        <span class="current">Multi Currency</span>
    </nav>

    <div class="tx-hero">
        <div class="hero-text">
            <h1>Multi Currency</h1>
            <p>Open each area on its own page.</p>
        </div>
        <div class="hero-stat">
            <div class="val">3</div>
            <div class="lab">Pages</div>
        </div>
    </div>

    <div class="toolbar">
        <div class="toolbar-left">
            <a href="{{ route('modules.edit') }}" class="btnx">← Back to Edit Menu</a>
            <a href="{{ route('modules.edit.multi-currency.add-currency') }}" class="btnx primary">Open Currency</a>
        </div>
        <div class="toolbar-right">
            <div class="search-wrap">
                <span class="search-icon">🔍</span>
                <input type="search" id="mcSearch" placeholder="Search page...">
            </div>
        </div>
    </div>

    <div class="grid" id="mcGrid">
        <a href="{{ route('modules.edit.multi-currency.add-currency') }}" class="cardx" data-search="currency currencies add edit delete">
            <h3>Currency</h3>
            <p>Add and maintain currency master records.</p>
        </a>

        <a href="{{ route('modules.edit.multi-currency.home-currency') }}" class="cardx" data-search="home currency base default">
            <h3>Home Currency</h3>
            <p>Set and update the firm's home currency.</p>
        </a>

        <a href="{{ route('modules.edit.multi-currency.daily-rates') }}" class="cardx" data-search="daily rates exchange rate fx">
            <h3>Daily Rates</h3>
            <p>Capture and update daily exchange rates.</p>
        </a>
    </div>

    <div class="empty" id="mcEmpty">No matching page found.</div>
</div>

<script>
(() => {
    const input = document.getElementById('mcSearch');
    const cards = Array.from(document.querySelectorAll('#mcGrid .cardx'));
    const empty = document.getElementById('mcEmpty');

    input.addEventListener('input', function () {
        const q = this.value.trim().toLowerCase();
        let visible = 0;

        cards.forEach((card) => {
            const hit = !q || (card.dataset.search || '').includes(q);
            card.style.display = hit ? '' : 'none';
            if (hit) visible++;
        });

        empty.style.display = (q && visible === 0) ? 'block' : 'none';
    });
})();
</script>
@endsection