@extends('layouts.customer')

@section('page-title', 'ویرایش اطلاعات')

@section('content')
    <div class="bg-white rounded-lg shadow-sm p-4 text-xs">
        <h2 class="text-sm font-bold mb-4">ویرایش اطلاعات مشترک</h2>

        <form method="POST" action="{{ route('customer.profile.update') }}" id="edit-form">
            @csrf
            @method('PATCH')

            <div class="mb-4">
                <label class="block font-medium">نوع مشترک <span class="text-red-500">*</span></label>
                <div class="flex gap-4">
                    <label><input type="radio" name="type" value="natural" {{ old('type', $customer->type) === 'natural' ? 'checked' : '' }} required onchange="toggleFields()"> حقیقی</label>
                    <label><input type="radio" name="type" value="legal" {{ old('type', $customer->type) === 'legal' ? 'checked' : '' }} required onchange="toggleFields()"> حقوقی</label>
                </div>
            </div>

            <div id="legal-section" class="{{ $customer->type === 'legal' ? '' : 'hidden' }}">
                <div class="mb-4">
                    <button type="button" onclick="fetchCompanyData()" class="bg-blue-600 text-white px-3 py-1.5 rounded text-xs">
                        بررسی شرکت (API)
                    </button>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label>نام شرکت <span class="text-red-500">*</span></label>
                        <input name="company_name" value="{{ old('company_name', $customer->company_name) }}" class="w-full p-2 border rounded" required>
                    </div>
                    <div>
                        <label>شناسه ملی <span class="text-red-500">*</span></label>
                        <input name="national_id" value="{{ old('national_id', $customer->national_id) }}" class="w-full p-2 border rounded" required maxlength="11">
                    </div>
                    <div>
                        <label>شماره ثبت <span class="text-red-500">*</span></label>
                        <input name="registration_number" value="{{ old('registration_number', $customer->registration_number) }}" class="w-full p-2 border rounded" required>
                    </div>
                    <div>
                        <label>کد اقتصادی</label>
                        <input name="economic_code" value="{{ old('economic_code', $customer->economic_code) }}" class="w-full p-2 border rounded">
                    </div>
                </div>
            </div>

            <div id="natural-section" class="{{ $customer->type === 'natural' ? '' : 'hidden' }}">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label>نام و نام خانوادگی <span class="text-red-500">*</span></label>
                        <input name="full_name" value="{{ old('full_name', $customer->full_name) }}" class="w-full p-2 border rounded" required>
                    </div>
                    <div>
                        <label>کد ملی <span class="text-red-500">*</span></label>
                        <input name="personal_national_id" value="{{ old('personal_national_id', $customer->personal_national_id) }}" class="w-full p-2 border rounded" required maxlength="10">
                    </div>
                </div>
            </div>

            <div id="agent-section" class="{{ $customer->type === 'legal' ? '' : 'hidden' }}">
                <h3 class="font-medium mt-6 mb-2">مشخصات نماینده</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label>نام <span class="text-red-500">*</span></label>
                        <input name="agent[first_name]" value="{{ old('agent.first_name', $customer->agent?->first_name) }}" class="w-full p-2 border rounded" required>
                    </div>
                    <div>
                        <label>نام خانوادگی <span class="text-red-500">*</span></label>
                        <input name="agent[last_name]" value="{{ old('agent.last_name', $customer->agent?->last_name) }}" class="w-full p-2 border rounded" required>
                    </div>
                </div>
            </div>

            <h3 class="font-medium mt-6 mb-2">مشخصات انشعاب</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label>قدرت قراردادی (کیلووات) <span class="text-red-500">*</span></label>
                    <input name="contracted_power" type="number" step="0.01" value="{{ old('contracted_power', $customer->contracted_power) }}" required>
                </div>
                <div>
                    <label>نوع خرید <span class="text-red-500">*</span></label>
                    <select name="purchase_type" required onchange="togglePriceFields()">
                        <option value="بار پایه" {{ old('purchase_type', $customer->purchase_type) === 'بار پایه' ? 'selected' : '' }}>بار پایه</option>
                        <option value="بازه‌ای" {{ old('purchase_type', $customer->purchase_type) === 'بازه‌ای' ? 'selected' : '' }}>بازه‌ای</option>
                    </select>
                </div>

                <div id="base-price" class="{{ $customer->purchase_type === 'بار پایه' ? '' : 'hidden' }}">
                    <label>قیمت بار پایه (تومان)</label>
                    <input name="base_price" type="number" value="{{ old('base_price', $customer->base_price) }}">
                </div>

                <div id="period-prices" class="{{ $customer->purchase_type === 'بازه‌ای' ? '' : 'hidden' }} grid grid-cols-3 gap-4">
                    <div>
                        <label>کم باری</label>
                        <input name="low_load_price" type="number" value="{{ old('low_load_price', $customer->low_load_price) }}">
                    </div>
                    <div>
                        <label>میان باری</label>
                        <input name="medium_load_price" type="number" value="{{ old('medium_load_price', $customer->medium_load_price) }}">
                    </div>
                    <div>
                        <label>اوج بار</label>
                        <input name="peak_load_price" type="number" value="{{ old('peak_load_price', $customer->peak_load_price) }}">
                    </div>
                </div>
            </div>

            <div class="mt-6">
                <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded">ذخیره تغییرات</button>
                <a href="{{ route('customer.profile') }}" class="mr-2 text-gray-600">انصراف</a>
            </div>
        </form>
    </div>

    <script>
        function toggleFields() {
            const type = document.querySelector('input[name="type"]:checked').value;
            document.getElementById('legal-section').classList.toggle('hidden', type !== 'legal');
            document.getElementById('natural-section').classList.toggle('hidden', type !== 'natural');
            document.getElementById('agent-section').classList.toggle('hidden', type !== 'legal');
        }

        function togglePriceFields() {
            const type = document.querySelector('select[name="purchase_type"]').value;
            document.getElementById('base-price').classList.toggle('hidden', type !== 'بار پایه');
            document.getElementById('period-prices').classList.toggle('hidden', type !== 'بازه‌ای');
        }

        function fetchCompanyData() {
            const billId = "{{ $customer->bill_id }}";
            // بعداً: fetch('/api/company?bill_id=' + billId)
            alert('در آینده: اطلاعات شرکت از سامانه ثبت شرکت‌ها بارگذاری میشه');
        }

        toggleFields();
        togglePriceFields();
    </script>
@endsection