@extends('layouts.master')

@section('title', 'Taxes')

@section('content')
<style>
:root{--sky:#0ea5e9;--sky-deep:#0369a1;--sky-ghost:rgba(14,165,233,.07);--sky-border:rgba(14,165,233,.2);--ink-mid:#3f4a5a;--white:#fff;--off:#f7fbff;--surface:#eef6fd;--border:#daeaf8;--danger:#ef4444;--danger-bg:rgba(239,68,68,.08);--danger-border:rgba(239,68,68,.2);--amber:#f59e0b;--amber-bg:rgba(245,158,11,.08);--amber-border:rgba(245,158,11,.22);--fd:'Cormorant Garamond',Georgia,serif;--fb:'DM Sans',system-ui,sans-serif;--fm:'DM Mono',monospace}
.main-content{background:var(--off);font-family:var(--fb)}
.main-content .container,.main-content .tx-page,.main-content .page-wrap,.main-content .content-wrapper,.main-content .wrap{background:var(--white);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 24px rgba(14,165,233,.1)}
.main-content h1,.main-content h2,.main-content h3{font-family:var(--fd);color:var(--sky-deep)}
.main-content .btn,.main-content .back-btn,.main-content .option-btn,.main-content .submit-btn,.main-content .refresh-btn,.main-content .action-btn,.main-content .act-btn,.main-content .link{border-radius:10px!important;font-family:var(--fb)!important;font-weight:600!important}
.main-content .btn-secondary,.main-content .back-btn,.main-content .refresh-btn,.main-content .btn-muted,.main-content .btn-ghost{background:#fff!important;color:var(--ink-mid)!important;border:1px solid var(--sky-border)!important}
.main-content .btn-primary,.main-content .option-btn,.main-content .submit-btn{background:linear-gradient(135deg,var(--sky-deep),var(--sky))!important;color:#fff!important;border:1px solid var(--sky-deep)!important}
.main-content table,.main-content .table{border-color:var(--border)!important}
.main-content thead,.main-content thead tr,.main-content th,.main-content .table thead th,.main-content .table-head-row{background:var(--surface)!important;color:var(--ink-mid)!important;border-color:var(--border)!important}
.main-content tbody tr:hover,.main-content .tx-row:hover{background:var(--sky-ghost)!important}
.main-content input,.main-content select,.main-content textarea{border:1px solid var(--border)!important;border-radius:10px!important;font-family:var(--fb)!important}
.main-content input:focus,.main-content select:focus,.main-content textarea:focus{border-color:var(--sky)!important;box-shadow:0 0 0 3px rgba(14,165,233,.12)!important}
.main-content .rate-badge,.main-content .badge,.main-content .status-badge{font-family:var(--fm)}
.main-content .actions,.main-content .cell-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.main-content a[href*='/edit'],.main-content .act-edit,.main-content .btn-warning{background:var(--amber-bg)!important;color:#92400e!important;border:1px solid var(--amber-border)!important}
.main-content .act-delete,.main-content form button[type='submit'].btn-danger,.main-content form button[onclick*='delete']{background:var(--danger-bg)!important;color:#991b1b!important;border:1px solid var(--danger-border)!important}
.main-content a[href*='/show'],.main-content .act-view{background:var(--sky-ghost)!important;color:var(--sky-deep)!important;border:1px solid var(--sky-border)!important}
</style>
<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&family=DM+Mono:wght@400&display=swap" rel="stylesheet">

<style>
/* ============================================================
   PROLEX — TAXES INDEX — SKY BLUE · WHITE
   ============================================================ */

:root {
    --sky:         #0ea5e9;
    --sky-deep:    #0369a1;
    --sky-light:   #38bdf8;
    --sky-pale:    #e0f2fe;
    --sky-ghost:   rgba(14,165,233,0.07);
    --sky-border:  rgba(14,165,233,0.2);
    --sky-glow:    rgba(14,165,233,0.18);

    --ink:         #0c0f14;
    --ink-mid:     #3f4a5a;
    --ink-muted:   #7a8899;
    --ink-faint:   #b0bcc8;

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

    --danger:      #ef4444;
    --danger-bg:   rgba(239,68,68,0.08);
    --danger-border: rgba(239,68,68,0.2);
    --amber:       #f59e0b;
    --amber-bg:    rgba(245,158,11,0.08);
    --amber-border: rgba(245,158,11,0.22);

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-mono:    'DM Mono', monospace;

    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --shadow-sm:  0 1px 4px rgba(14,165,233,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:  0 4px 20px rgba(14,165,233,0.1),  0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg:  0 10px 40px rgba(14,165,233,0.13), 0 4px 12px rgba(0,0,0,0.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--off-white);
    font-family: var(--font-body);
    color: var(--ink);
    min-height: 100vh;
}

/* ── page ── */
.tx-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 44px 24px 72px;
    animation: pageIn 0.55s var(--ease-smooth) both;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── breadcrumb ── */
.tx-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-faint);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.tx-breadcrumb a { color: var(--ink-faint); text-decoration: none; transition: color 150ms; }
.tx-breadcrumb a:hover { color: var(--sky); }
.tx-breadcrumb .sep { font-size: 10px; color: var(--border-mid); }
.tx-breadcrumb .current { color: var(--sky); }

/* ── hero ── */
.tx-hero {
    background: linear-gradient(135deg, var(--sky-deep) 0%, var(--sky) 65%, var(--sky-light) 100%);
    border-radius: 22px;
    padding: 32px 40px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: var(--shadow-lg);
}

.tx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.035) 0px,
        rgba(255,255,255,0.035) 1px,
        transparent 1px,
        transparent 14px
    );
}

.tx-hero::after {
    content: '';
    position: absolute;
    right: -80px; top: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-text { position: relative; z-index: 1; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 10px;
}

.hero-eyebrow .dot {
    width: 5px; height: 5px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
}

.tx-hero h1 {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.hero-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
}

.hero-stat {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 18px 28px;
    text-align: center;
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.stat-val {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-top: 5px;
}

/* ── toolbar ── */
.tx-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.toolbar-left { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar-right { margin-left: auto; }

/* Search */
.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 13px;
    font-size: 15px;
    color: var(--ink-faint);
    pointer-events: none;
}

#searchInput {
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--ink);
    background: var(--white);
    width: 260px;
    transition: border-color 200ms, box-shadow 200ms;
}

#searchInput::placeholder { color: var(--ink-faint); }

#searchInput:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 180ms var(--ease-smooth);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.btn-ghost {
    background: var(--white);
    color: var(--ink-mid);
    border: 1px solid var(--border-mid);
}

.btn-ghost:hover {
    background: var(--surface);
    border-color: var(--sky-border);
    color: var(--sky-deep);
}

.btn-primary {
    background: var(--sky);
    color: white;
    box-shadow: 0 4px 14px var(--sky-glow);
}

.btn-primary:hover {
    background: var(--sky-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px var(--sky-glow);
}

.btn-primary:active { transform: translateY(0); }

/* ── table card ── */
.tx-table-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    animation: pageIn 0.55s var(--ease-smooth) both;
    animation-delay: 0.08s;
}

/* table header row */
.table-head-row {
    display: grid;
    grid-template-columns: 1.6fr 2.4fr 1fr 1.4fr;
    padding: 13px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.th-cell {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 5px;
}

.th-cell::before {
    content: '';
    display: inline-block;
    width: 2px;
    height: 8px;
    background: var(--sky);
    border-radius: 2px;
    opacity: 0.5;
}

/* data rows */
.tx-row {
    display: grid;
    grid-template-columns: 1.6fr 2.4fr 1fr 1.4fr;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    transition: background 160ms;
    animation: rowIn 0.4s var(--ease-smooth) both;
}

.tx-row:last-child { border-bottom: none; }

.tx-row:hover { background: var(--sky-ghost); }

@keyframes rowIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.tx-row:nth-child(1)  { animation-delay: 0.05s; }
.tx-row:nth-child(2)  { animation-delay: 0.10s; }
.tx-row:nth-child(3)  { animation-delay: 0.15s; }
.tx-row:nth-child(4)  { animation-delay: 0.20s; }
.tx-row:nth-child(5)  { animation-delay: 0.25s; }

.cell-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.cell-desc {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.4;
}

.cell-desc.na {
    color: var(--ink-faint);
    font-style: italic;
    font-size: 12px;
}

.rate-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--sky-ghost);
    border: 1px solid var(--sky-border);
    color: var(--sky-deep);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
}

