@extends('layouts.admin')

@section('page-title', 'افزودن تخصیص جدید')

@section('content')
    <div class="bg-white p-6 rounded-lg shadow-sm text-sm max-w-4xl mx-auto">

        <div class="mb-6 text-center">
            <h1 class="text-2xl font-bold text-gray-800">
                افزودن تخصیص جدید —
                <span class="text-orange-600">
                {{ ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'][$month - 1] }}
                    {{ $year }}
            </span>
            </h1>
        </div>

        <form method="POST" action="{{ route('admin.monthly-allocations.store') }}" class="space-y-6">
            @csrf
            <input type="hidden" name="year" value="{{ $year }}">
            <input type="hidden" name="month" value="{{ $month }}">

            <input type="hidden" name="customer_id" id="customer_id_hidden" value="">

            <!-- search customer with billId -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-5 items-end">
                <div class="md:col-span-2">
                    <label class="block text-sm font-bold text-gray-700 mb-2">شناسه قبض مشترک</label>
                    <input type="text"
                           id="bill_id"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-blue-600 text-sm font-mono text-center"
                           placeholder="مثلاً: 1234567890"
                           value="{{ old('bill_id') }}"
                           required>
                    @error('bill_id') <p class="text-red-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <button type="button"
                        onclick="fetchCustomer()"
                        class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-8 py-3 rounded-xl font-bold hover:from-blue-700 hover:to-indigo-700 transition shadow-lg">
                    جستجوی مشترک
                </button>
            </div>

            <!-- show customer detail after search -->
            <div id="customer-info" class="hidden bg-gradient-to-r from-gray-50 to-gray-100 p-6 rounded-xl border-2 border-gray-300">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-5 text-sm">
                    <div>
                        <p class="text-gray-600">نام شرکت</p>
                        <p id="company_name" class="font-bold text-lg text-gray-900">-</p>
                    </div>
                    <div>
                        <p class="text-gray-600">دیماند قرارداد</p>
                        <p id="contract_power" class="font-bold text-lg text-blue-700">-</p>
                    </div>
                    <div>
                        <p class="text-gray-600">مالک شبکه</p>
                        <p id="network_owner" class="font-bold text-lg text-emerald-700">-</p>
                    </div>
                </div>
            </div>

            <!-- show the form after find customer -->
            <div id="allocation-form" class="hidden space-y-6 mt-8">

                <!-- only super admin has dropdown -->
                @if(auth()->user()->username === 'admin')
                    <div class="bg-purple-50 border-2 border-purple-300 rounded-xl p-5">
                        <label class="block text-sm font-bold text-purple-800 mb-3">پیگیری‌کننده این مشترک</label>
                        <select name="admin_id" required class="w-full px-4 py-3 border-2 border-purple-400 rounded-xl focus:border-purple-600 text-sm font-medium">
                            <option value="">— یک ادمین انتخاب کنید —</option>
                            @foreach($admins as $admin)
                                <option value="{{ $admin->id }}">{{ $admin->name }} ({{ $admin->username }})</option>
                            @endforeach
                        </select>
                    </div>
                @else
                    <!-- ادمین معمولی: همیشه خودش رو می‌فرسته، حتی اگه فرم مخفی باشه -->
                    <input type="hidden" name="admin_id" value="{{ auth()->id() }}">
                    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 text-sm">
                        <p class="font-medium text-blue-800">
                            پیگیری‌کننده: <strong>{{ auth()->user()->name }}</strong>
                        </p>
                    </div>
                @endif
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
                    <div>
                        <label class="block text-xs font-bold text-gray-700 mb-1">بار پایه (kW)</label>
                        <input type="number" name="base_load" value="0" step="0.01" min="0" required class="w-full px-4 py-3 border rounded-lg focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-red-600 mb-1">اوج‌بار (kW)</label>
                        <input type="number" name="peak_load" value="0" step="0.01" min="0" required class="w-full px-4 py-3 border border-red-200 rounded-lg focus:border-red-500">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-yellow-600 mb-1">میان‌بار (kW)</label>
                        <input type="number" name="mid_load" value="0" step="0.01" min="0" required class="w-full px-4 py-3 border border-yellow-200 rounded-lg focus:border-yellow-500">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-green-600 mb-1">کم‌بار (kW)</label>
                        <input type="number" name="low_load" value="0" step="0.01" min="0" required class="w-full px-4 py-3 border border-green-200 rounded-lg focus:border-green-500">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 mb-1">نرخ عادی (ریال)</label>
                        <input type="number" name="rate" value="2850" required class="w-full px-4 py-3 border rounded-lg font-mono focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-emerald-600 mb-1">برق سبز (kW)</label>
                        <input type="number" name="green_power" value="0" step="0.01" min="0" required class="w-full px-4 py-3 border border-emerald-200 rounded-lg focus:border-emerald-500">
                    </div>
                    <div class="lg:col-span-2">
                        <label class="block text-xs font-bold text-emerald-600 mb-1">نرخ برق سبز (ریال)</label>
                        <input type="number" name="green_rate" value="3200" required class="w-full px-4 py-3 border border-emerald-300 rounded-lg font-mono focus:border-emerald-500">
                    </div>
                </div>

                <div class="flex justify-end gap-4 mt-8">
                    <a href="{{ route('admin.monthly-allocations.index', ['year' => $year, 'month' => $month]) }}"
                       class="px-8 py-3 border-2 border-gray-400 text-gray-700 rounded-xl font-bold hover:bg-gray-100 transition">
                        انصراف
                    </a>
                    <button type="submit"
                            class="px-10 py-3 bg-gradient-to-r from-emerald-600 to-green-600 text-white rounded-xl font-bold shadow-lg hover:shadow-xl transition">
                        ثبت تخصیص
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script>
        async function fetchCustomer() {
            const billId = document.getElementById('bill_id').value.trim();
            if (!billId) return alert('لطفاً شناسه قبض را وارد کنید');

            try {
                const response = await fetch(`/admin/monthly-allocations/search-customer?bill_id=${billId}&year={{$year}}&month={{$month}}`);
                const data = await response.json();

                if (data.error) {
                    alert(data.error);
                    document.getElementById('customer-info').classList.add('hidden');
                    document.getElementById('allocation-form').classList.add('hidden');
                    document.getElementById('customer_id_hidden').value = '';
                    return;
                }

                // show data
                document.getElementById('company_name').textContent = data.customer.company_name;
                document.getElementById('contract_power').textContent = data.customer.contract_power ?? '-';
                document.getElementById('network_owner').textContent = data.customer.network_owner ?? 'نامشخص';

                document.getElementById('customer-info').classList.remove('hidden');
                document.getElementById('allocation-form').classList.remove('hidden');

                document.getElementById('customer_id_hidden').value = data.customer.id;

            } catch (err) {
                alert('خطا در ارتباط با سرور');
                console.error(err);
            }
        }
    </script>
@endsection