@extends('crm.layouts.master')
@section('title','Deposits')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    <style>
        .client-search-wrap { position:relative; }
        .client-search-results { position:absolute; z-index:1060; top:100%; left:0; right:0; max-height:260px; overflow-y:auto; margin-top:.25rem; background:var(--bs-body-bg,#fff); border:1px solid var(--bs-border-color, #dee2e6); border-radius:.4rem; box-shadow:0 .5rem 1rem rgba(0,0,0,.12); }
        .client-search-result { display:block; width:100%; padding:.7rem .85rem; border:0; border-bottom:1px solid var(--bs-border-color, #eee); background:var(--bs-body-bg,#fff); color:var(--bs-body-color); text-align:left; }
        .client-search-result:last-child { border-bottom:0; }
        .client-search-result:hover, .client-search-result:focus { background:var(--bs-tertiary-bg, #f6f7fb); }
        .client-search-result strong, .client-search-result small { display:block; }
        .client-search-message { padding:.8rem; color:var(--bs-secondary-color,#8a969c); font-size:.82rem; }
        .paces-gradient-status {
            min-width: 76px;
            padding: .35rem .55rem;
            border-radius: 0 !important;
            background-image: var(--theme-gradient, linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0))) !important;
            font-weight: 700;
            letter-spacing: .02em;
        }
    </style>
@endsection
@section('main-content')
<div class="breadcrumb d-flex align-items-center justify-content-between w-100">
    <h3>Deposits</h3>
    <button class="btn btn-primary btn-sm ms-auto" data-toggle="modal" data-target="#add_deposit_modal">
        <i class="fa fa-plus"></i> New Deposit
    </button>
</div>
<div class="separator-breadcrumb border-top"></div>

@if(session('status'))
<div class="alert alert-info alert-dismissible fade show">
    {{ session('status') }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
@endif


<div class="row">
    <div class="col-12 mb-4">
        <div class="card text-left">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="display table table-bordered" id="deposits_table" style="width:100%">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Client</th>
                            <th>Amount</th>
                            <th>Currency</th>
                            <th>Status</th>
                            <th>Reference</th>
                            <th>Created By</th>
                            <th>Approved By</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($deposits as $dep)
                        <tr>
                            <td>{{ $dep->id }}</td>
                            <td>
                                <a href="{{ route('lead_detail', ['id' => $dep->lead->id ?? '']) }}" class="fw-bold">
                                    {{ $dep->lead->fname ?? '' }} {{ $dep->lead->lname ?? '' }}
                                </a>
                            </td>
                            <td class="fw-bold">
                                {{ number_format($dep->amount, 2) }}
                                @if($dep->credited_usd_amount !== null && $dep->currency !== 'USD')
                                    <div class="text-muted fw-normal" style="font-size:.72rem">Credited USD {{ number_format($dep->credited_usd_amount, 2) }}</div>
                                @endif
                            </td>
                            <td>{{ $dep->currency }}</td>
                            <td>
                                <span class="badge bg-{{ $dep->status === 'approved' ? 'success' : ($dep->status === 'rejected' ? 'danger' : 'warning') }} bg-gradient paces-gradient-status">
                                    {{ ucfirst($dep->status) }}
                                </span>
                            </td>
                            <td>{{ $dep->reference ?? '—' }}</td>
                            <td>{{ $dep->creator->name ?? '—' }}</td>
                            <td>{{ $dep->approver->name ?? '—' }}</td>
                            <td>{{ $dep->created_at->format('Y-m-d H:i') }}</td>
                            <td>
                                @if($dep->status === 'pending')
                                <form method="POST" action="{{ route('trading.deposits.approve', $dep->id) }}" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-success" onclick="return confirm('Approve this deposit?')">Approve</button>
                                </form>
                                <form method="POST" action="{{ route('trading.deposits.reject', $dep->id) }}" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Reject this deposit?')">Reject</button>
                                </form>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                                @if(Auth::user()->access_level === 'Admin')
                                <form method="POST" action="{{ route('trading.deposits.destroy', $dep->id) }}" class="d-inline ms-1">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger"
                                            onclick="return confirm('Delete and reverse deposit #{{ $dep->id }}?\n\nThis will remove the deposit and reverse the wallet credit if it was approved.\n\nThis cannot be undone.')">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </form>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Add Deposit Modal --}}
<div class="modal" id="add_deposit_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">New Deposit</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('trading.deposits.store') }}">
                    @csrf
                    <div class="form-group mb-3">
                        <label class="form-label" for="deposit-client-search">Client</label>
                        <div class="client-search-wrap">
                            <input type="search" id="deposit-client-search" class="form-control" placeholder="Search by name, email, phone, or client ID" autocomplete="off" aria-autocomplete="list" aria-controls="deposit-client-results" required>
                            <input type="hidden" name="lead_id" id="deposit-client-id">
                            <div id="deposit-client-results" class="client-search-results d-none" role="listbox"></div>
                        </div>
                        <div class="form-text">Enter at least two characters, then select the client.</div>
                    </div>
                    <div class="row">
                        <div class="col-8">
                            <div class="form-group mb-3">
                                <label class="form-label">Amount</label>
                                <input type="number" name="amount" class="form-control" step="0.01" min="0.01" required>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group mb-3">
                                <label class="form-label">Currency</label>
                                <select name="currency" class="form-control" required>
                                    <option>USD</option><option>EUR</option><option>CAD</option><option>AUD</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Reference <small class="text-muted">(optional)</small></label>
                        <input type="text" name="reference" class="form-control" placeholder="Wire ref, TxID...">
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Notes <small class="text-muted">(optional)</small></label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Create Deposit</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<script>
$(document).ready(function () {
    $('#deposits_table').DataTable({ order: [[0, 'DESC']] });

    var searchInput = document.getElementById('deposit-client-search');
    var clientId = document.getElementById('deposit-client-id');
    var results = document.getElementById('deposit-client-results');
    var searchTimer;

    function showMessage(message) {
        results.replaceChildren();
        var row = document.createElement('div');
        row.className = 'client-search-message';
        row.textContent = message;
        results.appendChild(row);
        results.classList.remove('d-none');
    }

    searchInput.addEventListener('input', function () {
        clientId.value = '';
        searchInput.setCustomValidity('Please select a client from the search results.');
        window.clearTimeout(searchTimer);
        var term = searchInput.value.trim();
        if (term.length < 2) {
            results.classList.add('d-none');
            results.replaceChildren();
            return;
        }

        searchTimer = window.setTimeout(function () {
            showMessage('Searching...');
            fetch(@json(route('trading.deposits.client_search')) + '?q=' + encodeURIComponent(term), { headers: { 'Accept': 'application/json' } })
                .then(function (response) { if (!response.ok) throw new Error(); return response.json(); })
                .then(function (clients) {
                    results.replaceChildren();
                    if (!clients.length) { showMessage('No clients found.'); return; }
                    clients.forEach(function (client) {
                        var button = document.createElement('button');
                        button.type = 'button';
                        button.className = 'client-search-result';
                        button.setAttribute('role', 'option');
                        var name = document.createElement('strong');
                        name.textContent = (client.name || 'Unnamed client') + '  #' + client.id;
                        var details = document.createElement('small');
                        details.className = 'text-muted';
                        details.textContent = [client.email, client.phone].filter(Boolean).join(' · ') || 'No contact details';
                        button.append(name, details);
                        button.addEventListener('click', function () {
                            clientId.value = client.id;
                            searchInput.value = (client.name || 'Unnamed client') + ' (#' + client.id + ')';
                            searchInput.setCustomValidity('');
                            results.classList.add('d-none');
                        });
                        results.appendChild(button);
                    });
                    results.classList.remove('d-none');
                })
                .catch(function () { showMessage('Client search is unavailable. Please try again.'); });
        }, 250);
    });

    searchInput.form.addEventListener('submit', function (event) {
        if (!clientId.value) {
            event.preventDefault();
            searchInput.setCustomValidity('Please select a client from the search results.');
            searchInput.reportValidity();
        }
    });

    document.addEventListener('click', function (event) {
        if (!event.target.closest('.client-search-wrap')) results.classList.add('d-none');
    });
});
</script>
@endsection