@extends('merchant.layout')

@section('title','Dashboard')

@section('content')

<!-- =========================
STYLES
========================= -->
<style>
/* Stat Cards */
.stat-card {
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    transition: .35s cubic-bezier(.4,0,.2,1);
    animation: fadeUp .6s ease forwards;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 25px 50px rgba(0,0,0,.15);
}

.stat-card i {
    transition: .35s;
}

.stat-card:hover i {
    transform: scale(1.15) rotate(-5deg);
}

/* Progress */
.progress {
    overflow: hidden;
}
.progress-bar {
    animation: loadBar 1.2s ease-out forwards;
}

/* Table */
.table-hover tbody tr {
    transition: .25s;
    animation: fadeIn .5s ease forwards;
}
.table-hover tbody tr:hover {
    background-color: #f8fafc;
    transform: scale(1.01);
}

/* Badges */
.badge {
    font-weight: 600;
    border-radius: 8px;
}

/* Buttons */
.btn-light {
    transition: .2s;
}
.btn-light:hover {
    background: #f9731620;
    color: #f97316;
}

/* Animations */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}

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

@keyframes loadBar {
    from { width: 0; }
}
</style>

<!-- =========================
PAGE TITLE
========================= -->
<h3 class="fw-bold mb-4">Dashboard Overview</h3>

<!-- =========================
STATS ROW
========================= -->
<div class="row g-4 mb-4">

    <div class="col-md-3">
        <div class="stat-card bg-primary text-white">
            <div class="d-flex justify-content-between">
                <div>
                    <small class="opacity-75">Today Orders</small>
                    <h3 class="fw-bold mb-0 counter" data-count="0">0</h3>
                </div>
                <i class="bi bi-box-seam fs-1 opacity-50"></i>
            </div>
            <div class="progress mt-3" style="height:6px">
                <div class="progress-bar bg-white" style="width:0%"></div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="stat-card bg-success text-white">
            <div class="d-flex justify-content-between">
                <div>
                    <small class="opacity-75">Delivered</small>
                    <h3 class="fw-bold mb-0 counter" data-count="0">0</h3>
                </div>
                <i class="bi bi-check-circle fs-1 opacity-50"></i>
            </div>
            <div class="progress mt-3" style="height:6px">
                <div class="progress-bar bg-white" style="width:0%"></div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="stat-card bg-warning text-dark">
            <div class="d-flex justify-content-between">
                <div>
                    <small class="opacity-75">Pending</small>
                    <h3 class="fw-bold mb-0 counter" data-count="0">0</h3>
                </div>
                <i class="bi bi-hourglass-split fs-1 opacity-50"></i>
            </div>
            <div class="progress mt-3" style="height:6px">
                <div class="progress-bar bg-dark" style="width:0%"></div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="stat-card bg-light">
            <div class="d-flex justify-content-between">
                <div>
                    <small class="text-muted">COD Amount</small>
                    <h4 class="fw-bold mb-0 text-primary counter" data-count="0">0</h4>
                </div>
                <i class="bi bi-cash-stack fs-1 text-primary opacity-50"></i>
            </div>
            <small class="text-muted mt-2 d-block">Today collection</small>
        </div>
    </div>

</div>

<!-- =========================
RECENT ORDERS
========================= -->
<div class="card border-0 shadow-sm">
    <div class="card-body">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="fw-semibold mb-0">Recent Orders</h5>

            <div class="d-flex gap-2">
                <input type="text" class="form-control form-control-sm"
                       placeholder="Search order...">
                <select class="form-select form-select-sm">
                    <option>Status</option>
                    <option>Delivered</option>
                    <option>Pending</option>
                </select>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Status</th>
                        <th>Amount</th>
                        <th>Date</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>

                    <tr>
                        <td class="fw-semibold">#ORD-1001</td>
                        <td>Amila</td>
                        <td>
                            <span class="badge bg-success-subtle text-success">Delivered</span>
                        </td>
                        <td>LKR 3,500</td>
                        <td>Today</td>
                        <td class="text-end">
                            <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="View Order">
                                <i class="bi bi-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Track Order">
                                <i class="bi bi-geo-alt"></i>
                            </button>
                        </td>
                    </tr>

                    <tr>
                        <td class="fw-semibold">#ORD-1002</td>
                        <td>Nimal</td>
                        <td>
                            <span class="badge bg-warning-subtle text-warning">Pending</span>
                        </td>
                        <td>LKR 1,800</td>
                        <td>Today</td>
                        <td class="text-end">
                            <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="View Order">
                                <i class="bi bi-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Track Order">
                                <i class="bi bi-geo-alt"></i>
                            </button>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>

    </div>
</div>

<!-- =========================
SCRIPTS
========================= -->
<script>
/* Counter animation */
document.querySelectorAll('.counter').forEach(counter => {
    let target = +counter.dataset.count;
    let count = 0;
    let step = Math.ceil(target / 60);

    let update = () => {
        count += step;
        if (count >= target) {
            counter.innerText = target.toLocaleString();
        } else {
            counter.innerText = count.toLocaleString();
            requestAnimationFrame(update);
        }
    };
    update();
});

/* Tooltips */
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
    new bootstrap.Tooltip(el);
});

/* Stagger table animation */
document.querySelectorAll('tbody tr').forEach((row, i) => {
    row.style.animationDelay = `${i * 0.08}s`;
});
</script>

@endsection