@extends('layouts.dashboard')

@section('title', 'Pengaturan Organisasi')
@section('page-title', 'Pengaturan Aplikasi')

@section('content')
@php
    $value = function (string $field, string $key, $default = '') use ($settings) {
        return old($field, $settings[$key] ?? $default);
    };

    $namaOrganisasi = $settings['organisasi.nama'] ?? 'Belum ada nama organisasi';
    $logoPath = $settings['organisasi.logo_path'] ?? null;
    $logoUrl = !empty($logoPath) ? asset($logoPath) : asset('images/logo.png');

    $themeSidebarStart = old('theme_sidebar_start', $settings['theme.sidebar_start'] ?? '#7a1f2b');
    $themeSidebarMid   = old('theme_sidebar_mid', $settings['theme.sidebar_mid'] ?? '#b93a4b');
    $themeSidebarEnd   = old('theme_sidebar_end', $settings['theme.sidebar_end'] ?? '#ec644b');
    $themeAccent       = old('theme_accent', $settings['theme.accent'] ?? '#0b5ed7');
@endphp

<style>
    .setting-hero{
        border-radius: 16px;
        border: 1px solid rgba(25,135,84,.18);
        background:
            radial-gradient(900px 220px at 10% 0%, rgba(25,135,84,.14), transparent 60%),
            linear-gradient(135deg, rgba(25,135,84,.08), rgba(13,202,240,.05));
    }
    .icon-badge{
        width: 42px;
        height: 42px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius: 12px;
        background: rgba(25,135,84,.12);
        color: #198754;
        flex: 0 0 auto;
    }
    .section-title{
        font-weight: 800;
        letter-spacing: .2px;
    }
    .preview-card{
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 14px;
        background: #fff;
    }
    .preview-logo{
        height: 86px;
        width: 100%;
        object-fit: contain;
        background: rgba(15,23,42,.03);
        border: 1px dashed rgba(0,0,0,.12);
        border-radius: 12px;
        padding: 10px;
    }
    .hint{
        font-size: 12px;
        color: #6b7280;
    }
</style>

