@extends('staff.layout2')
@section('content')
    <div class="container-fluid px-1 py-4">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h5 class="fw-bold mb-0">Follow-Up List</h5>
            <div class="d-flex gap-2">
            </div>
        </div>
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                <div class="row align-items-center mb-3 g-2">
                    <div class="col-md-6 col-12">
                        <div class="d-flex align-items-center gap-2">
                            <select id="pageLength" class="form-select border-1" style="width: 80px;">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 col-12 d-flex justify-content-md-end gap-2">
                        <input type="text" id="customSearch" class="form-control" style="max-width: 250px;"
                            placeholder="# Customer / Vehicle No">
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="followUpTable" class="table align-middle text-center w-100 mb-0">
                        <thead>
                            <tr>
                                <th>S.NO</th>
                                <th>NAME</th>
                                <th>NUMBER</th>
                                <th>VEHICLE MODEL</th>
                                <th>TOTAL DUE</th>
                                <th>MONTHLY DUE</th>
                                <th>BALANCE</th>
                                <th>DUE DATE</th>
                                <th>CALL</th>
                                <th>View</th>
                                <th>STATUS</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="callModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 p-4">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Record Call Log</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('staff_store_CallLog_admin') }}" method="POST" id="callLogForm">
                    @csrf
                    <input type="hidden" name="customer_id" id="modal_customer_id">
                    <input type="hidden" name="vehicle_sell_id" id="modal_sale_id">

                    <div class="modal-body pt-3">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Customer Name</label>
                            <input type="text" id="modal_customer_name" class="form-control" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Mobile Number</label>
                            <input type="text" id="modal_mobile" class="form-control" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Call Remarks / Description <span class="text-danger">*</span>
                            </label>
                            <textarea name="call_summary" class="form-control @error('call_summary') is-invalid @enderror" rows="3"
                                placeholder="Enter details..." required>{{ old('call_summary') }}</textarea>
                            @error('call_summary')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Next Promise Date</label>
                            <input type="date" name="next_promise_date"
                                class="form-control @error('next_promise_date') is-invalid @enderror"
                                value="{{ old('next_promise_date') }}">
                            @error('next_promise_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="modal-footer justify-content-center border-0 pt-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger px-4" id="submitCallLogBtn">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="updateStatusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">Are you sure!!</h5>

                <p class="text-muted mb-0">
                    Are you sure you want to select
                    <strong>Not Picked Up</strong>?
                </p>

                <input type="hidden" id="modal_status_sale_id">

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal" id="cancelStatusUpdate">
                        Cancel
                    </button>

                    <button type="button" id="btnSaveStatus" class="btn btn-danger">
                        <span class="btn-text">Yes, Sure</span>

                        <span class="btn-processing d-none">
                            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                            Processing...
                        </span>
                    </button>

                </div>
            </div>
        </div>
    </div>
    {{-- <div class="modal fade" id="updateStatusModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 p-3">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Update Follow-Up Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3">
                    <input type="hidden" id="modal_status_sale_id">
                    <div class="mb-3">
                        <label for="newStatusSelect" class="form-label fw-semibold">Select New Status</label>
                        <select class="form-select" id="newStatusSelect">
                            <option value="" selected disabled>-- Select Status --</option>
                            <option value="pending">Pending</option>
                            <option value="not_picked_up">Not Picked Up</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary px-4" id="btnSaveStatus">Update Status</button>
                </div>
            </div>
        </div>
    </div> --}}

    <div class="modal fade" id="historyModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 p-3">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Customer Call History</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table align-middle text-center w-100 mb-0">
                            <thead>
                                <tr>
                                    <th>S.NO</th>
                                    <th>CALLED BY</th>
                                    <th>STATUS</th>
                                    <th>DESCRIPTION</th>
                                    <th>CALL DATE</th>
                                    <th>PROMISE DATE</th>
                                </tr>
                            </thead>
                            <tbody id="historyTableBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>

    <script class="code-js">
        $(document).ready(function() {
            let targetFollowUpId = null;

            let table = $('#followUpTable').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                lengthChange: false,
                ajax: "{{ route('follow_up') }}",
                pageLength: 10,
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'customer_name',
                        name: 'customer_name'
                    },
                    {
                        data: 'customer_mobile',
                        name: 'customer_mobile'
                    },
                    {
                        data: 'vehicle_model',
                        name: 'vehicle_model'
                    },
                    {
                        data: 'total_due',
                        name: 'total_due'
                    },
                    {
                        data: 'monthly_due',
                        name: 'monthly_due'
                    },
                    {
                        data: 'pending_balance',
                        name: 'pending_balance'
                    },
                    {
                        data: 'due_date',
                        name: 'due_date'
                    },
                    {
                        data: 'call',
                        name: 'call',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('#customSearch').on('keyup', function() {
                table.search(this.value).draw();
            });
            $('#pageLength').on('change', function() {
                table.page.len(this.value).draw();
            });

            // Call Log submit state fix
            $('#callLogForm').on('submit', function() {
                let btn = $('#submitCallLogBtn');
                btn.prop('disabled', true);
                btn.html(
                    '<span class="spinner-border spinner-border-sm me-1" role="status"></span> Submitting...'
                    );
            });

            $(document).on('click', '.open-call-modal', function() {
                $('#modal_customer_id').val($(this).data('customer-id'));
                $('#modal_sale_id').val($(this).data('sale-id'));
                $('#modal_customer_name').val($(this).data('customer-name'));
                $('#modal_mobile').val($(this).data('mobile'));
            });

            $(document).on('click', '.open-status-modal', function() {
                targetFollowUpId = $(this).data('id');
                $('#modal_status_sale_id').val(targetFollowUpId);
                $('#newStatusSelect').val('');

                let statusModal = new bootstrap.Modal(document.getElementById('updateStatusModal'));
                statusModal.show();
            });

            $('.modal').on('hidden.bs.modal', function() {
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open').css({
                    'overflow': '',
                    'padding-right': '',
                    'pointer-events': 'auto'
                });
            });

            $('#btnSaveStatus').on('click', function() {
                let btn = $(this);
                // let newStatusValue = $('#newStatusSelect').val();
                let newStatusValue = 'not_picked_up';

                if (!newStatusValue) {
                    if (typeof showAjaxToast === 'function') {
                        showAjaxToast('Please select a status before updating.', 'error');
                    } else {
                        alert('Please select a status before updating.');
                    }
                    return;
                }

                btn.prop('disabled', true);
                btn.html(
                    '<span class="spinner-border spinner-border-sm me-1" role="status"></span> Updating...'
                    );

                $.ajax({
                    url: "{{ route('follow_up_updateStatus_staff') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: targetFollowUpId,
                        status: newStatusValue
                    },
                    success: function(response) {
                        btn.prop('disabled', false).text('Update Status');

                        // Hide modal cleanly using Bootstrap API
                        let statusModalEl = document.getElementById('updateStatusModal');
                        let statusModal = bootstrap.Modal.getInstance(statusModalEl);
                        if (statusModal) {
                            statusModal.hide();
                        }

                        if (typeof showAjaxToast === 'function') {
                            showAjaxToast(
                                response.message || 'Status updated successfully.',
                                'success'
                            );
                        }

                        table.ajax.reload(null, false);
                    },
                    error: function(xhr) {
                        btn.prop('disabled', false).text('Update Status');

                        let errorMessage = 'Failed to update status. Please try again.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        if (typeof showAjaxToast === 'function') {
                            showAjaxToast(errorMessage, 'error');
                        }
                    }
                });
            });
        });
    </script>
@endsection