@extends('layouts.app')

@section('content')
<style>
    .stock-value-wrap { max-width: 1400px; }
    .topbar {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .page-title {
        color: #1E4FA8;
        font-size: 25px;
        font-weight: 900;
    }
    .toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .btn {
        background: #1E4FA8;
        border: 1px solid #1E4FA8;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-weight: 800;
        padding: 10px 13px;
        text-decoration: none;
        white-space: nowrap;
    }
    .btn-green {
        background: #15803d;
        border-color: #15803d;
    }
    .btn-light {
        background: #eef4ff;
        border-color: #d8e4ff;
        color: #1E4FA8;
    }
    .card {
        background: #fff;
        border: 1px solid #e4ebf3;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0,0,0,.05);
        margin-bottom: 14px;
        padding: 14px;
    }
    .filter-grid {
        align-items: end;
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(4, minmax(180px, 1fr));
    }
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    label {
        color: #334155;
        font-size: 13px;
        font-weight: 900;
    }
    .form-control {
        border: 1px solid #d8e1ec;
        border-radius: 8px;
        box-sizing: border-box;
        font-size: 14px;
        min-height: 42px;
        padding: 9px 10px;
        width: 100%;
    }
    .summary-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(3, minmax(170px, 1fr));
        margin-bottom: 14px;
    }
    .summary-box {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 8px;
        padding: 14px;
    }
    .summary-box span {
        color: #166534;
        display: block;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 6px;
    }
    .summary-box strong {
        color: #14532d;
        display: block;
        font-size: 24px;
        font-weight: 900;
    }
    .table-wrap { overflow-x: auto; }
    table {
        border-collapse: collapse;
        min-width: 920px;
        width: 100%;
    }
    th, td {
        border-bottom: 1px solid #edf1f6;
        font-size: 13px;
        padding: 10px 8px;
        text-align: left;
        vertical-align: top;
    }
    th {
        background: #f5f7fb;
        color: #263445;
        font-weight: 900;
    }
    .num {
        font-weight: 800;
        text-align: right;
        white-space: nowrap;
    }
    tfoot td {
        background: #f8fafc;
        font-weight: 900;
    }
    .empty {
        color: #64748b;
        font-weight: 800;
        padding: 18px;
        text-align: center;
    }
    @media(max-width: 900px) {
        .topbar { align-items: stretch; flex-direction: column; }
        .filter-grid, .summary-grid { grid-template-columns: 1fr; }
    }
</style>

<div class="stock-value-wrap">
    <div class="topbar">
        <div class="page-title">Stock Value Report</div>
        <div class="toolbar">
            @if($generated)
                <a class="btn btn-green" href="{{ url('/inventory/stock-value?'.http_build_query(array_merge($filters, ['generate' => 1, 'download' => 'csv']))) }}">Download CSV</a>
                <a class="btn btn-light" target="_blank" href="{{ url('/inventory/stock-value?'.http_build_query(array_merge($filters, ['generate' => 1, 'download' => 'pdf']))) }}">Download PDF</a>
            @endif
            <a class="btn btn-light" href="{{ url('/products') }}">Back to Products</a>
            <a class="btn btn-light" href="{{ url('/inventory') }}">Inventory</a>
        </div>
    </div>

    <div class="card">
        <form method="GET" action="{{ url('/inventory/stock-value') }}" class="filter-grid">
            <input type="hidden" name="generate" value="1">
            <div class="form-group">
                <label>Select Store</label>
                <select class="form-control" name="branch_id">
                    <option value="">All stores</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ (string) $filters['branch_id'] === (string) $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Category (Optional)</label>
                <select class="form-control" name="category_id">
                    <option value="">All Categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ (string) $filters['category_id'] === (string) $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>As Of Date</label>
                <input class="form-control" type="date" name="as_of_date" value="{{ $filters['as_of_date'] }}">
            </div>
            <div class="form-group">
                <button class="btn btn-green" type="submit">Generate Report</button>
            </div>
        </form>
    </div>

    @if($generated)
        <div class="summary-grid">
            <div class="summary-box">
                <span>Total Products</span>
                <strong>{{ number_format($summary->total_products) }}</strong>
            </div>
            <div class="summary-box">
                <span>Total Quantity</span>
                <strong>{{ number_format($summary->total_quantity, 2) }}</strong>
            </div>
            <div class="summary-box">
                <span>Total Stock Value</span>
                <strong>{{ \App\Models\SystemSetting::formatMoney($summary->total_value) }}</strong>
            </div>
        </div>

        <div class="card table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Barcode</th>
                        <th>Product Name</th>
                        <th>Category</th>
                        <th class="num">Quantity</th>
                        <th class="num">Unit Cost</th>
                        <th class="num">Selling Price</th>
                        <th class="num">Total Value</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($rows as $row)
                        <tr>
                            <td>{{ $row->barcode ?: '-' }}</td>
                            <td>{{ $row->name }}</td>
                            <td>{{ $row->category }}</td>
                            <td class="num">{{ number_format($row->quantity, 2) }}</td>
                            <td class="num">{{ \App\Models\SystemSetting::formatMoney($row->unit_cost) }}</td>
                            <td class="num">{{ \App\Models\SystemSetting::formatMoney($row->selling_price) }}</td>
                            <td class="num">{{ \App\Models\SystemSetting::formatMoney($row->total_value) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="empty">No products found for this filter.</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">Totals</td>
                        <td class="num">{{ number_format($summary->total_quantity, 2) }}</td>
                        <td class="num">{{ \App\Models\SystemSetting::formatMoney($summary->total_unit_cost) }}</td>
                        <td class="num">{{ \App\Models\SystemSetting::formatMoney($summary->total_selling_price) }}</td>
                        <td class="num">{{ \App\Models\SystemSetting::formatMoney($summary->total_value) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    @endif
</div>
@endsection