@extends('layouts.admin')

@section('title', 'Pengaturan')
@section('page-title', 'Pengaturan')
@section('page-subtitle', 'Kelola kontak, media sosial & tampilan website')

@section('content')
<form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
    @csrf

    {{-- Card 1: Kontak Perusahaan --}}
    <div class="card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
        <h3 style="font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-address-book" style="color: var(--green-500);"></i> Kontak Perusahaan
        </h3>

        <div class="form-group">
            <label for="whatsapp">WhatsApp</label>
            <input type="text" id="whatsapp" name="whatsapp" class="form-control" value="{{ $settings['whatsapp'] ?? '' }}" placeholder="0895-3041-5281">
        </div>

        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" class="form-control" value="{{ $settings['email'] ?? '' }}" placeholder="pga.bbb_sawit@tap-agri.com">
        </div>

        <div class="form-group">
            <label for="phone">Telepon</label>
            <input type="text" id="phone" name="phone" class="form-control" value="{{ $settings['phone'] ?? '' }}" placeholder="(021) 1234-5678">
        </div>
    </div>

    {{-- Card 2: Media Sosial --}}
    <div class="card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
        <h3 style="font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-share-alt" style="color: var(--green-500);"></i> Media Sosial
        </h3>

        <div class="form-group">
            <label for="link_linkedin">LinkedIn</label>
            <input type="url" id="link_linkedin" name="link_linkedin" class="form-control" value="{{ $settings['link_linkedin'] ?? '' }}" placeholder="https://linkedin.com/company/...">
        </div>

        <div class="form-group">
            <label for="link_facebook">Facebook</label>
            <input type="url" id="link_facebook" name="link_facebook" class="form-control" value="{{ $settings['link_facebook'] ?? '' }}" placeholder="https://facebook.com/...">
        </div>

        <div class="form-group">
            <label for="link_instagram">Instagram</label>
            <input type="url" id="link_instagram" name="link_instagram" class="form-control" value="{{ $settings['link_instagram'] ?? '' }}" placeholder="https://instagram.com/...">
        </div>

        <div class="form-group">
            <label for="link_twitter">Twitter</label>
            <input type="url" id="link_twitter" name="link_twitter" class="form-control" value="{{ $settings['link_twitter'] ?? '' }}" placeholder="https://twitter.com/...">
        </div>
    </div>

    {{-- Card 3: Tampilan Halaman Utama --}}
    <div class="card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
        <h3 style="font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-desktop" style="color: var(--green-500);"></i> Tampilan Halaman Utama
        </h3>

        <div class="form-group">
            <label for="hero_title">Judul Hero</label>
            <input type="text" id="hero_title" name="hero_title" class="form-control" value="{{ $settings['hero_title'] ?? '' }}" placeholder="Membangun Masa Depan...">
        </div>

        <div class="form-group">
            <label for="hero_subtitle">Subjudul Hero</label>
            <input type="text" id="hero_subtitle" name="hero_subtitle" class="form-control" value="{{ $settings['hero_subtitle'] ?? '' }}" placeholder="Kesempatan Karir...">
        </div>

        <div class="form-group">
            <label for="hero_image">Gambar Hero (Foto Orang)</label>
            <input type="file" id="hero_image" name="hero_image" class="form-control" accept="image/*">
            @if(!empty($settings['hero_image']))
                <div style="margin-top: 8px; margin-bottom: 8px;">
                    <img src="{{ asset('storage/' . $settings['hero_image']) }}" alt="Hero Image" style="max-width: 150px; border-radius: 8px;">
                    <div style="margin-top: 5px;">
                        <label><input type="checkbox" name="delete_hero_image" value="1"> Hapus foto ini</label>
                    </div>
                </div>
            @endif
        </div>

        <div class="form-group" style="margin-top: 1.5rem;">
            <label for="hero_background">Gambar Latar Belakang (Kebun Sawit - Bisa Banyak Foto)</label>
            <input type="file" id="hero_background" name="hero_background[]" class="form-control" accept="image/*" multiple>
            @php
                $bgSetting = $settings['hero_background'] ?? null;
                $bgPaths = [];
                if ($bgSetting) {
                    $bgPaths = json_decode($bgSetting, true);
                    if (!is_array($bgPaths)) {
                        $bgPaths = [$bgSetting];
                    }
                }
            @endphp
            @if(!empty($bgPaths))
                <div style="display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap;">
                    @foreach($bgPaths as $index => $path)
                        <div style="display: flex; flex-direction: column; align-items: center; border: 1px solid #ccc; padding: 5px; border-radius: 8px;">
                            <img src="{{ asset('storage/' . $path) }}" alt="Hero Background" style="width: 150px; height: 100px; object-fit: cover; border-radius: 5px;">
                            <label style="margin-top: 5px; font-size: 0.85rem;"><input type="checkbox" name="delete_hero_background[]" value="{{ $index }}"> Hapus</label>
                        </div>
                    @endforeach
                </div>
                <small style="color: #666; display: block; margin-top: 5px;">* Centang kotak "Hapus" lalu klik Simpan untuk menghapus foto tertentu.</small>
            @endif
        </div>

        <div class="form-group" style="margin-top: 1.5rem;">
            <label for="hero_slider_interval">Durasi Ganti Foto Latar (Detik)</label>
            <input type="number" id="hero_slider_interval" name="hero_slider_interval" class="form-control" value="{{ $settings['hero_slider_interval'] ?? 5 }}" min="1" step="1">
            <small style="color: #666; display: block; margin-top: 5px;">* Menentukan berapa detik foto latar belakang akan berganti secara otomatis (bawaan: 5 detik).</small>
        </div>

        <div class="form-group" style="margin-top: 15px;">
            <label for="logo_perusahaan">Logo Perusahaan (Untuk PDF & Excel)</label>
            <input type="file" id="logo_perusahaan" name="logo_perusahaan" class="form-control" accept="image/*">
            @if(!empty($settings['logo_perusahaan']))
                <div class="mt-2" style="margin-bottom: 8px;">
                    <img src="{{ asset('storage/' . $settings['logo_perusahaan']) }}" alt="Logo" width="150" class="img-thumbnail">
                    <div style="margin-top: 5px;">
                        <label><input type="checkbox" name="delete_logo_perusahaan" value="1"> Hapus logo ini</label>
                    </div>
                </div>
            @else
                <small class="text-muted">Jika tidak diisi, akan menggunakan logo bawaan (hijau).</small>
            @endif
        </div>
    </div>

    <button type="submit" class="btn btn-primary">
        <i class="fas fa-save"></i> Simpan Pengaturan
    </button>
</form>
@endsection