<div class="container-fluid">

    <div class="setting-hero p-3 p-md-4 mb-3">
        <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
            <div class="d-flex align-items-start gap-3">
                <div class="icon-badge">
                    <i class="bi bi-gear"></i>
                </div>
                <div>
                    <h5 class="mb-1 section-title">Pengaturan Organisasi</h5>
                    <div class="text-muted small">
                        Atur profil organisasi, tema, konten halaman depan, dan identitas aplikasi agar tampil konsisten di seluruh sistem.
                    </div>
                    <div class="text-muted small">
                        Akses halaman ini dibatasi untuk administrator yang berwenang.
                    </div>
                </div>
            </div>

            <div class="text-end">
                <div class="small text-muted">Nama organisasi saat ini</div>
                <div class="fw-semibold">{{ $namaOrganisasi }}</div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <div class="fw-semibold mb-1">Periksa input:</div>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="row g-3">
        <div class="col-12 col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h6 class="mb-0 section-title">Form pengaturan</h6>
                    <small class="text-muted">Data ini digunakan di header, laporan, halaman landing, dan identitas aplikasi.</small>
                </div>

                <div class="card-body">
                    <form action="{{ route('setting.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <h6 class="mb-2 section-title">Profil & Kontak</h6>

                        <div class="mb-3">
                            <label class="form-label">Nama organisasi</label>
                            <input type="text" name="nama" class="form-control" value="{{ $value('nama', 'organisasi.nama') }}" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Tagline organisasi</label>
                            <input type="text" name="tagline" class="form-control" value="{{ $value('tagline', 'organisasi.tagline') }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Alamat kantor</label>
                            <textarea name="alamat" class="form-control" rows="3">{{ $value('alamat', 'organisasi.alamat') }}</textarea>
                        </div>

                        <div class="row g-2">
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Kota</label>
                                <input type="text" name="kota" class="form-control" value="{{ $value('kota', 'organisasi.kota') }}">
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Provinsi</label>
                                <input type="text" name="provinsi" class="form-control" value="{{ $value('provinsi', 'organisasi.provinsi') }}">
                            </div>
                        </div>

                        <div class="row g-2">
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Telepon / WA kantor</label>
                                <input type="text" name="telepon" class="form-control" value="{{ $value('telepon', 'organisasi.telepon') }}">
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Email kantor</label>
                                <input type="email" name="email" class="form-control" value="{{ $value('email', 'organisasi.email') }}">
                            </div>
                        </div>

                        <hr>

                        <h6 class="mb-2 section-title">Rekening organisasi</h6>

                        <div class="row g-2">
                            <div class="col-12 col-md-4 mb-3">
                                <label class="form-label">Bank</label>
                                <input type="text" name="rekening_bank" class="form-control" value="{{ $value('rekening_bank', 'organisasi.rekening_bank') }}">
                            </div>
                            <div class="col-12 col-md-4 mb-3">
                                <label class="form-label">Nomor rekening</label>
                                <input type="text" name="rekening_nomor" class="form-control" value="{{ $value('rekening_nomor', 'organisasi.rekening_nomor') }}">
                            </div>
                            <div class="col-12 col-md-4 mb-3">
                                <label class="form-label">Atas nama</label>
                                <input type="text" name="rekening_atas_nama" class="form-control" value="{{ $value('rekening_atas_nama', 'organisasi.rekening_atas_nama') }}">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Catatan pembayaran</label>
                            <textarea name="catatan_pembayaran" class="form-control" rows="3">{{ $value('catatan_pembayaran', 'organisasi.catatan_pembayaran') }}</textarea>
                            <div class="hint">Contoh: Transfer sebelum pukul 16.00 diproses di hari yang sama.</div>
                        </div>

                        <hr>

                        <h6 class="mb-2 section-title">Logo organisasi</h6>

                        <div class="row g-2 align-items-center">
                            <div class="col-12 col-md-6">
                                <div class="small text-muted mb-1">Preview</div>
                                <img class="preview-logo" src="{{ $logoUrl }}?v={{ time() }}" alt="Logo organisasi">
                                <div class="hint mt-1">
                                    Path: <span class="text-muted">{{ $logoPath ?? '-' }}</span>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label">Upload logo (jpg/png/webp, max 2MB)</label>
                                <input type="file" name="logo" class="form-control" accept=".jpg,.jpeg,.png,.webp,image/*">
                                <div class="hint mt-1">
                                    Upload baru akan mengganti file logo organisasi aktif.
                                </div>
                            </div>
                        </div>

                        <hr>

                        <h6 class="mb-2 section-title">Tema warna</h6>
                        <div class="text-muted small mb-2">Pilih nuansa warna untuk sidebar dan aksen tombol.</div>

                        <div class="row g-2">
                            <div class="col-12 col-md-3 mb-3">
                                <label class="form-label">Sidebar start</label>
                                <input type="color" name="theme_sidebar_start" class="form-control form-control-color w-100" value="{{ $themeSidebarStart }}">
                                <div class="hint mt-1">{{ $themeSidebarStart }}</div>
                            </div>
                            <div class="col-12 col-md-3 mb-3">
                                <label class="form-label">Sidebar mid</label>
                                <input type="color" name="theme_sidebar_mid" class="form-control form-control-color w-100" value="{{ $themeSidebarMid }}">
                                <div class="hint mt-1">{{ $themeSidebarMid }}</div>
                            </div>
                            <div class="col-12 col-md-3 mb-3">
                                <label class="form-label">Sidebar end</label>
                                <input type="color" name="theme_sidebar_end" class="form-control form-control-color w-100" value="{{ $themeSidebarEnd }}">
                                <div class="hint mt-1">{{ $themeSidebarEnd }}</div>
                            </div>
                            <div class="col-12 col-md-3 mb-3">
                                <label class="form-label">Accent</label>
                                <input type="color" name="theme_accent" class="form-control form-control-color w-100" value="{{ $themeAccent }}">
                                <div class="hint mt-1">{{ $themeAccent }}</div>
                            </div>
                        </div>

                        <hr>

                        <h6 class="mb-2 section-title">Konten halaman depan</h6>

                        <div class="mb-3">
                            <label class="form-label">Badge welcome</label>
                            <input type="text" name="welcome_badge" class="form-control" value="{{ $value('welcome_badge', 'welcome.badge') }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Judul utama welcome</label>
                            <input type="text" name="welcome_title" class="form-control" value="{{ $value('welcome_title', 'welcome.title') }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Deskripsi welcome</label>
                            <textarea name="welcome_description" class="form-control" rows="4">{{ $value('welcome_description', 'welcome.description') }}</textarea>
                        </div>

                        <div class="row g-2">
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Card 1 title</label>
                                <input type="text" name="welcome_card_1_title" class="form-control" value="{{ $value('welcome_card_1_title', 'welcome.card_1_title') }}">
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Card 1 deskripsi</label>
                                <textarea name="welcome_card_1_desc" class="form-control" rows="2">{{ $value('welcome_card_1_desc', 'welcome.card_1_desc') }}</textarea>
                            </div>
                        </div>

                        <div class="row g-2">
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Card 2 title</label>
                                <input type="text" name="welcome_card_2_title" class="form-control" value="{{ $value('welcome_card_2_title', 'welcome.card_2_title') }}">
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Card 2 deskripsi</label>
                                <textarea name="welcome_card_2_desc" class="form-control" rows="2">{{ $value('welcome_card_2_desc', 'welcome.card_2_desc') }}</textarea>
                            </div>
                        </div>

                        <div class="row g-2">
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Card 3 title</label>
                                <input type="text" name="welcome_card_3_title" class="form-control" value="{{ $value('welcome_card_3_title', 'welcome.card_3_title') }}">
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Card 3 deskripsi</label>
                                <textarea name="welcome_card_3_desc" class="form-control" rows="2">{{ $value('welcome_card_3_desc', 'welcome.card_3_desc') }}</textarea>
                            </div>
                        </div>

                        <hr>

                        <h6 class="mb-2 section-title">Informasi developer</h6>

                        <div class="row g-2">
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Nama developer</label>
                                <input type="text" name="developer_nama" class="form-control" value="{{ $value('developer_nama', 'developer.nama') }}">
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <label class="form-label">Website developer</label>
                                <input type="url" name="developer_website" class="form-control" value="{{ $value('developer_website', 'developer.website') }}">
                            </div>
                        </div>

                        <div class="d-flex gap-2 flex-wrap mt-3">
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-save me-1"></i> Simpan Pengaturan
                            </button>
                            <a href="{{ route('setting.index') }}" class="btn btn-outline-secondary">Reload</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4">
            <div class="card border-0 shadow-sm preview-card">
                <div class="card-header bg-white">
                    <h6 class="mb-0 section-title">Preview data</h6>
                    <small class="text-muted">Diambil dari data settings aktif / old input.</small>
                </div>
                <div class="card-body">
                    <div class="small text-muted mb-1">Nama</div>
                    <div class="fw-semibold">{{ $value('nama', 'organisasi.nama', 'Belum ada nama organisasi') }}</div>

                    <hr>

                    <div class="small text-muted mb-1">Tagline</div>
                    <div class="small">{{ $value('tagline', 'organisasi.tagline', '-') }}</div>

                    <hr>

                    <div class="small text-muted mb-1">Alamat</div>
                    <div class="small">{{ $value('alamat', 'organisasi.alamat', '-') }}</div>

                    <hr>

                    <div class="small text-muted mb-1">Rekening</div>
                    <div class="small">
                        {{ $value('rekening_bank', 'organisasi.rekening_bank', '-') }}<br>
                        {{ $value('rekening_nomor', 'organisasi.rekening_nomor', '-') }}<br>
                        a.n {{ $value('rekening_atas_nama', 'organisasi.rekening_atas_nama', '-') }}
                    </div>

                    <hr>

                    <div class="small text-muted mb-1">Tema</div>
                    <div class="small">
                        Sidebar: {{ $themeSidebarStart }}, {{ $themeSidebarMid }}, {{ $themeSidebarEnd }}<br>
                        Accent: {{ $themeAccent }}
                    </div>

                    <hr>

                    <div class="small text-muted mb-1">Welcome</div>
                    <div class="small fw-semibold">{{ $value('welcome_title', 'welcome.title', '-') }}</div>
                    <div class="small text-muted">{{ $value('welcome_badge', 'welcome.badge', '-') }}</div>
                </div>
            </div>

            <div class="card border-0 shadow-sm mt-3">
                <div class="card-body">
                    <div class="small text-muted mb-1">Catatan</div>
                    <div class="small">
                        Pengaturan yang rapi membantu layanan lebih cepat, laporan lebih jelas, dan identitas aplikasi tetap konsisten di seluruh halaman.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection