@extends('admin.layout')
@section('title','Site Settings')
@section('page-title','Site Settings')

@push('styles')
<style>
.tab-btn{padding:10px 20px;border:2px solid #e2e8f0;border-radius:10px;background:white;cursor:pointer;font-size:13px;font-weight:600;color:#64748b;transition:all 0.15s;}
.tab-btn.active{background:var(--red);color:white;border-color:var(--red);}
.tab-pane{display:none;} .tab-pane.active{display:block;}
.setting-row{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid #f1f5f9;}
.setting-row:last-child{border:none;}
.setting-label{font-size:13px;font-weight:600;color:#374151;padding-top:9px;}
.setting-label small{display:block;font-size:11px;font-weight:400;color:#94a3b8;margin-top:2px;}
.img-preview{width:80px;height:80px;object-fit:contain;border-radius:8px;border:1px solid #e2e8f0;margin-bottom:8px;background:#f8fafc;}
</style>
@endpush

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

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
    <div>
        <h2 style="font-size:20px;font-weight:800;color:var(--navy);">Website Settings</h2>
        <p style="font-size:13px;color:#64748b;margin-top:2px;">Control every aspect of your website from here</p>
    </div>
    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save All Settings</button>
</div>

<!-- Tabs -->
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;">
    @foreach($groups as $gkey => $glabel)
    <button type="button" class="tab-btn {{ $loop->first ? 'active':'' }}" onclick="showTab('{{ $gkey }}')">{{ $glabel }}</button>
    @endforeach
</div>

@foreach($groups as $gkey => $glabel)
<div class="tab-pane {{ $loop->first ? 'active':'' }}" id="tab-{{ $gkey }}">
    <div class="card">
        <div class="card-header"><h3><i class="fas fa-{{ $gkey=='general'?'cog':($gkey=='contact'?'phone':($gkey=='social'?'share-alt':($gkey=='homepage'?'home':($gkey=='stats'?'chart-bar':'search')))) }}" style="color:var(--red);margin-right:8px;"></i>{{ $glabel }}</h3></div>
        <div class="card-body">
            @forelse($settings[$gkey] ?? [] as $s)
            <div class="setting-row">
                <div class="setting-label">
                    {{ $s->label }}
                    <small>{{ $s->key }}</small>
                </div>
                <div>
                    @if($s->type === 'image')
                        @if($s->value)
                        <img src="{{ asset('uploads/settings/'.$s->value) }}" class="img-preview"><br>
                        @endif
                        <input type="file" name="{{ $s->key }}" accept="image/*" style="font-size:13px;">
                        <div style="font-size:11px;color:#94a3b8;margin-top:4px;">Upload new image to replace. JPG/PNG/WebP, max 2MB.</div>
                    @elseif($s->type === 'textarea')
                        <textarea name="{{ $s->key }}" rows="3" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;resize:vertical;">{{ old($s->key, $s->value) }}</textarea>
                    @elseif($s->type === 'boolean')
                        <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;">
                            <input type="hidden" name="{{ $s->key }}" value="0">
                            <input type="checkbox" name="{{ $s->key }}" value="1" {{ $s->value ? 'checked':'' }} style="width:16px;height:16px;">
                            Enable
                        </label>
                    @else
                        <input type="{{ $s->type==='url'?'url':($s->type==='number'?'number':'text') }}" name="{{ $s->key }}" value="{{ old($s->key, $s->value) }}" style="width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;">
                    @endif
                </div>
            </div>
            @empty
            <p style="color:#94a3b8;font-size:13px;">No settings in this group.</p>
            @endforelse
        </div>
    </div>
</div>
@endforeach

<div style="position:sticky;bottom:0;background:white;border-top:1px solid #e2e8f0;padding:14px 20px;margin:20px -28px -28px;text-align:right;">
    <button type="submit" class="btn btn-primary" style="font-size:15px;padding:12px 32px;"><i class="fas fa-save"></i> Save All Settings</button>
</div>
</form>
@endsection

@push('scripts')
<script>
function showTab(id){
    document.querySelectorAll('.tab-pane').forEach(p=>p.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
    document.getElementById('tab-'+id).classList.add('active');
    event.target.classList.add('active');
}
</script>
@endpush