@extends('layout.app')

@section('title','Settlement Requests')

@section('content')

<style>

.page-wrapper{
    padding:25px;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.page-title{
    font-size:24px;
    font-weight:700;
    color:#111827;
}

.page-subtitle{
    color:#6b7280;
    font-size:14px;
}

.custom-card{
    background:#fff;
    border-radius:20px;
    border:none;
    overflow:hidden;
}

.table{
    margin-bottom:0;
}

.table thead{
    background:#f8fafc;
}

.table thead th{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#64748b;
    padding:18px;
    border:none;
}

.table tbody td{
    padding:18px;
    vertical-align:middle;
    border-color:#f1f5f9;
}

.table tbody tr:hover{
    background:#f8fafc;
}

.amount{
    font-weight:700;
    color:#059669;
}

.ref{
    font-weight:600;
}

.badge-status{
    padding:8px 14px;
    border-radius:30px;
    font-size:12px;
}

.action-group{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.btn-action{
    border-radius:10px;
    font-size:13px;
    font-weight:600;
}

</style>

<div class="page-wrapper">

    <div class="page-header">

        <div>
            <div class="page-title">
                Settlement Requests
            </div>

            <div class="page-subtitle">
                Manage all Settlement requests
            </div>
        </div>

    </div>

    <div class="card custom-card shadow-sm">

        <div class="table-responsive">

            <table class="table align-middle">

           <thead>
            <tr>
                <th>Case #</th>
                <th>Client</th>
                <th>Amount</th>
                <th>Coin</th>
                <th>Network</th>
                <th>Status</th>
                <th class="text-end">Action</th>
            </tr>
            </thead>

                <tbody>

               @forelse($settlements as $settlement)

                <tr id="row-{{ $settlement->id }}">

                    <td class="fw-semibold">
                        {{ $settlement->recoveryCase->case_number ?? 'N/A' }}
                    </td>

                    <td>
                        {{ $settlement->recoveryCase->user->name ?? 'N/A' }}
                    </td>

                    <td class="amount">
                        ${{ number_format($settlement->amount,2) }}
                    </td>

                    <td>
                        {{ $settlement->coin }}
                    </td>

                    <td>
                        {{ $settlement->network }}
                    </td>

                    <td class="status-column">

                        @if($settlement->status == 'pending')

                            <span class="badge bg-warning text-dark badge-status">
                                Pending
                            </span>

                        @elseif($settlement->status == 'paid')

                            <span class="badge bg-primary badge-status">
                                Paid
                            </span>

                        @elseif($settlement->status == 'completed')

                            <span class="badge bg-success badge-status">
                                Completed
                            </span>

                        @else

                            <span class="badge bg-danger badge-status">
                                Rejected
                            </span>

                        @endif

                    </td>

                    <td>

                        <div class="action-group">

                            @if($settlement->status == 'pending')

                            <form
                                action="{{ route('admin.settlements.approve',$settlement->id) }}"
                                method="POST"
                                class="ajax-form">

                                @csrf

                                <button type="submit"
                                        class="btn btn-success btn-sm btn-action">
                                    Approve
                                </button>

                            </form>

                            <form
                                action="{{ route('admin.settlements.decline',$settlement->id) }}"
                                method="POST"
                                class="ajax-form">

                                @csrf

                                <button type="submit"
                                        class="btn btn-danger btn-sm btn-action">
                                    Reject
                                </button>

                            </form>

                            @endif

                            <form
                                action="{{ route('admin.settlements.delete',$settlement->id) }}"
                                method="POST"
                                class="ajax-form">

                                @csrf
                                @method('DELETE')

                                <button type="submit"
                                        class="btn btn-dark btn-sm btn-action">
                                    Delete
                                </button>

                            </form>

                        </div>

                    </td>

                </tr>

                @empty

                <tr>
                    <td colspan="7" class="text-center py-5">
                        No settlement requests found.
                    </td>
                </tr>

                @endforelse

                </tbody>

            </table>

        </div>

    </div>

    <div class="mt-3">
        {{ $settlements->links() }}
    </div>

</div>

<!-- TOAST -->

<div class="position-fixed top-0 end-0 p-3" style="z-index:99999">

    <div id="appToast"
         class="toast border-0 text-white bg-dark">

        <div class="toast-header">

            <strong class="me-auto">
                Notification
            </strong>

            <button
                class="btn-close"
                data-bs-dismiss="toast">
            </button>

        </div>

        <div class="toast-body"></div>

    </div>

</div>



<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>

function showToast(message,type='success')
{
    let toast = $('#appToast');

    toast.removeClass(
        'bg-success bg-danger bg-dark'
    );

    toast.addClass(
        type === 'success'
        ? 'bg-success'
        : 'bg-danger'
    );

    toast.find('.toast-body').html(message);

    new bootstrap.Toast(
        document.getElementById('appToast')
    ).show();
}

$(document).on('submit','.ajax-form',function(e){

    e.preventDefault();

    let form = $(this);

    let btn = form.find(
        'button[type="submit"]'
    );

    let originalText = btn.text();

    let loadingText = 'Processing...';

    if(form.attr('action').includes('/approve')){
        loadingText = 'Approving...';
    }

    if(form.attr('action').includes('/decline')){
        loadingText = 'Rejecting...';
    }

    if(form.attr('action').includes('/delete')){
        loadingText = 'Deleting...';
    }

    btn.prop('disabled',true).html(`
        <span class="spinner-border spinner-border-sm me-1"></span>
        ${loadingText}
    `);

   $.ajax({
    url: form.attr('action'),
    type: 'POST',
    data: form.serialize() + '&_method=' + (form.find('input[name="_method"]').val() || 'POST'),

    success: function(res){

        showToast(res.message, 'success');

        let row = form.closest('tr');

        if(form.attr('action').includes('/approve')){

            row.find('.status-column').html(`
                <span class="badge bg-primary badge-status">Approved</span>
            `);

            row.find('form[action*="/approve"]').remove();
            row.find('form[action*="/decline"]').remove();
        }

        if(form.attr('action').includes('/decline')){

            row.find('.status-column').html(`
                <span class="badge bg-danger badge-status">Rejected</span>
            `);

            row.find('form[action*="/approve"]').remove();
            row.find('form[action*="/decline"]').remove();
        }

        if(form.attr('action').includes('/delete')){

            row.fadeOut(200, function(){
                $(this).remove();

                // safer reload
                setTimeout(() => {
                    location.reload();
                }, 300);
            });
        }
    },

    error: function(xhr){
        showToast(xhr.responseJSON?.message || 'Action failed.', 'error');
    },

    complete: function(){
        btn.prop('disabled', false).html(originalText);
    }
});

});
</script>

@endsection