/* action buttons inside table */
.cell-actions { display: flex; gap: 7px; align-items: center; }

.act-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border: none;
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 160ms var(--ease-smooth);
    letter-spacing: 0.02em;
}

.act-edit {
    background: var(--amber-bg);
    color: #92400e;
    border: 1px solid var(--amber-border);
}

.act-edit:hover {
    background: var(--amber);
    color: white;
    border-color: var(--amber);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(245,158,11,0.25);
}

.act-delete {
    background: var(--danger-bg);
    color: #991b1b;
    border: 1px solid var(--danger-border);
}

.act-delete:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(239,68,68,0.25);
}

/* empty state */
.empty-row {
    padding: 60px 24px;
    text-align: center;
}

.empty-icon {
    font-size: 40px;
    margin-bottom: 14px;
    opacity: 0.35;
}

.empty-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--ink-mid);
    margin-bottom: 6px;
}

.empty-sub {
    font-size: 13px;
    color: var(--ink-faint);
}

/* no-results row (injected by JS) */
.no-results-row {
    padding: 40px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-faint);
    font-style: italic;
    display: none;
}

/* ── confirm modal ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    animation: fadeIn 0.2s ease both;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 30px;
    max-width: 400px;
    width: 92%;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.35s var(--ease-spring) both;
    position: relative;
    overflow: hidden;
}

.modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--danger), #f87171);
}

@keyframes modalIn {
    from { transform: scale(0.92) translateY(12px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-icon {
    width: 52px; height: 52px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
}

.modal-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.modal-body {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.modal-cancel {
    padding: 10px 20px;
    background: var(--white);
    border: 1px solid var(--border-mid);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-mid);
    cursor: pointer;
    transition: all 160ms;
}

.modal-cancel:hover { background: var(--surface); }

.modal-confirm {
    padding: 10px 20px;
    background: var(--danger);
    border: none;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 160ms;
    box-shadow: 0 4px 12px rgba(239,68,68,0.25);
}

.modal-confirm:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239,68,68,0.3);
}

/* responsive */
@media (max-width: 768px) {
    .tx-page { padding: 28px 14px 48px; }
    .tx-hero { padding: 24px 22px; flex-direction: column; align-items: flex-start; }
    .tx-hero h1 { font-size: 30px; }
    .hero-stat { width: 100%; }
    .table-head-row,
    .tx-row { grid-template-columns: 1fr 1fr; }
    .th-cell:nth-child(2),
    .tx-row > *:nth-child(2) { display: none; }
    #searchInput { width: 200px; }
    .toolbar-right { margin-left: 0; width: 100%; }
    #searchInput { width: 100%; }
}
</style>

