@extends('layout.app')

@section('styles')
    <style>
        .table-responsive {
            max-height: calc(100vh - 400px);
            overflow-y: auto;
            overflow-x: auto;
            position: relative;
            padding: 0;
            margin: 0;
        }
        .table-responsive table {
            margin: 0;
        }

        #dataTable thead th {
            position: sticky;
            top: 0;
            background-color: #343a40 !important;
            color: #fff !important;
            z-index: 10;
            border-top: 1px solid #454d55;
            border-bottom: 2px solid #454d55;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        #dataTable thead tr:nth-child(2) th {
            top: 38px;
            background-color: #495057 !important;
        }
        #dataTable tbody td.text-center {
            min-width: auto;
            width: auto;
        }
        #dataTable tbody td.text-center a,
        #dataTable thead th.text-center a {
            font-weight: bold;
        }
        /* Compact table - remove all spacing between columns */
        #dataTable th,
        #dataTable td {
            padding:  0 !important;
            font-size: 0.5rem;
            border-left: none !important;
            border-right: none !important;
            white-space: nowrap;
            margin: 0 !important;
        }
        #dataTable th {
            padding: 0.2rem 0 !important;
        }
        #dataTable {
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
        }
        #dataTable.table-bordered {
            border: 0px solid #dee2e6;
        }
        #dataTable.table-bordered th,
        #dataTable.table-bordered td {
            border: none !important;
        }
        #dataTable.table-bordered th:first-child,
        #dataTable.table-bordered td:first-child {
            border-left: 0px solid #dee2e6 !important;
        }
        #dataTable.table-bordered th:last-child,
        #dataTable.table-bordered td:last-child {
            border-right: 0px solid #dee2e6 !important;
        }
        #dataTable.table-bordered thead th {
            border-bottom: 0px solid #454d55 !important;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Pending Confirm Line Summary</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-bordered table-hover display">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>POP</th>
                                        <th>Previous</th>
                                        @foreach ($dayColumns as $col)
                                            <th>{{ $col['label'] }}</th>
                                        @endforeach
                                    </tr>
                                    @if (count($summaryByPop) > 0)
                                        <tr class="fw-bold">
                                            <th>Total</th>
                                            @php $prevTotal = collect($summaryByPop)->sum('previous'); @endphp
                                            <th class="text-center">
                                                @if ($prevTotal > 0)
                                                    <a href="{{ route('new-line-request.index', ['delivery_date_before' => 1, 'status' => 'pending']) }}" class="text-white summary-new-tab fw-bold" target="_blank" rel="noopener noreferrer">{{ $prevTotal }}</a>
                                                @endif
                                            </th>
                                            @foreach ($dayColumns as $col)
                                                @php $total = collect($summaryByPop)->sum(fn($r) => $r['counts'][$col['date']] ?? 0); @endphp
                                                <th class="text-center">
                                                    @if ($total > 0)
                                                        <a href="{{ route('new-line-request.index', ['delivery_date' => $col['date'], 'status' => 'pending']) }}" class="text-white summary-new-tab fw-bold" target="_blank" rel="noopener noreferrer">{{ $total }}</a>
                                                    @endif
                                                </th>
                                            @endforeach
                                        </tr>
                                    @endif
                                </thead>
                                <tbody>
                                    @forelse ($summaryByPop as $row)
                                        <tr class="fw-bold">
                                            <td>{{ $row['popname'] }}</td>
                                            <td class="text-center fw-bold" style="font-weight: bold;">
                                                @if (($row['previous'] ?? 0) > 0)
                                                    <a href="{{ route('new-line-request.index', ['pop_id' => $row['pop_id'], 'delivery_date_before' => 1, 'status' => 'pending']) }}" class="summary-new-tab fw-bold" target="_blank" rel="noopener noreferrer">{{ $row['previous'] }}</a>
                                                @endif
                                            </td>
                                            @foreach ($dayColumns as $col)
                                                @php $count = $row['counts'][$col['date']] ?? 0; @endphp
                                                <td class="text-center fw-bold" style="font-weight: bold;">
                                                    @if ($count > 0)
                                                        <a href="{{ route('new-line-request.index', ['pop_id' => $row['pop_id'], 'delivery_date' => $col['date'], 'status' => 'pending']) }}" class="summary-new-tab fw-bold" target="_blank" rel="noopener noreferrer">{{ $count }}</a>
                                                    @endif
                                                </td>
                                            @endforeach
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="{{ 2 + count($dayColumns) }}" class="text-center text-muted">No pending confirm lines</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        document.querySelectorAll('#dataTable a.summary-new-tab').forEach(function(el) {
            el.addEventListener('click', function(e) {
                e.stopPropagation();
                window.open(this.getAttribute('href'), '_blank', 'noopener,noreferrer');
                e.preventDefault();
            });
        });

        // Initialize DataTable with sorting
        $(document).ready(function() {
            // Check if DataTable is already initialized and destroy it first
            if ($.fn.DataTable.isDataTable('#dataTable')) {
                $('#dataTable').DataTable().destroy();
            }

            $('#dataTable').DataTable({
                order: [[0, 'asc']],
                pageLength: 500,
                lengthMenu: [[10, 25, 50, 100,500, -1], [10, 25, 50, 100,500, "All"]],
                orderCellsTop: false,
                scrollX: true,
                autoWidth: false,
                columnDefs: [
                    { orderable: true, targets: '_all' },
                    { width: '70px', targets: 0 },
                    { width: '35px', targets: 1 },
                    { width: '10px', targets: '_all' }
                ]
            });
        });
    </script>
@endsection