@extends('crm.layouts.master')
@section('title','Withdrawals')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
    <style>
        .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">
    <h3>Withdrawals</h3>
    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add_withdrawal_modal">
        <i class="fa fa-plus"></i> New Withdrawal
    </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="withdrawals_table" style="width:100%">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Client</th>
                            <th>Amount</th>
                            <th>Currency</th>
                            <th>Status</th>
                            <th>Notes</th>
                            <th>Created By</th>
                            <th>Approved By</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($withdrawals as $w)
                        <tr>
                            <td>{{ $w->id }}</td>
                            <td>
                                <a href="{{ route('lead_detail', ['id' => $w->lead->id ?? '']) }}" class="fw-bold">
                                    {{ $w->lead->fname ?? '' }} {{ $w->lead->lname ?? '' }}
                                </a>
                            </td>
                            <td class="fw-bold">{{ number_format($w->amount, 2) }}</td>
                            <td>{{ $w->currency }}</td>
                            <td>
                                <span class="badge bg-{{ $w->status === 'approved' ? 'success' : ($w->status === 'rejected' ? 'danger' : 'warning') }} bg-gradient paces-gradient-status">
                                    {{ ucfirst($w->status) }}
                                </span>
                            </td>
                            <td>{{ $w->notes ? \Illuminate\Support\Str::limit($w->notes, 40) : '—' }}</td>
                            <td>{{ $w->creator->name ?? '—' }}</td>
                            <td>{{ $w->approver->name ?? '—' }}</td>
                            <td>{{ $w->created_at->format('Y-m-d H:i') }}</td>
                            <td>
                                @if($w->status === 'pending')
                                <form method="POST" action="{{ route('trading.withdrawals.approve', $w->id) }}" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-success" onclick="return confirm('Approve this withdrawal? This will debit the client wallet.')">Approve</button>
                                </form>
                                <form method="POST" action="{{ route('trading.withdrawals.reject', $w->id) }}" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Reject this withdrawal?')">Reject</button>
                                </form>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- New Withdrawal Modal --}}
<div class="modal" id="add_withdrawal_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">New Withdrawal Request</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('trading.withdrawals.store') }}">
                    @csrf
                    <div class="form-group mb-3">
                        <label class="form-label">Client</label>
                        <select name="lead_id" class="form-control" required>
                            <option value="">-- Select client --</option>
                            @foreach($leads as $lead)
                            <option value="{{ $lead->id }}">{{ $lead->fname }} {{ $lead->lname }} ({{ $lead->email }})</option>
                            @endforeach
                        </select>
                        <small class="text-muted">Only promoted clients (is_client=1) are shown.</small>
                    </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">Account Currency</label>
                                <input type="hidden" name="currency" value="USD">
                                <div class="form-control bg-light">USD</div>
                            </div>
                        </div>
                    </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" placeholder="Bank wire, reason..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Create Withdrawal Request</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<script>
$(document).ready(function () {
    $('#withdrawals_table').DataTable({ order: [[0, 'DESC']] });
});
</script>
@endsection