@extends('layouts.app')
@section('title', 'New Customer')

@section('content')
<div class="d-flex align-items-center mb-3">
    <a href="{{ route('customers.index') }}" class="btn btn-sm btn-outline-secondary me-3"><i class="bi bi-arrow-left"></i></a>
    <h4 class="mb-0 fw-bold"><i class="bi bi-person-plus text-primary me-2"></i>New Customer</h4>
</div>

@if($errors->any())
<div class="alert alert-danger small">
    <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
</div>
@endif

<form method="POST" action="{{ route('customers.store') }}">
@csrf

<div class="row g-3">
    {{-- Basic Info --}}
    <div class="col-md-8">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-transparent border-bottom fw-bold">Basic Information</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">Customer Code *</label>
                        <input type="text" name="customer_code" class="form-control form-control-sm @error('customer_code') is-invalid @enderror" value="{{ old('customer_code', $autoCode) }}" required>
                        @error('customer_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">Type *</label>
                        <select name="customer_type" class="form-select form-select-sm" required>
                            <option value="business" {{ old('customer_type','business') == 'business' ? 'selected':'' }}>Business</option>
                            <option value="retail"   {{ old('customer_type') == 'retail'   ? 'selected':'' }}>Retail</option>
                            <option value="cash"     {{ old('customer_type') == 'cash'     ? 'selected':'' }}>Cash</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">Status *</label>
                        <select name="status" class="form-select form-select-sm" required>
                            <option value="active"   {{ old('status','active') == 'active'   ? 'selected':'' }}>Active</option>
                            <option value="inactive" {{ old('status') == 'inactive' ? 'selected':'' }}>Inactive</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold small">Name (English) *</label>
                        <input type="text" name="name_en" class="form-control form-control-sm @error('name_en') is-invalid @enderror" value="{{ old('name_en') }}" required>
                        @error('name_en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold small">Name (Arabic)</label>
                        <input type="text" name="name_ar" class="form-control form-control-sm" value="{{ old('name_ar') }}" dir="rtl">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">Mobile</label>
                        <input type="text" name="mobile" class="form-control form-control-sm" value="{{ old('mobile') }}" placeholder="05XXXXXXXX">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">Phone</label>
                        <input type="text" name="phone" class="form-control form-control-sm" value="{{ old('phone') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">Email</label>
                        <input type="email" name="email" class="form-control form-control-sm" value="{{ old('email') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">Contact Person</label>
                        <input type="text" name="contact_person" class="form-control form-control-sm" value="{{ old('contact_person') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">Customer Ref</label>
                        <input type="text" name="customer_ref" class="form-control form-control-sm" value="{{ old('customer_ref') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">Branch</label>
                        <select name="branch_id" class="form-select form-select-sm">
                            <option value="">All Branches</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected':'' }}>{{ $branch->name_en }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- VAT & CR --}}
    <div class="col-md-4">
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-transparent border-bottom fw-bold small">VAT & CR Registration</div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold small">VAT Registered? *</label>
                    <select name="vat_registered" class="form-select form-select-sm" id="vatRegistered" required>
                        <option value="0" {{ old('vat_registered','0') == '0' ? 'selected':'' }}>No</option>
                        <option value="1" {{ old('vat_registered') == '1' ? 'selected':'' }}>Yes</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold small">VAT Number (15 digits)</label>
                    <input type="text" name="vat_number" class="form-control form-control-sm @error('vat_number') is-invalid @enderror" value="{{ old('vat_number') }}" maxlength="15" placeholder="3XXXXXXXXXXX3">
                    <div class="form-text">Saudi VAT: starts and ends with 3, 15 digits total.</div>
                    @error('vat_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold small">CR Number</label>
                    <input type="text" name="cr_number" class="form-control form-control-sm" value="{{ old('cr_number') }}">
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent border-bottom fw-bold small">Credit Settings</div>
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label fw-semibold small">Allow Credit *</label>
                        <select name="credit_allowed" class="form-select form-select-sm" required>
                            <option value="0" {{ old('credit_allowed','0') == '0' ? 'selected':'' }}>No</option>
                            <option value="1" {{ old('credit_allowed') == '1' ? 'selected':'' }}>Yes</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold small">Price Level *</label>
                        <select name="price_level" class="form-select form-select-sm" required>
                            <option value="retail"     {{ old('price_level','retail') == 'retail'     ? 'selected':'' }}>Retail</option>
                            <option value="wholesale"  {{ old('price_level') == 'wholesale'  ? 'selected':'' }}>Wholesale</option>
                            <option value="special"    {{ old('price_level') == 'special'    ? 'selected':'' }}>Special</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold small">Credit Limit (SAR)</label>
                        <input type="number" name="credit_limit" class="form-control form-control-sm" value="{{ old('credit_limit', '0') }}" min="0" step="0.01">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold small">Credit Days</label>
                        <input type="number" name="credit_days" class="form-control form-control-sm" value="{{ old('credit_days', '0') }}" min="0">
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold small">Payment Type *</label>
                        <select name="default_payment_type" class="form-select form-select-sm" required>
                            <option value="cash"   {{ old('default_payment_type','cash') == 'cash'   ? 'selected':'' }}>Cash</option>
                            <option value="credit" {{ old('default_payment_type') == 'credit' ? 'selected':'' }}>Credit</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Saudi National Address --}}
<div class="card border-0 shadow-sm mt-3">
    <div class="card-header bg-transparent border-bottom fw-bold">Saudi National Address (for ZATCA)</div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-2">
                <label class="form-label fw-semibold small">Building No.</label>
                <input type="text" name="building_number" class="form-control form-control-sm" value="{{ old('building_number') }}" maxlength="4">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold small">Street (EN)</label>
                <input type="text" name="street_en" class="form-control form-control-sm" value="{{ old('street_en') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold small">Street (AR)</label>
                <input type="text" name="street_ar" class="form-control form-control-sm" value="{{ old('street_ar') }}" dir="rtl">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold small">Additional No.</label>
                <input type="text" name="additional_number" class="form-control form-control-sm" value="{{ old('additional_number') }}" maxlength="4">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold small">Postal Code</label>
                <input type="text" name="postal_code" class="form-control form-control-sm" value="{{ old('postal_code') }}" maxlength="5">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold small">District (EN)</label>
                <input type="text" name="district_en" class="form-control form-control-sm" value="{{ old('district_en') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold small">District (AR)</label>
                <input type="text" name="district_ar" class="form-control form-control-sm" value="{{ old('district_ar') }}" dir="rtl">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold small">City (EN)</label>
                <input type="text" name="city_en" class="form-control form-control-sm" value="{{ old('city_en') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold small">City (AR)</label>
                <input type="text" name="city_ar" class="form-control form-control-sm" value="{{ old('city_ar') }}" dir="rtl">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold small">Country</label>
                <input type="text" name="country" class="form-control form-control-sm" value="{{ old('country', 'Saudi Arabia') }}">
            </div>
        </div>
    </div>
</div>

{{-- Opening Balance --}}
<div class="card border-0 shadow-sm mt-3">
    <div class="card-header bg-transparent border-bottom fw-bold">Opening Balance (Optional)</div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <label class="form-label fw-semibold small">Financial Year</label>
                <select name="financial_year_id" class="form-select form-select-sm">
                    <option value="">-- None --</option>
                    @foreach($financialYears as $fy)
                        <option value="{{ $fy->id }}" {{ old('financial_year_id') == $fy->id ? 'selected':'' }}>{{ $fy->year_name ?? $fy->name ?? $fy->year }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold small">Opening Date</label>
                <input type="date" name="opening_date" class="form-control form-control-sm" value="{{ old('opening_date', now()->toDateString()) }}">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold small">Amount (SAR)</label>
                <input type="number" name="opening_balance" class="form-control form-control-sm" value="{{ old('opening_balance', '0') }}" min="0" step="0.01">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold small">Type</label>
                <select name="opening_balance_type" class="form-select form-select-sm">
                    <option value="receivable" {{ old('opening_balance_type','receivable') == 'receivable' ? 'selected':'' }}>Receivable (Debit)</option>
                    <option value="advance"    {{ old('opening_balance_type') == 'advance' ? 'selected':'' }}>Advance (Credit)</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold small">Notes</label>
                <input type="text" name="notes" class="form-control form-control-sm" value="{{ old('notes') }}">
            </div>
        </div>
    </div>
</div>

<div class="d-flex gap-2 justify-content-end mt-3">
    <a href="{{ route('customers.index') }}" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary px-4"><i class="bi bi-save me-1"></i>Create Customer</button>
</div>

</form>
@endsection
