@extends('layout.app')

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

        #dataTable thead th {
            position: sticky;
            top: 0;
            background-color: #343a40 !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);
            color: #fff !important;
        }

        .follow-up-row {
            background-color: #fff3cd !important;
            border-left: 4px solid #ffc107 !important;
        }

        .follow-up-row td:first-child {
            font-weight: bold;
        }
    </style>
    <style>
        .dropdown-menu.action-dropdown-menu {
            max-height: 50vh;
            overflow-y: auto;
            overflow-x: hidden;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">

        {{-- Filter card --}}
        <div class="card mb-3">
            <div class="card-header">
                <h4 class="card-title mb-0">{{ $page_title }}</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('follow-up-report') }}" method="GET" id="filterForm">
                    <div class="row">

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>From Date</label>
                                <input type="date" name="from_date" class="form-control form-control-sm"
                                    value="{{ request('from_date') }}">
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>To Date</label>
                                <input type="date" name="to_date" class="form-control form-control-sm"
                                    value="{{ request('to_date') }}">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Assigned User</label>
                                <select name="assigned_to" class="form-control form-control-sm select2">
                                    <option value="">All Users</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}"
                                            {{ request('assigned_to') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>POP</label>
                                <select name="pop_id" class="form-control form-control-sm select2">
                                    <option value="">All POPs</option>
                                    @foreach ($pops as $pop)
                                        <option value="{{ $pop->id }}"
                                            {{ request('pop_id') == $pop->id ? 'selected' : '' }}>
                                            {{ $pop->popname }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2 d-flex align-items-end">
                            <div class="form-group w-100">
                                <button type="submit" class="btn btn-primary btn-sm btn-block">
                                    <i class="fas fa-search"></i> Search
                                </button>
                            </div>
                        </div>

                        @if (request()->hasAny(['from_date', 'to_date', 'assigned_to', 'pop_id']))
                            <div class="col-md-12 mt-1">
                                <a href="{{ route('follow-up-report') }}"
                                    class="btn btn-secondary btn-sm float-right">
                                    <i class="fas fa-undo"></i> Reset
                                </a>
                            </div>
                        @endif

                    </div>
                </form>
            </div>
        </div>

        {{-- Result --}}
        <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">Follow Up Report</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>Survey 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' }}
                                                @if (!empty($list->user->name) && !empty($list->user->mobile_number))
                                                    <br><small>{{ $list->user->mobile_number }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                {{ $list->assign->name ?? 'N/A' }}
                                                @if (!empty($list->assign->name) && !empty($list->assign->mobile_number))
                                                    <br><small>{{ $list->assign->mobile_number }}</small>
                                                @endif
                                            </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 }}</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(optional($list->remarksList->last())->user)->name ?? '' }}
                                                @php
                                                    $remarkUser = optional(optional($list->remarksList->last())->user);
                                                @endphp
                                                @if (!empty($remarkUser->name) && !empty($remarkUser->mobile_number))
                                                    <small>({{ $remarkUser->mobile_number }})</small>
                                                @endif
                                                @if ($list->marketing_done == 5)
                                                    <br> Cancel Reason :
                                                    @foreach ($list->cancelReasons as $cancelReason)
                                                        {{ $cancelReason->CancelReason->reason }}
                                                        <br>
                                                    @endforeach
                                                    Cancel By : {{ $list->marketingDoneUser->name ?? 'N/A' }}
                                                    @if (!empty($list->marketingDoneUser->name) && !empty($list->marketingDoneUser->mobile_number))
                                                        <small>({{ $list->marketingDoneUser->mobile_number }})</small>
                                                    @endif
                                                    <br>
                                                    Cancel Remarks : {{ $list->approval_remarks ?? 'N/A' }}
                                                @endif
                                            </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' }}
                                                    @if (!empty($list->lockBy->name) && !empty($list->lockBy->mobile_number))
                                                        <small>({{ $list->lockBy->mobile_number }})</small>
                                                    @endif
                                                @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 Assign
                                                            @else
                                                                Assign
                                                            @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>

    </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">
                    <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;"></div>
                    </div>
                    <hr>
                    <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>

    <!-- 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>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 $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>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>

    <!-- Support Done Modal -->
    <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>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>

    <!-- Marketing Status Modal -->
    <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>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>Follow Up Date</label>
                                <input type="date" id="follow_up_date_marketing" name="follow_up_date_marketing"
                                    class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-12" id="confirm_activation_date_section" style="display: none;">
                            <div class="form-group">
                                <label>Confirm Activation Date</label>
                                <input type="date" id="confirm_activation_date_modal"
                                    name="confirm_activation_date_modal" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group" id="marketingUserSection" style="display: none;">
                            <label>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 $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>Marketing Remarks*</label>
                            <textarea name="marketing_remarks" id="marketingRemarks" class="form-control" rows="4"
                                placeholder="Enter marketing remarks..."></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>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>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>

