@extends('layouts.app')

@section('title', 'Bandwidth Up/Down Requests - ISP ERP System')

@section('page-title', 'Bandwidth Up/Down Requests Management')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-exchange-alt me-2"></i>
                                Bandwidth Up/Down Requests
                            </h3>
                            <p class="mb-0 opacity-75">Manage bandwidth upgrade, downgrade, and discontinue requests</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('bandwidth-updown-requests.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>New Request
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Requests Accordion -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-list me-2"></i>
                            All Requests (Grouped by Company)
                        </h5>
                        <div>
                            <span class="badge badge-info">Total: {{ $allRequests->count() }} requests</span>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle mr-2"></i>
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle mr-2"></i>
                            {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if($groupedByCompany->count() > 0)
                        <div id="requestsAccordion">
                            @foreach($groupedByCompany as $userId => $requests)
                                @php
                                    $firstRequest = $requests->first();
                                    $customer = $firstRequest->user;
                                    $customerName = $customer ? ($customer->company_name ? $customer->company_name . ' - ' . $customer->name : $customer->name) : 'Unknown';
                                    $customerEmail = $customer ? $customer->email : null;
                                    $groupIndex = $loop->index;
                                @endphp
                                
                                <div class="card mb-3">
                                    <div class="card-header" id="heading{{ $loop->index }}">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link text-left {{ $loop->first ? '' : 'collapsed' }}" type="button" data-toggle="collapse" data-target="#collapse{{ $loop->index }}" aria-expanded="{{ $loop->first ? 'true' : 'false' }}" aria-controls="collapse{{ $loop->index }}" style="text-decoration: none; width: 100%; padding: 0;">
                                                <div class="d-flex justify-content-between align-items-center w-100">
                                                    <div class="d-flex align-items-center">
                                                        <i class="fas fa-building mr-2 text-primary"></i>
                                                        <strong>{{ $customerName }}</strong>
                                                        @if($customerEmail)
                                                            <span class="ml-3 text-muted">
                                                                <i class="fas fa-envelope mr-1"></i>{{ $customerEmail }}
                                                            </span>
                                                        @endif
                                                    </div>
                                                    <div>
                                                        <span class="badge badge-secondary mr-2">{{ $requests->count() }} request(s)</span>
                                                        @php
                                                            $statusCounts = $requests->groupBy('status');
                                                        @endphp
                                                        @foreach($statusCounts as $status => $statusRequests)
                                                            <span class="badge badge-{{ $status === 'approved' ? 'success' : ($status === 'rejected' ? 'danger' : ($status === 'processed' ? 'info' : 'warning')) }}">
                                                                {{ ucfirst($status) }}: {{ $statusRequests->count() }}
                                                            </span>
                                                        @endforeach
                                                        <i class="fas fa-chevron-down ml-2" id="icon{{ $loop->index }}"></i>
                                                    </div>
                                                </div>
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapse{{ $loop->index }}" class="collapse {{ $loop->first ? 'show' : '' }}" aria-labelledby="heading{{ $loop->index }}" data-parent="#requestsAccordion">
                                        <div class="card-body p-0">
                                            @php
                                                $requestsByInvoice = $requests->groupBy(function($r){ return $r->current_sales_invoice_id ?: 'no_invoice'; });
                                            @endphp
                                            @foreach($requestsByInvoice as $invoiceKey => $invoiceRequests)
                                                @php $groupKey = $groupIndex . '_' . $invoiceKey; @endphp
                                                <div class="table-responsive">
                                                    <table class="table table-hover mb-0">
                                                        <thead class="table-light">
                                                            <tr>
                                                                <th colspan="10" class="bg-light">
                                                                    @php
                                                                        $firstInGroup = $invoiceRequests->first();
                                                                    @endphp
                                                                    <strong>
                                                                        @if($invoiceKey !== 'no_invoice' && $firstInGroup && $firstInGroup->currentSalesInvoice)
                                                                            @php $invoiceUrl = url('/reseller/sales-invoices/' . $firstInGroup->currentSalesInvoice->id); @endphp
                                                                            Invoice: <a href="{{ $invoiceUrl }}" target="_blank">{{ $firstInGroup->currentSalesInvoice->invoice_no }}</a>
                                                                        @else
                                                                            No Invoice
                                                                        @endif
                                                                    </strong>
                                                                </th>
                                                            </tr>
                                                            <tr>
                                                                <th class="select-col" style="width: 36px;">
                                                                    <div class="form-check m-0 justify-content-center">
                                                                        <input class="form-check-input group-select-all" type="checkbox" id="select_all_{{ $groupKey }}" data-group="{{ $groupKey }}">
                                                                    </div>
                                                                </th>
                                                                <th style="width: 60px;">ID</th>
                                                                <th>Request Type</th>
                                                                <th>Invoice</th>
                                                                <th>Invoice Item</th>
                                                                <th>Effective Date</th>
                                                                <th style="width: 140px;">Status</th>
                                                                <th style="width: 220px;">Created By</th>
                                                                <th style="width: 140px;">Actions</th>
                                                                <th style="width: 120px;">Execute</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach($invoiceRequests as $request)
                                                                <tr>
                                                                    <td class="select-col">
                                                                        <div class="form-check m-0 justify-content-center">
                                                                            <input class="form-check-input group-select-checkbox group-{{ $groupKey }}" type="checkbox" name="selected_requests[]" value="{{ $request->id }}" id="req_checkbox_{{ $request->id }}" data-invoice-id="{{ $request->current_sales_invoice_id ?? '' }}" data-request-type="{{ $request->request_type }}">
                                                                        </div>
                                                                    </td>
                                                                    <td>
                                                                        <span class="badge badge-primary">{{ $request->id }}</span>
                                                                    </td>
                                                                    <td>
                                                                        <span class="badge badge-{{ $request->request_type === 'upgrade' ? 'success' : ($request->request_type === 'downgrade' ? 'warning' : 'danger') }}">
                                                                            {{ ucfirst($request->request_type) }}
                                                                        </span>
                                                                        @if($request->new_bandwidth_mbps)
                                                                            <br><small class="text-muted">{{ number_format($request->new_bandwidth_mbps, 2) }} Mbps</small>
                                                                        @endif
                                                                    </td>
                                                                    <td>
                                                                        @if($request->currentSalesInvoice)
                                                                            @php
                                                                                $invoiceUrl = url('/reseller/sales-invoices/' . $request->currentSalesInvoice->id);
                                                                            @endphp
                                                                            <a href="{{ $invoiceUrl }}" target="_blank">
                                                                                {{ $request->currentSalesInvoice->invoice_no }}
                                                                            </a>
                                                                        @else
                                                                            <span class="text-muted">-</span>
                                                                        @endif
                                                                    </td>
                                                                    <td>
                                                                        @if($request->currentSalesInvoiceItem)
                                                                            {{ $request->currentSalesInvoiceItem->item_name }}
                                                                        @else
                                                                            <span class="text-muted">-</span>
                                                                        @endif
                                                                    </td>
                                                                    <td>{{ $request->effective_date ? $request->effective_date->format('M d, Y') : '-' }}</td>
                                                                    <td>
                                                                        <span class="badge badge-{{ $request->status === 'approved' ? 'success' : ($request->status === 'rejected' ? 'danger' : ($request->status === 'processed' ? 'info' : 'warning')) }}">
                                                                            {{ ucfirst($request->status) }}
                                                                        </span>
                                                                    </td>
                                                                    <td>
                                                                        @if($request->creator)
                                                                            {{ $request->creator->name }}
                                                                            <br><small class="text-muted">{{ $request->created_at->format('M d, Y') }}</small>
                                                                        @else
                                                                            <span class="text-muted">-</span>
                                                                        @endif
                                                                    </td>
                                                                    <td>
                                                                        <div class="btn-group" role="group">
                                                                            <a href="{{ route('bandwidth-updown-requests.show', $request) }}" class="btn btn-sm btn-action btn-view" title="View">
                                                                                <i class="fas fa-eye"></i>
                                                                            </a>
                                                                            @if($request->status === 'pending')
                                                                                <a href="{{ route('bandwidth-updown-requests.edit', $request) }}" class="btn btn-sm btn-action btn-edit" title="Edit">
                                                                                    <i class="fas fa-edit"></i>
                                                                                </a>
                                                                                <form action="{{ route('bandwidth-updown-requests.destroy', $request) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this request? This action cannot be undone.')">
                                                                                    @csrf
                                                                                    @method('DELETE')
                                                                                    <button type="submit" class="btn btn-sm btn-action btn-delete" title="Delete">
                                                                                        <i class="fas fa-trash"></i>
                                                                                    </button>
                                                                                </form>
                                                                            @endif
                                                                        </div>
                                                                    </td>
                                                                    @if($loop->first)
                                                                        <td class="text-center align-middle" rowspan="{{ $invoiceRequests->count() }}">
                                                                            <button type="button" class="btn btn-sm btn-success" id="execute_btn_{{ $groupKey }}" data-group="{{ $groupKey }}" disabled>
                                                                                Exicute (0)
                                                                            </button>
                                                                        </td>
                                                                    @endif
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <div class="text-muted">
                                <i class="fas fa-exchange-alt fa-3x mb-3"></i>
                                <p>No bandwidth requests found. <a href="{{ route('bandwidth-updown-requests.create') }}">Create your first request</a></p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.table-modern {
    border-collapse: separate;
    border-spacing: 0;
}

.table-modern thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    border-bottom: 2px solid #dee2e6;
}

.table-modern tbody tr:hover {
    background-color: #f8f9fa;
    transition: all 0.2s ease;
}

.btn-custom {
    border-radius: 0.375rem;
}

.custom-card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.custom-card-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

.custom-card-body {
    padding: 1.5rem;
}
.table-modern td { vertical-align: middle; }
.btn-action { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.btn-view { background-color: #17a2b8; color: #fff; }
.btn-edit { background-color: #ffc107; color: #212529; }
.btn-delete { background-color: #dc3545; color: #fff; }
.btn-action i { font-size: 0.9rem; }

.card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
}

.card-header .btn-link {
    color: #212529;
    font-weight: 600;
    padding: 0;
}

.card-header .btn-link:hover {
    color: #007bff;
}

.card-header .btn-link:focus {
    box-shadow: none;
}

.card-body table {
    margin-bottom: 0;
}

.card-body table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem;
}

.card-body table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
}

.btn-link {
    text-decoration: none !important;
}

.btn-link:hover {
    text-decoration: none !important;
}

.btn-link:focus {
    text-decoration: none !important;
    box-shadow: none;
}

.btn-link i.fa-chevron-down {
    transition: transform 0.3s ease;
}

.btn-link.collapsed i.fa-chevron-down {
    transform: rotate(-90deg);
}

/* Checkbox column alignment */
th.select-col, td.select-col {
    text-align: center;
    vertical-align: middle;
}
.select-col .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
}
.select-col .form-check-input {
    margin: 0 !important;
    width: 16px;
    height: 16px;
    position: static;
}
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    function updateExecuteButton(group) {
        var checkboxes = Array.from(document.querySelectorAll('.group-' + group));
        var selected = checkboxes.filter(function (cb) { return cb.checked; });
        var btn = document.querySelector('#execute_btn_' + group);
        if (!btn) return;
        var count = selected.length;
        btn.disabled = count === 0;
        btn.textContent = 'Exicute (' + count + ')';

        // Determine target invoice id - must be exactly one distinct invoice id
        var invoiceIds = Array.from(new Set(selected.map(function (cb) {
            return cb.getAttribute('data-invoice-id') || '';
        }).filter(function (v) { return v && v !== 'null'; })));
        if (invoiceIds.length === 1) {
            btn.setAttribute('data-invoice-id', invoiceIds[0]);
        } else {
            btn.removeAttribute('data-invoice-id');
        }
    }

    // Group-level select all toggle
    document.querySelectorAll('.group-select-all').forEach(function (headerCheckbox) {
        headerCheckbox.addEventListener('change', function () {
            var group = this.getAttribute('data-group');
            document.querySelectorAll('.group-' + group).forEach(function (rowCb) {
                rowCb.checked = headerCheckbox.checked;
            });
            updateExecuteButton(group);
        });
    });

    // Sync header when individual checkboxes change
    document.querySelectorAll('.group-select-checkbox').forEach(function (rowCheckbox) {
        rowCheckbox.addEventListener('change', function () {
            var groupClass = Array.from(this.classList).find(function (c) { return c.startsWith('group-'); });
            if (!groupClass) return;
            var group = groupClass.replace('group-', '');
            var allInGroup = document.querySelectorAll('.' + groupClass);
            var allChecked = Array.from(allInGroup).every(function (cb) { return cb.checked; });
            var header = document.querySelector('#select_all_' + group);
            if (header) header.checked = allChecked;
            updateExecuteButton(group);
        });
    });

    // Execute click -> navigate to invoice edit-sales if single invoice selected
    document.querySelectorAll('[id^="execute_btn_"]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            if (btn.disabled) return;
            var group = btn.getAttribute('data-group');
            var invoiceId = btn.getAttribute('data-invoice-id');
            if (!invoiceId) {
                alert('Please select request(s) from a single invoice.');
                return;
            }
            // Count request types in this group for query params
            var selected = Array.from(document.querySelectorAll('.group-' + group)).filter(function (cb) { return cb.checked; });
            var counts = { upgrade: 0, downgrade: 0, discontinue: 0 };
            selected.forEach(function (cb) {
                var t = (cb.getAttribute('data-request-type') || '').toLowerCase();
                if (counts.hasOwnProperty(t)) counts[t]++;
            });
            var params = new URLSearchParams();
            if (counts.upgrade) params.set('upr', counts.upgrade);
            if (counts.downgrade) params.set('dwn', counts.downgrade);
            if (counts.discontinue) params.set('disc', counts.discontinue);
            // Pass selected request IDs for detailed rendering on next page
            var ids = selected.map(function (cb) { return cb.value; }).join(',');
            if (ids) params.set('req', ids);
            var qs = params.toString();
            var targetUrl = '/reseller/sales-invoices/' + invoiceId + '/edit-sales' + (qs ? ('?' + qs) : '');
            window.location.href = targetUrl;
        });
    });

    // Initialize button states on load
    document.querySelectorAll('[id^="execute_btn_"]').forEach(function (btn) {
        var group = btn.getAttribute('data-group');
        updateExecuteButton(group);
    });
});
</script>
@endsection