@extends('layouts.admin')

@section('header', 'Pengaturan Website')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- General Settings -->
    <div class="bg-white rounded-xl shadow-md p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Pengaturan Umum</h3>
        <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-4">
                <label for="store_name" class="block text-sm font-medium text-gray-700 mb-1">Nama Toko</label>
                <input type="text" name="store_name" id="store_name" value="{{ $storeName }}" required
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
            </div>

            <div class="mb-4">
                <label for="store_logo" class="block text-sm font-medium text-gray-700 mb-1">Logo Toko (GIF/Image)</label>
                @if(\App\Models\Setting::get('store_logo'))
                    <div class="mb-2">
                        <img src="{{ \App\Models\Setting::get('store_logo') }}?v={{ time() }}" alt="Current Logo" class="h-12 object-contain border rounded p-1">
                    </div>
                @endif
                <input type="file" name="store_logo" id="store_logo" accept="image/*,.gif"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                <p class="text-xs text-gray-500 mt-1">Format: GIF, PNG, JPG, WEBP. Maks: 10MB (GIF Animasi Didukung).</p>
            </div>

            <div class="mb-6">
                <label for="app_locale" class="block text-sm font-medium text-gray-700 mb-1">Bahasa</label>
                <select name="app_locale" id="app_locale" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                    <option value="id" {{ $locale == 'id' ? 'selected' : '' }}>Indonesia</option>
                    <option value="ms" {{ $locale == 'ms' ? 'selected' : '' }}>Malaysia (Melayu)</option>
                </select>
                <p class="text-xs text-gray-500 mt-1">Pilih bahasa default untuk tampilan website.</p>
            </div>

            <button type="submit" class="bg-yellow-600 text-white px-4 py-2 rounded-lg hover:bg-yellow-700 transition w-full">
                Simpan Perubahan
            </button>
        </form>
    </div>

    <!-- Banner Settings -->
    <div class="bg-white rounded-xl shadow-md p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Pengaturan Banner</h3>
        
        @if($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Add Banner Form -->
        <form action="{{ route('admin.banners.store') }}" method="POST" enctype="multipart/form-data" class="mb-6 p-4 bg-gray-50 rounded-lg border">
            @csrf
            <h4 class="text-sm font-semibold mb-3">Tambah Banner Baru</h4>
            <div class="grid grid-cols-1 gap-3">
                <!-- File Upload -->
                <div>
                    <label class="block text-xs font-bold text-gray-500 mb-1">Upload Gambar (Dari Komputer/HP)</label>
                    <input type="file" name="image_file" accept="image/*"
                        class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100">
                </div>

                <div class="text-center text-xs text-gray-400">- ATAU -</div>

                <!-- URL Input -->
                <div>
                    <label class="block text-xs font-bold text-gray-500 mb-1">URL Gambar (Link Eksternal)</label>
                    <input type="url" name="image_url" placeholder="https://..."
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                </div>

                <div class="flex gap-2">
                    <input type="number" name="order" placeholder="Urutan" value="1"
                        class="w-20 px-3 py-2 border border-gray-300 rounded-lg text-sm">
                    <button type="submit" class="flex-1 bg-green-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-green-700">
                        <i class="fas fa-plus mr-1"></i> Tambah
                    </button>
                </div>
            </div>
        </form>

        <!-- Banner List -->
        <div class="space-y-4 max-h-96 overflow-y-auto">
            @forelse($banners as $banner)
                <div class="flex items-center gap-4 p-3 border rounded-lg hover:bg-gray-50">
                    <img src="{{ $banner->image }}" alt="Banner" class="w-20 h-12 object-cover rounded">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-bold text-gray-800 truncate">Banner #{{ $banner->id }}</p>
                        <p class="text-xs text-gray-500 truncate">Urutan: {{ $banner->order }}</p>
                    </div>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('admin.banners.edit', $banner->id) }}" class="text-blue-500 hover:text-blue-700">
                            <i class="fas fa-edit"></i>
                        </a>
                        <form action="{{ route('admin.banners.destroy', $banner->id) }}" method="POST" onsubmit="return confirm('Hapus banner ini?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-700">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <p class="text-center text-gray-500 text-sm py-4">Belum ada banner.</p>
            @endforelse
        </div>
    </div>

    <!-- Courier Settings -->
    <div class="bg-white rounded-xl shadow-md p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4 border-b pb-2">Pengaturan Kurir Pengiriman</h3>
        
        <!-- Add Courier Form -->
        <form action="{{ route('admin.couriers.store') }}" method="POST" class="mb-6 p-4 bg-gray-50 rounded-lg border">
            @csrf
            <h4 class="text-sm font-semibold mb-3">Tambah Kurir Baru</h4>
            <div class="grid grid-cols-1 gap-3">
                <input type="text" name="name" placeholder="Nama Kurir (Contoh: JNE)" required
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <input type="text" name="code" placeholder="Kode (Opsional)" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <button type="submit" class="w-full bg-green-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-green-700">
                    <i class="fas fa-plus mr-1"></i> Tambah Kurir
                </button>
            </div>
        </form>

        <!-- Courier List -->
        <div class="space-y-4 max-h-96 overflow-y-auto">
            @forelse($couriers as $courier)
                <div class="flex items-center gap-4 p-3 border rounded-lg hover:bg-gray-50">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-bold text-gray-800 truncate">{{ $courier->name }}</p>
                        <p class="text-xs text-gray-500 truncate">{{ $courier->code ?? '-' }}</p>
                    </div>
                    <div class="flex items-center gap-2">
                         <form action="{{ route('admin.couriers.toggle', $courier->id) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="sr-only peer" {{ $courier->is_active ? 'checked' : '' }} disabled>
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
                            </button>
                        </form>
                        
                        <form action="{{ route('admin.couriers.destroy', $courier->id) }}" method="POST" onsubmit="return confirm('Hapus kurir ini?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-700 ml-2">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <p class="text-center text-gray-500 text-sm py-4">Belum ada kurir.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection