@php($customer = $customer ?? null)
@extends('layouts.app')
@section('title', $customer ? __('messages.edit') : __('messages.create'))
@section('content')
<h1 class="h4 mb-3">{{ $customer ? __('messages.edit') : __('messages.create') }}</h1>
<form method="post" action="{{ $customer ? route('customers.update',$customer) : route('customers.store') }}" class="card card-body">
    @csrf @if($customer) @method('PUT') @endif
    <div class="row g-3">
        <div class="col-md-6"><label class="form-label">{{ __('messages.name') }}</label><input class="form-control" name="name" value="{{ old('name', $customer?->name) }}" required></div>
        <div class="col-md-6"><label class="form-label">{{ __('messages.phone') }}</label><input class="form-control" name="phone" value="{{ old('phone', $customer?->phone) }}" required></div>
        <div class="col-md-6"><label class="form-label">{{ __('messages.national_id') }}</label><input class="form-control" name="national_id" value="{{ old('national_id', $customer?->national_id) }}"></div>
        <div class="col-md-6"><label class="form-label">{{ __('messages.email') }}</label><input class="form-control" name="email" value="{{ old('email', $customer?->email) }}"></div>
        <div class="col-md-6"><label class="form-label">{{ __('messages.customer_type') }}</label>
            <select class="form-select" name="customer_type" id="customer_type">
                <option value="individual">{{ __('status.customer_individual') }}</option>
                <option value="company" @selected(old('customer_type', $customer?->customer_type?->value) === 'company')>{{ __('status.customer_company') }}</option>
            </select>
        </div>
        <div class="col-md-6"><label class="form-label">{{ __('messages.status') }}</label>
            <select class="form-select" name="status">
                <option value="active">{{ __('status.active') }}</option>
                <option value="inactive" @selected(old('status', $customer?->status?->value) === 'inactive')>{{ __('status.inactive') }}</option>
            </select>
        </div>
        <div class="col-12" id="accountFields">
            <div class="alert alert-light border small mb-2">{{ __('messages.accounts_for_companies') }}</div>
            <div class="row g-3">
        <div class="col-md-6"><label class="form-label">{{ __('messages.main_account') }}</label>
            <select class="form-select" name="main_account_id"><option value="">{{ __('messages.choose') }}</option>
                @foreach($mainAccounts as $a)<option value="{{ $a->id }}" @selected((string) old('main_account_id', $customer?->main_account_id) === (string) $a->id)>{{ $a->name }}</option>@endforeach
            </select>
        </div>
        <div class="col-md-6"><label class="form-label">{{ __('messages.sub_account') }}</label>
            <select class="form-select" name="sub_account_id"><option value="">{{ __('messages.choose') }}</option>
                @foreach($subAccounts as $a)<option value="{{ $a->id }}" data-main="{{ $a->main_account_id ?? '' }}" @selected((string) old('sub_account_id', $customer?->sub_account_id) === (string) $a->id)>{{ $a->name }}{{ $a->mainAccount?->name ? ' — '.$a->mainAccount->name : '' }}</option>@endforeach
            </select>
        </div>
            </div>
        </div>
        <div class="col-12"><label class="form-label">{{ __('messages.address') }}</label><textarea class="form-control" name="address">{{ old('address', $customer?->address) }}</textarea></div>
        <div class="col-12"><label class="form-label">{{ __('messages.notes') }}</label><textarea class="form-control" name="notes">{{ old('notes', $customer?->notes) }}</textarea></div>
    </div>
    <div class="mt-3"><button class="btn btn-success">{{ __('messages.save') }}</button></div>
</form>
<script>
const type = document.getElementById('customer_type');
const box = document.getElementById('accountFields');
function toggleAccounts() { box.classList.toggle('d-none', type.value !== 'company'); }
type.addEventListener('change', toggleAccounts);
toggleAccounts();
</script>
@endsection