@extends('admin.layouts.dashboard')

@section('title', 'Edit Partner')

@section('content')
    @php
        $locations = old('locations');

        if (! is_array($locations) || count($locations) === 0) {
            $locations = $partner->locations->map(function ($location) {
                return [
                    'label' => $location->label,
                    'address' => $location->address,
                    'map_location_url' => $location->map_location_url,
                    'map_lat' => $location->map_lat,
                    'map_lng' => $location->map_lng,
                    'business_logo' => $location->business_logo,
                    'business_image' => $location->business_image,
                    'is_primary' => $location->is_primary,
                ];
            })->values()->all();
        }

        if (count($locations) === 0) {
            $locations = [[
                'label' => 'Main Branch',
                'address' => $partner->business_address,
                'map_location_url' => $partner->map_location_url,
                'map_lat' => $partner->map_lat,
                'map_lng' => $partner->map_lng,
                'business_logo' => $partner->business_logo,
                'business_image' => $partner->business_image,
                'is_primary' => true,
            ]];
        }

        $mainBranch = collect($locations)->firstWhere('is_primary', true) ?? ($locations[0] ?? null);
    @endphp

    <div class="space-y-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
                <h1 class="text-2xl font-bold text-white">Edit Partner</h1>
                <p class="text-gray-400 text-sm mt-1">Update partner profile and manage all branch locations in one place.</p>
            </div>
            <a href="{{ route('admin.partners') }}" class="px-4 py-2 bg-[#1e293b] border border-gray-700 text-white rounded-lg text-sm">Back to Partners</a>
        </div>

        @if ($errors->any())
            <div class="rounded-xl border border-red-700 bg-red-900/20 px-4 py-3 text-sm text-red-300">
                <ul class="list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.partners.update', $partner) }}" method="post" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('put')

            <div class="bg-[#1e293b] rounded-xl border border-gray-800 p-6 grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="text-sm text-gray-300">Business Name</label>
                    <input type="text" name="company_name" value="{{ old('company_name', $partner->company_name) }}" class="mt-2 w-full px-3 py-2 rounded-lg bg-[#0f172a] border border-gray-700 text-white" required>
                </div>
                <div>
                    <label class="text-sm text-gray-300">Business Type</label>
                    <select name="business_type" class="mt-2 w-full px-3 py-2 rounded-lg bg-[#0f172a] border border-gray-700 text-white" required>
                        <option value="retail" @selected(old('business_type', $partner->business_type) === 'retail')>Retail Store</option>
                        <option value="restaurant" @selected(old('business_type', $partner->business_type) === 'restaurant')>Restaurant / Cafe</option>
                        <option value="service" @selected(old('business_type', $partner->business_type) === 'service')>Service Provider</option>
                        <option value="hotel" @selected(old('business_type', $partner->business_type) === 'hotel')>Hotel / Travel</option>
                        <option value="other" @selected(old('business_type', $partner->business_type) === 'other')>Other</option>
                    </select>
                </div>
                <div>
                    <label class="text-sm text-gray-300">Contact Person</label>
                    <input type="text" name="contact_person" value="{{ old('contact_person', $partner->contact_person) }}" class="mt-2 w-full px-3 py-2 rounded-lg bg-[#0f172a] border border-gray-700 text-white" required>
                </div>
                <div>
                    <label class="text-sm text-gray-300">Phone Number</label>
                    <input type="text" name="phone_number" value="{{ old('phone_number', $partner->phone_number) }}" class="mt-2 w-full px-3 py-2 rounded-lg bg-[#0f172a] border border-gray-700 text-white" required>
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm text-gray-300">Email</label>
                    <input type="email" name="email" value="{{ old('email', $partner->email) }}" class="mt-2 w-full px-3 py-2 rounded-lg bg-[#0f172a] border border-gray-700 text-white" required>
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm text-gray-300">Business Description</label>
                    <textarea name="business_description" rows="3" class="mt-2 w-full px-3 py-2 rounded-lg bg-[#0f172a] border border-gray-700 text-white">{{ old('business_description', $partner->business_description) }}</textarea>
                </div>
                <div>
                    <label class="text-sm text-gray-300">Business Logo</label>
                    <input type="file" name="business_logo" accept="image/png,image/jpeg,image/webp" class="mt-2 w-full text-sm text-gray-300">
                </div>
                <div>
                    <label class="text-sm text-gray-300">Business Image</label>
                    <input type="file" name="business_image" accept="image/png,image/jpeg,image/webp" class="mt-2 w-full text-sm text-gray-300">
                </div>
            </div>

            @if ($mainBranch)
                <div class="bg-[#1e293b] rounded-xl border border-blue-900/50 p-6 space-y-3">
                    <div class="flex items-center justify-between gap-3">
                        <h2 class="text-base font-semibold text-white">Current Main Branch Details</h2>
                        <span class="text-[11px] px-2 py-1 rounded-full bg-blue-600/20 text-blue-300 border border-blue-500/40">Primary</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                        <div>
                            <p class="text-gray-400">Main Branch Address</p>
                            <p class="text-white font-medium mt-1">{{ $mainBranch['address'] ?: 'N/A' }}</p>
                        </div>
                        <div>
                            <p class="text-gray-400">Main Branch Google Map Link</p>
                            @if (!empty($mainBranch['map_location_url']))
                                <a href="{{ $mainBranch['map_location_url'] }}" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:text-blue-300 font-medium mt-1 inline-block">Open Map</a>
                            @else
                                <p class="text-white font-medium mt-1">N/A</p>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            <div class="bg-[#1e293b] rounded-xl border border-gray-800 p-6 space-y-4">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                    <div>
                        <h2 class="text-lg font-semibold text-white">Branch Locations</h2>
                        <p class="text-sm text-gray-400">Main branch comes from Step 2 registration details. Update it here or add more branches.</p>
                    </div>
                    <button type="button" id="add-location-btn" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium">Add Location</button>
                </div>

                <div id="locations-container" class="space-y-3">
                    @foreach ($locations as $index => $location)
                        <div class="location-item rounded-lg border border-gray-700 bg-[#0f172a] p-4 space-y-3" data-index="{{ $index }}">
                            <div class="flex items-center justify-between gap-3">
                                <h3 class="text-sm font-semibold text-gray-200">Location #{{ $index + 1 }}</h3>
                                <button type="button" class="remove-location-btn px-3 py-1.5 rounded-md border border-red-600 text-red-300 text-xs">Remove</button>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                <div>
                                    <label class="text-xs text-gray-400">Label</label>
                                    <input type="text" name="locations[{{ $index }}][label]" value="{{ $location['label'] ?? '' }}" placeholder="Main Branch / Colombo 03" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm">
                                </div>
                                <div class="flex items-end">
                                    <label class="inline-flex items-center gap-2 text-sm text-gray-300">
                                        <input type="radio" name="primary_location" value="{{ $index }}" class="text-blue-500" @checked(!empty($location['is_primary']))>
                                        Set as primary location
                                    </label>
                                </div>
                            </div>

                            <div>
                                <label class="text-xs text-gray-400">Address</label>
                                <input type="text" name="locations[{{ $index }}][address]" value="{{ $location['address'] ?? '' }}" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm" required>
                            </div>

                            <div>
                                <label class="text-xs text-gray-400">Google Map URL</label>
                                <input type="url" name="locations[{{ $index }}][map_location_url]" value="{{ $location['map_location_url'] ?? '' }}" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm" required>
                                <p class="mt-1 text-[11px] text-gray-500">If map URL is not exact, set Latitude/Longitude manually below.</p>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                <div>
                                    <label class="text-xs text-gray-400">Latitude</label>
                                    <input type="number" step="any" name="locations[{{ $index }}][map_lat]" value="{{ $location['map_lat'] ?? '' }}" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm" placeholder="6.9271">
                                </div>
                                <div>
                                    <label class="text-xs text-gray-400">Longitude</label>
                                    <input type="number" step="any" name="locations[{{ $index }}][map_lng]" value="{{ $location['map_lng'] ?? '' }}" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm" placeholder="79.8612">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                <div>
                                    <label class="text-xs text-gray-400">Branch Logo (Optional)</label>
                                    <input type="file" name="locations[{{ $index }}][business_logo]" accept="image/png,image/jpeg,image/webp" class="mt-1 block w-full text-sm text-gray-300">
                                    @if (!empty($location['existing_business_logo'] ?? $location['business_logo'] ?? null))
                                        <img src="{{ asset('storage/' . ($location['existing_business_logo'] ?? $location['business_logo'])) }}" alt="Branch logo" class="mt-2 w-12 h-12 rounded-lg object-cover border border-gray-700">
                                    @elseif ($partner->business_logo)
                                        <p class="text-xs text-gray-500 mt-2">Fallback: main logo</p>
                                    @endif
                                </div>
                                <div>
                                    <label class="text-xs text-gray-400">Branch Store Image (Optional)</label>
                                    <input type="file" name="locations[{{ $index }}][business_image]" accept="image/png,image/jpeg,image/webp" class="mt-1 block w-full text-sm text-gray-300">
                                    @if (!empty($location['existing_business_image'] ?? $location['business_image'] ?? null))
                                        <img src="{{ asset('storage/' . ($location['existing_business_image'] ?? $location['business_image'])) }}" alt="Branch image" class="mt-2 w-full max-w-[140px] h-16 rounded-lg object-cover border border-gray-700">
                                    @elseif ($partner->business_image)
                                        <p class="text-xs text-gray-500 mt-2">Fallback: main store image</p>
                                    @endif
                                </div>
                            </div>

                            <input type="hidden" name="locations[{{ $index }}][existing_business_logo]" value="{{ $location['existing_business_logo'] ?? $location['business_logo'] ?? '' }}">
                            <input type="hidden" name="locations[{{ $index }}][existing_business_image]" value="{{ $location['existing_business_image'] ?? $location['business_image'] ?? '' }}">
                            <input type="hidden" name="locations[{{ $index }}][is_primary]" value="{{ !empty($location['is_primary']) ? 1 : 0 }}" class="is-primary-input">
                        </div>
                    @endforeach
                </div>

                @error('locations')
                    <p class="text-sm text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex justify-end">
                <button type="submit" class="px-5 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">Save Partner</button>
            </div>
        </form>
    </div>

    <template id="location-item-template">
        <div class="location-item rounded-lg border border-gray-700 bg-[#0f172a] p-4 space-y-3" data-index="__INDEX__">
            <div class="flex items-center justify-between gap-3">
                <h3 class="text-sm font-semibold text-gray-200">Location #__NUMBER__</h3>
                <button type="button" class="remove-location-btn px-3 py-1.5 rounded-md border border-red-600 text-red-300 text-xs">Remove</button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                    <label class="text-xs text-gray-400">Label</label>
                    <input type="text" name="locations[__INDEX__][label]" placeholder="Main Branch / Colombo 03" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm">
                </div>
                <div class="flex items-end">
                    <label class="inline-flex items-center gap-2 text-sm text-gray-300">
                        <input type="radio" name="primary_location" value="__INDEX__" class="text-blue-500">
                        Set as primary location
                    </label>
                </div>
            </div>

            <div>
                <label class="text-xs text-gray-400">Address</label>
                <input type="text" name="locations[__INDEX__][address]" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm" required>
            </div>

            <div>
                <label class="text-xs text-gray-400">Google Map URL</label>
                <input type="url" name="locations[__INDEX__][map_location_url]" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm" required>
                <p class="mt-1 text-[11px] text-gray-500">If map URL is not exact, set Latitude/Longitude manually below.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                    <label class="text-xs text-gray-400">Latitude</label>
                    <input type="number" step="any" name="locations[__INDEX__][map_lat]" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm" placeholder="6.9271">
                </div>
                <div>
                    <label class="text-xs text-gray-400">Longitude</label>
                    <input type="number" step="any" name="locations[__INDEX__][map_lng]" class="mt-1 w-full px-3 py-2 rounded-lg bg-[#111827] border border-gray-700 text-white text-sm" placeholder="79.8612">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                    <label class="text-xs text-gray-400">Branch Logo (Optional)</label>
                    <input type="file" name="locations[__INDEX__][business_logo]" accept="image/png,image/jpeg,image/webp" class="mt-1 block w-full text-sm text-gray-300">
                </div>
                <div>
                    <label class="text-xs text-gray-400">Branch Store Image (Optional)</label>
                    <input type="file" name="locations[__INDEX__][business_image]" accept="image/png,image/jpeg,image/webp" class="mt-1 block w-full text-sm text-gray-300">
                </div>
            </div>

            <input type="hidden" name="locations[__INDEX__][existing_business_logo]" value="">
            <input type="hidden" name="locations[__INDEX__][existing_business_image]" value="">
            <input type="hidden" name="locations[__INDEX__][is_primary]" value="0" class="is-primary-input">
        </div>
    </template>

    <script>
        (function () {
            const container = document.getElementById('locations-container');
            const template = document.getElementById('location-item-template');
            const addButton = document.getElementById('add-location-btn');

            if (!container || !template || !addButton) {
                return;
            }

            function syncIndexes() {
                const items = Array.from(container.querySelectorAll('.location-item'));

                items.forEach(function (item, index) {
                    item.dataset.index = String(index);

                    const heading = item.querySelector('h3');
                    if (heading) {
                        heading.textContent = 'Location #' + (index + 1);
                    }

                    item.querySelectorAll('input').forEach(function (input) {
                        if (!input.name) {
                            return;
                        }

                        input.name = input.name.replace(/locations\[\d+\]/, 'locations[' + index + ']');

                        if (input.type === 'radio') {
                            input.value = String(index);
                        }
                    });
                });
            }

            function ensurePrimary() {
                const radios = Array.from(container.querySelectorAll('input[type="radio"][name="primary_location"]'));
                const checked = radios.find(function (radio) {
                    return radio.checked;
                });

                if (!checked && radios[0]) {
                    radios[0].checked = true;
                }

                const selectedValue = radios.find(function (radio) {
                    return radio.checked;
                })?.value;

                Array.from(container.querySelectorAll('.location-item')).forEach(function (item) {
                    const idx = item.dataset.index;
                    const hidden = item.querySelector('.is-primary-input');
                    if (hidden) {
                        hidden.value = idx === selectedValue ? '1' : '0';
                    }
                });
            }

            function bindRemoveButtons() {
                Array.from(container.querySelectorAll('.remove-location-btn')).forEach(function (button) {
                    button.onclick = function () {
                        const items = container.querySelectorAll('.location-item');
                        if (items.length <= 1) {
                            return;
                        }

                        const item = button.closest('.location-item');
                        if (item) {
                            item.remove();
                            syncIndexes();
                            ensurePrimary();
                        }
                    };
                });
            }

            addButton.addEventListener('click', function () {
                const index = container.querySelectorAll('.location-item').length;
                const html = template.innerHTML
                    .replaceAll('__INDEX__', String(index))
                    .replaceAll('__NUMBER__', String(index + 1));

                container.insertAdjacentHTML('beforeend', html);
                bindRemoveButtons();
                syncIndexes();
                ensurePrimary();
            });

            container.addEventListener('change', function (event) {
                const target = event.target;
                if (target instanceof HTMLInputElement && target.type === 'radio' && target.name === 'primary_location') {
                    ensurePrimary();
                }
            });

            bindRemoveButtons();
            syncIndexes();
            ensurePrimary();
        })();
    </script>
@endsection