@extends('layouts.app')
@section('title', isset($customer) ? 'Edit Customer' : 'Add Customer')
@section('page-title', isset($customer) ? 'Edit Customer' : 'Add Customer')

@section('content')
<div class="max-w-3xl">
<form method="POST"
      action="{{ isset($customer) ? route('customers.update', $customer) : route('customers.store') }}">
    @csrf
    @if(isset($customer)) @method('PUT') @endif

    <div class="space-y-5">

        {{-- Basic Info --}}
        <div class="card">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Customer Details</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="sm:col-span-2">
                    <label class="form-label">Customer Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name', $customer->name ?? '') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full" required>
                    @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">Phone</label>
                    <input type="text" name="phone" value="{{ old('phone', $customer->phone ?? '') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>
                <div>
                    <label class="form-label">Email</label>
                    <input type="email" name="email" value="{{ old('email', $customer->email ?? '') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>
                <div>
                    <label class="form-label">Customer Type <span class="text-red-500">*</span></label>
                    <select name="customer_type" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                        <option value="b2c" {{ old('customer_type', $customer->customer_type ?? 'b2c') === 'b2c' ? 'selected' : '' }}>B2C — Consumer (No GST)</option>
                        <option value="b2b" {{ old('customer_type', $customer->customer_type ?? '') === 'b2b' ? 'selected' : '' }}>B2B — Business (Registered)</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">GSTIN</label>
                    <input type="text" name="gstin" value="{{ old('gstin', $customer->gstin ?? '') }}"
                           placeholder="15-digit GSTIN" maxlength="15"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full font-mono uppercase">
                    @error('gstin')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">PAN</label>
                    <input type="text" name="pan" value="{{ old('pan', $customer->pan ?? '') }}"
                           placeholder="ABCDE1234F" maxlength="10"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full font-mono uppercase">
                </div>
            </div>
        </div>

        {{-- Billing Address --}}
        <div class="card">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Billing Address</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="sm:col-span-2">
                    <label class="form-label">Address</label>
                    <textarea name="billing_address" rows="2"
                              class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">{{ old('billing_address', $customer->billing_address ?? '') }}</textarea>
                </div>
                <div>
                    <label class="form-label">City</label>
                    <input type="text" name="billing_city" value="{{ old('billing_city', $customer->billing_city ?? '') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>
                <div>
                    <label class="form-label">Pincode</label>
                    <input type="text" name="billing_pincode" value="{{ old('billing_pincode', $customer->billing_pincode ?? '') }}"
                           maxlength="6" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>
                <div>
                    <label class="form-label">State <span class="text-red-500">*</span></label>
                    <select name="billing_state_code" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full"
                            onchange="document.querySelector('[name=billing_state]').value = this.options[this.selectedIndex].text.split(' (')[0]">
                        <option value="">— Select State —</option>
                        @foreach($states as $code => $name)
                        <option value="{{ $code }}"
                            data-name="{{ $name }}"
                            {{ old('billing_state_code', $customer->billing_state_code ?? '') == $code ? 'selected' : '' }}>
                            {{ $name }} ({{ $code }})
                        </option>
                        @endforeach
                    </select>
                    <input type="hidden" name="billing_state" value="{{ old('billing_state', $customer->billing_state ?? '') }}">
                </div>
            </div>
        </div>

        {{-- Credit Settings --}}
        <div class="card">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Credit & Balance</h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="form-label">Opening Balance (₹)</label>
                    <input type="number" name="opening_balance" step="0.01" min="0"
                           value="{{ old('opening_balance', $customer->opening_balance ?? '0') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>
                <div>
                    <label class="form-label">Balance Type</label>
                    <select name="balance_type" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                        <option value="debit"  {{ old('balance_type', $customer->balance_type ?? 'debit') === 'debit'  ? 'selected' : '' }}>Debit (Customer owes you)</option>
                        <option value="credit" {{ old('balance_type', $customer->balance_type ?? '')       === 'credit' ? 'selected' : '' }}>Credit (You owe customer)</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Credit Days</label>
                    <input type="number" name="credit_days" min="0"
                           value="{{ old('credit_days', $customer->credit_days ?? '30') }}"
                           class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                </div>
                <div>
                    <label class="form-label">Notes</label>
                    <textarea name="notes" rows="2"
                              class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full sm:col-span-3">{{ old('notes', $customer->notes ?? '') }}</textarea>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" class="btn-primary">
                {{ isset($customer) ? 'Update Customer' : 'Create Customer' }}
            </button>
            <a href="{{ route('customers.index') }}" class="btn-secondary">Cancel</a>
        </div>

    </div>
</form>
</div>
@endsection