@extends('layout.app')
@section('title', 'Recovery Cases')

@section('content')

<style>
body{
    background:#f4f6fb;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* PAGE HEADER */
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.page-title{
    font-size:22px;
    font-weight:800;
    color:#111827;
    letter-spacing:-0.3px;
}

/* CARD */
.modern-card{
    background:#fff;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(16,24,40,.06);
    overflow:hidden;
    border:1px solid #eef2f7;
}

/* TABLE */
.table{
    margin:0;
}

.table thead{
    background:#f8fafc;
}

.table thead th{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#6b7280;
    padding:16px;
    border:none;
}

.table tbody tr{
    transition:0.2s;
    border-bottom:1px solid #f1f5f9;
}

.table tbody tr:hover{
    background:#f9fbff;
    transform:scale(1.002);
}

.table td{
    padding:16px;
    vertical-align:middle;
    color:#111827;
    font-size:14px;
}

/* BADGES */
.badge{
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.badge.pending{ background:#fff7ed; color:#c2410c; }
.badge.processing{ background:#eff6ff; color:#1d4ed8; }
.badge.completed{ background:#ecfdf5; color:#047857; }

/* BUTTONS */
.btn{
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    padding:6px 10px;
}

.btn-success{ background:#16a34a; border:none; }
.btn-danger{ background:#dc2626; border:none; }
.btn-primary{ background:#2563eb; border:none; }
.btn-dark{ background:#111827; border:none; }

.btn:hover{
    opacity:.9;
}

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

/* AMOUNT STYLE */
.amount{
    font-weight:700;
}

.amount.green{
    color:#16a34a;
}
</style>

<div class="container-fluid p-4">

    <!-- HEADER -->
    <div class="page-header">
        <div class="page-title">Recovery Cases</div>
    </div>

    <!-- CARD -->
    <div class="modern-card">

        <div class="table-responsive">

            <table class="table">

                <thead>
                    <tr>
                        <th>Case</th>
                        <th>User</th>
                        <th>Lost</th>
                        <th>Recovered</th>
                         <th>Recovery %</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>

                <tbody>

                @foreach($cases as $case)
                  @php
                $percentage = $case->lost_amount > 0
                    ? ($case->recovered_amount / $case->lost_amount) * 100
                    : 0;
                @endphp

                <tr>

                    <td>
                        <div style="font-weight:700;">
                            {{ $case->case_number }}
                        </div>
                    </td>

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

                    <td>${{ number_format($case->lost_amount,2) }}</td>

                    <td class="amount green">
                        ${{ number_format($case->recovered_amount,2) }}
                    </td>
                    <td>
                    <div class="progress" style="height:8px;">
                        <div class="progress-bar bg-success"
                             style="width: {{ min($percentage,100) }}%">
                        </div>
                    </div>

                    <small>
                        {{ number_format($percentage,1) }}%
                    </small>
                </td>
                    <td>
                        <span class="badge {{ $case->status }}">
                            {{ strtoupper($case->status) }}
                        </span>
                    </td>

                    <td>
                        <div class="action-group">

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

                                <form class="ajax-form"
                                      action="{{ route('admin.cases.approve',$case->id) }}"
                                      method="POST">
                                    @csrf
                                    <button class="btn btn-success">Approve</button>
                                </form>

                                <form class="ajax-form"
                                      action="{{ route('admin.cases.decline',$case->id) }}"
                                      method="POST">
                                    @csrf
                                    <button class="btn btn-danger">Decline</button>
                                </form>

                            @endif

                           <button
                            class="btn btn-primary btn-sm recovery-btn"
                            data-id="{{ $case->id }}"
                            data-case="{{ $case->case_number }}"
                            data-bs-toggle="modal"
                            data-bs-target="#recoveryModal">

                            Add Recovery Fund

                        </button>

                            <button class="btn btn-dark view-btn"
                                    data-id="{{ $case->id }}"
                                    data-bs-toggle="modal"
                                    data-bs-target="#viewModal">
                                View
                            </button>

                        </div>
                    </td>

                </tr>

                @endforeach

                </tbody>

            </table>

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

<!-- MODALS (UNCHANGED STRUCTURE, CLEAN UI) -->
<!-- Recovery Modal -->
<!-- Recovery Modal -->
<div class="position-fixed top-0 end-0 p-3" style="z-index:99999">
    <div id="appToast" class="toast border-0" role="alert">
        <div class="toast-header">
            <strong class="me-auto">Notification</strong>
            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body"></div>
    </div>
</div>

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

    <div class="modal-dialog">

        <div class="modal-content">

       <form id="recoveryForm">
    @csrf

    <div class="modal-body">

        <input type="hidden" id="case_id" name="case_id">

        <div class="mb-3">
            <label>Recovery Amount</label>

            <input type="number"
                   step="0.01"
                   min="1"
                   class="form-control"
                   name="amount"
                   required>
        </div>

    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            Close
        </button>

        <button type="submit" class="btn btn-success">
            Save Recovery
        </button>
    </div>

</form>

        </div>

    </div>

</div>


<div class="position-fixed top-0 end-0 p-3" style="z-index: 99999;">
    <div id="appToast" class="toast align-items-center text-white bg-dark border-0" role="alert">
        
        <div class="d-flex">
            
            <div class="toast-body">
                Notification
            </div>

            <button type="button"
                    class="btn-close btn-close-white me-2 m-auto"
                    data-bs-dismiss="toast">
            </button>

        </div>

    </div>
</div>

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

<script>
function showToast(message, type = 'success') {
    let toast = document.getElementById('appToast');

    toast.classList.remove('bg-success', 'bg-danger', 'bg-dark');

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

    toast.querySelector('.toast-body').innerHTML = message;

    new bootstrap.Toast(toast).show();
}
</script>

<script>
$(document).on('submit', '.ajax-form', function(e){
    e.preventDefault();

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

    btn.prop('disabled', true).html('Processing...');

    $.ajax({
        url: form.attr('action'),
        type: form.attr('method') || 'POST',
        data: form.serialize(),
        success: function(res){

            showToast(res.message || 'Success', 'success');

            /**
             * CASE UPDATES (optional live UI update)
             */
            if(res.case_id && res.status){
                $('#case-' + res.case_id)
                    .find('.status-badge')
                    .text(res.status);
            }

        },
        error: function(xhr){

            let msg = 'Something went wrong';

            if(xhr.responseJSON?.message){
                msg = xhr.responseJSON.message;
            }

            if(xhr.responseJSON?.errors){
                msg = Object.values(xhr.responseJSON.errors)[0][0];
            }

            showToast(msg, 'error');
        },
        complete: function(){
            btn.prop('disabled', false).html(oldText);
        }
    });
});
</script>
<!-- Recovery -->
<!-- Recovery Button Handler -->
<script>
$(document).on('click', '.recovery-btn', function () {

    let caseId = $(this).data('id');

    $('#case_id').val(caseId);

    console.log('Case ID:', caseId);

});
</script>

<!-- Recovery AJAX Submit -->
<script>
$('#recoveryForm').on('submit', function(e){

    e.preventDefault();

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

    let caseId = $('#case_id').val(); // IMPORTANT: get BEFORE reset

    btn.prop('disabled', true)
       .html('<span class="spinner-border spinner-border-sm"></span> Processing...');

    $.ajax({

        url: "{{ route('admin.cases.recovery') }}",
        type: "POST",
        data: form.serialize(),

        success: function(response){

            showToast(response.message, 'success');

            // Close modal properly (Bootstrap 5 safe way)
            let modalEl = document.getElementById('recoveryModal');
            let modal = bootstrap.Modal.getInstance(modalEl);
            if(modal){
                modal.hide();
            }

            // Reset form
            form[0].reset();

            /*
            |--------------------------------------------------------------------------
            | Update UI WITHOUT reload
            |--------------------------------------------------------------------------
            */

            if(response.amount){

                $('.recovered-amount-' + caseId)
                    .text('$' + response.amount);
            }

            if(response.wallet_balance){

                $('.wallet-balance')
                    .text('$ ' + response.wallet_balance);
            }

            /*
            |--------------------------------------------------------------------------
            | OPTIONAL fallback reload (remove if fully dynamic)
            |--------------------------------------------------------------------------
            */
            setTimeout(() => {
                location.reload();
            }, 800);

        },

        error: function(xhr){

            let msg = 'Something went wrong';

            if(xhr.responseJSON){

                if(xhr.responseJSON.message){
                    msg = xhr.responseJSON.message;
                }

                if(xhr.responseJSON.errors){
                    msg = Object.values(xhr.responseJSON.errors)[0][0];
                }
            }

            showToast(msg, 'error');

        },

        complete: function(){

            btn.prop('disabled', false)
               .html(originalText);
        }

    });

});
</script>

<script>
/* VIEW MODAL */
$(document).on('click','.view-btn',function(){

    let id = $(this).data('id');

    $('#viewBody').html('Loading...');

    $.get("/admin/cases/"+id,function(res){
        $('#viewBody').html(res.html);
    });
});
</script>

@endsection