@extends('layout.app')

@section('content')
<div class="container mt-4">

    <h2 class="mb-4 fw-bold">Reports Dashboard</h2>

    <div class="row g-4">

        <!-- Purchase Report -->
        <div class="col-md-4">
            <a href="{{ route('user.reports.purchases') }}" class="text-decoration-none">
                <div class="card shadow-sm p-4 text-center hover-card">
              <i class="fa fa-search-dollar fa-3x text-primary mb-3"></i>
                    <h5>Individual Purchase Reports</h5>
                </div>
            </a>
        </div>

        <!-- Sales Report -->
        <div class="col-md-4">
            <a href="{{ route('user.reports.sales') }}" class="text-decoration-none">
                <div class="card shadow-sm p-4 text-center hover-card">
      <i class="fa fa-file-alt fa-3x text-success mb-3"></i>

                    <h5>Individual Sales Reports</h5>
                </div>
            </a>
        </div>
          <div class="col-md-4">
            <a href="{{ route('user.reports.dailysales') }}" class="text-decoration-none">
                <div class="card shadow-sm p-4 text-center hover-card">
                    <i class="fa fa-chart-line fa-3x text-success mb-3"></i>
                    <h5>daily Sales Reports</h5>
                </div>
            </a>
        </div>
<div class="col-md-4">
    <a href="{{ route('user.reports.dailypurchase') }}" class="text-decoration-none">
        <div class="card shadow-sm p-4 text-center hover-card">
            <i class="fa fa-shopping-cart fa-3x text-primary mb-3"></i>
            <h5>Daily Purchase Reports</h5>
        </div>
    </a>
</div>
<div class="col-md-4">
    <a href="{{ route('user.reports.purchaseledger') }}" class="text-decoration-none">
        <div class="card shadow-sm p-4 text-center hover-card">
            <i class="fa fa-book fa-3x text-success mb-3"></i>
            <h5>Purchase Ledger</h5>
        </div>
    </a>
</div>
<div class="col-md-4">
    <a href="{{ route('user.reports.ledgersales') }}" class="text-decoration-none">
        <div class="card shadow-sm p-4 text-center hover-card">
            <i class="fa fa-book fa-3x text-danger mb-3"></i>
            <h5>Sales Ledger</h5>
        </div>
    </a>
</div>

        <!-- Stock Report -->
        <!-- <div class="col-md-4">
            <a href="{{ route('user.reports.stock') }}" class="text-decoration-none">
                <div class="card shadow-sm p-4 text-center hover-card">
                    <i class="fa fa-boxes fa-3x text-warning mb-3"></i>
                    <h5>Stock Report</h5>
                </div>
            </a>
        </div> -->

    </div>

</div>

<style>
.hover-card {
    transition: .3s;
    border-radius: 12px;
}
.hover-card:hover {
    transform: translateY(-5px);
    background: #f1faff;
}
</style>
<script>
document.addEventListener("keydown", function(e) {

    // If user is typing inside input, textarea — ignore backspace
    const active = document.activeElement;
    const typingTags = ["INPUT", "TEXTAREA"];

    if (typingTags.includes(active.tagName)) return;

    // Backspace = go back
    if (e.key === "Backspace") {
        e.preventDefault();
        window.location.href = "{{ route('user.dashboard') }}";
    }
});
</script>
@endsection