@extends('layout.app')
@section('title', 'User Profile')
@section('page-title', $user->name)

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="p-4 bg-dark text-white rounded-4 d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0">{{ $user->name }}</h5>
                    <small class="text-white-50">{{ $user->email }} | Joined: {{ $user->created_at->format('M d, Y') }}</small>
                </div>
                <div class="text-end">
                    <small class="text-white-50">Current Wallet Balance</small>
                    <div class="d-flex align-items-center justify-content-end gap-3">
                        <h3 class="mb-0 text-success">$ {{ number_format($user->wallet->balance ?? 0, 2) }}</h3>
                        <button class="btn btn-sm btn-outline-light" data-bs-toggle="modal" data-bs-target="#balanceModal">Adjust</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ul class="nav nav-tabs mb-3" id="userTabs" role="tablist" style="border-bottom: 2px solid #e2e8f0; display:flex; list-style:none; padding:0;">
        @php
            $base = "padding: 12px 25px; font-weight: 600; color: #6b7280; border: none; background: transparent; cursor: pointer; transition: 0.2s;";
            $active = "color:#111827; border-bottom:3px solid #d4af37;";
        @endphp
        <li class="nav-item">
            <button class="nav-link tab-btn active" data-bs-toggle="tab" data-bs-target="#cases" style="{{$base}} {{$active}}">Cases</button>
        </li>
        <li class="nav-item">
            <button class="nav-link tab-btn" data-bs-toggle="tab" data-bs-target="#settlements" style="{{$base}}">Settlements</button>
        </li>
        <li class="nav-item">
            <button class="nav-link tab-btn" data-bs-toggle="tab" data-bs-target="#withdrawals" style="{{$base}}">Withdrawals</button>
        </li>
        <li class="nav-item">
            <button class="nav-link tab-btn" data-bs-toggle="tab" data-bs-target="#kyc" style="{{$base}}">KYC Docs</button>
        </li>
    </ul>

    <div class="tab-content" id="userTabContent">

    <div class="tab-pane fade show active" id="cases" role="tabpanel">
      <table class="table align-middle">

        <thead>
            <tr>
                <th>Case #</th>
                <th>Lost Amount</th>
                <th>Recovered</th>
                <th>Recovery %</th>
                <th>Status</th>
                <th width="280">Actions</th>
            </tr>
        </thead>

        <tbody>

        @foreach($user->recoveryCases as $case)

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

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

                <td>{{ $case->case_number }}</td>

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

                <td class="recovered-amount-{{ $case->id }}">
                    ${{ number_format($case->recovered_amount ?? 0,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 == 'pending'
                            ? 'bg-warning text-dark'
                            : ($case->status == 'closed'
                                ? 'bg-danger'
                                : 'bg-success') }}">
                        {{ ucfirst($case->status) }}
                    </span>
                </td>

                <td>

                    <div class="d-flex flex-wrap gap-2">

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

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

                                <button class="btn btn-success btn-sm">
                                    Approve
                                </button>
                            </form>

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

                                <button class="btn btn-danger btn-sm">
                                    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

                        </button>

                    </div>

                </td>

            </tr>

        @endforeach

        </tbody>

    </table>
    </div>

    <div class="tab-pane fade" id="settlements" role="tabpanel">
       <table class="table align-middle">

    <thead>
    <tr>
        <th>Case #</th>
        <th>Amount</th>
        <th>Proof</th>
        <th>Status</th>
        <th>Actions</th>
    </tr>
    </thead>

    <tbody>

    @foreach($user->recoveryCases as $case)
    @foreach($case->settlements as $s)

    <tr id="settlement_{{ $s->id }}">

        <td>{{ $case->case_number }}</td>

        <td>${{ number_format($s->amount, 2) }}</td>

        <td>
            @if($s->proof)
                <a href="#"
                class="btn btn-sm btn-outline-primary"
                onclick="document.getElementById('modalImage').src='{{ asset('storage/'.$s->proof) }}'"
                data-bs-toggle="modal"
                data-bs-target="#proofModal">
                View Proof
                </a>
            @else
                <span class="text-muted small">No proof uploaded</span>
            @endif
        </td>

        <td class="status-badge">
            <span class="badge {{ $s->status == 'paid' ? 'bg-success' : 'bg-warning' }}">
                {{ ucfirst($s->status) }}
            </span>
        </td>

        <td class="action-area">

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

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

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

            @endif

        </td>

    </tr>

    @endforeach
    @endforeach

    </tbody>

    </table>

    </div>

    <div class="tab-pane fade" id="withdrawals" role="tabpanel">
      <table class="table align-middle">

<thead>
<tr>
    <th>Ref</th>
    <th>Amount</th>
    <th>Status</th>
    <th>Actions</th>
</tr>
</thead>

<tbody>

@foreach($user->withdrawals as $w)

<tr id="withdrawal_{{ $w->id }}">

    <td>{{ $w->reference }}</td>

    <td>${{ number_format($w->amount, 2) }}</td>

    <td class="status-badge">
        <span class="badge
            {{ $w->status == 'pending'
                ? 'bg-warning text-dark'
                : ($w->status == 'rejected'
                    ? 'bg-danger text-white'
                    : 'bg-success text-white') }}">
            {{ ucfirst($w->status) }}
        </span>
    </td>

    <td class="action-area">

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

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

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

        @endif

    </td>

</tr>

@endforeach

</tbody>

</table>
    </div>


    <div class="tab-pane fade" id="kyc" role="tabpanel">
        
<div class="mb-4">

    <label class="d-block mb-2 text-muted small text-uppercase">
        Current KYC Status:
    </label>

    <span class="status-badge">
        <span class="badge
            @if($user->kyc_status == 'approved') bg-success text-white
            @elseif($user->kyc_status == 'rejected') bg-danger text-white
            @else bg-warning text-dark @endif">

            {{ strtoupper($user->kyc_status) }}

        </span>
    </span>

</div>

<div class="row">

    <div class="col-md-6">
        <label class="fw-bold mb-2">ID Document</label>
        <img src="{{ asset('storage/'.$user->kyc_document) }}"
             class="img-fluid rounded border">
    </div>

    <div class="col-md-6">
        <label class="fw-bold mb-2">Proof of Address</label>
        <img src="{{ asset('storage/'.$user->proof_of_address) }}"
             class="img-fluid rounded border">
    </div>

</div>

@if($user->kyc_status !== 'approved')

<div class="mt-4 action-area d-flex gap-2">

    <form action="{{ route('admin.kyc.approve', $user->id) }}"
          method="POST"
          class="ajax-form">
        @csrf
        <button type="submit" class="btn btn-success">
            Verify KYC
        </button>
    </form>

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

</div>

@else

<div class="mt-4">
    <span class="text-success fw-bold">
        <i class="fas fa-check-circle"></i>
        This user has been successfully verified.
    </span>
</div>

@endif

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



<div class="modal fade" id="balanceModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.users.adjustBalance', $user->id) }}" method="POST" class="ajax-form modal-content">
            @csrf
            <div class="modal-header"><h5 class="modal-title">Adjust Balance</h5></div>
            <div class="modal-body">
                <select name="type" class="form-select mb-3"><option value="add">Add</option><option value="subtract">Subtract</option></select>
                <input type="number" name="amount" class="form-control" placeholder="Enter amount" required>
            </div>
            <div class="modal-footer"><button type="submit" class="btn btn-dark">Confirm Update</button></div>
        </form>
    </div>
</div>
<!-- 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>

<!-- Settlement proof model-->
 <div class="modal fade" id="proofModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body p-0">
                <img src="" id="modalImage" class="img-fluid" style="width: 100%;">
            </div>
        </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(
        'text-bg-success',
        'text-bg-danger'
    );

    toast.classList.add(
        type === 'success'
        ? 'text-bg-success'
        : 'text-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('<span class="spinner-border spinner-border-sm"></span> Processing');

    $.ajax({

        url: form.attr('action'),

        method: form.attr('method'),

        data: form.serialize(),

        success: function(response){

            showToast(response.message, 'success');

            $('.wallet-balance').html(
                '$ ' + response.balance
            );

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

            form[0].reset();
        },

        error: function(xhr){

            let message = 'Something went wrong';

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

            showToast(message, 'error');
        },

        complete: function(){

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

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

    e.preventDefault();

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

    let originalText = btn.html();

    btn.prop('disabled', true);

    btn.html(`
        <span class="spinner-border spinner-border-sm me-1"></span>
        Processing...
    `);

    $.ajax({

        url: form.attr('action'),

        type: form.attr('method'),

        data: form.serialize(),

        success: function(response){

            showToast(
                response.message || 'Action completed successfully',
                'success'
            );

            /*
             * Update status badge instantly
             * if returned by controller
             */
            if(response.status_html && response.row_id){

                $('#'+response.row_id)
                    .find('.status-badge')
                    .replaceWith(response.status_html);
            }

            /*
             * Remove action buttons if action completed
             */
            if(response.remove_actions && response.row_id){

                $('#'+response.row_id)
                    .find('.action-area')
                    .html(response.remove_actions);
            }

            setTimeout(function(){

                location.reload();

            }, 800);

        },

        error: function(xhr){

            let message = 'Something went wrong';

            if(xhr.responseJSON){

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

                if(xhr.responseJSON.errors){

                    message = Object.values(
                        xhr.responseJSON.errors
                    )[0][0];
                }
            }

            showToast(message,'error');

        },

        complete: function(){

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

        }

    });

});
</script>
<!-- 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>
// 1. TAB HIGHLIGHTING LOGIC
const base = "padding: 12px 25px; font-weight: 600; color: #6b7280; border: none; background: transparent; cursor: pointer; transition: 0.2s;";
const active = "color:#111827; border-bottom:3px solid #d4af37;";

document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // Reset all
        document.querySelectorAll('.tab-btn').forEach(b => b.style.cssText = base);
        // Set active
        this.style.cssText = base + active;
    });
});

// 2. AJAX SUBMISSION LOGIC
$(document).on('submit', '.ajax-form', function(e) {
    e.preventDefault();
    let form = $(this);
    let btn = form.find('button[type="submit"]');
    btn.prop('disabled', true).text('...');

    $.ajax({
        url: form.attr('action'),
        type: "POST",
        data: form.serialize(),
        success: function(res) {
            $('#toastBody').text(res.message);
            new bootstrap.Toast(document.getElementById('caseToast')).show();
            // Optional: reload after success
            setTimeout(() => location.reload(), 1000);
        },
        error: function(err) {
            alert("Action failed.");
            btn.prop('disabled', false).text('Try Again');
        }
    });
});
</script>
@endsection