<?php
/**
 * @var object $customer
 */
?>
<div class="page-title mb-4">
    <h5><i class="fas fa-user-plus me-2 text-gold"></i>Add New Customer</h5>
</div>

<div class="glass-card p-0">
    <div class="card-header">
        <div class="card-header-left">
            <i class="fas fa-user card-icon"></i>
            <h6 class="card-title">Customer Information</h6>
        </div>
        <div>
            <span class="text-muted small"><span class="text-danger">*</span> Required fields</span>
        </div>
    </div>
    <div class="card-body">
        <form method="POST" action="<?= url('customers/store') ?>">
            <?= csrf_field() ?>

            <div class="row g-3">
                <div class="col-md-6">
                    <div>
                        <label class="form-label">First Name <span class="text-danger">*</span></label>
                        <input type="text" name="first_name" class="form-control bg-transparent <?= errorClass('first_name') ?>" 
                               value="<?= e(old('first_name')) ?>" required maxlength="100">
                        <?= errorMsg('first_name') ?>
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <label class="form-label">Last Name <span class="text-danger">*</span></label>
                        <input type="text" name="last_name" class="form-control bg-transparent <?= errorClass('last_name') ?>" 
                               value="<?= e(old('last_name')) ?>" required maxlength="100">
                        <?= errorMsg('last_name') ?>
                    </div>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-md-4">
                    <div>
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control bg-transparent <?= errorClass('email') ?>" 
                               value="<?= e(old('email')) ?>" maxlength="255">
                        <?= errorMsg('email') ?>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control bg-transparent <?= errorClass('phone') ?>" 
                               value="<?= e(old('phone')) ?>" maxlength="20">
                        <?= errorMsg('phone') ?>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <label class="form-label">Mobile</label>
                        <input type="text" name="mobile" class="form-control bg-transparent <?= errorClass('mobile') ?>" 
                               value="<?= e(old('mobile')) ?>" maxlength="20">
                        <?= errorMsg('mobile') ?>
                    </div>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-md-4">
                    <div>
                        <label class="form-label">Date of Birth</label>
                        <input type="date" name="date_of_birth" class="form-control bg-transparent <?= errorClass('date_of_birth') ?>" 
                               value="<?= e(old('date_of_birth')) ?>">
                        <?= errorMsg('date_of_birth') ?>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <label class="form-label">Gender</label>
                        <select name="gender" class="form-select bg-transparent <?= errorClass('gender') ?>">
                            <option value="">Select Gender</option>
                            <option value="male" <?= old('gender') === 'male' ? 'selected' : '' ?>>Male</option>
                            <option value="female" <?= old('gender') === 'female' ? 'selected' : '' ?>>Female</option>
                            <option value="other" <?= old('gender') === 'other' ? 'selected' : '' ?>>Other</option>
                        </select>
                        <?= errorMsg('gender') ?>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <label class="form-label">Source</label>
                        <select name="source" class="form-select bg-transparent <?= errorClass('source') ?>">
                            <option value="">Select Source</option>
                            <option value="walk_in" <?= old('source') === 'walk_in' ? 'selected' : '' ?>>Walk In</option>
                            <option value="referral" <?= old('source') === 'referral' ? 'selected' : '' ?>>Referral</option>
                            <option value="social_media" <?= old('source') === 'social_media' ? 'selected' : '' ?>>Social Media</option>
                            <option value="google" <?= old('source') === 'google' ? 'selected' : '' ?>>Google</option>
                            <option value="website" <?= old('source') === 'website' ? 'selected' : '' ?>>Website</option>
                            <option value="email" <?= old('source') === 'email' ? 'selected' : '' ?>>Email</option>
                            <option value="sms" <?= old('source') === 'sms' ? 'selected' : '' ?>>SMS</option>
                            <option value="other" <?= old('source') === 'other' ? 'selected' : '' ?>>Other</option>
                        </select>
                        <?= errorMsg('source') ?>
                    </div>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-md-12">
                    <div>
                        <label class="form-label">Address</label>
                        <textarea name="address" class="form-control bg-transparent <?= errorClass('address') ?>" 
                                  rows="3" maxlength="500"><?= e(old('address')) ?></textarea>
                        <?= errorMsg('address') ?>
                    </div>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-md-4">
                    <div>
                        <label class="form-label">City</label>
                        <input type="text" name="city" class="form-control bg-transparent <?= errorClass('city') ?>" 
                               value="<?= e(old('city')) ?>" maxlength="100">
                        <?= errorMsg('city') ?>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <label class="form-label">State</label>
                        <input type="text" name="state" class="form-control bg-transparent <?= errorClass('state') ?>" 
                               value="<?= e(old('state')) ?>" maxlength="100">
                        <?= errorMsg('state') ?>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <label class="form-label">ZIP Code</label>
                        <input type="text" name="zip" class="form-control bg-transparent <?= errorClass('zip') ?>" 
                               value="<?= e(old('zip')) ?>" maxlength="20">
                        <?= errorMsg('zip') ?>
                    </div>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-md-6">
                    <div>
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control bg-transparent <?= errorClass('notes') ?>" 
                                  rows="3" maxlength="2000"><?= e(old('notes')) ?></textarea>
                        <?= errorMsg('notes') ?>
                    </div>
                </div>
                <div class="col-md-6">
                    <div>
                        <label class="form-label">Allergies</label>
                        <textarea name="allergies" class="form-control bg-transparent <?= errorClass('allergies') ?>" 
                                  rows="3" maxlength="2000"><?= e(old('allergies')) ?></textarea>
                        <?= errorMsg('allergies') ?>
                    </div>
                </div>
            </div>

            <div class="card-footer d-flex justify-content-end gap-2">
                <a href="<?= url('customers') ?>" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i>Cancel
                </a>
                <button type="submit" class="btn btn-gold">
                    <i class="fas fa-save me-1"></i>Save Customer
                </button>
            </div>
        </form>
    </div>
</div>
