@extends('User.layout')

<style>
/* =========================
   TRANSACTION PAGE
========================= */

.transaction-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.transaction-title {
    margin-bottom: 5px;
    color: var(--primary-dark);
    font-family: 'Playfair Display', serif;
    font-size: 27px;
    font-weight: 700;
}

.transaction-subtitle {
    color: #7b847c;
    font-size: 13px;
}

.transaction-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--primary);
    color: var(--gold-light);
    font-size: 22px;
}

/* SUMMARY */

.summary-box {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--cream-light);
}

.summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 19px;
}

.summary-icon.purchased {
    background: rgba(18, 60, 42, 0.1);
    color: var(--primary);
}

.summary-icon.sold {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold-dark);
}

.summary-icon.balance {
    background: rgba(36, 86, 61, 0.12);
    color: var(--primary-light);
}

.summary-box small {
    display: block;
    margin-bottom: 4px;
    color: #777e76;
    font-size: 11px;
}

.summary-box h5 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 800;
}

.summary-box h5 span {
    color: #777e76;
    font-size: 12px;
    font-weight: 600;
}

/* FILTERS */

.transaction-filters {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 0 8px;
    scrollbar-width: none;
}

.transaction-filters::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: var(--cream-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    transition: 0.25s ease;
}

.filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--cream-light);
}

/* TRANSACTION CARD */

.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.transaction-card {
    padding: 19px 21px;
    border: 1px solid #e7ddc5;
    border-radius: 16px;
    background: var(--cream-light);
    box-shadow: 0 4px 16px rgba(11, 41, 29, 0.045);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.transaction-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11, 41, 29, 0.09);
}

.transaction-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.transaction-type {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.transaction-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 13px;
    font-size: 20px;
}

.transaction-product-icon.purchased {
    background: rgba(18, 60, 42, 0.1);
    color: var(--primary);
}

.transaction-product-icon.sold {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold-dark);
}

.transaction-type h6 {
    margin: 0 0 5px;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 800;
}

.transaction-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #858a82;
    font-size: 11px;
}

/* STATUS BADGES */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.status-success {
    background: #e7f5e9;
    color: #278044;
}

.status-pending {
    background: #fff4d9;
    color: #a87512;
}

.status-cancelled {
    background: #fde8e9;
    color: #c62838;
}

/* DIVIDER */

.transaction-divider {
    height: 1px;
    margin: 17px 0;
    background: #eee6d5;
}

/* DETAILS */

.transaction-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.transaction-details small {
    display: block;
    margin-bottom: 6px;
    color: #858a82;
    font-size: 11px;
}

.transaction-details strong {
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 800;
}

.transaction-details strong span {
    color: #858a82;
    font-size: 11px;
    font-weight: 600;
}

.transaction-details .amount {
    color: var(--primary);
}

/* CARD FOOTER */

.transaction-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 17px;
    padding-top: 13px;
    border-top: 1px dashed #e5dbc4;
}

.order-id {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-id small {
    color: #858a82;
    font-size: 10px;
}

.order-id strong {
    overflow-wrap: anywhere;
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
}

.view-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    transition: 0.25s ease;
}

.view-details-btn:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--cream-light);
}

/* EMPTY STATE */

.transaction-empty {
    padding: 55px 20px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--cream-light);
    text-align: center;
}

.transaction-empty > i {
    color: var(--gold-dark);
    font-size: 42px;
}

.transaction-empty h5 {
    margin: 13px 0 5px;
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 800;
}

.transaction-empty p {
    margin: 0;
    color: #858a82;
    font-size: 12px;
}

/* =========================
   DETAILS MODAL
========================= */

.transaction-modal {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--cream-light);
}

.transaction-modal .modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--cream-dark);
}

.transaction-modal .modal-title {
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 800;
}

.transaction-modal .modal-header small {
    color: #858a82;
    font-size: 11px;
}

.transaction-modal .modal-body {
    padding: 23px 22px;
}

.modal-transaction-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: rgba(18, 60, 42, 0.1);
    color: var(--primary);
    font-size: 27px;
}

.modal-transaction-icon.sold {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold-dark);
}

.transaction-modal .modal-body h5 {
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 800;
}

.modal-status {
    color: #278044;
    font-size: 11px;
    font-weight: 700;
}

.modal-amount-box {
    margin: 20px 0;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--cream);
    text-align: center;
}

.modal-amount-box small {
    color: #858a82;
    font-size: 11px;
}

