@extends('layouts.app')

@section('title', 'Customers List')
@section('page_title', 'Client Relationship Management (CRM)')

@section('content')
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                <i class="bi bi-people"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TOTAL CLIENTS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $clients->count() }}</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-success bg-opacity-10 text-success">
                <i class="bi bi-person-check"></i>
            </div>
            <h6 class="text-secondary small fw-bold">ACTIVE CLIENTS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $clients->where('status', 'active')->count() }}</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                <i class="bi bi-currency-dollar"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TOTAL RECEIVABLES</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($clients->sum('outstanding_balance')) }} <small class="fs-6 text-muted">UGX</small></h3>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm p-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h5 class="fw-bold mb-0 text-dark">Customer Registry</h5>
        <button class="btn btn-primary d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#addClientModal">
            <i class="bi bi-plus-circle"></i> Register Customer
        </button>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Outstanding Balance</th>
                    <th>Status</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($clients as $c)
                    <tr>
                        <td class="fw-bold">{{ $c->client_code }}</td>
                        <td>
                            <div>
                                <span class="fw-semibold text-dark">{{ $c->full_name }}</span>
                                @if($c->business_name)
                                    <small class="text-secondary d-block">{{ $c->business_name }}</small>
                                @endif
                            </div>
                        </td>
                        <td>{{ $c->phone }}</td>
                        <td>{{ $c->email ?? '-' }}</td>
                        <td class="fw-bold text-{{ $c->outstanding_balance > 0 ? 'danger' : 'success' }}">
                            {{ number_format($c->outstanding_balance) }} UGX
                        </td>
                        <td>
                            <span class="badge bg-{{ $c->status === 'active' ? 'success' : 'secondary' }}">
                                {{ ucfirst($c->status) }}
                            </span>
                        </td>
                        <td class="text-end">
                            <a href="{{ route('clients.show', $c->id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-journal-text"></i> Ledger
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-4 text-muted">No customers registered yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Add Client Modal -->
<div class="modal fade" id="addClientModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Register Customer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('clients.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">FULL NAME *</label>
                        <input type="text" class="form-control" name="full_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">PHONE NUMBER *</label>
                        <input type="text" class="form-control" name="phone" required placeholder="e.g. +256700000000">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">EMAIL ADDRESS</label>
                        <input type="email" class="form-control" name="email">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">BUSINESS NAME</label>
                        <input type="text" class="form-control" name="business_name">
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label text-secondary small fw-bold">TIN NUMBER</label>
                            <input type="text" class="form-control" name="tin">
                        </div>
                        <div class="col-6">
                            <label class="form-label text-secondary small fw-bold">CREDIT LIMIT (UGX)</label>
                            <input type="number" class="form-control" name="credit_limit" value="0">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">ADDRESS</label>
                        <input type="text" class="form-control" name="address">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">NOTES</label>
                        <textarea class="form-control" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Customer</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection