@extends('layouts.app', ['title' => term('nav_commissions','Comisiones')])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-commission"><i class="fa-solid fa-plus"></i>Nueva comision</button>
@endsection

@section('content')
@php
    $pending = $commissions->where('status','Pendiente');
    $paid = $commissions->where('status','Pagada');
@endphp
<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-hand-holding-dollar"></i><div class="metric-val">{{ $commissions->count() }}</div><div class="metric-label">Total comisiones</div></div>
    <div class="metric"><i class="fa-solid fa-hourglass-half"></i><div class="metric-val text-gold">${{ number_format($pending->sum('amount'),0) }}</div><div class="metric-label">Por pagar</div></div>
    <div class="metric"><i class="fa-solid fa-check-double"></i><div class="metric-val text-success">${{ number_format($paid->sum('amount'),0) }}</div><div class="metric-label">Pagadas</div></div>
    <div class="metric"><i class="fa-solid fa-user-tie"></i><div class="metric-val">{{ $commissions->pluck('advisor_id')->unique()->count() }}</div><div class="metric-label">Asesores cobrando</div></div>
</div>

<div class="card">
    <div class="card-head"><div><div class="card-title">Comisiones</div><div class="sub">Control de pagos a asesores</div></div></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Asesor</th><th>Propiedad</th><th>Monto</th><th>%</th><th>Vence</th><th>Estado</th><th style="width:50px"></th></tr></thead>
            <tbody>
            @forelse($commissions as $commission)
                <tr>
                    <td>{{ $commission->advisor->name }}</td>
                    <td>{{ $commission->property?->name ?: '—' }}</td>
                    <td><strong>${{ number_format($commission->amount,0) }}</strong></td>
                    <td>{{ $commission->percentage }}%</td>
                    <td>{{ optional($commission->due_on)->format('d/m/Y') ?: '—' }}</td>
                    <td><span class="badge {{ $commission->status === 'Pagada' ? 'green' : ($commission->status === 'Cancelada' ? 'red' : 'amber') }}">{{ $commission->status }}</span></td>
                    <td>
                        <div class="kebab">
                            <button class="kebab-trigger" type="button" data-kebab data-tip="Más"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                            <div class="kebab-menu">
                                @if($commission->status !== 'Pagada')
                                    <form method="post" action="{{ route('commissions.pay', $commission) }}">@csrf @method('PATCH')<button type="submit"><i class="fa-solid fa-check"></i> Marcar como pagada</button></form>
                                @endif
                                <button type="button" data-modal-open="modal-edit-commission-{{ $commission->id }}"><i class="fa-solid fa-pen"></i> Editar comisión</button>
                                <hr>
                                <form method="post" action="{{ route('commissions.destroy', $commission) }}" onsubmit="return confirm('¿Eliminar comisión?')">@csrf @method('DELETE')<button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar</button></form>
                            </div>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" style="text-align:center;color:var(--muted);padding:18px">Sin comisiones registradas.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('modals')
<div class="modal-backdrop" id="modal-add-commission">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-hand-holding-dollar text-gold"></i> Nueva comision</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('commissions.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Asesor *<select name="advisor_id" required>@foreach($advisors as $advisor)<option value="{{ $advisor->id }}">{{ $advisor->name }}</option>@endforeach</select></label>
                    <label>Propiedad<select name="property_id"><option value="">N/A</option>@foreach($properties as $property)<option value="{{ $property->id }}">{{ $property->name }}</option>@endforeach</select></label>
                    <label>Monto *<input name="amount" type="number" step="0.01" required></label>
                    <label>Porcentaje *<input name="percentage" type="number" step="0.01" value="{{ setting('commission_default_percentage', 3) }}" required></label>
                    <label>Estado *<select name="status"><option>Pendiente</option><option>Pagada</option><option>Cancelada</option></select></label>
                    <label>Fecha limite<input name="due_on" type="date"></label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Registrar</button>
            </div>
        </form>
    </div>
</div>

@foreach($commissions as $commission)
<div class="modal-backdrop" id="modal-edit-commission-{{ $commission->id }}">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar comision</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('commissions.update', $commission) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Asesor *<select name="advisor_id" required>@foreach($advisors as $advisor)<option value="{{ $advisor->id }}" @selected($commission->advisor_id === $advisor->id)>{{ $advisor->name }}</option>@endforeach</select></label>
                    <label>Propiedad<select name="property_id"><option value="">N/A</option>@foreach($properties as $property)<option value="{{ $property->id }}" @selected($commission->property_id === $property->id)>{{ $property->name }}</option>@endforeach</select></label>
                    <label>Monto *<input name="amount" type="number" step="0.01" value="{{ $commission->amount }}" required></label>
                    <label>Porcentaje *<input name="percentage" type="number" step="0.01" value="{{ $commission->percentage }}" required></label>
                    <label>Estado *<select name="status">@foreach(['Pendiente','Pagada','Cancelada'] as $s)<option @selected($commission->status === $s)>{{ $s }}</option>@endforeach</select></label>
                    <label>Vencimiento<input name="due_on" type="date" value="{{ optional($commission->due_on)->format('Y-m-d') }}"></label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection