@extends('layouts.app')

@section('title', 'Edit Informasi Toko')

@section('content')
<style>
    :root {
        --ink: #212B22;
        --ink-soft: #55604F;
        --paper: #F7F1E3;
        --paper-dark: #EDE1C1;
        --paper-line: #DECEA0;
        --leaf: #3E6B4B;
        --leaf-dark: #24402D;
        --chili: #BD3F0F;
        --turmeric: #D69A2D;
    }

    .edit-toko-card {
        background: #FDFBF5;
        border: 1px solid var(--paper-line);
        border-radius: 20px;
        box-shadow: 0 8px 25px -10px rgba(33, 43, 34, 0.1);
    }
</style>

<div class="max-w-3xl mx-auto py-2">
    <div class="edit-toko-card p-6 sm:p-8">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6 pb-4 border-b border-[#DECEA0]/60">
            <div class="flex items-center gap-3.5">
                <div class="w-12 h-12 rounded-2xl overflow-hidden bg-[#EDE1C1] border border-[#DECEA0] flex-shrink-0 shadow-sm">
                    <img src="{{ $pedagang->foto_toko_url ?: route('gambar.toko', ['filename' => 'default.jpg'], false) }}" 
                         alt="{{ $pedagang->nama_toko ?? $pedagang->name }}"
                         class="w-full h-full object-cover"
                         onerror="this.onerror=null; this.src='{{ route('gambar.toko', ['filename' => 'default.jpg'], false) }}';">
                </div>
                <div>
                    <span class="text-xs uppercase tracking-widest text-[#D69A2D] font-bold">Profil Lapak</span>
                    <h1 class="text-xl sm:text-2xl font-bold text-[#212B22] mt-0.5">Edit Informasi Toko</h1>
                </div>
            </div>
            <a href="{{ route('pedagang.dashboard') }}" class="text-xs font-bold text-[#3E6B4B] hover:text-[#24402D] px-3.5 py-1.5 rounded-full border border-[#DECEA0] bg-[#FDFBF5] hover:bg-[#EDE1C1] transition self-start sm:self-auto">
                ← Kembali ke Dashboard
            </a>
        </div>

        <div class="bg-[#F4EFE6] border border-[#DECEA0] rounded-xl p-4 mb-6">
            <p class="text-xs text-[#24402D] leading-relaxed">
                📌 Informasi toko akan ditampilkan langsung kepada pembeli di halaman beranda dan katalog pasar. Lengkapi data los dan blok agar pembeli mudah menemukan lapak Anda.
            </p>
        </div>

        @if ($errors->any())
        <div class="mb-5 bg-[#F7E1D9] border border-[#BD3F0F]/40 rounded-2xl p-4 text-xs text-[#BD3F0F]">
            <div class="font-bold flex items-center gap-1.5 mb-1.5">
                <span>⚠️</span> Terjadi Kesalahan Input:
            </div>
            <ul class="list-disc list-inside space-y-1">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form action="{{ route('pedagang.toko.update') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf
            @method('PUT')

            <!-- Foto Toko -->
            <div>
                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-2">📷 Foto Profil Lapak / Toko</label>
                <div class="flex items-center gap-4">
                    <div id="tokoAvatarContainer" class="w-20 h-20 sm:w-24 sm:h-24 rounded-2xl overflow-hidden bg-[#EDE1C1] border border-[#DECEA0] flex-shrink-0">
                        <img id="tokoAvatarPreview" 
                             src="{{ $pedagang->foto_toko_url ?: route('gambar.toko', ['filename' => 'default.jpg'], false) }}" 
                             alt="Foto Toko" 
                             class="w-full h-full object-cover"
                             onerror="this.onerror=null; this.src='{{ route('gambar.toko', ['filename' => 'default.jpg'], false) }}';">
                    </div>
                    <div class="flex-1">
                        <input type="file" name="foto_toko" id="foto_toko" 
                               class="w-full bg-white border border-[#DECEA0] rounded-xl p-2.5 text-xs text-[#212B22] cursor-pointer"
                               accept="image/*">
                        <p class="text-[11px] text-[#55604F] mt-1">Format: JPG, PNG, WEBP. Maksimal 10MB</p>
                    </div>
                </div>
            </div>

            <!-- Nama Pedagang (Pemilik) -->
            <div>
                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Nama Pemilik / Pedagang</label>
                <input type="text" name="name" 
                       value="{{ old('name', $pedagang->name) }}"
                       class="w-full bg-white border border-[#DECEA0] rounded-xl px-4 py-2.5 text-sm text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B]"
                       placeholder="Misal: Bu Siti" required>
            </div>

            <!-- Nama Toko -->
            <div>
                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Nama Toko / Lapak</label>
                <input type="text" name="nama_toko" 
                       value="{{ old('nama_toko', $pedagang->nama_toko) }}"
                       class="w-full bg-white border border-[#DECEA0] rounded-xl px-4 py-2.5 text-sm text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B]"
                       placeholder="Misal: Toko Sayur Bu Siti">
            </div>

            <!-- Alamat -->
            <div>
                <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Alamat / Lokasi Toko</label>
                <input type="text" name="alamat_toko" 
                       value="{{ old('alamat_toko', $pedagang->alamat_toko) }}"
                       class="w-full bg-white border border-[#DECEA0] rounded-xl px-4 py-2.5 text-sm text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B]"
                       placeholder="Jl. Letnan Karjono, Pasar Induk Banjarnegara">
            </div>

            <!-- Los & Blok -->
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Nomor Los</label>
                    <input type="text" name="nomor_los" 
                           value="{{ old('nomor_los', $pedagang->nomor_los) }}"
                           class="w-full bg-white border border-[#DECEA0] rounded-xl px-4 py-2.5 text-sm text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B]"
                           placeholder="Contoh: A-12">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Blok Pasar</label>
                    <input type="text" name="blok" 
                           value="{{ old('blok', $pedagang->blok) }}"
                           class="w-full bg-white border border-[#DECEA0] rounded-xl px-4 py-2.5 text-sm text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B]"
                           placeholder="Contoh: Sayur / B">
                </div>
            </div>

            <!-- Koordinat -->
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Latitude (Opsional)</label>
                    <input type="text" name="latitude" 
                           value="{{ old('latitude', $pedagang->latitude) }}"
                           class="w-full bg-white border border-[#DECEA0] rounded-xl px-4 py-2.5 text-sm text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B]"
                           placeholder="-7.468565">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-[#212B22] uppercase tracking-wider mb-1.5">Longitude (Opsional)</label>
                    <input type="text" name="longitude" 
                           value="{{ old('longitude', $pedagang->longitude) }}"
                           class="w-full bg-white border border-[#DECEA0] rounded-xl px-4 py-2.5 text-sm text-[#212B22] focus:outline-none focus:ring-2 focus:ring-[#3E6B4B]"
                           placeholder="109.690489">
                </div>
            </div>

            <!-- Tombol Simpan -->
            <div class="flex gap-3 pt-4 border-t border-[#DECEA0]/60">
                <button type="submit" class="bg-[#D69A2D] hover:bg-[#b88322] text-[#212B22] px-6 py-2.5 rounded-full font-bold text-xs transition shadow-sm cursor-pointer flex items-center gap-1.5">
                    <span>💾</span> Simpan Informasi Toko
                </button>
                <a href="{{ route('pedagang.dashboard') }}" class="bg-[#EDE1C1] hover:bg-[#DECEA0] text-[#212B22] px-5 py-2.5 rounded-full font-bold text-xs transition">
                    Batal
                </a>
            </div>
        </form>

        <div class="mt-8 p-4 bg-[#F4EFE6] rounded-xl border border-[#DECEA0]">
            <h3 class="font-bold text-xs text-[#212B22] uppercase tracking-wider mb-2">💡 Tips Koordinat Maps:</h3>
            <ol class="text-xs text-[#55604F] space-y-1 list-decimal list-inside">
                <li>Buka Google Maps di smartphone atau komputer</li>
                <li>Cari titik los toko Anda di Pasar Induk Banjarnegara</li>
                <li>Tekan lama atau klik kanan titik lapak → salin angka koordinat (contoh: -7.468565, 109.690489)</li>
                <li>Tempelkan ke input Latitude dan Longitude di atas</li>
            </ol>
        </div>
    </div>
</div>

<script>
    document.getElementById('foto_toko')?.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('tokoAvatarPreview');
                if (preview) {
                    preview.src = e.target.result;
                } else {
                    const container = document.getElementById('tokoAvatarContainer');
                    if (container) {
                        container.innerHTML = `<img id="tokoAvatarPreview" src="${e.target.result}" alt="Foto Toko" class="w-full h-full object-cover">`;
                    }
                }
            };
            reader.readAsDataURL(file);
        }
    });
</script>
@endsection