@extends('layouts.admin')

@section('title', 'Clientes')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Clientes</h1>
        <p class="text-secondary mb-0">Directorio comercial y crédito</p>
    </div>
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalNewClient">
        <i class="bi bi-plus-lg"></i> Nuevo cliente
    </button>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Negocio</th>
                    <th>Tipo</th>
                    <th>Representante</th>
                    <th>Contacto</th>
                    <th>Crédito</th>
                    <th>Estado</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($clients as $c)
                    <tr>
                        <td>{{ $c->code }}</td>
                        <td>{{ $c->business_name }}</td>
                        <td>{{ $c->businessType->name }}</td>
                        <td>{{ $c->representative_name }}</td>
                        <td>{{ $c->whatsapp ?: $c->phone }}</td>
                        <td>
                            @if($c->creditProfile?->is_enabled)
                                <span class="badge text-bg-primary">
                                    ${{ number_format((float) $c->creditProfile->credit_limit, 2) }} · {{ $c->creditProfile->credit_days }} días
                                </span>
                            @else
                                <span class="text-secondary">Sin crédito</span>
                            @endif
                        </td>
                        <td>{{ $c->is_active ? 'Activo' : 'Inactivo' }}</td>
                        <td>
                            <button
                                class="btn btn-sm btn-outline-primary"
                                type="button"
                                data-bs-toggle="modal"
                                data-bs-target="#modalEditClient{{ $c->id }}"
                            >Editar</button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5 text-secondary">No existen clientes.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($clients->hasPages())
        <div class="card-footer">{{ $clients->links() }}</div>
    @endif
</div>

<div class="modal fade" id="modalNewClient" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <form class="modal-content" method="POST" action="{{ route('clients.store') }}">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Nuevo cliente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-8">
                        <label class="form-label">Negocio</label>
                        <input class="form-control" name="business_name" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tipo</label>
                        <div class="searchable" data-name="business_type_id" data-required="1" data-placeholder="Buscar tipo…" data-options="{{ json_encode($businessTypeOptions) }}"></div>
                    </div>
                    <p class="small text-secondary mb-0">El código se genera automáticamente.</p>
                    <div class="col-md-6">
                        <label class="form-label">Razón social</label>
                        <input class="form-control" name="billing[legal_name]" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">RUC/cédula</label>
                        <input class="form-control" name="billing[tax_identification]" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Dirección facturación</label>
                        <textarea class="form-control" name="billing[address]" required></textarea>
                    </div>
                    <div class="col-md-4">
                        <label class="form-check">
                            <input class="form-check-input" type="checkbox" name="credit[is_enabled]" value="1"> Crédito
                        </label>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Límite</label>
                        <input class="form-control" type="number" step="0.0001" min="0" name="credit[credit_limit]" value="0" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Días</label>
                        <input class="form-control" type="number" min="0" name="credit[credit_days]" value="0" required>
                    </div>
                    <div class="col-12">
                        <label class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" checked> Activo
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="submit">Guardar cliente</button>
            </div>
        </form>
    </div>
</div>

@foreach($clients as $c)
<div class="modal fade" id="modalEditClient{{ $c->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <form class="modal-content" method="POST" action="{{ route('clients.update', $c) }}">
            @csrf
            @method('PUT')
            <div class="modal-header">
                <h5 class="modal-title">Editar cliente · {{ $c->business_name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Código</label>
                        <input class="form-control" value="{{ $c->code }}" readonly>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">Negocio</label>
                        <input class="form-control" name="business_name" value="{{ $c->business_name }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tipo</label>
                        <div class="searchable" data-name="business_type_id" data-required="1" data-value="{{ $c->business_type_id }}" data-placeholder="Buscar tipo…" data-options="{{ json_encode($businessTypeOptions) }}"></div>
                    </div>
                    @foreach(['representative_name' => 'Representante', 'representative_identification' => 'Cédula representante', 'email' => 'Correo', 'whatsapp' => 'WhatsApp', 'phone' => 'Teléfono'] as $field => $label)
                        <div class="col-md-4">
                            <label class="form-label">{{ $label }}</label>
                            <input class="form-control" name="{{ $field }}" value="{{ $c->$field }}">
                        </div>
                    @endforeach
                    <div class="col-md-8">
                        <label class="form-label">Dirección</label>
                        <textarea class="form-control" name="address">{{ $c->address }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Razón social</label>
                        <input class="form-control" name="billing[legal_name]" value="{{ $c->billingProfile?->legal_name }}" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">RUC/cédula</label>
                        <input class="form-control" name="billing[tax_identification]" value="{{ $c->billingProfile?->tax_identification }}" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Dirección facturación</label>
                        <textarea class="form-control" name="billing[address]" required>{{ $c->billingProfile?->address }}</textarea>
                    </div>
                    <div class="col-md-4">
                        <label class="form-check">
                            <input class="form-check-input" type="checkbox" name="credit[is_enabled]" value="1" @checked($c->creditProfile?->is_enabled)> Crédito
                        </label>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Límite</label>
                        <input class="form-control" type="number" step="0.0001" min="0" name="credit[credit_limit]" value="{{ $c->creditProfile?->credit_limit ?? 0 }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Días</label>
                        <input class="form-control" type="number" min="0" name="credit[credit_days]" value="{{ $c->creditProfile?->credit_days ?? 0 }}" required>
                    </div>
                    <div class="col-12">
                        <label class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" @checked($c->is_active)> Activo
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="submit">Guardar cambios</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection