@extends('layouts.customer')

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

@section('content')
    <div class="space-y-8">

        <div class="bg-blue-50 rounded-lg shadow-sm p-4 border border-blue-200">
            <h2 class="text-sm font-bold text-gray-800 mb-4 text-right">ویرایش اطلاعات مشترک</h2>
            <p class="text-xs text-gray-500 mb-6 text-right">لطفاً اطلاعات را با دقت تکمیل کنید.</p>

            @if($errors->any())
                <div class="bg-red-50 text-red-700 p-3 rounded mb-6 text-xs text-center">
                    {{ $errors->first() }}
                </div>
            @endif

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

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

                <div id="legal-section" class="{{ old('type', $customer->type) === 'legal' ? '' : 'hidden' }} space-y-6">

                    <div class="mb-4">
                        <button type="button" onclick="fetchCompanyData()"
                                class="bg-blue-600 text-white px-4 py-2 rounded text-xs font-medium hover:bg-blue-700 transition">
                            بررسی شرکت (API)
                        </button>
                        <p class="text-xs text-gray-500 mt-1">در آینده: اطلاعات شرکت از سامانه ثبت شرکت‌ها بارگذاری می‌شود</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <x-form-input label="نام شرکت" name="company_name" value="{{ old('company_name', $customer->company_name) }}" required icon="building" />
{{--                         💡 تفکیک نام فیلد شناسه ملی --}}
                        <x-form-input label="شناسه ملی" name="legal_national_id" value="{{ old('national_id', $customer->national_id) }}" required maxlength="11" icon="id-card" />
{{--                         💡 تفکیک نام فیلدهای استان و شهر --}}
                        <x-form-input label="استان" name="legal_province" value="{{ old('province', $customer->province) }}" required icon="map-marker-alt" />
                        <x-form-input label="شهر" name="legal_city" value="{{ old('city', $customer->city) }}" required icon="city" />

                        <x-form-input label="شماره ثبت" name="registration_number" value="{{ old('registration_number', $customer->registration_number) }}" required icon="file-alt" />
                        <x-form-input label="کد اقتصادی" name="economic_code" value="{{ old('economic_code', $customer->economic_code) }}" icon="coins" />

{{--                         فیلد آدرس کارخانه مشترک است --}}
                        <x-form-input label="آدرس کارخانه" name="factory_address" value="{{ old('factory_address', $customer->factory_address) }}" icon="industry" />

                        <x-form-input label="آدرس روزنامه رسمی" name="newspaper_address" value="{{ old('newspaper_address', $customer->newspaper_address) }}" required icon="newspaper" />
                        <x-form-input label="فکس" name="fax" value="{{ old('fax', $customer->fax) }}" icon="fax" />
                        <x-form-input label="کد پستی" name="postal_code" value="{{ old('postal_code', $customer->postal_code) }}" icon="mail-bulk" />
                        <x-form-input label="وب سایت" name="website" value="{{ old('website', $customer->website) }}" type="url" icon="globe" />
                        <x-form-input label="پست الکترونیکی" name="email" value="{{ old('email', $customer->email) }}" type="email" icon="envelope" />
                        <x-form-input label="کد بهین سیستم" name="optimal_system_code" value="{{ old('optimal_system_code', $customer->optimal_system_code) }}" icon="barcode" />
                    </div>

                    <div class="border-t pt-6">
                        <h3 class="text-sm font-bold text-gray-800 mb-4 text-xs">مشخصات نماینده</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <x-form-input label="نام" name="agent[first_name]" value="{{ old('agent.first_name', $customer->agent?->first_name) }}" required icon="user" />
                            <x-form-input label="نام خانوادگی" name="agent[last_name]" value="{{ old('agent.last_name', $customer->agent?->last_name) }}" required icon="user" />
                            <x-form-input label="شماره ملی" name="agent[national_id]" value="{{ old('agent.national_id', $customer->agent?->national_id) }}" required maxlength="10" icon="id-card" />
                            <x-form-input label="شماره همراه" name="agent[phone_number]" value="{{ old('agent.phone_number', $customer->agent?->phone_number) }}" required icon="mobile-alt" />
                            <x-form-input label="عنوان نماینده" name="agent[job_position]" value="{{ old('agent.job_position', $customer->agent?->job_position) }}" required icon="user-tie" />
                            <x-form-input label="ایمیل" name="agent[email]" value="{{ old('agent.email', $customer->agent?->email) }}" type="email" icon="envelope" />
                        </div>
                    </div>
                </div>

                <div id="natural-section" class="{{ old('type', $customer->type) === 'natural' ? '' : 'hidden' }} space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <x-form-input label="نام و نام خانوادگی" name="full_name" value="{{ old('full_name', $customer->full_name) }}" required icon="user" />

{{--                         💡 تفکیک نام فیلد کد ملی --}}
                        <x-form-input label="کد ملی" name="natural_national_id" value="{{ old('national_id', $customer->national_id) }}" required maxlength="10" icon="id-card" />

{{--                         💡 تفکیک نام فیلدهای استان و شهر --}}
                        <x-form-input label="استان" name="natural_province" value="{{ old('province', $customer->province) }}" required icon="map-marker-alt" />
                        <x-form-input label="شهر" name="natural_city" value="{{ old('city', $customer->city) }}" required icon="city" />

{{--                         فیلد آدرس مشترک است --}}
                        <x-form-input label="آدرس" name="factory_address" value="{{ old('factory_address', $customer->factory_address) }}" icon="home" />

                        <x-form-input label="شماره همراه" name="phone" value="{{ old('phone', $customer->phone) }}" required icon="mobile-alt" />
                    </div>
                </div>

                @php
                    // Type of industrial consumption
                    $industrialId = \App\Models\ConsumptionType::where('code', 'INDUSTRIAL')->first()?->id ?? 0;
                    $baseTypeId = \App\Models\PurchaseType::where('slug', 'base')->first()?->id ?? 0;

                    $sub = $customer->subscription;
                    $contractPower = old('contract_power', $sub?->contract_power) ?? 0;

                    // Fixed tariff codes
                    $tariffCodes = \App\Models\TariffCode::where('consumption_type_id', $industrialId)
                        ->orderBy('sort_order')
                        ->get();

                    // Proposed tariff code based on power
                    $suggestedTariff = null;
                    if ($industrialId && $contractPower > 0 && old('consumption_type_id', $sub?->consumption_type_id) == $industrialId) {
                        $suggestedTariff = \App\Models\TariffCode::where('consumption_type_id', $industrialId)
                            ->where(function($q) use ($contractPower) {
                                $q->whereNull('min_power_kw')->orWhere('min_power_kw', '<=', $contractPower);
                            })
                            ->where(function($q) use ($contractPower) {
                                $q->whereNull('max_power_kw')->orWhere('max_power_kw', '>=', $contractPower);
                            })
                            ->orderBy('sort_order')
                            ->first();
                    }
                @endphp

                <div class="border-t pt-6 mt-6">
                    <h3 class="text-sm font-bold text-gray-800 mb-4 text-xs">مشخصات انشعاب مشترک</h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        <x-form-input label="شماره کنتور" name="meter_number" value="{{ old('meter_number', $sub?->meter_number) }}" required icon="tachometer-alt" />
                        <x-form-input label="ضریب کنتور" name="meter_factor" value="{{ old('meter_factor', $sub?->meter_factor) }}" required type="number" step="0.01" icon="calculator" />
                        <x-form-input label="قدرت قراردادی (kW)" name="contract_power" value="{{ old('contract_power', $sub?->contract_power) }}" required type="number" step="1" icon="bolt" />
                        <x-form-input label="تاریخ شروع قرارداد" name="contract_start_date" value="{{ old('contract_start_date', $sub?->contract_start_date ? \Carbon\Carbon::parse($sub->contract_start_date)->format('Y-m-d') : null) }}" type="date" icon="calendar-check" />
                        <x-form-input label="تاریخ پایان قرارداد" name="contract_end_date" value="{{ old('contract_end_date', $sub?->contract_end_date ? \Carbon\Carbon::parse($sub->contract_end_date)->format('Y-m-d') : null) }}" type="date" icon="calendar-times" />
                        <div>
                            <label class="block text-xs font-medium mb-1">مالک شبکه <span class="text-red-500">*</span></label>
                            <select name="network_owner_id" required class="w-full p-2 border rounded text-xs">
                                <option value="">انتخاب کنید</option>
                                @foreach(\App\Models\NetworkOwner::all() as $owner)
                                    <option value="{{ $owner->id }}" {{ old('network_owner_id', $sub?->network_owner_id) == $owner->id ? 'selected' : '' }}>
                                        {{ $owner->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-medium mb-1">نوع قرارداد <span class="text-red-500">*</span></label>
                            <select name="contract_type_id" required class="w-full p-2 border rounded text-xs">
                                <option value="">انتخاب کنید</option>
                                @foreach(\App\Models\ContractType::all() as $type)
                                    <option value="{{ $type->id }}" {{ old('contract_type_id', $sub?->contract_type_id) == $type->id ? 'selected' : '' }}>
                                        {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-medium mb-1">سطح ولتاژ <span class="text-red-500">*</span></label>
                            <select name="voltage_level_id" required class="w-full p-2 border rounded text-xs">
                                <option value="">انتخاب کنید</option>
                                @foreach(\App\Models\VoltageLevel::all() as $level)
                                    <option value="{{ $level->id }}" {{ old('voltage_level_id', $sub?->voltage_level_id) == $level->id ? 'selected' : '' }}>
                                        {{ $level->name }}
                                        @if($level->description || $level->voltage_range)
                                            ({{ trim($level->description . ' ' . $level->voltage_range) }})
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-medium mb-1">نوع مصرف <span class="text-red-500">*</span></label>
                            <select name="consumption_type_id" id="consumption-type-select" required class="w-full p-2 border rounded text-xs">
                                <option value="">انتخاب کنید</option>
                                @foreach(\App\Models\ConsumptionType::all() as $type)
                                    <option value="{{ $type->id }}" {{ old('consumption_type_id', $sub?->consumption_type_id) == $type->id ? 'selected' : '' }}>
                                        {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div id="tariff-section" class="col-span-2 hidden">
                            <label class="block text-xs font-medium mb-1">کد تعرفه</label>
                            <select name="tariff_code_id" id="tariff-code-select" class="w-full p-2 border rounded text-xs">
                                <option value="">انتخاب کنید</option>
                                @foreach($tariffCodes as $code)
                                    <option value="{{ $code->id }}" {{ old('tariff_code_id', $sub?->tariff_code_id) == $code->id ? 'selected' : '' }}>
                                        {{ $code->full_code }} - {{ $code->name }}
                                    </option>
                                @endforeach
                            </select>

                            @if($suggestedTariff)
                                <div class="bg-blue-50 p-2 rounded mt-1 text-xs">
                                    پیشنهاد: <strong>{{ $suggestedTariff->full_code }}</strong>
                                    <button type="button" onclick="document.getElementById('tariff-code-select').value = {{ $suggestedTariff->id }}" class="underline text-blue-700">انتخاب</button>
                                </div>
                            @endif
                        </div>

                        <div class="col-span-2">
                            <label class="block text-xs font-medium mb-1">نوع خرید <span class="text-red-500">*</span></label>
                            <select name="purchase_type_id" id="purchase-type-select" required class="w-full p-2 border rounded text-xs">
                                <option value="">انتخاب کنید</option>
                                @foreach(\App\Models\PurchaseType::all() as $type)
                                    <option value="{{ $type->id }}" {{ old('purchase_type_id', $sub?->purchase_type_id) == $type->id ? 'selected' : '' }}>
                                        {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div id="base-price-section" class="col-span-2 {{ old('purchase_type_id', $sub?->purchase_type_id) == $baseTypeId ? '' : 'hidden' }}">
                            <x-form-input label="قیمت بار پایه (ریال)" name="base_price" value="{{ old('base_price', $sub?->base_price) }}" type="number" />
                        </div>

                        <div id="period-prices-section" class="col-span-2 grid grid-cols-3 gap-4 {{ old('purchase_type_id', $sub?->purchase_type_id) != $baseTypeId ? '' : 'hidden' }}">
                            <x-form-input label="کم‌باری (ریال)" name="low_load_price" value="{{ old('low_load_price', $sub?->low_load_price) }}" type="number" />
                            <x-form-input label="میان‌باری (ریال)" name="medium_load_price" value="{{ old('medium_load_price', $sub?->medium_load_price) }}" type="number" />
                            <x-form-input label="اوج بار (ریال)" name="peak_load_price" value="{{ old('peak_load_price', $sub?->peak_load_price) }}" type="number" />
                        </div>
                    </div>
                </div>

                @include('customer.profile.guarantees')

                <div class="mt-8 flex gap-3 justify-end">
                    <a href="{{ route('customer.profile') }}" class="bg-gray-500 text-white px-4 py-2 rounded text-xs hover:bg-gray-600 transition">
                        انصراف
                    </a>
                    <button type="submit" class="bg-green-600 text-white px-6 py-2 rounded text-xs font-medium hover:bg-green-700 transition">
                        ذخیره تغییرات
                    </button>
                </div>
            </form>
        </div>
    </div>

    @include('customer.profile.scripts')

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const typeRadios = document.querySelectorAll('input[name="type"]');
            const legalSection = document.getElementById('legal-section');
            const naturalSection = document.getElementById('natural-section');

            const legalRequiredFields = legalSection.querySelectorAll('[required]');
            const naturalRequiredFields = naturalSection.querySelectorAll('[required]');

            function updateRequiredFields() {
                const isLegal = document.querySelector('input[name="type"]:checked').value === 'legal';

                legalRequiredFields.forEach(field => {
                    if (isLegal) {
                        field.setAttribute('required', 'required');
                    } else {
                        field.removeAttribute('required');
                    }
                });

                naturalRequiredFields.forEach(field => {
                    if (!isLegal) {
                        field.setAttribute('required', 'required');
                    } else {
                        field.removeAttribute('required');
                    }
                });

                legalSection.classList.toggle('hidden', !isLegal);
                naturalSection.classList.toggle('hidden', isLegal);
            }

            typeRadios.forEach(radio => {
                radio.addEventListener('change', updateRequiredFields);
            });

            updateRequiredFields();


            const consumptionSelect = document.getElementById('consumption-type-select');
            const tariffSection = document.getElementById('tariff-section');
            const purchaseSelect = document.getElementById('purchase-type-select');

            const industrialId = {{ $industrialId }};
            const baseTypeId = {{ $baseTypeId }};


            function toggleTariff() {
                const isIndustrial = consumptionSelect.value == industrialId;
                tariffSection.classList.toggle('hidden', !isIndustrial);
            }

            function togglePurchase() {
                const basePriceSection = document.getElementById('base-price-section');
                const periodPricesSection = document.getElementById('period-prices-section');

                const isBase = purchaseSelect.value == baseTypeId;
                basePriceSection.classList.toggle('hidden', !isBase);
                periodPricesSection.classList.toggle('hidden', isBase);
            }

            consumptionSelect?.addEventListener('change', toggleTariff);
            purchaseSelect?.addEventListener('change', togglePurchase);

            toggleTariff();
            togglePurchase();
        });
    </script>

@endsection