@extends('layouts.app')
@section('title', 'Pengaturan Perusahaan')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="lg:col-span-2 space-y-4">

        {{-- ═══════════════ INFO PERUSAHAAN ═══════════════ --}}
        <form action="{{ route('settings.update') }}" method="POST" class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 space-y-4">
            @csrf @method('PUT')
            <h3 class="font-bold text-slate-800">Informasi Perusahaan</h3>

            @if($errors->any() && !$errors->hasBag('payment'))
                <div class="p-3 rounded-lg bg-red-50 text-red-800 border border-red-200 text-sm">
                    <ul class="list-disc list-inside space-y-0.5">
                        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
                    </ul>
                </div>
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-slate-700 mb-1">Nama Perusahaan *</label>
                    <input type="text" name="nama_perusahaan" value="{{ old('nama_perusahaan', $tenant->nama_perusahaan) }}" required
                           class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-slate-700 mb-1">Tagline</label>
                    <input type="text" name="tagline" value="{{ old('tagline', $tenant->tagline) }}"
                           class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Email</label>
                    <input type="email" name="email" value="{{ old('email', $tenant->email) }}"
                           class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">No HP</label>
                    <input type="text" name="no_hp" value="{{ old('no_hp', $tenant->no_hp) }}"
                           class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-slate-700 mb-1">Alamat</label>
                    <textarea name="alamat" rows="2"
                              class="w-full rounded-lg border-slate-300 px-3 py-2 border">{{ old('alamat', $tenant->alamat) }}</textarea>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-slate-700 mb-1">Catatan Default Invoice</label>
                    <textarea name="catatan_default" rows="3"
                              class="w-full rounded-lg border-slate-300 px-3 py-2 border">{{ old('catatan_default', $tenant->catatan_default) }}</textarea>
                    <p class="text-xs text-slate-500 mt-1">Akan muncul otomatis di invoice jika catatan invoice kosong.</p>
                </div>
            </div>
            <button class="bg-[#1e6fbf] hover:bg-[#14538f] text-white font-semibold px-6 py-2 rounded-lg">
                💾 Simpan Informasi
            </button>
        </form>

        {{-- ═══════════════ METODE PEMBAYARAN ═══════════════ --}}
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-slate-800">💳 Metode Pembayaran</h3>
                <button type="button"
                        onclick="document.getElementById('formAddPayment').scrollIntoView({behavior:'smooth', block:'center'})"
                        class="bg-[#1e6fbf] hover:bg-[#14538f] text-white text-sm font-semibold px-3 py-1.5 rounded-lg">
                    + Tambah Metode
                </button>
            </div>

            {{-- Flash messages --}}
            @if(session('success'))
                <div class="mb-3 p-2 rounded bg-green-50 text-green-800 border border-green-200 text-sm">
                    ✅ {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="mb-3 p-2 rounded bg-red-50 text-red-800 border border-red-200 text-sm">
                    ⚠️ {{ session('error') }}
                </div>
            @endif

            {{-- Error validasi dari form payment --}}
            @if($errors->any() && $errors->hasBag('payment'))
                <div class="mb-3 p-2 rounded bg-red-50 border border-red-300 text-red-800 text-sm space-y-0.5">
                    @foreach($errors->getBag('payment')->all() as $e)
                        <div>⚠️ {{ $e }}</div>
                    @endforeach
                </div>
            @endif

            {{-- LIST METODE YANG ADA --}}
            <div class="space-y-2 mb-5">
                @php
                    $paymentMethods = $paymentMethods ?? \App\Models\PaymentMethod::orderBy('urutan')->orderBy('id')->get();
                @endphp

                @forelse($paymentMethods as $pm)
                    <div class="flex items-center gap-3 p-3 rounded-lg border
                                {{ $pm->is_active ? 'border-slate-200 bg-slate-50' : 'border-slate-200 bg-slate-100 opacity-60' }}">
                        <div class="text-2xl">{{ $pm->jenis_icon }}</div>
                        <div class="flex-1 min-w-0">
                            <div class="font-semibold text-sm">
                                {{ $pm->nama }}
                                <span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-200 text-slate-600 ml-1">
                                    {{ $pm->jenis_label }}
                                </span>
                                @if(! $pm->is_active)
                                    <span class="text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-600 ml-1">NONAKTIF</span>
                                @endif
                            </div>
                            <div class="text-xs text-slate-600">
                                <span class="font-mono">{{ $pm->nomor }}</span>
                                @if($pm->pemilik) — a.n {{ $pm->pemilik }} @endif
                            </div>
                        </div>
                        <div class="flex items-center gap-1">
                            <form action="{{ route('settings.payment.toggle', $pm) }}" method="POST" class="inline">
                                @csrf
                                <button class="text-xs px-2 py-1 rounded border border-slate-300 hover:bg-slate-100"
                                        title="{{ $pm->is_active ? 'Nonaktifkan' : 'Aktifkan' }}">
                                    {{ $pm->is_active ? '👁️' : '🚫' }}
                                </button>
                            </form>
                            <form action="{{ route('settings.payment.delete', $pm) }}" method="POST"
                                  class="inline" onsubmit="return confirm('Hapus metode pembayaran {{ $pm->nama }}?')">
                                @csrf @method('DELETE')
                                <button class="text-xs px-2 py-1 rounded border border-red-200 text-red-600 hover:bg-red-50"
                                        title="Hapus">🗑️</button>
                            </form>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-6 text-slate-500 text-sm border-2 border-dashed border-slate-200 rounded-lg">
                        Belum ada metode pembayaran. Tambahkan di bawah. 👇
                    </div>
                @endforelse
            </div>

            {{-- FORM TAMBAH --}}
            <form id="formAddPayment" action="{{ route('settings.payment.store') }}" method="POST"
                  class="p-4 rounded-lg bg-blue-50 border border-blue-200 space-y-3">
                @csrf
                <div class="text-sm font-semibold text-blue-900">➕ Tambah Metode Pembayaran Baru</div>

                {{-- Error display khusus form ini --}}
                @if($errors->any())
                    <div class="p-2 rounded bg-red-50 border border-red-300 text-red-800 text-xs space-y-0.5">
                        @foreach($errors->all() as $e)
                            <div>⚠️ {{ $e }}</div>
                        @endforeach
                    </div>
                @endif

                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-medium text-slate-700 mb-1">Jenis *</label>
                        <select name="jenis" required
                                class="w-full rounded-lg border-slate-300 px-3 py-2 border text-sm">
                            <option value="">— Pilih Jenis —</option>
                            <option value="bank"     @selected(old('jenis')==='bank')>🏦 Bank</option>
                            <option value="ewallet"  @selected(old('jenis')==='ewallet')>📱 E-Wallet</option>
                            <option value="qris"     @selected(old('jenis')==='qris')>📷 QRIS</option>
                            <option value="lainnya"  @selected(old('jenis')==='lainnya')>💳 Lainnya</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-700 mb-1">Nama *</label>
                        <input type="text" name="nama" required value="{{ old('nama') }}"
                               placeholder="Contoh: BCA / DANA / OVO"
                               class="w-full rounded-lg border-slate-300 px-3 py-2 border text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-700 mb-1">Nomor Rekening / HP *</label>
                        <input type="text" name="nomor" required value="{{ old('nomor') }}"
                               placeholder="901714239615 / 0896-xxxx-xxxx"
                               class="w-full rounded-lg border-slate-300 px-3 py-2 border text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-700 mb-1">Atas Nama</label>
                        <input type="text" name="pemilik" value="{{ old('pemilik') }}"
                               placeholder="HABIB RAHMAN"
                               class="w-full rounded-lg border-slate-300 px-3 py-2 border text-sm">
                    </div>
                </div>
                <button type="submit"
                        class="bg-[#1e6fbf] hover:bg-[#14538f] text-white font-semibold px-4 py-2 rounded-lg text-sm">
                    💾 Simpan Metode
                </button>
            </form>
        </div>
    </div>

    {{-- ═══════════════ SIDEBAR ═══════════════ --}}
    <div class="space-y-4">
        {{-- LOGO --}}
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <h3 class="font-bold text-slate-800 mb-3">Logo Perusahaan</h3>
            @if($tenant->logo_path)
                <img src="{{ asset('storage/'.$tenant->logo_path) }}"
                     class="w-32 h-32 object-contain bg-slate-50 rounded border p-2 mx-auto">
                <form action="{{ route('settings.logo.delete') }}" method="POST" class="mt-3 text-center"
                      onsubmit="return confirm('Hapus logo?')">
                    @csrf @method('DELETE')
                    <button class="text-red-600 text-sm hover:underline">Hapus Logo</button>
                </form>
            @else
                <div class="w-32 h-32 bg-slate-100 rounded flex items-center justify-center text-slate-400 text-xs mx-auto">
                    Belum ada logo
                </div>
            @endif
            <form action="{{ route('settings.logo') }}" method="POST" enctype="multipart/form-data" class="mt-3">
                @csrf
                <input type="file" name="logo" accept="image/*" required class="w-full text-xs">
                <button class="mt-2 w-full bg-[#1e6fbf] hover:bg-[#14538f] text-white text-sm font-semibold py-2 rounded-lg">
                    Upload Logo
                </button>
            </form>
        </div>

        {{-- INFO TENANT --}}
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 text-sm">
            <h3 class="font-bold text-slate-800 mb-3">Info Tenant</h3>
            <div class="space-y-1">
                <div class="flex justify-between">
                    <span class="text-slate-500">Kode:</span>
                    <strong>{{ $tenant->kode_tenant }}</strong>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500">Slug:</span>
                    <span class="font-mono text-xs">{{ $tenant->slug }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-500">Status:</span>
                    <span class="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700 border border-green-200">
                        {{ strtoupper($tenant->status) }}
                    </span>
                </div>
                @if($tenant->tanggal_expired)
                    <div class="flex justify-between">
                        <span class="text-slate-500">Expired:</span>
                        <span>{{ $tenant->tanggal_expired->format('d/m/Y') }}</span>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection