@extends('layouts.location')

@section('title', 'Sales Order Items')
@section('page-title', 'Sales Order Items')

@section('breadcrumb')
    <li class="breadcrumb-item active">Sales Order Items</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Sales Order Items List</h5>
            <div>
                <a href="{{ route('location.sales_order_items.export', request()->query()) }}" class="btn btn-success me-2">
                    <i class="fas fa-file-excel me-1"></i> Export to CSV
                </a>
            </div>
        </div>
        <div class="card-body">
            <form action="{{ route('location.sales_order_items.index') }}" method="GET" class="mb-4">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label for="search" class="form-label">Search SO Number</label>
                        <input type="text" name="search" id="search" class="form-control" placeholder="Enter SO Number"
                            value="{{ request('search') }}">
                    </div>
                    <div class="col-md-3">
                        <label for="uploaded_date" class="form-label">Uploaded Date</label>
                        <input type="date" name="uploaded_date" id="uploaded_date" class="form-control"
                            value="{{ request('uploaded_date') }}">
                    </div>
                    <div class="col-md-3">
                        <label for="packing_date" class="form-label">Packing Date</label>
                        <input type="date" name="packing_date" id="packing_date" class="form-control"
                            value="{{ request('packing_date') }}">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-secondary mt-4 w-100">
                            <i class="fas fa-filter me-1"></i> Filter
                        </button>
                    </div>
                </div>
            </form>

            @if($soGroups->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th class="sortable" data-type="text">SO No</th>
                                <th class="sortable" data-type="date">Uploaded Date</th>
                                <th class="sortable" data-type="date">Picking Completed</th>
                                <th class="sortable" data-type="date">Packing Completed</th>
                                <th class="sortable" data-type="date">Booking Completed</th>
                                <th class="sortable" data-type="date">Dispatch Completed</th>
                                <th class="sortable" data-type="date">Delivery Completed</th>
                                <th class="sortable" data-type="text">Documents</th>
                                <th class="sortable" data-type="text">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($soGroups as $row)
                                @php
                                    $pickings = $pickingsBySo[$row->so_no] ?? collect();
                                    $salesOrders = $salesOrdersBySo[$row->so_no] ?? collect();
                                @endphp
                                @php
                                    $pipeline = $pipelineBySo[$row->so_no] ?? null;
                                @endphp
                                <tr class="so-main-row">
                                    <td>{{ $row->so_no }}</td>
                                    <td data-sort="{{ $row->uploaded_at }}">{{ $row->uploaded_at ? \Carbon\Carbon::parse($row->uploaded_at)->format('M d, Y') : '' }}</td>
                                    <td data-sort="{{ $pipeline->picking_date_complete ?? '' }}">{{ $pipeline && $pipeline->picking_date_complete ? \Carbon\Carbon::parse($pipeline->picking_date_complete)->format('Y-m-d H:i') : '' }}</td>
                                    <td data-sort="{{ $pipeline->packing_date_complete ?? '' }}">{{ $pipeline && $pipeline->packing_date_complete ? \Carbon\Carbon::parse($pipeline->packing_date_complete)->format('Y-m-d H:i') : '' }}</td>
                                    <td data-sort="{{ $pipeline->booking_date_complete ?? '' }}">{{ $pipeline && $pipeline->booking_date_complete ? \Carbon\Carbon::parse($pipeline->booking_date_complete)->format('Y-m-d H:i') : '' }}</td>
                                    <td data-sort="{{ $pipeline->dispatch_date ?? '' }}">{{ $pipeline && $pipeline->dispatch_date ? \Carbon\Carbon::parse($pipeline->dispatch_date)->format('Y-m-d H:i') : '' }}</td>
                                    <td data-sort="{{ $pipeline->delivery_date ?? '' }}">{{ $pipeline && $pipeline->delivery_date ? \Carbon\Carbon::parse($pipeline->delivery_date)->format('Y-m-d H:i') : '' }}</td>
                                    <td>
                                        @php $docs = $documentsBySo[$row->so_no] ?? null; @endphp
                                        @if($docs)
                                            <div class="d-flex flex-column gap-1">
                                                @if(!empty($docs['lr']))
                                                    <a href="{{ $docs['lr'] }}" target="_blank" class="btn btn-xs btn-outline-secondary">LR</a>
                                                @endif
                                                @if(!empty($docs['packing']))
                                                    <a href="{{ $docs['packing'] }}" target="_blank" class="btn btn-xs btn-outline-secondary">Packing</a>
                                                @endif
                                                @if(!empty($docs['invoice']))
                                                    <a href="{{ $docs['invoice'] }}" target="_blank" class="btn btn-xs btn-outline-secondary">Invoice</a>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted small">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary toggle-details-btn" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#so-details-{{ $loop->index }}"
                                            aria-expanded="false" aria-controls="so-details-{{ $loop->index }}">
                                            View SO Details
                                            <i class="fas fa-chevron-down ms-2 toggle-icon"></i>
                                        </button>
                                    </td>
                                </tr>

                                <tr class="collapse bg-light so-details-row" id="so-details-{{ $loop->index }}">
                                <td colspan="4">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h6>Sales Order Items</h6>
                                            @if(($salesOrdersBySo[$row->so_no] ?? collect())->count())
                                                <table class="table table-sm table-bordered">
                                                    <thead class="table-secondary">
                                                        <tr>
                                                            <th>Item Name</th>
                                                            <th>Category</th>
                                                            <th>HSN</th>
                                                            <th>Qty</th>
                                                            <th>Rate</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($salesOrdersBySo[$row->so_no] as $so)
                                                            <tr>
                                                                <td>{{ $so->item_name }}</td>
                                                                <td>{{ $so->category }}</td>
                                                                <td>{{ $so->hsn_sac }}</td>
                                                                <td>{{ $so->quantity }}</td>
                                                                <td>{{ $so->rate }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @else
                                                <div class="text-muted">No sales order items found.</div>
                                            @endif
                                        </div>

                                        <div class="col-md-6">
                                            <h6>Picking Details</h6>
                                            {{-- Original picking details from so_packing (unchanged logic) --}}
                                            @if(($pickingsBySo[$row->so_no] ?? collect())->count())
                                                <table class="table table-sm table-bordered">
                                                    <thead class="table-secondary">
                                                        <tr>
                                                            <th>Item</th>
                                                            <th>Dimension</th>
                                                            <th>Weight</th>
                                                            <th>Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($pickingsBySo[$row->so_no] ?? [] as $picking)
                                                            <tr>
                                                                <td>
                                                                    @php
                                                                        $items = $picking->items ?? [];
                                                                        if (is_string($items)) {
                                                                            $decoded = json_decode($items, true);
                                                                            $items = is_array($decoded) ? $decoded : [];
                                                                        }
                                                                    @endphp
                                                                    <ul class="mb-0 ps-3">
                                                                        @foreach(($items ?? []) as $entry)
                                                                            @php
                                                                                $item = is_string($entry)
                                                                                    ? (json_decode($entry, true) ?: [])
                                                                                    : (is_array($entry) ? $entry : []);
                                                                            @endphp
                                                                            <li>{{ $item['item'] ?? '' }} (Qty: {{ $item['qty'] ?? 0 }})</li>
                                                                        @endforeach
                                                                    </ul>
                                                                </td>
                                                                <td>{{ $picking->dimension }}</td>
                                                                <td>{{ $picking->weight }}</td>
                                                                <td>{{ ucfirst($picking->status) }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @endif

                                            {{-- Additional picklist details from so_picklist --}}
                                            @if(($picklistsBySo[$row->so_no] ?? collect())->count())
                                                <table class="table table-sm table-bordered mt-3">
                                                    <thead class="table-secondary">
                                                        <tr>
                                                            <th>SKU</th>
                                                            <th>Rack</th>
                                                            <th>Picked Qty</th>
                                                            <th>Status</th>
                                                            <th>Pic ID</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($picklistsBySo[$row->so_no] as $picklist)
                                                            <tr>
                                                                <td>{{ $picklist->sku }}</td>
                                                                <td>{{ $picklist->rack }}</td>
                                                                <td>{{ $picklist->picked_qty }}</td>
                                                                <td>{{ ucfirst($picklist->status ?? '') }}</td>
                                                                <td>{{ $picklist->pic_id }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-center mt-4">
                    {!! $soGroups->onEachSide(1)->links('pagination::bootstrap-4') !!}
                </div>
            @else
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    No sales order items found.
                </div>
            @endif
        </div>
    </div>

    <style>
    .rotate-180 { transform: rotate(180deg); transition: transform 0.3s ease; }
    .toggle-details-btn { cursor: pointer; }
    .toggle-icon { transition: transform 0.3s ease; }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.toggle-details-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                const icon = this.querySelector('.toggle-icon');
                const targetId = this.getAttribute('data-bs-target');
                const target = document.querySelector(targetId);
                const isShown = target.classList.contains('show');
                document.querySelectorAll('.toggle-icon').forEach(i => i.classList.remove('rotate-180'));
                if (!isShown) { icon.classList.add('rotate-180'); }
            });
        });

        // Simple client-side sorting for SO table
        const table = document.querySelector('table.table.table-bordered.table-hover');
        if (table) {
            const headers = table.querySelectorAll('thead th.sortable');
            const tbody = table.tBodies[0];

            headers.forEach((th, index) => {
                th.style.cursor = 'pointer';
                th.addEventListener('click', function () {
                    const type = th.dataset.type || 'text';
                    const currentOrder = th.dataset.order === 'asc' ? 'desc' : 'asc';
                    th.dataset.order = currentOrder;

                    // reset other headers' order
                    headers.forEach(h => { if (h !== th) delete h.dataset.order; });

                    const rowPairs = [];
                    const rows = Array.from(tbody.rows);
                    for (let i = 0; i < rows.length; i++) {
                        const row = rows[i];
                        if (!row.classList.contains('so-main-row')) continue;
                        const detailRow = (i + 1 < rows.length && rows[i + 1].classList.contains('so-details-row')) ? rows[i + 1] : null;
                        rowPairs.push({ main: row, detail: detailRow });
                    }

                    const getCellValue = (row) => {
                        const cell = row.cells[index];
                        if (!cell) return '';
                        const raw = cell.getAttribute('data-sort') || cell.textContent.trim();
                        if (!raw) return '';
                        if (type === 'date') {
                            // Normalize space to T for better Date parsing support
                            const normalized = raw.replace(' ', 'T');
                            const time = Date.parse(normalized);
                            return isNaN(time) ? 0 : time;
                        }
                        if (type === 'number') {
                            const num = parseFloat(raw.replace(/[^0-9.\-]/g, ''));
                            return isNaN(num) ? 0 : num;
                        }
                        return raw.toString().toLowerCase();
                    };

                    rowPairs.sort((a, b) => {
                        const av = getCellValue(a.main);
                        const bv = getCellValue(b.main);
                        if (av === bv) return 0;
                        if (currentOrder === 'asc') {
                            return av > bv ? 1 : -1;
                        } else {
                            return av < bv ? 1 : -1;
                        }
                    });

                    // Re-append rows in new order, keeping detail rows with their main row
                    rowPairs.forEach(pair => {
                        tbody.appendChild(pair.main);
                        if (pair.detail) {
                            tbody.appendChild(pair.detail);
                        }
                    });
                });
            });
        }
    });
    </script>
@endsection