@extends('layouts.app')
@section('title', 'নতুন গ্রাহক')
@section('page-title', 'নতুন গ্রাহক নিবন্ধন')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-9">
        <div class="card stat-card">
            <div class="card-header bg-white border-0 pt-4 px-4">
                <h6 class="fw-semibold mb-0"><i class="bi bi-person-plus text-primary me-2"></i>গ্রাহকের তথ্য পূরণ করুন</h6>
            </div>
            <div class="card-body p-4">
                <form method="POST" action="{{ route($routePrefix . '.store') }}">
                    @csrf

                    {{-- Basic Info --}}
                    <div class="mb-4">
                        <h6 class="text-primary border-bottom pb-2 mb-3">
                            <i class="bi bi-person me-2"></i>মূল তথ্য
                        </h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">পুরো নাম <span class="text-danger">*</span></label>
                                <input type="text" name="name" value="{{ old('name') }}"
                                    class="form-control @error('name') is-invalid @enderror" placeholder="গ্রাহকের নাম" required>
                                @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">ফোন নম্বর <span class="text-danger">*</span></label>
                                <input type="text" name="phone" value="{{ old('phone') }}"
                                    class="form-control @error('phone') is-invalid @enderror" placeholder="01XXXXXXXXX" required>
                                @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">ইমেইল</label>
                                <input type="email" name="email" value="{{ old('email') }}"
                                    class="form-control @error('email') is-invalid @enderror" placeholder="email@example.com">
                                @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">গ্রাহক ধরন <span class="text-danger">*</span></label>
                                <select name="type" class="form-select @error('type') is-invalid @enderror" required>
                                    <option value="regular" {{ old('type', 'regular') === 'regular' ? 'selected' : '' }}>রেগুলার</option>
                                    <option value="corporate" {{ old('type') === 'corporate' ? 'selected' : '' }}>কর্পোরেট</option>
                                </select>
                                @error('type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">জাতীয় পরিচয়পত্র (NID)</label>
                                <input type="text" name="nid" value="{{ old('nid') }}"
                                    class="form-control @error('nid') is-invalid @enderror" placeholder="NID নম্বর">
                                @error('nid') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6 corporate-field" style="display:none">
                                <label class="form-label fw-semibold">কোম্পানির নাম</label>
                                <input type="text" name="company_name" value="{{ old('company_name') }}"
                                    class="form-control @error('company_name') is-invalid @enderror" placeholder="কোম্পানির নাম">
                                @error('company_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Address --}}
                    <div class="mb-4">
                        <h6 class="text-primary border-bottom pb-2 mb-3">
                            <i class="bi bi-geo-alt me-2"></i>ঠিকানা
                        </h6>
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label fw-semibold">পূর্ণ ঠিকানা</label>
                                <input type="text" name="address" value="{{ old('address') }}"
                                    class="form-control @error('address') is-invalid @enderror" placeholder="বাড়ি নম্বর, রাস্তা, গ্রাম/মহল্লা">
                                @error('address') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">এলাকা / থানা</label>
                                <input type="text" name="area" value="{{ old('area') }}"
                                    class="form-control @error('area') is-invalid @enderror" placeholder="এলাকার নাম">
                                @error('area') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">জেলা</label>
                                <input type="text" name="district" value="{{ old('district') }}"
                                    class="form-control @error('district') is-invalid @enderror" placeholder="জেলার নাম">
                                @error('district') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Financial --}}
                    <div class="mb-4">
                        <h6 class="text-primary border-bottom pb-2 mb-3">
                            <i class="bi bi-cash me-2"></i>আর্থিক তথ্য
                        </h6>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">সিলিন্ডার ডিপোজিট (৳)</label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" name="deposit_amount" value="{{ old('deposit_amount', 0) }}"
                                        class="form-control @error('deposit_amount') is-invalid @enderror"
                                        min="0" step="0.01" placeholder="0.00">
                                    @error('deposit_amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Notes --}}
                    <div class="mb-4">
                        <label class="form-label fw-semibold">মন্তব্য / নোট</label>
                        <textarea name="notes" rows="3"
                            class="form-control @error('notes') is-invalid @enderror"
                            placeholder="কোনো বিশেষ তথ্য থাকলে লিখুন...">{{ old('notes') }}</textarea>
                        @error('notes') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="bi bi-check2 me-2"></i>গ্রাহক নিবন্ধন করুন
                        </button>
                        <a href="{{ route($routePrefix . '.index') }}" class="btn btn-outline-secondary px-4">বাতিল</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const typeSelect = document.querySelector('select[name="type"]');
    const corporateFields = document.querySelectorAll('.corporate-field');

    function toggleCorporate() {
        const show = typeSelect.value === 'corporate';
        corporateFields.forEach(f => f.style.display = show ? 'block' : 'none');
    }

    typeSelect.addEventListener('change', toggleCorporate);
    toggleCorporate();
</script>
@endpush