@endsection

@section('ajax')
    <script>
        $(function() {

            if ($.fn.DataTable && $('#dataTable').length) {
                $('#dataTable').DataTable({
                    destroy: true,
                    pageLength: 100,
                    order: [
                        [0, 'asc']
                    ],
                    scrollY: '500px',
                    scrollCollapse: true,
                    paging: true,
                    drawCallback: function() {
                        $('[data-toggle="dropdown"]').dropdown();
                    }
                });
            }

            $(document).on('show.bs.dropdown', '#dataTable .dropdown', function() {
                var $toggle = $(this).find('.dropdown-toggle');
                var $menu = $(this).find('.dropdown-menu');
                $('body').append($menu.detach());
                var offset = $toggle.offset();
                $menu.css({
                    display: 'block',
                    position: 'absolute',
                    top: offset.top + $toggle.outerHeight(),
                    left: offset.left,
                    zIndex: 9999
                });
                $(this).data('detached-menu', $menu);
            });

            $(document).on('hide.bs.dropdown', '#dataTable .dropdown', function() {
                var $menu = $(this).data('detached-menu');
                if ($menu) {
                    $(this).append($menu.detach());
                    $menu.removeAttr('style');
                }
            });

            $(document).on('click', '.open-support-done-modal', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                var url = '{{ route('newline.supportdone', 'ID_PLACEHOLDER') }}'.replace('ID_PLACEHOLDER', id);
                $('#supportDoneForm').attr('action', url);
                $('#supportRemarks').val($(this).data('status'));
                $('#supportCancelStatusForMultiRouter').prop('checked', false);
                $('#open-support-done-modal').modal('show');
            });

            $(document).on('click', '.open-remarks-modal', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                $('#remarkRequestId').val(id);
                $('#newRemarkText').val('');
                $('#remarksList').empty();
                $('#remarksListEmpty').addClass('d-none');
                $('#remarksListLoading').removeClass('d-none');
                $('#remarksModal').modal('show');

                $.ajax({
                    type: 'GET',
                    url: '{{ route('new-line-request-remarks') }}',
                    data: { id: id },
                    success: function(res) {
                        $('#remarksListLoading').addClass('d-none');
                        var tableHtml = `<table class="table table-sm table-bordered"><thead class="thead-light"><tr><th>Created By</th><th>Remark</th><th>Time</th></tr></thead><tbody></tbody></table>`;
                        $('#remarksList').html(tableHtml);
                        var $tbody = $('#remarksList table tbody');
                        if (res.data && res.data.length > 0) {
                            $('#remarksListEmpty').addClass('d-none');
                            res.data.forEach(function(item) {
                                var userName = item.user && item.user.name ? item.user.name : 'Unknown User';
                                $tbody.append(`<tr><td>${userName}</td><td>${item.remarks || ''}</td><td>${item.created_at || ''}</td></tr>`);
                            });
                        } else {
                            $('#remarksListEmpty').removeClass('d-none');
                        }
                    },
                    error: function() {
                        $('#remarksListLoading').addClass('d-none');
                        $('#remarksListEmpty').removeClass('d-none').text('Failed to load remarks. Please try again.');
                    }
                });
            });

            $(document).on('submit', '#addRemarkForm', function(e) {
                e.preventDefault();
                var requestId = $('#remarkRequestId').val();
                var remarkText = $('#newRemarkText').val();
                var $btn = $(this).find('button[type="submit"]');
                var origHtml = $btn.html();
                $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Submitting...');

                $.ajax({
                    url: '{{ route('new-line-request-remarks-add') }}',
                    type: 'GET',
                    data: { _token: '{{ csrf_token() }}', remarks: remarkText, id: requestId },
                    success: function(res) {
                        $btn.prop('disabled', false).html(origHtml);
                        $('#remarksListLoading').addClass('d-none');
                        toastr.success(res.message);
                        $('#newRemarkText').val('');
                        var tableHtml = `<table class="table table-sm table-bordered"><thead class="thead-light"><tr><th>Created By</th><th>Remark</th><th>Time</th></tr></thead><tbody></tbody></table>`;
                        $('#remarksList').html(tableHtml);
                        var $tbody = $('#remarksList table tbody');
                        if (res.data && res.data.length > 0) {
                            $('#remarksListEmpty').addClass('d-none');
                            res.data.forEach(function(item) {
                                var userName = item.user && item.user.name ? item.user.name : 'Unknown User';
                                $tbody.append(`<tr><td>${userName}</td><td>${item.remarks || ''}</td><td>${item.created_at || ''}</td></tr>`);
                            });
                        } else {
                            $('#remarksListEmpty').removeClass('d-none');
                        }
                    },
                    error: function() {
                        $btn.prop('disabled', false).html(origHtml);
                        $('#remarksListEmpty').removeClass('d-none').text('Failed to submit remark. Please try again.');
                    }
                });
            });

            function handleSurveyCancelReasonVisibility() {
                if ($('#surveySelectModal').val() === 'Not Coverage') {
                    $('#surveyCancelReasonSection').show();
                } else {
                    $('#surveyCancelReasonSection').hide();
                    $('.survey-cancel-reason-cb').prop('checked', false);
                }
            }

            $('#surveySelectModal').on('change', handleSurveyCancelReasonVisibility);

            $(document).on('click', '.open-survey-modal', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                $('#surveyModalRequestId').text(id);
                $('#surveyHiddenRequestId').val(id);
                $('#surveySelectModal').val('');
                $('#surveyRemarksModal').val('');
                $('.survey-cancel-reason-cb').prop('checked', false);
                $('#surveyCancelReasonSection').hide();
                $('#surveyModal').modal('show');
            });

            $(document).on('submit', '#surveyForm', function(e) {
                e.preventDefault();
                var requestId = $('#surveyHiddenRequestId').val();
                var surveyStatus = $('#surveySelectModal').val();
                var surveyRemarks = $('#surveyRemarksModal').val();
                var surveyCancelReasons = $('.survey-cancel-reason-cb:checked').map(function() {
                    return $(this).data('survey-cancel-reason-id');
                }).get();

                if (!surveyStatus) { toastr.error('Please select survey status'); return false; }
                if (!surveyRemarks) { toastr.error('Please enter survey remarks'); return false; }
                if (surveyStatus === 'Not Coverage' && surveyCancelReasons.length === 0) {
                    toastr.error('Please select at least one cancel reason'); return false;
                }

                $.ajax({
                    url: '{{ route('new-line-request-survey-update') }}',
                    type: 'GET',
                    data: { _token: '{{ csrf_token() }}', survey: surveyStatus, survey_remarks: surveyRemarks, id: requestId, survey_cancel_reasons: surveyCancelReasons },
                    success: function(res) {
                        if (res.error == false) {
                            toastr.success(res.message);
                            if (surveyStatus === 'Not Coverage') {
                                $('tr').find('td:first').filter(function() {
                                    return $(this).text().trim() == requestId;
                                }).closest('tr').fadeOut(400, function() {
                                    $(this).remove();
                                    var n = parseInt($('.col-6 h5').text().replace('Total: ', ''));
                                    $('.col-6 h5').text('Total: ' + (n - 1));
                                });
                            }
                        } else {
                            toastr.error(res.message);
                        }
                        $('#surveyModal').modal('hide');
                    },
                    error: function() { toastr.error('An error occurred. Please try again.'); }
                });
            });

            $(document).on('click', '.open-marketig-modal', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                $('#marketingStatusHiddenRequestId').val(id);
                $('#marketingRemarks').val('');
                $('#follow_up_date_marketing').val($(this).data('follow-up-date') || '');
                $('#confirm_activation_date_modal').val($(this).data('confirm-activation-date') || '');
                $('#marketinStatusModal').modal('show');
            });

            function handleCancelReasonVisibility() {
                var status = $('#marketingModalStatus').val();
                if (status === '2') { $('#followup_section').show(); }
                else { $('#followup_section').hide(); $('#follow_up_date_marketing').val(''); }

                if (status === '1') {
                    $('#marketingUserSection').show();
                    $('#marketingUserSelect').prop('required', true);
                    $('#confirm_activation_date_section').show();
                    var newLineRequestId = $('#marketingStatusHiddenRequestId').val();
                    $.ajax({
                        url: '{{ route('get-marketing-users') }}',
                        type: 'GET',
                        data: { id: newLineRequestId },
                        success: function(res) {
                            $('#marketingUserSelect').html('<option value="">Select Marketing User</option>');
                            res.data.forEach(function(item) {
                                $('#marketingUserSelect').append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                            if ($('#marketingUserSelect').hasClass('select2-hidden-accessible')) {
                                $('#marketingUserSelect').select2('destroy');
                            }
                            $('#marketingUserSelect').select2({ dropdownParent: $('#marketinStatusModal'), placeholder: 'Select Marketing User', allowClear: true });
                        }
                    });
                } else {
                    $('#marketingUserSection').hide();
                    $('#marketingUserSelect').val('').trigger('change').prop('required', false);
                    $('#confirm_activation_date_section').hide();
                    $('#confirm_activation_date_modal').val('');
                }

                if (status === '1' || status === '2' || status === '') {
                    $('#cancelReasonSection').hide();
                    $('.cancel-reason-cb').prop('checked', false);
                } else {
                    $('#cancelReasonSection').show();
                }
            }

            $('#marketingModalStatus').on('change', handleCancelReasonVisibility);

            $('#marketinStatusModal').on('shown.bs.modal', function() {
                $('#marketingModalStatus').val('');
                $('.cancel-reason-cb').prop('checked', false);
                $('#cancelReasonSection').hide();
                $('#followup_section').hide();
                $('#marketingUserSection').hide();
                $('#marketingUserSelect').val('').trigger('change').prop('required', false);
                $('#confirm_activation_date_section').hide();
            });

            $(document).on('submit', '#marketingForm', function(e) {
                e.preventDefault();
                var requestId = $('#marketingStatusHiddenRequestId').val();
                var marketingStatus = $('#marketingModalStatus').val();
                var marketingRemarks = $('#marketingRemarks').val();
                var marketingUserId = $('#marketingUserSelect').val();
                var followUp = $('#follow_up_date_marketing').val();
                var confirmation = $('#confirm_activation_date_modal').val();
                var cancelReasons = $('.cancel-reason-cb:checked').map(function() {
                    return $(this).data('cancel-reason-id');
                }).get();

                if (!marketingStatus) { toastr.error('Please select status'); return false; }
                if (!marketingRemarks) { toastr.error('Please enter remarks'); return false; }
                if (marketingStatus != 1 && marketingStatus != 2 && cancelReasons.length === 0) { toastr.error('Please select at least one cancel reason'); return false; }
                if (marketingStatus == 2 && !followUp) { toastr.error('Please select a follow-up date'); return false; }
                if (marketingStatus == 1 && !marketingUserId) { toastr.error('Please select a marketing user'); return false; }
                if (marketingStatus == 1 && !confirmation) { toastr.error('Please select a confirm activation date'); return false; }

                $.ajax({
                    url: '{{ route('change-marketing-status') }}',
                    type: 'GET',
                    data: { _token: '{{ csrf_token() }}', marketingStatus: marketingStatus, marketingRemarks: marketingRemarks, id: requestId, cancelReasons: cancelReasons, followUpDate: followUp, marketingUserId: marketingUserId, confirmation: confirmation },
                    success: function(res) {
                        if (res.error == false) {
                            toastr.success(res.message);
                            $('tr').find('td:first').filter(function() {
                                return $(this).text().trim() == requestId;
                            }).closest('tr').fadeOut(400, function() {
                                $(this).remove();
                                var n = parseInt($('.col-6 h5').text().replace('Total: ', ''));
                                $('.col-6 h5').text('Total: ' + (n - 1));
                            });
                        } else {
                            toastr.error(res.message);
                        }
                        $('#marketinStatusModal').modal('hide');
                    },
                    error: function() { toastr.error('An error occurred. Please try again.'); }
                });
            });

            $(document).on('click', '.open-assign-modal', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                $('#assignModalRequestId').text(id);
                $('#assignHiddenRequestId').val(id);
                $('#assignUserSelect').val('').trigger('change');
                $('#assignRemarks').val('');
                $('#assignModal').modal('show');
            });

            $('#assignModal').on('shown.bs.modal', function() {
                if ($('#assignUserSelect').hasClass('select2-hidden-accessible')) {
                    $('#assignUserSelect').select2('destroy');
                }
                $('#assignUserSelect').select2({ dropdownParent: $('#assignModal'), placeholder: 'Select User', allowClear: true });
            });

            $(document).on('submit', '#assignForm', function(e) {
                e.preventDefault();
                var requestId = $('#assignHiddenRequestId').val();
                var userId = $('#assignUserSelect').val();
                var assignRemarks = $('#assignRemarks').val();
                var $btn = $('#submitAssignBtn');
                var origHtml = $btn.html();

                if (!userId) { toastr.error('Please select a user'); return false; }

                $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Assigning...');

                $.ajax({
                    url: '{{ route('new-line-request-assign') }}',
                    type: 'POST',
                    data: { _token: '{{ csrf_token() }}', id: requestId, user_id: userId, assign_remarks: assignRemarks },
                    success: function(res) {
                        $btn.prop('disabled', false).html(origHtml);
                        if (res.error == false) {
                            toastr.success(res.message);
                            $('#assignModal').modal('hide');
                        } else {
                            toastr.error(res.message);
                        }
                    },
                    error: function(xhr) {
                        $btn.prop('disabled', false).html(origHtml);
                        var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'An error occurred. Please try again.';
                        toastr.error(msg);
                    }
                });
            });

        });
    </script>
@endsection