@extends('layouts.app')
@section('title', 'Profil Toko')
@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Pengaturan</h1>
            <p class="text-sm text-gray-500 mt-0.5">{{ $store->name }}</p>
        </div>
    </div>

    @include('seller.partials.nav')

    <div class="flex gap-4 mb-6 border-b border-gray-200">
        <a href="{{ route('seller.settings.profile') }}" class="pb-3 text-sm font-medium border-b-2 border-teal-600 text-teal-600">Profil Toko</a>
        <a href="{{ route('seller.settings.shipping') }}" class="pb-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700">Pengiriman</a>
    </div>

    <div
        x-data="{
            name: '{{ addslashes($store->name) }}',
            description: '{{ addslashes($store->description ?? '') }}',
            city: '{{ addslashes($store->city ?? '') }}',
            logoUrl: '{{ $store->logo ? Storage::url($store->logo) : '' }}',
            bannerUrl: '{{ $store->banner ? Storage::url($store->banner) : '' }}',
            previewLogo(e) {
                const file = e.target.files[0];
                if (file) this.logoUrl = URL.createObjectURL(file);
            },
            previewBanner(e) {
                const file = e.target.files[0];
                if (file) this.bannerUrl = URL.createObjectURL(file);
            }
        }"
        class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"
    >
        {{-- FORM --}}
        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
            @if($errors->any())
                <div class="bg-red-50 border border-red-200 text-red-700 p-4 rounded-xl mb-6 text-sm">
                    <ul class="list-disc pl-5 space-y-1">
                        @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('seller.settings.profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
                @csrf

                {{-- Banner Upload --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Banner Toko</label>
                    <label class="relative block w-full h-36 rounded-xl overflow-hidden cursor-pointer group border-2 border-dashed border-gray-200 hover:border-teal-400 transition bg-gray-50">
                        <template x-if="bannerUrl">
                            <img :src="bannerUrl" class="w-full h-full object-cover">
                        </template>
                        <template x-if="!bannerUrl">
                            <div class="w-full h-full flex flex-col items-center justify-center text-gray-400">
                                <svg class="w-8 h-8 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <span class="text-xs">Klik untuk upload banner</span>
                                <span class="text-xs text-gray-300 mt-0.5">1200×300px, maks 4MB</span>
                            </div>
                        </template>
                        <div x-show="bannerUrl" class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                            <span class="text-white text-xs font-medium bg-black/40 px-3 py-1 rounded-full">Ganti Banner</span>
                        </div>
                        <input type="file" name="banner" accept="image/*" class="sr-only" @change="previewBanner($event)">
                    </label>
                </div>

                {{-- Logo + Nama --}}
                <div class="flex gap-4 items-start">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1.5">Logo</label>
                        <label class="relative block w-20 h-20 rounded-xl overflow-hidden cursor-pointer group border-2 border-dashed border-gray-200 hover:border-teal-400 transition bg-gray-50">
                            <template x-if="logoUrl">
                                <img :src="logoUrl" class="w-full h-full object-cover">
                            </template>
                            <template x-if="!logoUrl">
                                <div class="w-full h-full flex items-center justify-center text-gray-300">
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                                </div>
                            </template>
                            <div x-show="logoUrl" class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </div>
                            <input type="file" name="logo" accept="image/*" class="sr-only" @change="previewLogo($event)">
                        </label>
                        <p class="text-xs text-gray-400 mt-1 text-center">maks 2MB</p>
                    </div>
                    <div class="flex-1">
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nama Toko *</label>
                        <input type="text" name="name" id="name" value="{{ old('name', $store->name) }}" required
                            x-model="name"
                            class="w-full border-gray-200 rounded-xl focus:border-teal-500 focus:ring-teal-500 text-sm">
                    </div>
                </div>

                {{-- Deskripsi --}}
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Deskripsi Toko</label>
                    <textarea name="description" id="description" rows="3"
                        x-model="description"
                        class="w-full border-gray-200 rounded-xl focus:border-teal-500 focus:ring-teal-500 text-sm"
                        placeholder="Ceritakan tentang toko Anda...">{{ old('description', $store->description) }}</textarea>
                </div>

                {{-- Kontak --}}
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Telepon</label>
                        <input type="text" name="phone" id="phone" value="{{ old('phone', $store->phone) }}"
                            class="w-full border-gray-200 rounded-xl focus:border-teal-500 focus:ring-teal-500 text-sm" placeholder="0812xxxx">
                    </div>
                    <div>
                        <label for="whatsapp" class="block text-sm font-medium text-gray-700 mb-1">WhatsApp</label>
                        <input type="text" name="whatsapp" id="whatsapp" value="{{ old('whatsapp', $store->whatsapp) }}"
                            class="w-full border-gray-200 rounded-xl focus:border-teal-500 focus:ring-teal-500 text-sm" placeholder="0812xxxx">
                    </div>
                </div>

                {{-- Alamat --}}
                <div>
                    <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Alamat</label>
                    <textarea name="address" id="address" rows="2"
                        class="w-full border-gray-200 rounded-xl focus:border-teal-500 focus:ring-teal-500 text-sm"
                        placeholder="Jl. ...">{{ old('address', $store->address) }}</textarea>
                </div>

                <div class="flex justify-end border-t border-gray-100 pt-5">
                    <button type="submit" class="px-6 py-2.5 bg-teal-600 text-white font-semibold rounded-xl hover:bg-teal-700 transition text-sm">
                        Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>

        {{-- PREVIEW --}}
        <div class="lg:sticky lg:top-24">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Tampilan dari sisi buyer</p>
            <div class="bg-gray-100 rounded-2xl overflow-hidden border border-gray-200 shadow-sm">
                {{-- Banner --}}
                <div class="relative h-32 w-full overflow-hidden bg-gray-900">
                    <template x-if="bannerUrl">
                        <img :src="bannerUrl" class="w-full h-full object-cover opacity-90">
                    </template>
                    <template x-if="!bannerUrl">
                        <div class="w-full h-full bg-gradient-to-r from-teal-600 to-teal-800"></div>
                    </template>
                </div>

                {{-- Store card --}}
                <div class="px-4 pb-4">
                    <div class="relative bg-white rounded-2xl border border-gray-100 p-4 shadow-lg -mt-10 flex items-center gap-4">
                        {{-- Logo --}}
                        <div class="w-16 h-16 rounded-xl overflow-hidden bg-gray-50 border border-gray-100 shrink-0">
                            <template x-if="logoUrl">
                                <img :src="logoUrl" class="w-full h-full object-cover">
                            </template>
                            <template x-if="!logoUrl">
                                <div class="w-full h-full bg-teal-50 flex items-center justify-center">
                                    <svg class="w-7 h-7 text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                                </div>
                            </template>
                        </div>
                        {{-- Info --}}
                        <div class="flex-1 min-w-0">
                            <h3 class="font-bold text-gray-900 text-sm truncate" x-text="name || 'Nama Toko'"></h3>
                            <div class="flex items-center gap-2 mt-1">
                                <span class="flex items-center gap-1 text-xs text-gray-500">
                                    <svg class="w-3 h-3 text-amber-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    {{ number_format($store->rating, 1) }}
                                </span>
                                <span class="text-gray-300 text-xs">·</span>
                                <span class="text-xs text-gray-500">{{ number_format($store->total_sales) }} terjual</span>
                            </div>
                            <p class="text-xs text-gray-400 mt-1 line-clamp-2" x-text="description || 'Deskripsi toko Anda akan muncul di sini.'"></p>
                        </div>
                    </div>

                    {{-- Dummy product grid --}}
                    <div class="mt-4">
                        <p class="text-xs text-gray-400 mb-2 font-medium">Produk toko</p>
                        <div class="grid grid-cols-3 gap-2">
                            @for($i = 0; $i < 3; $i++)
                                <div class="bg-white rounded-xl overflow-hidden border border-gray-100">
                                    <div class="h-16 bg-gray-100"></div>
                                    <div class="p-2">
                                        <div class="h-2 bg-gray-100 rounded w-3/4 mb-1"></div>
                                        <div class="h-2 bg-teal-100 rounded w-1/2"></div>
                                    </div>
                                </div>
                            @endfor
                        </div>
                    </div>
                </div>
            </div>

            <p class="text-xs text-gray-400 text-center mt-3">Preview diperbarui secara real-time saat Anda mengetik.</p>
        </div>
    </div>
</div>
@endsection