@extends('layout.app')
@section('title', 'Stock Summary Report')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
    <style>
        .drilldown-row { cursor: pointer; }
        .drilldown-row:hover td { background-color: rgba(199, 92, 16, 0.05) !important; }
        .bal-cell { background-color: rgba(255, 193, 7, 0.08) !important; }
        .bal-header { background-color: rgba(255, 193, 7, 0.18) !important; color: #856404 !important; }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center justify-content-between">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('inventory.reports.stock-summary') }}">Stock Groups</a>
        </li>
        @if($level == 2 && $category)
            <li class="breadcrumb-item active">{{ $category->category_name }}</li>
        @elseif($level == 3 && $product)
            <li class="breadcrumb-item">
                <a href="{{ route('inventory.reports.stock-summary', ['level' => 2, 'category_id' => $category->id]) }}">{{ $category->category_name }}</a>
            </li>
            <li class="breadcrumb-item active">{{ $product->product_name }}</li>
        @else
            <li class="breadcrumb-item active">Stock Groups</li>
        @endif
    </ol>
</div>

<div class="app-body">
    <div class="row gx-3">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header py-3 bg-white border-bottom">
                    <h6 class="m-0 fw-bold text-dark">
                        @if($level == 1)
                            <i class="ri-folder-line text-warning me-1"></i> Stock Groups Valuation
                        @elseif($level == 2 && $category)
                            <i class="ri-box-3-line text-warning me-1"></i> Items in: {{ $category->category_name }}
                        @elseif($level == 3 && $product)
                            <i class="ri-history-line text-warning me-1"></i> Item Ledger: {{ $product->product_name }}
                            @if($product->brand)
                                <span class="badge bg-light text-muted border ms-2">{{ $product->brand->brand_name }}</span>
                            @endif
                        @endif
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">

                        {{-- Level 1 table --}}
                        @if($level == 1)
                        <table id="stockSummaryTable" class="table truncate m-0 align-middle">
                            <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>Stock Group</th>
                                    <th class="text-end">Total Qty</th>
                                    <th class="text-end">Avg Rate</th>
                                    <th class="text-end">Total Value</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                        {{-- Level 2 table --}}
                        @elseif($level == 2)
                        <table id="stockSummaryTable" class="table truncate m-0 align-middle">
                            <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>Item Name</th>
                                    <th>Brand</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Unit</th>
                                    <th class="text-end">Avg Rate</th>
                                    <th class="text-end">Total Value</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                        {{-- Level 3 table --}}
                        @elseif($level == 3)
                        <table id="stockSummaryTable" class="table truncate m-0 align-middle">
                            <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>Voucher Type</th>
                                    <th>Manufacturer</th>
                                    <th>Brand</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-center">Unit</th>
                                    <th class="text-end">Rate</th>
                                    <th class="text-end">Amount</th>
                                    <th class="text-center bal-header">Bal. Qty</th>
                                    <th class="text-center bal-header">Unit</th>
                                    <th class="text-end bal-header">Bal. Rate</th>
                                    <th class="text-end bal-header">Bal. Amount</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/custom/custom-datatables.js') }}"></script>

    @if($level == 1)
    <script>
        var baseUrl = '{{ url('inventory/reports/stock-summary') }}';

        var table1 = $('#stockSummaryTable').DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            responsive: true,
            ajax: {
                url: '{{ route('inventory.reports.stock-summary.getData') }}',
                data: { level: 1 }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false },
                {
                    data: 'name', name: 'name',
                    render: function(data, type, row) {
                        return '<span class="text-primary fw-semibold" style="cursor:pointer"><i class="ri-folder-open-line me-1"></i>' + data + '</span>';
                    }
                },
                { data: 'qty',    name: 'qty',    className: 'text-end' },
                { data: 'rate',   name: 'rate',   className: 'text-end' },
                { data: 'amount', name: 'amount', className: 'text-end fw-bold' },
            ]
        });

        $('#stockSummaryTable tbody').on('click', 'tr', function() {
            var rowData = table1.row(this).data();
            if (rowData && rowData.id) {
                window.location.href = baseUrl + '?level=2&category_id=' + rowData.id;
            }
        });
    </script>

    @elseif($level == 2)
    <script>
        var baseUrl = '{{ url('inventory/reports/stock-summary') }}';

        var table2 = $('#stockSummaryTable').DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            responsive: true,
            ajax: {
                url: '{{ route('inventory.reports.stock-summary.getData') }}',
                data: { level: 2, category_id: '{{ request('category_id') }}' }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false },
                {
                    data: 'name', name: 'name',
                    render: function(data, type, row) {
                        return '<span class="text-primary fw-semibold" style="cursor:pointer"><i class="ri-box-3-line me-1"></i>' + data + '</span>';
                    }
                },
                { data: 'brand',  name: 'brand' },
                { data: 'qty',    name: 'qty',    className: 'text-end' },
                { data: 'units',  name: 'units',  className: 'text-end' },
                { data: 'rate',   name: 'rate',   className: 'text-end' },
                { data: 'amount', name: 'amount', className: 'text-end fw-bold' },
            ]
        });

        $('#stockSummaryTable tbody').on('click', 'tr', function() {
            var rowData = table2.row(this).data();
            if (rowData && rowData.id) {
                window.location.href = baseUrl + '?level=3&item_id=' + rowData.id;
            }
        });
    </script>

    @elseif($level == 3)
    <script>
        $('#stockSummaryTable').DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            responsive: true,
            ajax: {
                url: '{{ route('inventory.reports.stock-summary.getData') }}',
                data: { level: 3, item_id: '{{ request('item_id') }}' }
            },
            columns: [
                { data: 'DT_RowIndex',  name: 'DT_RowIndex',  searchable: false, orderable: false },
                {
                    data: 'voucher_type', name: 'voucher_type', className: 'text-center',
                    render: function(data, type, row) {
                        var cls = (data.toLowerCase().includes('inward') || data.toLowerCase().includes('purchase'))
                            ? 'bg-soft-success text-success' : 'bg-soft-danger text-danger';
                        return `<span class="badge ${cls}">${data}</span>`;
                    }
                },
                { data: 'manufacturer', name: 'manufacturer' },
                { data: 'brand',        name: 'brand' },
                {
                    data: 'qty', name: 'qty', className: 'text-center fw-bold',
                    render: function(data, type, row) {
                        var cls = row.is_inward ? 'text-success' : 'text-danger';
                        return `<span class="${cls}">${data}</span>`;
                    }
                },
                { data: 'unit',      name: 'unit',      className: 'text-center' },
                { data: 'rate',      name: 'rate',      className: 'text-end' },
                { data: 'amount',    name: 'amount',    className: 'text-end' },
                { data: 'bal_qty',   name: 'bal_qty',   className: 'text-center bal-cell' },
                { data: 'bal_unit',  name: 'bal_unit',  className: 'text-center bal-cell' },
                { data: 'bal_rate',  name: 'bal_rate',  className: 'text-end bal-cell' },
                { data: 'bal_amount',name: 'bal_amount',className: 'text-end bal-cell fw-bold text-dark' },
            ]
        });
    </script>
    @endif
@endpush