@extends('layouts.app')

@section('title', 'Pengaturan - ' . ucfirst($grup))

@section('content')
<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1><i class="fas fa-cogs mr-2"></i>Pengaturan</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Pengaturan</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <i class="fas fa-check-circle mr-1"></i>{{ session('success') }}
                </div>
            @endif

            <div class="row">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-header bg-primary">
                            <h3 class="card-title"><i class="fas fa-folder mr-2"></i>Grup Pengaturan</h3>
                        </div>
                        <div class="card-body p-0">
                            <ul class="nav nav-pills flex-column">
                                <li class="nav-item">
                                    <a href="{{ route('admin.pengaturan.index', ['grup' => 'umum']) }}" class="nav-link {{ $grup === 'umum' ? 'active' : '' }}">
                                        <i class="fas fa-university mr-2"></i>Umum
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('admin.pengaturan.index', ['grup' => 'tampilan']) }}" class="nav-link {{ $grup === 'tampilan' ? 'active' : '' }}">
                                        <i class="fas fa-paint-brush mr-2"></i>Tampilan
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('admin.pengaturan.index', ['grup' => 'surat']) }}" class="nav-link {{ $grup === 'surat' ? 'active' : '' }}">
                                        <i class="fas fa-envelope mr-2"></i>Kop Surat
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('admin.pengaturan.index', ['grup' => 'pengumuman']) }}" class="nav-link {{ $grup === 'pengumuman' ? 'active' : '' }}">
                                        <i class="fas fa-bullhorn mr-2"></i>Pengumuman
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('admin.pengaturan.slide') }}" class="nav-link">
                                        <i class="fas fa-images mr-2"></i>Slide Beranda
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-md-9">
                    <div class="card">
                        <div class="card-header bg-primary">
                            <h3 class="card-title"><i class="fas fa-edit mr-2"></i>{{ ucfirst($grup) }}</h3>
                        </div>
                        <form action="{{ route('admin.pengaturan.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="grup" value="{{ $grup }}">

                            <div class="card-body">
                                @foreach($items as $item)
                                    <div class="form-group row">
                                        <label class="col-sm-3 col-form-label">
                                            {{ $item->label }}
                                            @if($item->deskripsi)
                                                <small class="form-text text-muted">{{ $item->deskripsi }}</small>
                                            @endif
                                        </label>
                                        <div class="col-sm-9">
                                            @if($item->tipe === 'text')
                                                <input type="text" name="{{ $item->kunci }}" class="form-control" value="{{ $item->nilai }}">
                                            @elseif($item->tipe === 'textarea')
                                                <textarea name="{{ $item->kunci }}" class="form-control" rows="3">{{ $item->nilai }}</textarea>
                                            @elseif($item->tipe === 'number')
                                                <input type="number" name="{{ $item->kunci }}" class="form-control" value="{{ $item->nilai }}">
                                            @elseif($item->tipe === 'boolean')
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" name="{{ $item->kunci }}" class="custom-control-input" id="{{ $item->kunci }}" value="1" {{ $item->nilai === '1' ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="{{ $item->kunci }}">{{ $item->nilai === '1' ? 'Aktif' : 'Nonaktif' }}</label>
                                                </div>
                                            @elseif($item->tipe === 'image')
                                                <div class="input-group">
                                                    <div class="custom-file">
                                                        <input type="file" name="{{ $item->kunci }}" class="custom-file-input" id="{{ $item->kunci }}" accept="image/*">
                                                        <label class="custom-file-label" for="{{ $item->kunci }}">Pilih file...</label>
                                                    </div>
                                                </div>
                                                @if($item->nilai && \Illuminate\Support\Facades\Storage::disk('public')->exists($item->nilai))
                                                    <div class="mt-2">
                                                        <img src="{{ asset('storage/' . $item->nilai) }}" alt="{{ $item->label }}" class="img-thumbnail" style="max-height: 100px;">
                                                    </div>
                                                @elseif($item->nilai && file_exists(public_path($item->nilai)))
                                                    <div class="mt-2">
                                                        <img src="{{ asset($item->nilai) }}" alt="{{ $item->label }}" class="img-thumbnail" style="max-height: 100px;">
                                                    </div>
                                                @endif
                                            @elseif($item->tipe === 'json')
                                                <textarea name="{{ $item->kunci }}" class="form-control" rows="5" readonly>{{ $item->nilai }}</textarea>
                                                <small class="text-muted">Edit melalui menu khusus.</small>
                                            @endif
                                        </div>
                                    </div>
                                    <hr>
                                @endforeach
                            </div>

                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save mr-1"></i>Simpan Perubahan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script>
    // Update file input label
    document.querySelectorAll('.custom-file-input').forEach(input => {
        input.addEventListener('change', function() {
            const fileName = this.files[0]?.name || 'Pilih file...';
            this.nextElementSibling.textContent = fileName;
        });
    });
</script>
@endpush