@extends('backend.bursar.bursar_dashboard')

@section('bursar')

<div class="container-fluid">

    {{-- ==========================================================
         PAGE HEADER
    =========================================================== --}}

    <div class="row mb-3">

        <div class="col-12">

            <div class="d-flex justify-content-between align-items-center">

                <div>

                    <h4 class="mb-1">
                        <i class="fas fa-hand-holding-usd text-success"></i>

                        Debt Limit
                    </h4>

                    <p class="text-muted mb-0">
                        Set the maximum outstanding debt allowed for a class.
                    </p>

                </div>

            </div>

        </div>

    </div>



    {{-- ==========================================================
         DEBT LIMIT FORM
    =========================================================== --}}

    <div class="card shadow-sm">

        <div class="card-header bg-success text-white">

            <strong>
                <i class="fas fa-plus-circle"></i>
                Enter Debt Limit
            </strong>

        </div>


        <div class="card-body">

            <form
                id="debtLimitForm"
            >

                @csrf


                <div class="row">


                    {{-- ==================================================
                         CLASS
                    =================================================== --}}

                    <div class="col-md-3 mb-3">

                        <label class="form-label fw-bold">

                            Class

                        </label>

                        <select
                            name="class_id"
                            id="class_id"
                            class="form-select"
                            required
                        >

                            <option value="">
                                Select Class
                            </option>


                            @foreach($classes as $class)

                                <option value="{{ $class->id }}">

                                    {{ $class->class_name }}

                                </option>

                            @endforeach

                        </select>

                        <div
                            class="text-danger small"
                            id="classError"
                        ></div>

                    </div>



                    {{-- ==================================================
                         TERM
                    =================================================== --}}

                    <div class="col-md-3 mb-3">

                        <label class="form-label fw-bold">

                            Term

                        </label>

                        <select
                            name="term"
                            id="term"
                            class="form-select"
                            required
                        >

                            <option value="">
                                Select Term
                            </option>


                            @foreach($terms as $item)

                                <option value="{{ $item->name ?? $item->term }}">

                                    {{ $item->name ?? $item->term }}

                                </option>

                            @endforeach

                        </select>

                        <div
                            class="text-danger small"
                            id="termError"
                        ></div>

                    </div>



                    {{-- ==================================================
                         SESSION
                    =================================================== --}}

                    <div class="col-md-3 mb-3">

                        <label class="form-label fw-bold">

                            Session

                        </label>

                        <select
                            name="session"
                            id="session"
                            class="form-select"
                            required
                        >

                            <option value="">
                                Select Session
                            </option>


                            @foreach($sessions as $item)

                                <option value="{{ $item->name }}">

                                    {{ $item->name }}

                                </option>

                            @endforeach

                        </select>

                        <div
                            class="text-danger small"
                            id="sessionError"
                        ></div>

                    </div>



                    {{-- ==================================================
                         DEBT LIMIT
                    =================================================== --}}

                    <div class="col-md-3 mb-3">

                        <label class="form-label fw-bold">

                            Debt Limit

                        </label>

                        <input
                            type="number"
                            name="debt_limit"
                            id="debt_limit"
                            class="form-control"
                            placeholder="Enter debt limit"
                            min="0"
                            step="0.01"
                            required
                        >

                        <div
                            class="text-danger small"
                            id="debtLimitError"
                        ></div>

                    </div>


                </div>



                {{-- ==================================================
                     SUBMIT BUTTON
                =================================================== --}}

                <div class="text-end">

                    <button
                        type="submit"
                        class="btn btn-success"
                        id="saveDebtLimitButton"
                    >

                        <i class="fas fa-save"></i>

                        Enter

                    </button>

                </div>

            </form>

        </div>

    </div>



    {{-- ==========================================================
         SAVED DEBT LIMITS
    =========================================================== --}}

    <div class="card shadow-sm mt-4">

        <div class="card-header">

            <strong>

                <i class="fas fa-list"></i>

                Debt Limit Records

            </strong>

        </div>


        <div class="card-body">

            <div class="table-responsive">

                <table
                    class="table table-bordered table-hover align-middle"
                    id="debtLimitTable"
                >

                    <thead class="table-success">

                        <tr>

                            <th>
                                S/N
                            </th>

                            <th>
                                Class
                            </th>

                            <th>
                                Term
                            </th>

                            <th>
                                Session
                            </th>

                            <th>
                                Debt Limit
                            </th>

                            <th
                                style="width: 180px;"
                            >
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody id="debtLimitTableBody">


                        @forelse($debtLimits as $index => $debt)

                            <tr
                                id="debt-limit-row-{{ $debt->id }}"
                            >

                                <td>
                                    {{ $index + 1 }}
                                </td>

                                <td>
                                    {{ $debt->studentClass?->class_name ?? 'N/A' }}
                                </td>

                                <td>
                                    {{ $debt->term }}
                                </td>

                                <td>
                                    {{ $debt->session }}
                                </td>

                                <td class="fw-bold">

                                    ₦{{ number_format($debt->debt_limit, 2) }}

                                </td>

                                <td>

                                    <button
                                        type="button"
                                        class="btn btn-primary btn-sm editDebtLimit"
                                        data-id="{{ $debt->id }}"
                                        data-class-id="{{ $debt->class_id }}"
                                        data-term="{{ $debt->term }}"
                                        data-session="{{ $debt->session }}"
                                        data-debt-limit="{{ $debt->debt_limit }}"
                                    >

                                        <i class="fas fa-edit"></i>

                                        Edit

                                    </button>


                                    <button
                                        type="button"
                                        class="btn btn-danger btn-sm deleteDebtLimit"
                                        data-id="{{ $debt->id }}"
                                    >

                                        <i class="fas fa-trash"></i>

                                        Delete

                                    </button>

                                </td>

                            </tr>

                        @empty

                            <tr id="noDebtLimitRow">

                                <td
                                    colspan="6"
                                    class="text-center text-muted"
                                >

                                    No debt limit has been entered yet.

                                </td>

                            </tr>

                        @endforelse


                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>



