<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">New 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-responsive">
                    <table class="table table-bordered table-hover" id="dataTable">
                        <thead class="thead-dark">
                            <tr>
                                <th style="display:none;">Sort</th>
                                <th>ID</th>
                                <th>Created At</th>
                                <th>Created By</th>
                                <th>Assign To</th>
                                <th>Phone</th>
                                <th>Source Name</th>
                                <th>Name</th>
                                <th>Customer Status</th>
                                <th>Activation Date <br> Follow update</th>
                                <th>Multi Router</th>
                                <th>Survay Status</th>
                                <th>Remarks</th>
                                <th>Updated At</th>
                                <th width="100">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($lists as $list)
                                <tr class="{{ $list->_is_followup ? 'table-warning follow-up-row' : '' }}">
                                    <td style="display:none;">{{ $list->sort_order }}</td>
                                    <td>{{ $list->id }}</td>
                                    <td>{{ $list->created_at }}</td>
                                    <td>{{ $list->user->name ?? 'WebSite' }}</td>
                                    <td>{{ $list->assign->name ?? 'N/A' }}</td>
                                    <td>{{ $list->phone ?? 'N/A' }}</td>
                                    <td>{{ $list->ClientSource->name ?? 'N/A' }}</td>
                                    <td>{{ $list->name ?? 'N/A' }}</td>
                                    <td>{{ $list->customer_status ?? 'N/A' }} <br> {{ $list->line_status }} <br>
                                        {{ $list->marketing_done ?? 'N/A' }}
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">
                                            ACD : {{ $list->confirm_activation_date ?? 'N/A' }}
                                        </span>
                                        <br>
                                        <span
                                            class="badge {{ $list->follow_up_date && \Carbon\Carbon::parse($list->follow_up_date)->lte(\Carbon\Carbon::today()) ? 'bg-danger' : 'bg-info' }}">
                                            FU : {{ $list->follow_up_date ?? 'N/A' }}
                                        </span>
                                        @if ($list->_is_followup ?? false)
                                            <br><span class="badge badge-warning"><i class="fas fa-bell"></i> Follow Up
                                                Due</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($list->multi_router == 'Access Point')
                                            <span class="badge badge-primary">Access Point</span>
                                        @elseif ($list->multi_router == 'Yes')
                                            <span class="badge badge-danger">Yes</span>
                                        @elseif ($list->multi_router == 'No(1)')
                                            <span class="badge badge-success">No(1)</span>
                                        @else
                                            <span class="badge badge-warning">{{ $list->multi_router ?? 'N/A' }}</span>
                                        @endif
                                    </td>
                                    <td>{{ $list->survey_status ?? 'N/A' }}</td>
                                    <td>{{ optional($list->remarksList->last())->remarks ?? '' }} <br>
                                        {{ optional($list->remarksList->last())->user->name ?? '' }}</td>
                                    <td>{{ $list->updated_at }}
                                        @if ($list->lock_by && $list->updated_at->diffInMinutes(now()) < 60)
                                            <span class="badge badge-danger"
                                                title="Locked by {{ $list->lockByUser->name ?? 'Unknown' }}">
                                                <i class="fas fa-lock"></i> Locked
                                            </span>
                                            <br>
                                            {{ $list->lockBy->name ?? 'N/A' }}
                                        @endif
                                    </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 }}">

                                                <a href="{{ route('newline.newInformation', ['confirm_line' => 'new-line', 'id' => $list->id]) }}"
                                                    class="dropdown-item">Information Add</a>

                                                @can('new_line_support_done')
                                                    @if ($list->multi_router == 'Yes')
                                                        <button type="button" class="dropdown-item open-support-done-modal"
                                                            data-id="{{ $list->id }}"
                                                            data-status="{{ $list->support_remarks }}">Support
                                                            Done</button>
                                                    @endif
                                                @endcan
                                                <a href="#" class="dropdown-item open-remarks-modal"
                                                    data-id="{{ $list->id }}">
                                                    Remark
                                                </a>
                                                <a href="#" class="dropdown-item open-survey-modal"
                                                    data-id="{{ $list->id }}">
                                                    Update Survey Status
                                                </a>
                                                <a href="#" class="dropdown-item open-marketig-modal"
                                                    data-id="{{ $list->id }}"
                                                    data-follow-up-date="{{ $list->follow_up_date ? \Carbon\Carbon::parse($list->follow_up_date)->format('Y-m-d') : '' }}"
                                                    data-confirm-activation-date="{{ $list->confirm_activation_date ? \Carbon\Carbon::parse($list->confirm_activation_date)->format('Y-m-d') : '' }}">
                                                    Marketing Status
                                                </a>
                                                <a href="#" class="dropdown-item open-assign-modal"
                                                    data-id="{{ $list->id }}">
                                                    @if ($list->assigned_to != null)
                                                        Re Assgin
                                                    @else
                                                        Assgin
                                                    @endif

                                                </a>
                                                <a href="{{ route('new-line-request-history-logs', $list->id) }}"
                                                    class="dropdown-item">History Log</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>
