@extends('adminlte::page')

@section('content')
    <div class="container">
        <h1>General Settings</h1>

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

        <form action="{{ route('general_settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                @foreach($settings->groupBy('category')->chunk(ceil($settings->groupBy('category')->count() / 2)) as $chunk)
                    <div class="col-md-6">
                        @foreach($chunk as $category => $group)
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h4 class="card-title"><b>{{ ucfirst($category) }}</b></h4>
                                </div>
                                <div class="card-body">
                                    @foreach($group as $setting)
                                        <div class="form-group">
                                            <label for="{{ $setting->key }}">{{ $setting->name ?? ucfirst($setting->key) }}</label>
                                            
                                            @if(strtolower($category) === 'appearance')
                                                <input 
                                                    type="file" 
                                                    name="{{ $setting->key }}" 
                                                    id="{{ $setting->key }}" 
                                                    class="form-control-file">
                                                @if($setting->value)
                                                    <div class="mt-2">
                                                        <img src="{{$setting->value}}" 
                                                             alt="Uploaded Image" 
                                                             style="max-width: 150px; max-height: 150px;">
                                                    </div>
                                                @endif
                                            @else
                                                {{-- Fallback to original type check --}}
                                                @if($setting->type === 'image')
                                                    <input 
                                                        type="file" 
                                                        name="{{ $setting->key }}" 
                                                        id="{{ $setting->key }}" 
                                                        class="form-control-file">
                                                    @if($setting->value)
                                                        <div class="mt-2">
                                                            <img src="{{$setting->value}}" 
                                                                 alt="Uploaded Image" 
                                                                 style="max-width: 150px; max-height: 150px;">
                                                        </div>
                                                    @endif
                                                @else
                                                    <input 
                                                        type="text" 
                                                        name="{{ $setting->key }}" 
                                                        id="{{ $setting->key }}" 
                                                        class="form-control" 
                                                        value="{{ $setting->value }}">
                                                @endif
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endforeach
            </div>
            <div style="padding-bottom:3%">
                <button type="submit" class="btn btn-primary mt-3"><i class="fas fa-save"></i>  Save Settings</button>
            </div>
        </form>
    </div>
@endsection