{{-- ==========================================================
     EDIT MODAL
========================================================== --}}

<div
    class="modal fade"
    id="editDebtLimitModal"
    tabindex="-1"
>

    <div class="modal-dialog">

        <div class="modal-content">


            <div class="modal-header bg-primary text-white">

                <h5 class="modal-title">

                    <i class="fas fa-edit"></i>

                    Edit Debt Limit

                </h5>


                <button
                    type="button"
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal"
                ></button>

            </div>


            <div class="modal-body">

                <form id="editDebtLimitForm">

                    @csrf

                    @method('PUT')


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


                    <div class="mb-3">

                        <label class="form-label fw-bold">
                            Class
                        </label>

                        <select
                            id="edit_class_id"
                            class="form-select"
                            required
                        >

                            <option value="">
                                Select Class
                            </option>


                            @foreach($classes as $class)

                                <option value="{{ $class->id }}">

                                    {{ $class->class_name }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    <div class="mb-3">

                        <label class="form-label fw-bold">
                            Term
                        </label>

                        <select
                            id="edit_term"
                            class="form-select"
                            required
                        >

                            <option value="">
                                Select Term
                            </option>


                            @foreach($terms as $item)

                                <option value="{{ $item->name ?? $item->term }}">

                                    {{ $item->name ?? $item->term }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    <div class="mb-3">

                        <label class="form-label fw-bold">
                            Session
                        </label>

                        <select
                            id="edit_session"
                            class="form-select"
                            required
                        >

                            <option value="">
                                Select Session
                            </option>


                            @foreach($sessions as $item)

                                <option value="{{ $item->name }}">

                                    {{ $item->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    <div class="mb-3">

                        <label class="form-label fw-bold">
                            Debt Limit
                        </label>

                        <input
                            type="number"
                            id="edit_debt_limit"
                            class="form-control"
                            min="0"
                            step="0.01"
                            required
                        >

                    </div>


                    <div class="text-end">

                        <button
                            type="submit"
                            class="btn btn-primary"
                        >

                            <i class="fas fa-save"></i>

                            Update

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>



{{-- ==========================================================
     AJAX
========================================================== --}}
<script>

$(document).ready(function () {

    /*
    |--------------------------------------------------------------------------
    | CSRF TOKEN
    |--------------------------------------------------------------------------
    */

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });


    /*
    |--------------------------------------------------------------------------
    | ROUTES
    |--------------------------------------------------------------------------
    |
    | We generate the Laravel routes from Blade instead of hard-coding them.
    |
    */

    const storeUrl = "{{ route('bursar.debt.limit.store') }}";

    const updateUrlTemplate =
        "{{ route('bursar.debt.limit.update', ['debtLimit' => '__ID__']) }}";

    const deleteUrlTemplate =
        "{{ route('bursar.debt.limit.destroy', ['debtLimit' => '__ID__']) }}";


    /*
    |--------------------------------------------------------------------------
    | HELPER - GET UPDATE URL
    |--------------------------------------------------------------------------
    */

    function getUpdateUrl(id) {

        return updateUrlTemplate.replace('__ID__', id);

    }


    /*
    |--------------------------------------------------------------------------
    | HELPER - GET DELETE URL
    |--------------------------------------------------------------------------
    */

    function getDeleteUrl(id) {

        return deleteUrlTemplate.replace('__ID__', id);

    }


    /*
    |--------------------------------------------------------------------------
    | HELPER - SHOW ERROR
    |--------------------------------------------------------------------------
    */

    function showAjaxError(xhr, defaultMessage) {

        console.error('Laravel AJAX Error:', xhr);

        console.error('Status:', xhr.status);

        console.error('Response:', xhr.responseJSON);


        let message = defaultMessage;


        /*
        |--------------------------------------------------------------------------
        | VALIDATION ERRORS
        |--------------------------------------------------------------------------
        */

        if (
            xhr.responseJSON &&
            xhr.responseJSON.errors
        ) {

            let errors = xhr.responseJSON.errors;

            let errorMessages = [];


            Object.keys(errors).forEach(function (field) {

                if (Array.isArray(errors[field])) {

                    errorMessages.push(
                        errors[field].join('\n')
                    );

                } else {

                    errorMessages.push(
                        errors[field]
                    );

                }

            });


            if (errorMessages.length > 0) {

                message = errorMessages.join('\n');

            }

        }


        /*
        |--------------------------------------------------------------------------
        | NORMAL LARAVEL MESSAGE
        |--------------------------------------------------------------------------
        */

        else if (
            xhr.responseJSON &&
            xhr.responseJSON.message
        ) {

            message = xhr.responseJSON.message;

        }


        /*
        |--------------------------------------------------------------------------
        | HTML ERROR
        |--------------------------------------------------------------------------
        */

        else if (
            xhr.responseText &&
            xhr.status !== 419
        ) {

            console.error(
                'Laravel Response:',
                xhr.responseText
            );

        }


        /*
        |--------------------------------------------------------------------------
        | CSRF ERROR
        |--------------------------------------------------------------------------
        */

        if (xhr.status === 419) {

            message =
                'Your session has expired. Please refresh the page and try again.';

        }


        /*
        |--------------------------------------------------------------------------
        | UNAUTHORIZED
        |--------------------------------------------------------------------------
        */

        if (xhr.status === 401) {

            message =
                'You are not authorized to perform this action.';

        }


        /*
        |--------------------------------------------------------------------------
        | NOT FOUND
        |--------------------------------------------------------------------------
        */

        if (xhr.status === 404) {

            message =
                'The requested debt limit record was not found.';

        }


        Swal.fire({

            icon: 'error',

            title: 'Error',

            text: message

        });

    }


    /*
    |--------------------------------------------------------------------------
    | SAVE DEBT LIMIT
    |--------------------------------------------------------------------------
    */

    $('#debtLimitForm').on('submit', function (event) {

        event.preventDefault();


        let form = $(this);

        let button =
            $('#saveDebtLimitButton');


        /*
        |--------------------------------------------------------------------------
        | DISABLE BUTTON
        |--------------------------------------------------------------------------
        */

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


        /*
        |--------------------------------------------------------------------------
        | CLEAR ERRORS
        |--------------------------------------------------------------------------
        */

        $('#classError').html('');

        $('#termError').html('');

        $('#sessionError').html('');

        $('#debtLimitError').html('');


        /*
        |--------------------------------------------------------------------------
        | AJAX SAVE
        |--------------------------------------------------------------------------
        */

        $.ajax({

            url: storeUrl,

            type: 'POST',

            data: form.serialize(),


            /*
            |--------------------------------------------------------------------------
            | SUCCESS
            |--------------------------------------------------------------------------
            */

            success: function (response) {

                if (!response.success) {

                    Swal.fire({

                        icon: 'error',

                        title: 'Error',

                        text:
                            response.message ||
                            'Unable to save debt limit.'

                    });

                    return;

                }


                let data =
                    response.data;


                /*
                |--------------------------------------------------------------------------
                | REMOVE EMPTY MESSAGE
                |--------------------------------------------------------------------------
                */

                $('#noDebtLimitRow').remove();


                /*
                |--------------------------------------------------------------------------
                | CALCULATE ROW NUMBER
                |--------------------------------------------------------------------------
                */

                let rowCount =
                    $('#debtLimitTableBody tr').length + 1;


                /*
                |--------------------------------------------------------------------------
                | CREATE NEW ROW
                |--------------------------------------------------------------------------
                */

                let row = `

                    <tr id="debt-limit-row-${data.id}">

                        <td>
                            ${rowCount}
                        </td>

                        <td>
                            ${data.class_name}
                        </td>

                        <td>
                            ${data.term}
                        </td>

                        <td>
                            ${data.session}
                        </td>

                        <td class="fw-bold">
                            ₦${data.debt_limit}
                        </td>

                        <td>

                            <button
                                type="button"
                                class="btn btn-primary btn-sm editDebtLimit"

                                data-id="${data.id}"

                                data-class-id="${data.class_id}"

                                data-term="${data.term}"

                                data-session="${data.session}"

                                data-debt-limit="${String(data.debt_limit).replace(/,/g, '')}"
                            >

                                <i class="fas fa-edit"></i>

                                Edit

                            </button>


                            <button
                                type="button"
                                class="btn btn-danger btn-sm deleteDebtLimit"

                                data-id="${data.id}"
                            >

                                <i class="fas fa-trash"></i>

                                Delete

                            </button>

                        </td>

                    </tr>

                `;


                /*
                |--------------------------------------------------------------------------
                | ADD ROW
                |--------------------------------------------------------------------------
                */

                $('#debtLimitTableBody')
                    .prepend(row);


                /*
                |--------------------------------------------------------------------------
                | RESET FORM
                |--------------------------------------------------------------------------
                */

                form[0].reset();


                /*
                |--------------------------------------------------------------------------
                | SUCCESS MESSAGE
                |--------------------------------------------------------------------------
                */

                Swal.fire({

                    icon: 'success',

                    title: 'Saved',

                    text:
                        response.message,

                    timer: 1800,

                    showConfirmButton: false

                });

            },


            /*
            |--------------------------------------------------------------------------
            | ERROR
            |--------------------------------------------------------------------------
            */

            error: function (xhr) {

                showAjaxError(
                    xhr,
                    'Unable to save debt limit.'
                );

            },


            /*
            |--------------------------------------------------------------------------
            | COMPLETE
            |--------------------------------------------------------------------------
            */

            complete: function () {

                button
                    .prop('disabled', false)
                    .html(
                        '<i class="fas fa-save"></i> Enter'
                    );

            }

        });

    });



    /*
    |--------------------------------------------------------------------------
    | OPEN EDIT MODAL
    |--------------------------------------------------------------------------
    */

    $(document).on(
        'click',
        '.editDebtLimit',
        function () {

            let button =
                $(this);


            /*
            |--------------------------------------------------------------------------
            | GET DATA
            |--------------------------------------------------------------------------
            */

            let id =
                button.attr('data-id');

            let classId =
                button.attr('data-class-id');

            let term =
                button.attr('data-term');

            let session =
                button.attr('data-session');

            let debtLimit =
                button.attr('data-debt-limit');


            /*
            |--------------------------------------------------------------------------
            | PUT DATA INTO MODAL
            |--------------------------------------------------------------------------
            */

            $('#editDebtLimitId')
                .val(id);


            $('#edit_class_id')
                .val(classId);


            $('#edit_term')
                .val(term);


            $('#edit_session')
                .val(session);


            $('#edit_debt_limit')
                .val(
                    String(debtLimit).replace(/,/g, '')
                );


            /*
            |--------------------------------------------------------------------------
            | SHOW MODAL
            |--------------------------------------------------------------------------
            |
            | Bootstrap 5 compatible.
            |
            */

            let modalElement =
                document.getElementById(
                    'editDebtLimitModal'
                );


            if (
                typeof bootstrap !== 'undefined' &&
                bootstrap.Modal
            ) {

                let modal =
                    bootstrap.Modal.getOrCreateInstance(
                        modalElement
                    );

                modal.show();

            } else {

                /*
                | Bootstrap 4 fallback
                */

                $('#editDebtLimitModal')
                    .modal('show');

            }

        }
    );



    /*
    |--------------------------------------------------------------------------
    | UPDATE DEBT LIMIT
    |--------------------------------------------------------------------------
    */

    $('#editDebtLimitForm').on(
        'submit',
        function (event) {

            event.preventDefault();


            /*
            |--------------------------------------------------------------------------
            | GET ID
            |--------------------------------------------------------------------------
            */

            let id =
                $('#editDebtLimitId').val();


            /*
            |--------------------------------------------------------------------------
            | CHECK ID
            |--------------------------------------------------------------------------
            */

            if (!id) {

                Swal.fire({

                    icon: 'error',

                    title: 'Error',

                    text:
                        'Debt limit ID was not found.'

                });

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | BUTTON
            |--------------------------------------------------------------------------
            */

            let button =
                $('#editDebtLimitForm button[type="submit"]');


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


            /*
            |--------------------------------------------------------------------------
            | UPDATE URL
            |--------------------------------------------------------------------------
            */

            let updateUrl =
                getUpdateUrl(id);


            console.log(
                'Updating Debt Limit:',
                updateUrl
            );


            /*
            |--------------------------------------------------------------------------
            | AJAX UPDATE
            |--------------------------------------------------------------------------
            |
            | IMPORTANT:
            |
            | We send POST + _method=PUT.
            |
            | Laravel will treat this as a PUT request.
            |
            */

            $.ajax({

                url: updateUrl,

                type: 'POST',

                data: {

                    _token:
                        $('meta[name="csrf-token"]').attr('content'),

                    _method:
                        'PUT',

                    class_id:
                        $('#edit_class_id').val(),

                    term:
                        $('#edit_term').val(),

                    session:
                        $('#edit_session').val(),

                    debt_limit:
                        $('#edit_debt_limit').val()

                },


                /*
                |--------------------------------------------------------------------------
                | SUCCESS
                |--------------------------------------------------------------------------
                */

                success: function (response) {

                    console.log(
                        'Update response:',
                        response
                    );


                    if (!response.success) {

                        Swal.fire({

                            icon: 'error',

                            title: 'Error',

                            text:
                                response.message ||
                                'Unable to update debt limit.'

                        });

                        return;

                    }


                    let data =
                        response.data;


                    /*
                    |--------------------------------------------------------------------------
                    | FIND TABLE ROW
                    |--------------------------------------------------------------------------
                    */

                    let row =
                        $(
                            '#debt-limit-row-' +
                            data.id
                        );


                    /*
                    |--------------------------------------------------------------------------
                    | UPDATE CLASS
                    |--------------------------------------------------------------------------
                    */

                    row.find('td:eq(1)')
                        .text(
                            data.class_name
                        );


                    /*
                    |--------------------------------------------------------------------------
                    | UPDATE TERM
                    |--------------------------------------------------------------------------
                    */

                    row.find('td:eq(2)')
                        .text(
                            data.term
                        );


                    /*
                    |--------------------------------------------------------------------------
                    | UPDATE SESSION
                    |--------------------------------------------------------------------------
                    */

                    row.find('td:eq(3)')
                        .text(
                            data.session
                        );


                    /*
                    |--------------------------------------------------------------------------
                    | UPDATE DEBT LIMIT
                    |--------------------------------------------------------------------------
                    */

                    row.find('td:eq(4)')
                        .text(
                            '₦' +
                            data.debt_limit
                        );


                    /*
                    |--------------------------------------------------------------------------
                    | UPDATE EDIT BUTTON DATA
                    |--------------------------------------------------------------------------
                    */

                    let editButton =
                        row.find(
                            '.editDebtLimit'
                        );


                    editButton.attr(
                        'data-class-id',
                        data.class_id
                    );


                    editButton.attr(
                        'data-term',
                        data.term
                    );


                    editButton.attr(
                        'data-session',
                        data.session
                    );


                    editButton.attr(
                        'data-debt-limit',
                        String(
                            data.debt_limit
                        ).replace(/,/g, '')
                    );


                    /*
                    |--------------------------------------------------------------------------
                    | CLOSE MODAL
                    |--------------------------------------------------------------------------
                    */

                    let modalElement =
                        document.getElementById(
                            'editDebtLimitModal'
                        );


                    if (
                        typeof bootstrap !== 'undefined' &&
                        bootstrap.Modal
                    ) {

                        let modal =
                            bootstrap.Modal.getInstance(
                                modalElement
                            );

                        if (modal) {

                            modal.hide();

                        }

                    } else {

                        $('#editDebtLimitModal')
                            .modal('hide');

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | SUCCESS MESSAGE
                    |--------------------------------------------------------------------------
                    */

                    Swal.fire({

                        icon: 'success',

                        title: 'Updated',

                        text:
                            response.message,

                        timer: 1800,

                        showConfirmButton: false

                    });

                },


                /*
                |--------------------------------------------------------------------------
                | ERROR
                |--------------------------------------------------------------------------
                */

                error: function (xhr) {

                    showAjaxError(
                        xhr,
                        'Unable to update debt limit.'
                    );

                },


                /*
                |--------------------------------------------------------------------------
                | COMPLETE
                |--------------------------------------------------------------------------
                */

                complete: function () {

                    button
                        .prop('disabled', false)
                        .html(
                            '<i class="fas fa-save"></i> Update'
                        );

                }

            });

        }
    );



    /*
    |--------------------------------------------------------------------------
    | DELETE DEBT LIMIT
    |--------------------------------------------------------------------------
    */

    $(document).on(
        'click',
        '.deleteDebtLimit',
        function () {

            let button =
                $(this);


            /*
            |--------------------------------------------------------------------------
            | GET ID
            |--------------------------------------------------------------------------
            */

            let id =
                button.attr('data-id');


            /*
            |--------------------------------------------------------------------------
            | CHECK ID
            |--------------------------------------------------------------------------
            */

            if (!id) {

                Swal.fire({

                    icon: 'error',

                    title: 'Error',

                    text:
                        'Debt limit ID was not found.'

                });

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | CONFIRM DELETE
            |--------------------------------------------------------------------------
            */

            Swal.fire({

                icon: 'warning',

                title: 'Delete Debt Limit?',

                text:
                    'This debt limit will be permanently deleted.',

                showCancelButton: true,

                confirmButtonText:
                    'Yes, Delete',

                cancelButtonText:
                    'Cancel'

            }).then(function (result) {


                if (!result.isConfirmed) {

                    return;

                }


                /*
                |--------------------------------------------------------------------------
                | DELETE URL
                |--------------------------------------------------------------------------
                */

                let deleteUrl =
                    getDeleteUrl(id);


                console.log(
                    'Deleting Debt Limit:',
                    deleteUrl
                );


                /*
                |--------------------------------------------------------------------------
                | AJAX DELETE
                |--------------------------------------------------------------------------
                |
                | IMPORTANT:
                |
                | We send POST + _method=DELETE.
                |
                | Laravel will treat this as a DELETE request.
                |
                */

                $.ajax({

                    url: deleteUrl,

                    type: 'POST',

                    data: {

                        _token:
                            $('meta[name="csrf-token"]').attr('content'),

                        _method:
                            'DELETE'

                    },


                    /*
                    |--------------------------------------------------------------------------
                    | SUCCESS
                    |--------------------------------------------------------------------------
                    */

                    success: function (response) {

                        console.log(
                            'Delete response:',
                            response
                        );


                        if (!response.success) {

                            Swal.fire({

                                icon: 'error',

                                title: 'Error',

                                text:
                                    response.message ||
                                    'Unable to delete debt limit.'

                            });

                            return;

                        }


                        /*
                        |--------------------------------------------------------------------------
                        | REMOVE ROW
                        |--------------------------------------------------------------------------
                        */

                        $(
                            '#debt-limit-row-' +
                            id
                        ).remove();


                        /*
                        |--------------------------------------------------------------------------
                        | CHECK IF TABLE IS EMPTY
                        |--------------------------------------------------------------------------
                        */

                        if (
                            $('#debtLimitTableBody tr')
                                .length === 0
                        ) {

                            $('#debtLimitTableBody')
                                .html(`

                                    <tr id="noDebtLimitRow">

                                        <td
                                            colspan="6"
                                            class="text-center text-muted"
                                        >

                                            No debt limit has been entered yet.

                                        </td>

                                    </tr>

                                `);

                        }


                        /*
                        |--------------------------------------------------------------------------
                        | SUCCESS MESSAGE
                        |--------------------------------------------------------------------------
                        */

                        Swal.fire({

                            icon: 'success',

                            title: 'Deleted',

                            text:
                                response.message,

                            timer: 1500,

                            showConfirmButton: false

                        });

                    },


                    /*
                    |--------------------------------------------------------------------------
                    | ERROR
                    |--------------------------------------------------------------------------
                    */

                    error: function (xhr) {

                        showAjaxError(
                            xhr,
                            'Unable to delete debt limit.'
                        );

                    }

                });

            });

        }

    );

});

</script>

@endsection