@extends('layouts.app')
@section('title', 'Shop Stock Report')

@section('css')
<style>
    .report-header {
        text-align: center;
        margin-bottom: 20px;
        border-bottom: 2px solid #333;
        padding-bottom: 10px;
    }
    .report-title {
        font-size: 24px;
        font-weight: bold;
        text-transform: uppercase;
        color: #1a2a6c;
    }
    .report-content {
        column-count: 3;
        column-gap: 30px;
        column-rule: 1px solid #ddd;
    }
    @media (max-width: 992px) {
        .report-content {
            column-count: 2;
        }
    }
    @media (max-width: 576px) {
        .report-content {
            column-count: 1;
        }
    }
    .brand-section {
        break-inside: avoid-column;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    .brand-name {
        font-size: 16px;
        font-weight: 800;
        text-transform: uppercase;
        border-bottom: 2px solid #444;
        margin-bottom: 8px;
        color: #000;
        display: flex;
        justify-content: space-between;
    }
    .item-row {
        display: flex;
        justify-content: space-between;
        padding: 2px 0;
        font-size: 13px;
        border-bottom: 1px dotted #ccc;
    }
    .item-name {
        flex: 1;
        padding-right: 10px;
    }
    .item-qty {
        font-weight: bold;
        min-width: 30px;
        text-align: right;
    }
    .brand-total {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        margin-top: 5px;
        padding-top: 5px;
        border-top: 1px solid #333;
        font-size: 14px;
    }
    .serial-list {
        font-size: 11px;
        color: #555;
        padding-left: 15px;
        margin-top: 2px;
        font-style: italic;
    }
    .serial-badge {
        display: inline-block;
        background: #f0f0f0;
        padding: 0 5px;
        margin-right: 5px;
        border: 1px solid #ddd;
        border-radius: 3px;
    }
    
    @media print {
        .sidebar-wrapper, .header-colors-indigators, .topbar, .page-footer, .btn-print-area, .breadcrumb-section {
            display: none !important;
        }
        .page-wrapper {
            margin-left: 0 !important;
            margin-top: 0 !important;
        }
        .card {
            border: none !important;
            box-shadow: none !important;
        }
        .report-content {
            column-count: 3 !important;
        }
    }
</style>
@endsection

@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <div class="breadcrumb-section">
            <x-breadcrumb :langArray="['app.reports', 'Shop Stock Report']"/>
        </div>

        <div class="card btn-print-area">
            <div class="card-body">
                <form action="{{ route('report.stock_report.shop_stock') }}" method="GET" class="row g-3 align-items-center">
                    <div class="col-md-3">
                        <label class="form-label">Warehouse</label>
                        <select name="warehouse_id" class="form-select single-select-clear-field" data-placeholder="All Warehouses">
                            <option></option>
                            @foreach(App\Models\User::find(auth()->id())->getAccessibleWarehouses() as $warehouse)
                                <option value="{{ $warehouse->id }}" {{ request('warehouse_id') == $warehouse->id ? 'selected' : '' }}>
                                    {{ $warehouse->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Category</label>
                        <x-dropdown-item-category selected="{{ request('item_category_id') }}" :isMultiple=false :showSelectOptionAll=true />
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Brand</label>
                        <select name="brand_id" class="form-select single-select-clear-field" data-placeholder="All Brands">
                            <option></option>
                            @foreach($allBrands as $brand)
                                <option value="{{ $brand->id }}" {{ request('brand_id') == $brand->id ? 'selected' : '' }}>
                                    {{ $brand->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 text-end mt-4">
                        <button type="submit" class="btn btn-dark px-4">
                            <i class='bx bx-list-check'></i> Generate
                        </button>
                        <button type="button" class="btn btn-primary px-4" onclick="window.print()">
                            <i class='bx bx-printer'></i> Print
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="report-header">
                    <div class="report-title">Stock Summary</div>
                    <div class="text-muted">
                        Warehouse = [{{ request('warehouse_id') ? App\Models\Warehouse::find(request('warehouse_id'))->name : 'ALL' }}]
                        @if(request('item_category_id'))
                            , Category = [{{ App\Models\Items\ItemCategory::find(request('item_category_id'))->name }}]
                        @endif
                        @if(request('brand_id'))
                            , Brand = [{{ App\Models\Items\Brand::find(request('brand_id'))->name }}]
                        @endif
                    </div>
                </div>

                <div class="report-content">
                    @foreach($brands as $brand)
                    <div class="brand-section">
                        <div class="brand-name">
                            <span>{{ $brand->name }}</span>
                        </div>
                        
                        @php $totalBrandQty = 0; @endphp
                        @foreach($brand->items as $item)
                            <div class="item-container">
                                <div class="item-row">
                                    <span class="item-name">{{ $item->name }}</span>
                                    <span class="item-qty">{{ number_format($item->total_quantity, 0) }}</span>
                                </div>
                                @if(request('brand_id') && $item->tracking_type == 'serial' && $item->itemSerialQuantities->count() > 0)
                                    <div class="serial-list">
                                        @foreach($item->itemSerialQuantities as $sq)
                                            <span class="serial-badge">{{ $sq->itemSerialMaster->serial_code }}</span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                            @php $totalBrandQty += $item->total_quantity; @endphp
                        @endforeach

                        <div class="brand-total">
                            <span>Category Total =</span>
                            <span>{{ number_format($totalBrandQty, 0) }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
                
                <div class="mt-4 text-end d-none d-print-block">
                    <small>Printed on: {{ date('d/m/Y H:i') }}</small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{ versionedAsset('custom/js/common/common.js') }}"></script>
@endsection