</div>

<!-- Simple Survey Modal -->
<div class="modal fade" id="surveyModal" tabindex="-1" aria-labelledby="surveyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="surveyModalLabel">Survey Information</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="surveyForm">
                @csrf
                <input type="hidden" name="id" id="surveyHiddenRequestId">
                <div class="modal-body">
                    <p class="mb-3">
                        Update survey information for Request ID:
                        <strong id="surveyModalRequestId"></strong>
                    </p>
                    <div class="form-row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="surveySelect">Survey Status</label>
                                <select name="survey" id="surveySelectModal" class="form-control select2"
                                    autocomplete="off">
                                    <option value="">Select Survey Status</option>
                                    <option value="Coverage">Coverage</option>
                                    <option value="Not Coverage">Not Coverage</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12" id="surveyCancelReasonSection">
                            <div class="form-group">
                                <label class="d-block mb-2">Cancel Reason</label>
                                <div class="border rounded bg-light p-3">
                                    <div class="row">
                                        @forelse ($cancelReasons as $index => $cancelReason)
                                            <div class="col-md-6 col-12 mb-2">
                                                <div class="form-check">
                                                    <input type="checkbox"
                                                        name="survey_cancel_reasons[{{ $cancelReason->id }}]"
                                                        value="Yes"
                                                        class="form-check-input survey-cancel-reason-cb"
                                                        id="survey-cancel-reason_{{ $cancelReason->id }}"
                                                        autocomplete="off"
                                                        data-survey-cancel-reason-id="{{ $cancelReason->id }}">
                                                    <label class="form-check-label"
                                                        for="survey-cancel-reason_{{ $cancelReason->id }}">
                                                        {{ $cancelReason->reason }}
                                                    </label>
                                                </div>
                                            </div>
                                        @empty
                                            <div class="col-12">
                                                <p class="text-muted mb-0">No cancel reasons defined.</p>
                                            </div>
                                        @endforelse
                                    </div>
                                </div>
                                <small class="form-text text-muted mt-1">Check for Yes, leave unchecked for
                                    No.</small>

                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="surveyRemarks">Survey Remarks</label>
                                <textarea name="survey_remarks" id="surveyRemarksModal" class="form-control" rows="4"
                                    placeholder="Enter survey remarks..." autocomplete="off"></textarea>
                            </div>
                        </div>
                    </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" id="submitSurveyStatusModal">Submit Survey
                        Status</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="open-support-done-modal" tabindex="-1" aria-labelledby="supportDoneModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="supportDoneModalLabel">Support Done</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="supportDoneForm" action="#" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="supportRemarks">Support Remarks</label>
                        <textarea name="support_remarks" id="supportRemarks" class="form-control" rows="4"
                            placeholder="Enter support remarks..." data-status=""></textarea>
                    </div>
                    <div class="form-group">
                        <label>Cancel for Multi Router Issue</label>
                        <div class="mt-1">
                            <input type="hidden" name="support_cancel_status_for_multi_router" value="No">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input"
                                    id="supportCancelStatusForMultiRouter"
                                    name="support_cancel_status_for_multi_router" value="Yes">
                                <label class="custom-control-label"
                                    for="supportCancelStatusForMultiRouter">Yes</label>
                            </div>
                        </div>
                        <small class="form-text text-muted mt-1">Check for Yes, leave unchecked for No.</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">Submit Support Remarks</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="marketinStatusModal" tabindex="-1" aria-labelledby="marketingModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="marketingModalLabel">Marketing Status</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="marketingForm" action="#" method="POST">
                @csrf
                <div class="modal-body">

                    <input type="hidden" name="id" id="marketingStatusHiddenRequestId">

                    <div class="form-group">
                        <label for="marketingStatus">Marketing Status*</label>
                        <select name="marketingModalStatus" id="marketingModalStatus" class="form-control">
                            <option value="">Select Marketing Status</option>
                            @foreach ($marketingStatus as $status)
                                <option value="{{ $status->id }}">
                                    {{ $status->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12" id="followup_section" style="display: none;">
                        <div class="form-group">
                            <label for="follow_up_date_marketing">Follow Up Date</label>
                            <input type="date" id="follow_up_date_marketing" name="follow_up_date_marketing"
                                class="form-control" value="" autocomplete="off">
                        </div>
                    </div>

                    <div class="col-md-12" id="confirm_activation_date_section" style="display: none;">
                        <div class="form-group">
                            <label for="confirm_activation_date_modal">Confirm Activation Date</label>
                            <input type="date" id="confirm_activation_date_modal"
                                name="confirm_activation_date_modal" class="form-control" value=""
                                autocomplete="off">
                        </div>
                    </div>

                    <div class="form-group" id="marketingUserSection" style="display: none;">
                        <label for="marketingUserSelect">Select Marketing User *</label>
                        <select name="marketing_user_id" id="marketingUserSelect" class="form-control select2">
                            <option value="">Select Marketing User</option>

                        </select>
                    </div>


                    <div class="col-12" id="cancelReasonSection">
                        <div class="form-group">
                            <label class="d-block mb-2">Cancel Reason</label>
                            <div class="border rounded bg-light p-3">
                                <div class="row">
                                    @forelse ($cancelReasons as $index => $cancelReason)
                                        <div class="col-md-6 col-12 mb-2">
                                            <div class="form-check">
                                                <input type="checkbox" name="cancel_reasons[{{ $cancelReason->id }}]"
                                                    value="Yes" class="form-check-input cancel-reason-cb"
                                                    id="cancel-reason_{{ $cancelReason->id }}" autocomplete="off"
                                                    data-cancel-reason-id="{{ $cancelReason->id }}">
                                                <label class="form-check-label"
                                                    for="cancel-reason_{{ $cancelReason->id }}">
                                                    {{ $cancelReason->reason }}
                                                </label>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12">
                                            <p class="text-muted mb-0">No cancel reasons defined.</p>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                            <small class="form-text text-muted mt-1">Check for Yes, leave unchecked for
                                No.</small>

                        </div>
                    </div>


                    <div class="form-group">
                        <label for="marketingModalRemrks">Marketing Remarks*</label>
                        <textarea name="marketing_remarks" id="marketingRemarks" class="form-control" rows="4"
                            placeholder="Enter marketing remarks..." data-status=""></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">Submit Marketing Remarks</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Assign Modal -->
<div class="modal fade" id="assignModal" tabindex="-1" aria-labelledby="assignModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignModalLabel">Assign Request</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="assignForm">
                @csrf
                <input type="hidden" name="id" id="assignHiddenRequestId">
                <div class="modal-body">
                    <p class="mb-3">
                        Assign Request ID: <strong id="assignModalRequestId"></strong>
                    </p>
                    <div class="form-group">
                        <label for="assignUserSelect">Select User *</label>
                        <select name="user_id" id="assignUserSelect" class="form-control select2" required>
                            <option value="">Select User</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="assignRemarks">Assignment Remarks</label>
                        <textarea name="assign_remarks" id="assignRemarks" class="form-control" rows="3"
                            placeholder="Enter assignment remarks (optional)..." autocomplete="off"></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" id="submitAssignBtn">
                        <i class="fas fa-user-plus"></i> Assign Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
