@extends('admin.layouts.app')
@section('title', 'Order Summary Details')
@section('page_title', 'Order Summary Details')
@section('content')
<style>
    .table-sm-custom { font-size: 0.8rem; } .table-sm-custom td, .table-sm-custom th { padding: 0.25rem 0.4rem; vertical-align: middle; }
    .rotate-header { height: 120px; width: 18px; vertical-align: middle; text-align: center; }
    .rotate-header > div { writing-mode: vertical-lr; white-space: nowrap; display: inline; }
</style>
<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex gap-2">
                <select id="mainCategoryFilter" class="form-select form-select-sm" style="width:200px">
                    <option value="">All Categories</option>
                    @foreach($mainCategoryOptions as $cat)
                        <option value="{{ $cat }}">{{ $cat }}</option>
                    @endforeach
                </select>
                <select id="shipmentNotesFilter" class="form-select form-select-sm" style="width:250px">
                    <option value="">All Shipment Notes</option>
                    @foreach($shipmentNoteOptions as $note)
                        <option value="{{ $note }}">{{ Str::limit($note, 50) }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-sm table-sm-custom">
                <thead>
                    <tr>
                        <th class="text-center">SL No</th>
                        <th class="text-center">Product Name</th>
                        <th class="text-center">Unit</th>
                        @foreach($customers as $customer)
                            <th class="rotate-header"><div>{{ $customer }}</div></th>
                        @endforeach
                        <th class="text-center">Total Qty</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($rows as $index => $row)
                    <tr data-notes="{{ $row['shipment_notes']->implode(' ') }}" data-category="{{ $row['main_category'] }}">
                        <td class="text-center">{{ $index + 1 }}</td>
                        <td>{{ $row['product_name'] }}</td>
                        <td class="text-center">{{ $row['unit'] }}</td>
                        @foreach($customers as $customer)
                            <td class="text-center">{{ isset($row['quantities'][$customer]) ? number_format($row['quantities'][$customer], 3) : '-' }}</td>
                        @endforeach
                        <td class="text-center">{{ number_format($row['total_qty'], 3) }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="{{ 4 + $customers->count() }}" class="text-center">No order details found</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr class="fw-bold">
                        <td colspan="3" class="text-end">Total</td>
                        @foreach($customers as $customer)
                            @php
                                $total = $rows->sum(fn($row) => $row['quantities'][$customer] ?? 0);
                            @endphp
                            <td class="text-center">{{ number_format($total, 3) }}</td>
                        @endforeach
                        <td class="text-center">{{ number_format($rows->sum(fn($r) => $r['total_qty']), 3) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function filterTable() {
        var noteVal = $('#shipmentNotesFilter').val().toLowerCase();
        var catVal = $('#mainCategoryFilter').val().toLowerCase();
        $('table tbody tr').each(function () {
            var notes = ($(this).data('notes') || '').toLowerCase();
            var cat = ($(this).data('category') || '').toLowerCase();
            var matchNote = !noteVal || notes.includes(noteVal);
            var matchCat = !catVal || cat === catVal;
            $(this).toggle(matchNote && matchCat);
        });
    }

    $(document).ready(function () {
        $('#shipmentNotesFilter, #mainCategoryFilter').on('change', filterTable);
    });
</script>
@endsection