.modal-amount-box h3 {
    margin: 6px 0 0;
    color: var(--primary);
    font-size: 25px;
    font-weight: 800;
}

.modal-details-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modal-details-list > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #eee6d5;
}

.modal-details-list > div:last-child {
    border-bottom: 0;
}

.modal-details-list span {
    color: #858a82;
    font-size: 11px;
}

.modal-details-list strong {
    color: var(--primary-dark);
    font-size: 11px;
    text-align: right;
    overflow-wrap: anywhere;
}

.transaction-modal .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--cream-dark);
}

.modal-close-btn {
    padding: 9px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: var(--cream-light);
    font-size: 12px;
    font-weight: 700;
}

.modal-close-btn:hover {
    background: var(--primary-dark);
    color: var(--cream-light);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 575px) {
    .transaction-title {
        font-size: 23px;
    }

    .transaction-header-icon {
        width: 42px;
        height: 42px;
        font-size: 19px;
    }

    .summary-box {
        gap: 9px;
        padding: 12px 10px;
    }

    .summary-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .summary-box small {
        font-size: 10px;
    }

    .summary-box h5 {
        font-size: 15px;
    }

    .transaction-card {
        padding: 15px;
        border-radius: 14px;
    }

    .transaction-type {
        gap: 9px;
    }

    .transaction-product-icon {
        width: 39px;
        height: 39px;
        font-size: 18px;
    }

    .transaction-type h6 {
        font-size: 12px;
    }

    .transaction-date {
        font-size: 9px;
    }

    .status-badge {
        padding: 5px 7px;
        font-size: 9px;
    }

    .transaction-details strong {
        font-size: 14px;
    }

    .transaction-card-bottom {
        align-items: flex-start;
    }

    .view-details-btn {
        padding: 8px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .transaction-card,
    .filter-btn,
    .view-details-btn {
        transition: none;
    }
}
</style>

@section('title', 'My Transactions')

@section('content')
<div class="container py-4 py-lg-5">

    <!-- PAGE HEADER -->
    <div class="transaction-header mb-4">
        <div>
            <h3 class="transaction-title">My Transactions</h3>
            <p class="transaction-subtitle mb-0">
                Track your gold purchases and sales
            </p>
        </div>
        <div class="transaction-header-icon">
            <i class="bi bi-receipt"></i>
        </div>
    </div>

    <!-- SUMMARY -->
    <div class="row g-3 mb-4">
        <div class="col-6 col-lg-4">
            <div class="summary-box">
                <div class="summary-icon purchased">
                    <i class="bi bi-arrow-down-left"></i>
                </div>
                <div>
                    <small>Total Purchased</small>
                    <h5>12.500 <span>g</span></h5>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-4">
            <div class="summary-box">
                <div class="summary-icon sold">
                    <i class="bi bi-arrow-up-right"></i>
                </div>
                <div>
                    <small>Total Sold</small>
                    <h5>3.250 <span>g</span></h5>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4">
            <div class="summary-box">
                <div class="summary-icon balance">
                    <i class="bi bi-gem"></i>
                </div>
                <div>
                    <small>Net Gold</small>
                    <h5>9.250 <span>g</span></h5>
                </div>
            </div>
        </div>
    </div>

    <!-- FILTERS -->
    <div class="transaction-filters mb-3">
        <button class="filter-btn active" data-filter="all">
            All Transactions
        </button>
        <button class="filter-btn" data-filter="purchased">
            <i class="bi bi-arrow-down-left"></i> Purchased
        </button>
        <button class="filter-btn" data-filter="sold">
            <i class="bi bi-arrow-up-right"></i> Sold
        </button>
    </div>

    <!-- TRANSACTION LIST -->
    <div class="transaction-list">

        <!-- PURCHASED CARD -->
        <div class="transaction-card" data-type="purchased">
            <div class="transaction-card-top">
                <div class="transaction-type">
                    <div class="transaction-product-icon purchased">
                        <i class="bi bi-gem"></i>
                    </div>
                    <div>
                        <h6>Gold Purchased</h6>
                        <span class="transaction-date">
                            <i class="bi bi-calendar3"></i>
                            02 Oct 2026, 10:30 AM
                        </span>
                    </div>
                </div>
                <span class="status-badge status-success">
                    <i class="bi bi-check-circle-fill"></i> Purchased
                </span>
            </div>

            <div class="transaction-divider"></div>

            <div class="transaction-details">
                <div>
                    <small>Gold Quantity</small>
                    <strong>2.500 <span>g</span></strong>
                </div>
                <div>
                    <small>Amount</small>
                    <strong class="amount">₹17,500.00</strong>
                </div>
            </div>

            <div class="transaction-card-bottom">
                <div class="order-id">
                    <small>Order ID</small>
                    <strong>OGP202610020001</strong>
                </div>
                <button class="view-details-btn"
                        type="button"
                        data-bs-toggle="modal"
                        data-bs-target="#transactionModal"
                        data-type="Purchased"
                        data-order="OGP202610020001"
                        data-date="02 Oct 2026, 10:30 AM"
                        data-grams="2.500 g"
                        data-amount="₹17,500.00"
                        data-status="Completed">
                    View Details <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>

        <!-- SOLD CARD -->
        <div class="transaction-card" data-type="sold">
            <div class="transaction-card-top">
                <div class="transaction-type">
                    <div class="transaction-product-icon sold">
                        <i class="bi bi-arrow-up-right"></i>
                    </div>
                    <div>
                        <h6>Gold Sold</h6>
                        <span class="transaction-date">
                            <i class="bi bi-calendar3"></i>
                            28 Sep 2026, 03:15 PM
                        </span>
                    </div>
                </div>
                <span class="status-badge status-success">
                    <i class="bi bi-check-circle-fill"></i> Sold
                </span>
            </div>

            <div class="transaction-divider"></div>

            <div class="transaction-details">
                <div>
                    <small>Gold Quantity</small>
                    <strong>1.250 <span>g</span></strong>
                </div>
                <div>
                    <small>Amount Received</small>
                    <strong class="amount">₹8,750.00</strong>
                </div>
            </div>

            <div class="transaction-card-bottom">
                <div class="order-id">
                    <small>Order ID</small>
                    <strong>OGS202609280001</strong>
                </div>
                <button class="view-details-btn"
                        type="button"
                        data-bs-toggle="modal"
                        data-bs-target="#transactionModal"
                        data-type="Sold"
                        data-order="OGS202609280001"
                        data-date="28 Sep 2026, 03:15 PM"
                        data-grams="1.250 g"
                        data-amount="₹8,750.00"
                        data-status="Completed">
                    View Details <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>

        <!-- PENDING PURCHASE -->
        <div class="transaction-card" data-type="purchased">
            <div class="transaction-card-top">
                <div class="transaction-type">
                    <div class="transaction-product-icon purchased">
                        <i class="bi bi-gem"></i>
                    </div>
                    <div>
                        <h6>Gold Purchased</h6>
                        <span class="transaction-date">
                            <i class="bi bi-calendar3"></i>
                            25 Sep 2026, 11:45 AM
                        </span>
                    </div>
                </div>
                <span class="status-badge status-pending">
                    <i class="bi bi-clock-fill"></i> Pending
                </span>
            </div>

            <div class="transaction-divider"></div>

            <div class="transaction-details">
                <div>
                    <small>Gold Quantity</small>
                    <strong>5.000 <span>g</span></strong>
                </div>
                <div>
                    <small>Amount</small>
                    <strong class="amount">₹35,000.00</strong>
                </div>
            </div>

            <div class="transaction-card-bottom">
                <div class="order-id">
                    <small>Order ID</small>
                    <strong>OGP202609250001</strong>
                </div>
                <button class="view-details-btn"
                        type="button"
                        data-bs-toggle="modal"
                        data-bs-target="#transactionModal"
                        data-type="Purchased"
                        data-order="OGP202609250001"
                        data-date="25 Sep 2026, 11:45 AM"
                        data-grams="5.000 g"
                        data-amount="₹35,000.00"
                        data-status="Pending">
                    View Details <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>

        <!-- CANCELLED SALE -->
        <div class="transaction-card" data-type="sold">
            <div class="transaction-card-top">
                <div class="transaction-type">
                    <div class="transaction-product-icon sold">
                        <i class="bi bi-arrow-up-right"></i>
                    </div>
                    <div>
                        <h6>Gold Sold</h6>
                        <span class="transaction-date">
                            <i class="bi bi-calendar3"></i>
                            20 Sep 2026, 02:00 PM
                        </span>
                    </div>
                </div>
                <span class="status-badge status-cancelled">
                    <i class="bi bi-x-circle-fill"></i> Cancelled
                </span>
            </div>

            <div class="transaction-divider"></div>

            <div class="transaction-details">
                <div>
                    <small>Gold Quantity</small>
                    <strong>2.000 <span>g</span></strong>
                </div>
                <div>
                    <small>Amount</small>
                    <strong class="amount">₹14,000.00</strong>
                </div>
            </div>

            <div class="transaction-card-bottom">
                <div class="order-id">
                    <small>Order ID</small>
                    <strong>OGS202609200001</strong>
                </div>
                <button class="view-details-btn"
                        type="button"
                        data-bs-toggle="modal"
                        data-bs-target="#transactionModal"
                        data-type="Sold"
                        data-order="OGS202609200001"
                        data-date="20 Sep 2026, 02:00 PM"
                        data-grams="2.000 g"
                        data-amount="₹14,000.00"
                        data-status="Cancelled">
                    View Details <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>

    </div>

    <!-- EMPTY STATE -->
    <div class="transaction-empty d-none" id="transactionEmpty">
        <i class="bi bi-receipt"></i>
        <h5>No transactions found</h5>
        <p>Your gold transactions will appear here.</p>
    </div>
</div>

<!-- TRANSACTION DETAILS MODAL -->
<div class="modal fade" id="transactionModal" tabindex="-1"
     aria-labelledby="transactionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content transaction-modal">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="transactionModalLabel">
                        Transaction Details
                    </h5>
                    <small>Gold transaction summary</small>
                </div>
                <button type="button" class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="modal-transaction-icon" id="modalIcon">
                    <i class="bi bi-gem"></i>
                </div>

                <h5 class="text-center mb-1" id="modalType">
                    Gold Purchased
                </h5>
                <p class="text-center modal-status" id="modalStatus">
                    Completed
                </p>

                <div class="modal-amount-box">
                    <small>Transaction Amount</small>
                    <h3 id="modalAmount">₹17,500.00</h3>
                </div>

                <div class="modal-details-list">
                    <div>
                        <span>Order ID</span>
                        <strong id="modalOrder"></strong>
                    </div>
                    <div>
                        <span>Date</span>
                        <strong id="modalDate"></strong>
                    </div>
                    <div>
                        <span>Gold Quantity</span>
                        <strong id="modalGrams"></strong>
                    </div>
                    <div>
                        <span>Transaction Type</span>
                        <strong id="modalTransactionType"></strong>
                    </div>
                    <div>
                        <span>Status</span>
                        <strong id="modalStatusDetail"></strong>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn modal-close-btn"
                        data-bs-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', function () {

    /* FILTER TRANSACTIONS */
    const filterButtons = document.querySelectorAll('.filter-btn');
    const transactionCards = document.querySelectorAll('.transaction-card');
    const emptyState = document.getElementById('transactionEmpty');

    filterButtons.forEach(button => {
        button.addEventListener('click', function () {
            const filter = this.dataset.filter;
            let visibleCount = 0;

            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');

            transactionCards.forEach(card => {
                const show = filter === 'all' || card.dataset.type === filter;

                card.classList.toggle('d-none', !show);

                if (show) visibleCount++;
            });

            emptyState.classList.toggle('d-none', visibleCount > 0);
        });
    });

    /* TRANSACTION DETAILS MODAL */
    const transactionModal = document.getElementById('transactionModal');

    transactionModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        if (!button) return;

        const type = button.dataset.type;
        const status = button.dataset.status;

        document.getElementById('modalType').textContent =
            'Gold ' + type;

        document.getElementById('modalOrder').textContent =
            button.dataset.order;

        document.getElementById('modalDate').textContent =
            button.dataset.date;

        document.getElementById('modalGrams').textContent =
            button.dataset.grams;

        document.getElementById('modalAmount').textContent =
            button.dataset.amount;

        document.getElementById('modalTransactionType').textContent =
            type;

        document.getElementById('modalStatus').textContent = status;
        document.getElementById('modalStatusDetail').textContent = status;

        const icon = document.getElementById('modalIcon');
        icon.classList.toggle('sold', type.toLowerCase() === 'sold');

        icon.innerHTML = type.toLowerCase() === 'sold'
            ? '<i class="bi bi-arrow-up-right"></i>'
            : '<i class="bi bi-gem"></i>';

        const statusText = document.getElementById('modalStatus');
        statusText.style.color =
            status === 'Completed' ? '#278044' :
            status === 'Pending' ? '#a87512' : '#c62838';
    });
});
</script>