@extends('admin.layout')

@php
    $isEdit = $mitra->exists;
    $action = $isEdit ? route('admin.mitra.update', $mitra) : route('admin.mitra.store');
    $status = old('verification_status', $mitra->verification_status->value ?? 'pending');
    $input = 'w-full rounded-xl border border-line px-3.5 py-2.5 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20';
@endphp

@section('title', $isEdit ? 'Ubah Mitra' : 'Tambah Mitra')
@section('subtitle', $isEdit ? $mitra->user?->name : 'Daftarkan mitra baru dari CMS')

@section('content')
    <a href="{{ $isEdit ? route('admin.mitra.show', $mitra) : route('admin.mitra') }}"
       class="text-sm text-sub hover:text-brand font-semibold">‹ Kembali</a>

    <div class="mt-4"><x-flash /></div>

    <form method="POST" action="{{ $action }}" enctype="multipart/form-data" class="max-w-3xl space-y-4">
        @csrf
        @if ($isEdit) @method('PUT') @endif

        <div class="bg-white rounded-2xl border border-line p-5 space-y-4">
            <h3 class="font-bold text-sm">Akun</h3>

            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold mb-1.5">Nama bisnis <span class="text-red-600" title="Wajib diisi">*</span></label>
                    <input name="name" required maxlength="255" class="{{ $input }}"
                           value="{{ old('name', $mitra->user?->name) }}">
                    @error('name')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold mb-1.5">Nomor HP <span class="text-red-600" title="Wajib diisi">*</span></label>
                    <x-phone-input :value="old('phone', $mitra->user?->phone)" required />
                    @error('phone')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>


                <div>
                    <label class="block text-sm font-semibold mb-1.5">Email <span class="text-sub font-normal">(opsional)</span></label>
                    <input name="email" type="email" maxlength="255" class="{{ $input }}"
                           value="{{ old('email', $mitra->user?->email) }}">
                    @error('email')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold mb-1.5">
                        Password @unless ($isEdit){!! '<span class="text-red-600" title="Wajib diisi">*</span>' !!}@else<span class="text-sub font-normal">(kosongkan bila tidak diubah)</span>@endunless
                    </label>
                    <input name="password" type="password" minlength="8" @required(! $isEdit) class="{{ $input }}">
                    @error('password')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl border border-line p-5 space-y-4">
            <h3 class="font-bold text-sm">Profil mitra</h3>

            {{-- Foto profil: yang tampil sebagai avatar mitra di aplikasi.
                 Kosong berarti aplikasi memakai inisial namanya. --}}
            <div class="flex items-center gap-4">
                @if ($mitra->user?->avatarUrl())
                    <img src="{{ $mitra->user->avatarUrl() }}" alt="Foto {{ $mitra->user->name }}"
                         class="w-16 h-16 rounded-full object-cover border border-line">
                @else
                    <div class="w-16 h-16 rounded-full bg-line grid place-items-center text-sub font-bold">
                        {{ $mitra->user?->initials() ?: '—' }}
                    </div>
                @endif

                <div class="flex-1">
                    <label class="block text-sm font-semibold mb-1.5">Foto profil</label>
                    <input type="file" name="avatar" accept="image/*" class="{{ $input }}">
                    @error('avatar')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror

                    @if ($mitra->user?->avatarUrl())
                        <label class="flex items-center gap-2 text-xs text-sub mt-2">
                            <input type="checkbox" name="delete_avatar" value="1" class="w-4 h-4 rounded">
                            Hapus foto profil
                        </label>
                    @endif
                </div>
            </div>

            <div>
                <label class="block text-sm font-semibold mb-1.5">Bio</label>
                <textarea name="bio" rows="3" maxlength="1000" class="{{ $input }}">{{ old('bio', $mitra->bio) }}</textarea>
                @error('bio')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold mb-1.5">Alamat <span class="text-red-600" title="Wajib diisi">*</span></label>
                    <input name="address" required maxlength="255" class="{{ $input }}" value="{{ old('address', $mitra->address) }}">
                    @error('address')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold mb-1.5">Catatan area</label>
                    <input name="area_note" maxlength="255" placeholder="Jabodetabek" class="{{ $input }}"
                           value="{{ old('area_note', $mitra->area_note) }}">
                    @error('area_note')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Titik peta. Kolom lat/lng tetap ada dan tetap bisa diketik
                     manual (koordinat hasil salin-tempel masih dipakai), tapi
                     yang biasa dipakai adalah menandainya di peta — sama
                     seperti layar Ubah Profil di aplikasi mitra. --}}
                <div class="sm:col-span-2" data-map-picker>
                    <label class="block text-sm font-semibold mb-1.5">Titik peta</label>

                    <div class="flex flex-wrap items-center gap-2 mb-2">
                        <button type="button" data-map-find
                                class="text-xs font-semibold px-3 py-2 rounded-lg border border-line hover:bg-gray-50">
                            Cari titik dari alamat
                        </button>
                        <button type="button" data-map-clear
                                class="text-xs font-semibold px-3 py-2 rounded-lg border border-line hover:bg-gray-50">
                            Hapus titik
                        </button>
                        <span class="text-xs text-sub" data-map-status></span>
                    </div>

                    <div data-map class="w-full h-72 rounded-xl border border-line overflow-hidden bg-gray-100"></div>
                    <p class="text-xs text-sub mt-1.5">
                        Klik peta untuk menandai, atau geser penandanya. Tanpa titik, mitra ini tidak
                        pernah ikut dihitung pada pencocokan order terdekat.
                    </p>

                    <div class="grid sm:grid-cols-2 gap-4 mt-3">
                        <div>
                            <label class="block text-xs font-semibold mb-1 text-sub">Latitude</label>
                            <input name="lat" type="number" step="any" data-map-lat class="{{ $input }}"
                                   value="{{ old('lat', $mitra->lat) }}">
                            @error('lat')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-xs font-semibold mb-1 text-sub">Longitude</label>
                            <input name="lng" type="number" step="any" data-map-lng class="{{ $input }}"
                                   value="{{ old('lng', $mitra->lng) }}">
                            @error('lng')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold mb-1.5">Status verifikasi <span class="text-red-600" title="Wajib diisi">*</span></label>
                    <select name="verification_status" class="{{ $input }}">
                        @foreach ([['pending', 'Pending'], ['verified', 'Terverifikasi'], ['rejected', 'Ditolak']] as [$val, $label])
                            <option value="{{ $val }}" @selected($status === $val)>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('verification_status')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                <div class="flex items-end">
                    <label class="flex items-center gap-2 text-sm font-semibold">
                        <input type="hidden" name="is_online" value="0">
                        <input type="checkbox" name="is_online" value="1" class="w-4 h-4 rounded"
                               @checked(old('is_online', $mitra->is_online))>
                        Online (siap menerima order)
                    </label>
                </div>
            </div>

            {{-- Unggah KTP tidak lagi ada di form ini. KTP yang sudah pernah
                 terunggah tetap tersimpan dan tetap bisa dilihat di halaman
                 detail Mitra; verifikasi kini bersandar pada dokumen. --}}
        </div>

        <div class="bg-white rounded-2xl border border-line p-5">
            <h3 class="font-bold text-sm">Foto pekerjaan</h3>
            <p class="text-xs text-sub mt-1">Tampil di portofolio mitra pada aplikasi. Keterangan boleh diubah; centang “Hapus” untuk membuang fotonya saat disimpan.</p>

            @if ($mitra->workPhotos->count())
                <div class="mt-3 grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    @foreach ($mitra->workPhotos as $photo)
                        <div class="border border-line rounded-xl overflow-hidden">
                            <div class="aspect-video bg-canvas grid place-items-center overflow-hidden">
                                @if ($photo->url())
                                    <img src="{{ $photo->url() }}" alt="{{ $photo->label ?? 'Foto pekerjaan' }}" class="w-full h-full object-cover">
                                @else
                                    <span class="text-xs text-sub">Tanpa gambar</span>
                                @endif
                            </div>
                            <div class="p-2.5 space-y-2">
                                <input name="work_photo_labels[{{ $photo->id }}]" maxlength="120" placeholder="Keterangan (opsional)"
                                       value="{{ old('work_photo_labels.'.$photo->id, $photo->label) }}"
                                       class="w-full rounded-lg border border-line px-3 py-1.5 text-sm outline-none focus:border-brand">
                                <label class="flex items-center gap-2 text-xs font-semibold text-red-600">
                                    <input type="checkbox" name="delete_work_photos[]" value="{{ $photo->id }}" class="w-4 h-4 rounded">
                                    Hapus foto ini
                                </label>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="mt-3 text-sm text-sub">Belum ada foto pekerjaan.</p>
            @endif

            {{-- Tiga slot unggah sekaligus: cukup untuk sekali input dari CMS,
                 dan tiap slot punya keterangannya sendiri. --}}
            <div class="mt-4 space-y-2">
                <label class="block text-sm font-semibold">Tambah foto</label>
                @for ($i = 0; $i < 3; $i++)
                    <div class="flex flex-col sm:flex-row gap-2">
                        <input type="file" name="work_photos[{{ $i }}]" accept="image/*"
                               class="{{ $input }} sm:flex-1 file:mr-3 file:rounded-lg file:border-0 file:bg-brand-soft file:px-3 file:py-1.5 file:text-brand-dark file:text-xs file:font-semibold">
                        <input name="new_work_photo_labels[{{ $i }}]" maxlength="120" placeholder="Keterangan (opsional)"
                               value="{{ old('new_work_photo_labels.'.$i) }}"
                               class="{{ $input }} sm:w-64">
                    </div>
                @endfor
                @error('work_photos.*')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="bg-white rounded-2xl border border-line p-5">
            <h3 class="font-bold text-sm">Dokumen &amp; sertifikasi</h3>
            <p class="text-xs text-sub mt-1">
                Sertifikat, SIUP, atau berkas pendukung verifikasi. PDF/JPG/PNG, maksimal 8 MB per berkas.
                Berkasnya tersimpan privat — hanya bisa dibuka dari CMS ini.
            </p>

            @if ($mitra->exists && $mitra->documents->count())
                <div class="mt-3 divide-y divide-line border border-line rounded-xl">
                    @foreach ($mitra->documents as $doc)
                        <div class="flex flex-wrap items-center gap-3 px-3.5 py-2.5">
                            <a href="{{ route('admin.mitra.document', [$mitra, $doc]) }}" target="_blank" rel="noopener"
                               class="text-sm font-semibold text-brand hover:text-brand-dark break-all">
                                {{ $doc->name }}
                            </a>
                            <span class="text-xs text-sub">
                                {{ $doc->mime ?? '—' }}
                                @if ($doc->size)
                                    · {{ $doc->size >= 1048576
                                        ? number_format($doc->size / 1048576, 1).' MB'
                                        : max(1, (int) round($doc->size / 1024)).' KB' }}
                                @endif
                                · {{ $doc->created_at?->translatedFormat('d M Y') }}
                            </span>
                            <label class="ml-auto flex items-center gap-2 text-xs font-semibold text-red-600">
                                <input type="checkbox" name="delete_documents[]" value="{{ $doc->id }}" class="w-4 h-4 rounded">
                                Hapus
                            </label>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="mt-3 text-sm text-sub">Belum ada dokumen.</p>
            @endif

            {{-- Tiga slot sekaligus, mengikuti pola Foto pekerjaan di atas. --}}
            <div class="mt-4 space-y-2">
                <label class="block text-sm font-semibold">Tambah dokumen</label>
                @for ($i = 0; $i < 3; $i++)
                    <div class="flex flex-col sm:flex-row gap-2">
                        <input type="file" name="documents[{{ $i }}]" accept=".pdf,image/jpeg,image/png"
                               class="{{ $input }} sm:flex-1 file:mr-3 file:rounded-lg file:border-0 file:bg-brand-soft file:px-3 file:py-1.5 file:text-brand-dark file:text-xs file:font-semibold">
                        <input name="document_names[{{ $i }}]" maxlength="150" placeholder="Nama dokumen (opsional)"
                               value="{{ old('document_names.'.$i) }}"
                               class="{{ $input }} sm:w-64">
                    </div>
                @endfor
                @error('documents.*')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
                @error('document_names.*')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        {{-- Pemilihan kategori/jasa sengaja tidak ada di form ini: pencocokan
             mitra dengan pekerjaan akan ditentukan AI, bukan dicentang manual.
             Relasi `categories` dan data yang sudah ada tidak dihapus — hanya
             tidak lagi bisa diubah dari sini. --}}

        <div class="flex items-center gap-2">
            <button class="px-4 py-2.5 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                {{ $isEdit ? 'Simpan Perubahan' : 'Tambah Mitra' }}
            </button>
            <a href="{{ $isEdit ? route('admin.mitra.show', $mitra) : route('admin.mitra') }}"
               class="px-4 py-2.5 rounded-xl border border-line text-sub text-sm font-semibold hover:text-brand transition">
                Batal
            </a>
        </div>
    </form>

    {{-- Peta pemilih titik. Leaflet + tile OSM, sama seperti peta di aplikasi,
         jadi titik yang ditandai admin dan yang ditandai mitra berasal dari
         peta yang sama persis. Geocoding lewat endpoint sendiri
         (/api/geocode/*), bukan langsung ke Nominatim: cache dan User-Agent-nya
         sudah diurus di sana. --}}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
    (function () {
        var root = document.querySelector('[data-map-picker]');
        if (!root || !window.L) return;

        var latInput = root.querySelector('[data-map-lat]');
        var lngInput = root.querySelector('[data-map-lng]');
        var status = root.querySelector('[data-map-status]');
        var addressInput = document.querySelector('input[name="address"]');

        // Bandung — kota awal layanan, sama dengan bawaan peta di aplikasi.
        var DEFAULT = [-6.9147, 107.6098];
        var start = (latInput.value && lngInput.value)
            ? [parseFloat(latInput.value), parseFloat(lngInput.value)]
            : null;

        var map = L.map(root.querySelector('[data-map]'), {
            center: start || DEFAULT,
            zoom: start ? 16 : 12,
        });
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap',
        }).addTo(map);

        var marker = null;

        var say = function (msg) { status.textContent = msg || ''; };

        var setPoint = function (lat, lng, opts) {
            opts = opts || {};
            latInput.value = lat.toFixed(6);
            lngInput.value = lng.toFixed(6);

            if (marker) {
                marker.setLatLng([lat, lng]);
            } else {
                marker = L.marker([lat, lng], {draggable: true}).addTo(map);
                marker.on('dragend', function () {
                    var p = marker.getLatLng();
                    setPoint(p.lat, p.lng);
                });
            }

            if (opts.pan) map.setView([lat, lng], Math.max(map.getZoom(), 16));
            say('Titik ditandai.');
        };

        if (start) setPoint(start[0], start[1]);

        map.on('click', function (e) { setPoint(e.latlng.lat, e.latlng.lng); });

        root.querySelector('[data-map-clear]').addEventListener('click', function () {
            if (marker) { map.removeLayer(marker); marker = null; }
            latInput.value = '';
            lngInput.value = '';
            say('Titik dihapus.');
        });

        // Alamat tertulis → koordinat. Lebih dari satu kandidat: yang pertama
        // dipakai dan jumlahnya disebutkan, supaya admin tahu perlu diperiksa.
        root.querySelector('[data-map-find]').addEventListener('click', function () {
            var q = (addressInput?.value || '').trim();
            if (q.length < 3) return say('Isi alamatnya dulu.');

            say('Mencari…');
            fetch('/api/geocode/search?q=' + encodeURIComponent(q))
                .then(function (r) { return r.ok ? r.json() : Promise.reject(r); })
                .then(function (res) {
                    var hits = (res.data || []);
                    if (!hits.length) return say('Alamat tidak ditemukan. Tandai manual di peta.');
                    setPoint(parseFloat(hits[0].lat), parseFloat(hits[0].lng), {pan: true});
                    say(hits.length > 1
                        ? 'Ditemukan ' + hits.length + ' kandidat — dipakai yang teratas, periksa titiknya.'
                        : 'Titik disesuaikan dengan alamat.');
                })
                .catch(function () { say('Pencarian gagal. Coba lagi atau tandai manual.'); });
        });

        // Koordinat yang diketik/ditempel manual tetap menggerakkan penanda.
        [latInput, lngInput].forEach(function (el) {
            el.addEventListener('change', function () {
                var lat = parseFloat(latInput.value);
                var lng = parseFloat(lngInput.value);
                if (!isNaN(lat) && !isNaN(lng)) setPoint(lat, lng, {pan: true});
            });
        });
    })();
    </script>
@endsection