<div class="tx-page">

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

    {{-- Hero --}}
    <div class="tx-hero">
        <div class="hero-text">
            <div class="hero-eyebrow"><span class="dot"></span> Tax Configuration</div>
            <h1>Tax Registry</h1>
            <p class="hero-sub">Manage applicable tax rates and categories</p>
        </div>
        <div class="hero-stat">
            <div class="stat-val">{{ $taxes->count() }}</div>
            <div class="stat-label">Total Taxes</div>
        </div>
    </div>

    {{-- Toolbar --}}
    <div class="tx-toolbar">
        <div class="toolbar-left">
            <a href="{{ route('modules.edit') }}" class="btn btn-ghost">
                ← Edit Menu
            </a>
            <a href="{{ route('taxes.create') }}" class="btn btn-primary">
                + Add Tax
            </a>
        </div>
        <div class="toolbar-right">
            <div class="search-wrap">
                <span class="search-icon">🔍</span>
                <input type="text" id="searchInput" placeholder="Search taxes…">
            </div>
        </div>
    </div>

    {{-- Table card --}}
    <div class="tx-table-card">

        <div class="table-head-row">
            <div class="th-cell">Tax Name</div>
            <div class="th-cell">Description</div>
            <div class="th-cell">Rate</div>
            <div class="th-cell">Actions</div>
        </div>

        <div id="taxRows">
            @forelse($taxes as $tax)
            <div class="tx-row" data-search="{{ strtolower($tax->tax_name . ' ' . $tax->tax_description . ' ' . $tax->tax_rate) }}">
                <div class="cell-name">{{ $tax->tax_name }}</div>
                <div class="cell-desc {{ !$tax->tax_description ? 'na' : '' }}">
                    {{ $tax->tax_description ?: 'No description' }}
                </div>
                <div>
                    <span class="rate-badge">{{ $tax->tax_rate }}%</span>
                </div>
                <div class="cell-actions">
                    <a href="{{ route('taxes.show', $tax->tax_id) }}" class="act-btn btn-ghost">
                        👁 View
                    </a>
                    <a href="{{ route('taxes.edit', $tax->tax_id) }}" class="act-btn act-edit">
                        ✎ Edit
                    </a>
                    <button
                        class="act-btn act-delete"
                        data-action="{{ route('taxes.destroy', $tax->tax_id) }}"
                        data-name="{{ $tax->tax_name }}"
                        onclick="confirmDelete(this.dataset.action, this.dataset.name)"
                    >
                        ✕ Delete
                    </button>
                </div>
            </div>
            @empty
            <div class="empty-row">
                <div class="empty-icon">📋</div>
                <div class="empty-title">No taxes found</div>
                <div class="empty-sub">Add your first tax rate to get started</div>
            </div>
            @endforelse

            <div class="no-results-row" id="noResults">
                No taxes match your search.
            </div>
        </div>

    </div>
</div>

{{-- Delete confirm modal --}}
<div id="deleteModal" class="modal-overlay" style="display:none;">
    <div class="modal">
        <div class="modal-icon">🗑</div>
        <div class="modal-title">Delete Tax?</div>
        <div class="modal-body">
            You are about to delete <strong id="deleteTaxName"></strong>. This action cannot be undone.
        </div>
        <div class="modal-actions">
            <button class="modal-cancel" onclick="closeModal()">Cancel</button>
            <button class="modal-confirm" onclick="submitDelete()">Delete</button>
        </div>
    </div>
</div>

{{-- Hidden delete form --}}
<form id="deleteForm" method="POST" style="display:none;">
    @csrf
    @method('DELETE')
</form>

<script>
(function () {
    'use strict';

    /* ── search ── */
    document.getElementById('searchInput').addEventListener('input', function () {
        const term = this.value.toLowerCase().trim();
        const rows = document.querySelectorAll('#taxRows .tx-row');
        let visible = 0;

        rows.forEach(row => {
            const match = !term || row.dataset.search.includes(term);
            row.style.display = match ? '' : 'none';
            if (match) visible++;
        });

        document.getElementById('noResults').style.display =
            (visible === 0 && rows.length > 0) ? 'block' : 'none';
    });

    /* ── delete modal ── */
    let pendingAction = '';

    window.confirmDelete = function (action, name) {
        pendingAction = action;
        document.getElementById('deleteTaxName').textContent = name;
        document.getElementById('deleteModal').style.display = 'flex';
    };

    window.closeModal = function () {
        document.getElementById('deleteModal').style.display = 'none';
        pendingAction = '';
    };

    window.submitDelete = function () {
        const form = document.getElementById('deleteForm');
        form.action = pendingAction;
        form.submit();
    };

    // Close on outside click
    document.getElementById('deleteModal').addEventListener('click', function (e) {
        if (e.target === this) closeModal();
    });

    // Close on Escape
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeModal();
    });
})();
</script>

@endsection