<?php $this->extend('layouts/main'); $this->section('content'); $title = 'New Customer'; ?>

<div class="row justify-content-center">
<div class="col-lg-8">

<div class="mb-3"><a href="/fieldly/public/index.php/customers" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i> Back</a></div>

<?php if (session()->getFlashdata('errors')): ?>
<div class="alert alert-danger"><ul class="mb-0"><?php foreach ((array)session()->getFlashdata('errors') as $e): ?><li><?= esc($e) ?></li><?php endforeach; ?></ul></div>
<?php endif; ?>

<form method="POST" action="/fieldly/public/index.php/customers/create">
<?= csrf_field() ?>

<div class="card mb-3">
    <div class="card-header"><h6 class="mb-0">Customer Details</h6></div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Type</label>
                <select name="type" class="form-select" id="customer-type">
                    <option value="individual" <?= old('type')==='individual'?'selected':'' ?>>Individual</option>
                    <option value="business"   <?= old('type')==='business'?'selected':'' ?>>Business</option>
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">Account Ref</label>
                <input type="text" class="form-control" value="<?= esc($nextRef) ?>" readonly/>
                <div class="form-text">Auto-generated</div>
            </div>
            <div class="col-md-6">
                <label class="form-label">First Name <span class="text-danger">*</span></label>
                <input type="text" name="first_name" class="form-control" value="<?= esc(old('first_name')) ?>" required/>
            </div>
            <div class="col-md-6">
                <label class="form-label">Last Name <span class="text-danger">*</span></label>
                <input type="text" name="last_name" class="form-control" value="<?= esc(old('last_name')) ?>" required/>
            </div>
            <div class="col-md-6 business-only" style="display:none">
                <label class="form-label">Company Name</label>
                <input type="text" name="company_name" class="form-control" value="<?= esc(old('company_name')) ?>"/>
            </div>
            <div class="col-md-6 business-only" style="display:none">
                <label class="form-label">VAT Number</label>
                <input type="text" name="vat_number" class="form-control" value="<?= esc(old('vat_number')) ?>"/>
            </div>
            <div class="col-md-6">
                <label class="form-label">Email</label>
                <input type="email" name="email" class="form-control" value="<?= esc(old('email')) ?>" style="font-size:16px"/>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header"><h6 class="mb-0">Phone Numbers</h6></div>
    <div class="card-body">
        <div id="phones-container">
            <div class="phone-row d-flex gap-2 mb-2">
                <select class="form-select form-select-sm" name="phones[0][type]" style="width:110px;flex-shrink:0">
                    <option>Mobile</option><option>Work</option><option>Home</option><option>Fax</option><option>Other</option>
                </select>
                <input type="tel" class="form-control form-control-sm" name="phones[0][number]" placeholder="Phone number" style="font-size:16px"/>
                <button type="button" class="btn btn-sm btn-outline-danger remove-phone"><i class="bi bi-trash3"></i></button>
            </div>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary mt-1" id="add-phone"><i class="bi bi-plus me-1"></i> Add Phone</button>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header"><h6 class="mb-0">Billing Address</h6></div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-12"><input type="text" name="billing_line1" class="form-control" placeholder="Address Line 1"/></div>
            <div class="col-12"><input type="text" name="billing_line2" class="form-control" placeholder="Address Line 2"/></div>
            <div class="col-md-6"><input type="text" name="billing_town" class="form-control" placeholder="Town/City"/></div>
            <div class="col-md-6"><input type="text" name="billing_county" class="form-control" placeholder="County"/></div>
            <div class="col-md-4"><input type="text" name="billing_postcode" class="form-control" placeholder="Postcode" style="text-transform:uppercase"/></div>
            <div class="col-md-8">
                <select name="billing_country" class="form-select">
                    <option>United Kingdom</option><option>Ireland</option><option>United States</option><option>Canada</option><option>Australia</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header"><h6 class="mb-0">Notes</h6></div>
    <div class="card-body">
        <textarea name="notes" class="form-control" rows="3" placeholder="Internal notes about this customer..."><?= esc(old('notes')) ?></textarea>
    </div>
</div>

<div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i> Create Customer</button>
    <a href="/fieldly/public/index.php/customers" class="btn btn-outline-secondary">Cancel</a>
</div>

</form>
</div></div>

<script>
document.getElementById('customer-type').addEventListener('change', function() {
    document.querySelectorAll('.business-only').forEach(el => el.style.display = this.value === 'business' ? '' : 'none');
});
</script>
<?php $this->endSection(); ?>
