@push('styles')
    <style>
        .table-scroll-sticky {
            max-height: min(70vh, 600px);
            overflow-y: auto;
            overflow-x: visible;
            width: 100%;
        }

        .table-scroll-sticky #dataTable {
            width: 100% !important;
            table-layout: fixed;
            border-collapse: collapse;
        }

        .table-scroll-sticky #dataTable thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #343a40;
            color: #fff;
            white-space: normal;
            word-wrap: break-word;
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
            font-size: 0.875rem;
            padding: 0.4rem 0.25rem;
        }

        .table-scroll-sticky #dataTable tbody td {
            white-space: normal;
            word-wrap: break-word;
            font-size: 0.8125rem;
            padding: 0.4rem 0.25rem;
            vertical-align: top;
        }

        .table-scroll-sticky .table thead th {
            border-bottom-width: 1px;
        }
    </style>
    <style>
        .dropdown-menu.action-dropdown-menu {
            max-height: 50vh;
            overflow-y: auto;
            overflow-x: hidden;
        }
    </style>
@endpush

<div class="row">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-white py-3">
                <div class="row">
                    <div class="col-6">
                        <h4 class="card-title m-0 font-weight-bold text-primary">Confirm Line Request</h4>
                    </div>
                    <div class="col-6">
                        <h5 class="text-right">Total: {{ $lists->count() }}</h5>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-scroll-sticky">
                    <table class="table table-bordered table-hover" id="dataTable">
                        <thead class="thead-dark">
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>POP</th>
                                <th>Package</th>
                                <th>OTC</th>
                                <th>Fiber Meter</th>
                                <th>Latitude/Longitude</th>
                                <th>Phone</th>

                                <th>Billing Date</th>
                                <th>Address</th>

                                <th>Remarks</th>
                                <th>Updated At/Line Man</th>

                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($lists as $list)
                                <tr data-request-id="{{ $list->id }}">
                                    <td>{{ $list->id }} <br> ({{ $list->status }})</td>
                                    <td>
                                        <span class="fw-bold text-dark">{{ $list->name ?? 'N/A' }}</span>
                                        <div class="text-primary userid-cell" style="font-size:0.78rem;">
                                            <i class="fas fa-user"></i> {{ $list->client->userid ?? 'N/A' }}
                                        </div>
                                        <div class="text-success cid-cell" style="font-size:0.78rem;">
                                            <i class="fas fa-id-card"></i> {{ $list->client->id ?? 'N/A' }}
                                        </div>
                                        <div class="text-success ticket-cell" style="font-size:0.78rem;">
                                            <i class="fas fa-ticket"></i> {{ $list->newLineToken->token ?? 'N/A' }}
                                        </div>
                                    </td>
                                    <td>{{ $list->pop->popname ?? 'N/A' }}</td>
                                    <td>
                                        @if ($list->subPackage)
                                            <span class="badge bg-warning text-dark d-block mb-1">
                                                Sub: {{ $list->subPackage->name ?? 'N/A' }}
                                            </span>
                                            <span class="badge bg-primary d-block">
                                                Main: {{ $list->subPackage->package->package_name ?? 'N/A' }}
                                            </span>
                                        @else
                                            <span class="badge bg-primary d-block">
                                                {{ $list->package->package_name ?? 'N/A' }}
                                            </span>
                                        @endif
                                    </td>
                                    <td>{{ $list->otc ?? 'N/A' }}</td>
                                    <td>{{ $list->fiver_miter ?? 'N/A' }}</td>
                                    <td>Lat : {{ $list->lat ?? 'N/A' }} <br>Long : {{ $list->long ?? 'N/A' }}</td>

                                    <td>{{ $list->phone ?? 'N/A' }} <br>Alt : {{ $list->alt_phone ?? 'N/A' }}</td>

                                    <td>
                                        <span class="badge bg-primary mt-1">
                                            ACD :
                                            {{ $list->confirm_activation_date ? \Carbon\Carbon::parse($list->confirm_activation_date)->format('Y-m-d') : 'N/A' }}
                                        </span>
                                        <br>
                                        <span class="badge bg-warning text-dark mt-1 delivery-date-cell">
                                            DD :
                                            {{ $list->delivery_date ? \Carbon\Carbon::parse($list->delivery_date)->format('Y-m-d') : 'N/A' }}
                                        </span>
                                        <br>
                                        <span class="badge bg-info mt-1">
                                           Billing Date :
                                            {{ $list->billing_date}}
                                        </span>

                                    </td>
                                    <td>{{ $list->address ?? 'N/A' }}</td>

                                    <td>{{ optional($list->remarksList->last())->remarks ?? '' }}</td>
                                    <td>{{ $list->user->name ?? 'WebSite' }} <br> {{ $list->updated_at }}
                                        <br> Line Man : <span class="line-man-cell">{{ $list->lineManager->name ?? '—' }}</span>
                                        <br>
                                        Marketing Employee : <span class="marketing-employee-cell">{{ $list->marketingEmployee->name ?? '—' }}</span>
                                    </td>
                                    <td>
                                        <div class="dropdown ">
                                            <button class="btn btn-sm btn-secondary dropdown-toggle" type="button"
                                                id="actionDropdown{{ $list->id }}" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                Action
                                            </button>
                                            <div class="dropdown-menu action-dropdown-menu"
                                                aria-labelledby="actionDropdown{{ $list->id }}">
                                                @canany(['new-line-request-status', 'new-line-request-status-done'])
                                                    <button type="button" class="dropdown-item open-status-modal"
                                                        data-id="{{ $list->id }}" data-status="{{ $list->status }}">
                                                        Status
                                                    </button>
                                                @endcanany
                                                <a class="dropdown-item"
                                                    href="{{ route('newline.newInformation', ['confirm_line' => 'confirm-line', 'id' => $list->id]) }}">Edit</a>

                                                <a href="#" class="dropdown-item open-delivery-date-modal"
                                                    data-id="{{ $list->id }}"
                                                    data-delivery-date="{{ $list->delivery_date ? \Carbon\Carbon::parse($list->delivery_date)->format('Y-m-d') : '' }}">
                                                    Set Delivery Date
                                                </a>
                                                {{-- <a href="#" class="dropdown-item open-change-free-modal"
                                                    data-id="{{ $list->id }}"
                                                    data-free-days="{{ $list->free_days ?? '' }}">
                                                    Change Free Day
                                                </a> --}}
                                                <a href="#" class="dropdown-item open-assign-line-man-modal"
                                                    data-id="{{ $list->id }}"
                                                    data-line-man-id="{{ $list->line_manager_id ?? '' }}">
                                                    Assign Line Man
                                                </a>
                                                {{-- <a class="dropdown-item" href="{{ route('create-pppoe-user-from-confirm-line-request', $list->id) }}"
                                                    onclick="return confirm('Are you sure you want to create the PPPoE user?')">
                                                    Create PPPOE User
                                                </a>
                                                <a class="dropdown-item" href="{{ route('create-ticket-for-this-client', $list->id) }}"
                                                    onclick="return confirm('Are you sure you want to ticket for this client?')">
                                                    Create Ticket
                                                </a> --}}

                                                <a href="#" class="dropdown-item open-remarks-modal" data-id="{{ $list->id }}">
                                                    Remark
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Remarks Modal -->
<div class="modal fade" id="remarksModal" tabindex="-1" aria-labelledby="remarksModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="remarksModalLabel">Remarks</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Previous Remarks Section -->
                <div class="mb-4">
                    <h6 class="font-weight-bold mb-3">Previous Remarks</h6>
                    <div id="remarksListLoading" class="text-center py-3">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                    <div id="remarksListEmpty" class="alert alert-info d-none">
                        No previous remarks found.
                    </div>
                    <div id="remarksList" style="max-height: 300px; overflow-y: auto;">
                        <!-- Remarks will be loaded here via AJAX -->
                    </div>
                </div>

                <hr>

                <!-- Add New Remark Section -->
                <div>
                    <h6 class="font-weight-bold mb-3">Add New Remark</h6>
                    <form id="addRemarkForm">
                        @csrf
                        <input type="hidden" id="remarkRequestId" name="request_id">
                        <div class="form-group">
                            <label for="newRemarkText">Remark</label>
                            <textarea name="remarks" id="newRemarkText" class="form-control" rows="4" placeholder="Enter your remark..."
                                required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane"></i> Submit Remark
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delivery Date Modal -->
<div class="modal fade" id="deliveryDateModal" tabindex="-1" aria-labelledby="deliveryDateModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deliveryDateModalLabel">Set Delivery Date</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="deliveryDateForm" action="#" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" name="id" id="deliveryDateRequestId">
                    <div class="form-group">
                        <label for="deliveryDateInput">Delivery Date <span class="text-danger">*</span></label>
                        <input type="date" name="delivery_date" id="deliveryDateInput" class="form-control"
                            required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Set Delivery Date</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Assign Line Man Modal -->
<div class="modal fade" id="assignLineManModal" tabindex="-1" aria-labelledby="assignLineManModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignLineManModalLabel">Assign Line Man</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="assignLineManForm">
                <div class="modal-body">
                    <input type="hidden" name="id" id="assignLineManRequestId">
                    <div class="form-group">
                        <label for="lineManagerSelect">Line Man <span class="text-danger">*</span></label>
                        <select name="line_manager_id" id="lineManagerSelect" class="form-control select2" required>
                            <option value="">Select Line Man</option>
                            @foreach ($lineMen ?? [] as $employee)
                                <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                            @endforeach
                        </select>
                        <small class="form-text text-muted">Active employees only.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Assign</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Change Free Day Modal -->
<div class="modal fade" id="changeFreeDayModal" tabindex="-1" aria-labelledby="changeFreeDayModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changeFreeDayModalLabel">Change Free Day</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="changeFreeDayForm" action="#" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" name="id" id="changeFreeDayRequestId">
                    <div class="form-group">
                        <label class="d-block">Previous Free Day</label>
                        <p class="mb-2 font-weight-bold" id="previousFreeDayDisplay">—</p>
                    </div>
                    <div class="form-group">
                        <label for="freeDaysInput">Free Days <span class="text-danger">*</span></label>
                        <input type="number" name="free_days" id="freeDaysInput" class="form-control"
                            min="0" max="{{ $max_free_day ?? (optional(siteinfo())->max_free_day ?? 99) }}"
                            placeholder="Enter free days" required>
                        <small class="form-text text-muted">Maximum:
                            {{ $max_free_day ?? (optional(siteinfo())->max_free_day ?? 99) }} days</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update Free Day</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusModalLabel">Update Status</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="statusForm" action="#" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label for="statusSelect">Status</label>
                        <select id="statusSelect" name="status" class="form-control">
                            @can('new-line-request-status')
                                <option value="pending" selected>Pending</option>
                                <option value="cancelled">Cancelled</option>
                            @endcan
                            @canany(['new-line-request-status', 'new-line-request-status-done'])
                                <option value="done">Done</option>
                            @endcanany
                        </select>
                    </div>
                    <div id="cancelRemarksWrapper" class="form-group d-none">
                        <label for="confirm_line_request_cancel_remarks">Cancel remarks <span
                                class="text-danger">*</span></label>
                        <textarea id="confirm_line_request_cancel_remarks" name="confirm_line_request_cancel_remarks" class="form-control"
                            rows="3" placeholder="Please provide reason for cancellation..."></textarea>
                        <small class="text-danger d-none" id="cancelRemarksError">Cancel remarks are required when
                            status is Cancelled.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>


{{-- <div class="modal fade" id="remarkModal" tabindex="-1" aria-labelledby="remarkModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="remarkModalLabel">Update Remark</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="remarkForm" action="#" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label for="remarkTextarea">Remark</label>
                        <textarea id="remarkTextarea" name="remarks" class="form-control" rows="4"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div> --}}