@extends('layouts.master')
@section('page-title', $page_info['page_title'])
@section('main-section')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a
                                            href="javascript: void(0);">{{ $page_info['page_title'] }}</a></li>
                                    <li class="breadcrumb-item active">{{ $page_info['page_name'] }}</li>
                                </ol>
                            </div>
                            <h4 class="page-title">{{ $page_info['page_name'] }}</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <!-- Filter & Search -->
                <div class="row mb-2">
                    <div class="col-12">
                        <form action="" method="get" class="row g-2">
                            <div class="col-md-3">
                                <select class="form-select" name="filter">
                                    <option value="sortBySearch" {{ $filter === 'sortBySearch' ? 'selected' : '' }}>Search</option>
                                    <option value="sortByToday" {{ $filter === 'sortByToday' ? 'selected' : '' }}>Today</option>
                                    <option value="sortByWeek" {{ $filter === 'sortByWeek' ? 'selected' : '' }}>Last 7 Days</option>
                                    <option value="sortByThisMonth" {{ $filter === 'sortByThisMonth' ? 'selected' : '' }}>Current Month</option>
                                    <option value="sortByLastMonth" {{ $filter === 'sortByLastMonth' ? 'selected' : '' }}>Previous Month</option>
                                    <option value="sortByDate" {{ $filter === 'sortByDate' ? 'selected' : '' }}>Date Range</option>
                                </select>
                            </div>

                            <div class="col-md-3 searchBoxContainer">
                                <div class="input-group">
                                    <input type="text" name="search" class="form-control searchInput" placeholder="Lead ID, status...">
                                    <button class="btn btn-primary" type="submit"><i class="uil uil-search"></i></button>
                                </div>
                            </div>

                            <div class="col-md-3 dateRangeContainer" style="display: none;">
                                <div class="input-group">
                                    <input type="text" class="form-control date singledaterange" name="searchRange">
                                    <button class="btn btn-primary" type="submit"><i class="uil uil-search"></i></button>
                                </div>
                            </div>

                            @if(!empty($filter))
                                <div class="col-md-1">
                                    <a href="{{ url()->current() }}" class="btn btn-outline-primary"><i class="uil uil-refresh"></i></a>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>

                <!-- Settlements Table -->
                <div class="row">
                    <div class="col-12">

                        <div class="card">
                            <div class="card-body" data-simplebar data-simplebar-lg style="overflow-x:auto;">
                                <table class="table w-100 table-striped" style="white-space: nowrap;">
                                    <thead>
                                        <tr style="font-size:14px;">
                                            <th>#</th>
                                            <th>Action</th>
                                            <th>Lead ID</th>
                                            <th>Customer Name</th>
                                            <th>Status</th>
                                            <th>Requested Status</th>
                                            <th>Last Payment Date</th>
                                            <th>Added By</th>
                                            <th>Approved/Rejected By</th>
                                            <th>Created At</th>
                                            <th>Remarks</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($settlements as $key => $s)
                                            <tr style="font-size:15px;">
                                                <td>{{ ++$key }}</td>
                                                <td>
                                                    <a target="_blank" href="profile/payday/{{$s->leadID}}?tab=collection"
                                                        class="text-primary" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" data-bs-custom-class="primary-tooltip"
                                                        data-bs-title="Profile View" style="font-size: 16px;margin-left: 6px;">
                                                        <i class='mdi mdi-eye'></i>
                                                    </a>
                                                    @if($s->settlementStatus == 'pending')
                                                        <a href="javascript:void(0)" class="text-info openSettlementModal"
                                                            data-leadid="{{ $s->leadID }}"
                                                            data-status="{{ $s->status }}"
                                                            data-requestedstatus="{{ $s->status }}"
                                                            data-remarks="{{ $s->remark ?? '' }}">
                                                            <i class="mdi mdi-square-edit-outline"></i>
                                                        </a>
                                                    @endif
                                                </td>
                                                <td>{{ $s->leadID }}</td>
                                                <td>{{ $s->customerName ?? '-' }}</td>
                                                <td>
                                                    @php
                                                        $status = strtolower($s->settlementStatus ?? '');
                                                        $badgeClass = match ($status) {
                                                            'approved' => 'bg-success',
                                                            'rejected' => 'bg-danger',
                                                            'completed' => 'bg-success',
                                                            'pending' => 'bg-info',
                                                            default => 'bg-secondary',
                                                        };
                                                    @endphp
                                                    <span class="badge {{ $badgeClass }}">{{ $s->settlementStatus ?? '-' }}</span>
                                                </td>
                                                <td><span class="badge bg-success">{{ $s->status ?? '-' }}</span></td>
                                                <td>{{ dft($s->settlementDate) }}</td>
                                                <td>{{ $s->addedBy ? getUserNameById('users', 'userID', $s->addedBy, 'displayName') : '-' }}</td>
                                                <td>{{ getUserNameById('users', 'userID',$s->approvedBy,'displayName') }}</td>
                                                <td>{{ dft($s->created_at) }}</td>
                                                <td>{{ $s->remark ?? '-' }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="15" class="text-center">No Record Found</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                                <div class="mt-2">
                                    {{ $settlements->appends(request()->query())->links('pagination::bootstrap-5') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

    <!-- Settlement Action Modal -->
    <div id="settlementModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="settlementModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header bg-success">
                    <h4 class="modal-title text-white" id="settlementModalLabel">Settlement Action</h4>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-hidden="true"></button>
                </div>

                <!-- Modal Body -->
                <div class="modal-body">
                    <form class="ps-1 pe-1" id="settlementForm">
                        @csrf
                        <div class="row">
                            <!-- Requested Status -->
                            <div class="col-md-12">
                                <div class="mb-2">
                                    <label for="modalRequestedStatus" class="form-label">Requested Status</label>
                                    <input type="text" class="form-control bg-light" id="modalRequestedStatus"
                                        name="requested_status" readonly>
                                </div>
                            </div>

                            <!-- Action Select -->
                            <div class="col-md-12">
                                <div class="mb-2">
                                    <label for="modalAction" class="form-label">Action</label>
                                    <select class="form-select" name="action" id="modalAction" required>
                                        <option value="">Select Action</option>
                                        <option value="approve">Approve</option>
                                        <option value="reject">Reject</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Status (for Approve) -->
                            <div class="col-md-12" id="statusDiv" style="display:none;">
                                <div class="mb-2">
                                    <label for="modalStatus" class="form-label">To Be Status</label>
                                    <select class="form-control" name="status" id="modalStatus">
                                        <option value="">Choose Status</option>
                                        <option value="Closed">Closed</option>
                                        <option value="Settled to Closed">Settled to Closed</option>
                                        <option value="Settlement">Settlement</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Remark (for Reject) -->
                            <div class="col-md-12" id="remarkDiv" style="display:none;">
                                <div class="mb-2">
                                    <label for="modalRemark" class="form-label">Rejection Remark</label>
                                    <textarea class="form-control" name="remark" id="modalRemark" rows="2"></textarea>
                                </div>
                            </div>
                        </div>
                </div>

                <!-- Modal Footer -->
                <div class="modal-footer">
                    <input type="hidden" name="leadID" id="modalLeadId" value="">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Save changes</button>
                </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

@endsection

@section('custom-js')
    <script type="text/javascript">
        $(document).ready(function () {

            // Open modal
            $(document).on('click', '.openSettlementModal', function () {
                var leadID = $(this).data('leadid');
                var remarks = $(this).data('remarks');
                var requestedStatus = $(this).data('requestedstatus');

                $('#modalLeadId').val(leadID);
                $('#modalRequestedStatus').val(requestedStatus);
                $('#modalAction').val('');
                $('#modalStatus').val('');
                $('#remarkDiv, #statusDiv').hide();

                $('#settlementModal').modal('show');
            });

            // Show/hide fields based on action
            $(document).on('change', '#modalAction', function () {
                var action = $(this).val();
                $('#remarkDiv').toggle(action === 'reject');
                $('#statusDiv').toggle(action === 'approve');
            });

            // Submit settlement
            $('#settlementForm').submit(function (e) {
                e.preventDefault();

                var action = $('#modalAction').val();
                if (!action) { alert('Please select an action.'); return; }

                var leadID = $('#modalLeadId').val();
                var remark = $('#modalRemark').val();
                var status = $('#modalStatus').val();

                if (action === 'approve' && !status) { alert('Please select the status.'); return; }

                $.ajax({
                    url: action === 'approve' ? "{{ route('collection.approve') }}" : "{{ route('collection.reject') }}",
                    type: "POST",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    data: { leadID: leadID, remark: remark, action: action, status: status },
                    dataType: 'json',
                    success: function (data) {
                        if (data.response === 'success') {
                            $('#settlementModal').modal('hide');
                            $.NotificationApp.send("Success!", data.message, "bottom-right", "rgba(0,0,0,0.2)", "success");
                            setTimeout(() => location.reload(), 1000);
                        } else alert(data.message || 'Something went wrong');
                    },
                    error: function (err) { console.error(err); alert('AJAX error.'); }
                });
            });

        });
    </script>
@endsection