@extends('layouts.app')
@section('title', 'Edit Customer')
@section('no-page-header')

@section('content')
<style>
    #customer-edit-form label { font-size: .75rem; line-height: 1rem; }
    #customer-edit-form input, #customer-edit-form select, #customer-edit-form textarea { min-height: 2.15rem; padding: .4rem .65rem; font-size: .875rem; }
</style>
<div class="min-h-screen bg-gray-50 p-2 lg:p-4">
    <div class="max-w-5xl mx-auto bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div><h1 class="text-base font-semibold text-gray-900">Edit Customer</h1><p class="mt-0.5 text-xs text-gray-500">Customer and member records are saved separately.</p></div>
            <div class="flex gap-2">
                <a href="{{ route('customers.members', $client) }}" class="px-3 py-2 text-sm text-indigo-700 border border-indigo-200 rounded-md hover:bg-indigo-50"><i class="fas fa-users mr-1"></i>Manage Members</a>
                <a href="{{ route('customers.show', $client) }}" class="px-3 py-2 text-sm text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">Back</a>
            </div>
        </div>

        <form id="customer-edit-form" method="POST" action="{{ route('customers.update', $client) }}" class="p-4">
            @csrf @method('PUT')
            @if(session('error'))<div class="mb-4 px-3 py-2 text-sm text-red-800 bg-red-50 border border-red-200 rounded">{{ session('error') }}</div>@endif
            @if($errors->any())<div class="mb-4 px-3 py-2 text-sm text-red-800 bg-red-50 border border-red-200 rounded">Please correct the highlighted fields.</div>@endif

            <section>
                <div class="pb-2 mb-3 border-b border-gray-200 flex items-end justify-between gap-3">
                    <div><h2 class="text-sm font-semibold text-gray-800">Account Setup</h2><p class="mt-0.5 text-xs text-gray-500">Account Type is fixed after registration. Manage member records separately.</p></div>
                    <span class="text-xs text-gray-600">Active Members: <strong>{{ $client->customerMembers->count() }}</strong></span>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label for="account_type_display" class="block mb-1 font-medium text-gray-700">Account Type</label>
                        <input id="account_type_display" value="{{ $client->accountType?->type_name ?? 'Not available' }}" readonly class="w-full border border-gray-200 bg-gray-100 text-gray-600 rounded-md cursor-not-allowed">
                        <input type="hidden" id="account_type" name="account_type" value="{{ $client->account_type_id }}">
                        @error('account_type')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div id="member-source-wrap">
                        <label for="source_member_id" class="block mb-1 font-medium text-gray-700">Copy Details From Member <span class="font-normal text-gray-400">(Optional)</span></label>
                        <select id="source_member_id" name="source_member_id" class="w-full border border-gray-300 rounded-md @error('source_member_id') border-red-500 @enderror">
                            <option value="">Keep the customer details entered below</option>
                            @foreach($client->customerMembers as $member)<option value="{{ $member->id }}" @selected((string)old('source_member_id') === (string)$member->id)>{{ $member->name }} — {{ $member->proof_number }}</option>@endforeach
                        </select>
                        <p class="mt-1 text-xs text-gray-500">Available only for Individual and Joint accounts. Copy occurs once when saved.</p>
                        @error('source_member_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </section>

            <section class="mt-5">
                <h2 class="pb-1.5 mb-3 text-sm font-semibold text-gray-800 border-b border-gray-200">Customer Details</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                    @php($fields = ['name'=>['Customer Name',true,'text'], 'phone'=>['Mobile',true,'tel'], 'email'=>['Email',false,'email'], 'landline'=>['Landline',false,'tel'], 'registration_number'=>['Registration Number',false,'text'], 'postal_code'=>['Postal Code',true,'text']])
                    @foreach($fields as $field => [$label,$required,$type])
                    <div>
                        <label for="{{ $field }}" class="block mb-1 font-medium text-gray-700">{{ $label }} @if($required)<span class="text-red-500">*</span>@else<span class="font-normal text-gray-400">(Optional)</span>@endif</label>
                        <input type="{{ $type }}" id="{{ $field }}" name="{{ $field }}" value="{{ old($field, $client->{$field}) }}" @required($required) class="w-full border border-gray-300 rounded-md uppercase @error($field) border-red-500 @enderror">
                        @error($field)<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    @endforeach
                    <div>
                        <label for="tax_type" class="block mb-1 font-medium text-gray-700">Tax Type <span class="text-red-500">*</span></label>
                        <select id="tax_type" name="tax_type" required class="w-full border border-gray-300 rounded-md @error('tax_type') border-red-500 @enderror">
                            <option value="">Select Tax Type</option>
                            <option value="SST" @selected(old('tax_type', $client->tax_type) === 'SST')>SST (8%)</option>
                            <option value="GST" @selected(old('tax_type', $client->tax_type) === 'GST')>GST (8%)</option>
                        </select>
                        @error('tax_type')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </section>

            <section class="mt-5">
                <h2 class="pb-1.5 mb-3 text-sm font-semibold text-gray-800 border-b border-gray-200">Address</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                    <div class="sm:col-span-2 lg:col-span-4"><label for="address" class="block mb-1 font-medium text-gray-700">Street Address <span class="text-red-500">*</span></label><textarea id="address" name="address" rows="2" required class="w-full border border-gray-300 rounded-md uppercase @error('address') border-red-500 @enderror">{{ old('address',$client->address) }}</textarea>@error('address')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror</div>
                    <div><label for="country" class="block mb-1 font-medium text-gray-700">Country <span class="text-red-500">*</span></label><select id="country" name="country" required class="w-full border border-gray-300 rounded-md @error('country') border-red-500 @enderror"><option value="">Select Country</option>@foreach($countries as $country)<option value="{{ $country->id }}" @selected((string)old('country',$client->country)===(string)$country->id)>{{ $country->name }}</option>@endforeach</select>@error('country')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror</div>
                    <div><label for="state" class="block mb-1 font-medium text-gray-700">State <span class="text-red-500">*</span></label><select id="state" name="state" required data-current="{{ old('state',$client->state) }}" class="w-full border border-gray-300 rounded-md @error('state') border-red-500 @enderror"><option value="{{ old('state',$client->state) }}">{{ $client->stateRel?->name ?? 'Select State' }}</option></select>@error('state')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror</div>
                    <div><label for="city" class="block mb-1 font-medium text-gray-700">City <span class="text-red-500">*</span></label><input type="text" id="city" name="city" value="{{ old('city', $client->cityRel?->name ?? $client->city) }}" required minlength="2" maxlength="100" autocomplete="address-level2" placeholder="Enter city" class="w-full border border-gray-300 rounded-md uppercase @error('city') border-red-500 @enderror">@error('city')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror</div>
                </div>
            </section>

            <div class="mt-5 pt-3 border-t border-gray-200 flex justify-end gap-2"><a href="{{ route('customers.show',$client) }}" class="px-3 py-2 text-sm text-gray-700 border border-gray-300 rounded-md">Cancel</a><button class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">Save Customer</button></div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const country = document.getElementById('country'), state = document.getElementById('state');
    const loadOptions = async (url, select, selected, placeholder) => {
        select.innerHTML = `<option value="">${placeholder}</option>`;
        if (!url) return;
        const response = await fetch(url, {headers:{'Accept':'application/json'}}), rows = await response.json();
        (rows.data || rows).forEach(row => select.add(new Option(row.name, row.id, false, String(row.id) === String(selected))));
    };
    const loadStates = async keep => { await loadOptions(`{{ url('locations/get-states') }}/${country.value}`, state, keep ? state.dataset.current : '', 'Select State'); };
    country.addEventListener('change', () => loadStates(false));
    if (country.value) loadStates(true);
    const sourceWrap = document.getElementById('member-source-wrap'), type = document.getElementById('account_type');
    const toggleSource = () => sourceWrap.classList.toggle('hidden', !['1','2'].includes(type.value));
    toggleSource();
});
</script>
@endpush