@extends('layouts.dashboard')

@section('page-title', 'Site Settings')

@section('content')
    <div class="content-card">
        <h5 class="card-title">
            <i class="fas fa-cog me-2"></i> Site Settings
        </h5>

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

            <div class="row">
                <!-- Logo Section -->
                <div class="col-lg-6 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="fas fa-image me-2"></i> Logo Management
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="text-center mb-4">
                                <img src="{{ asset('storage/' . ($settings['logo'] ?? 'images/logo.png')) }}"
                                    alt="Organization Logo" class="img-thumbnail mb-3" style="height: 120px;">
                                <h6>Current Logo</h6>
                            </div>

                            <div class="mb-3">
                                <label for="logo" class="form-label fw-bold">Upload New Logo</label>
                                <input class="form-control @error('logo') is-invalid @enderror" type="file"
                                    id="logo" name="logo">
                                <div class="form-text">
                                    Recommended size: 300x80 pixels. Maximum size: 2MB.<br>
                                    Supported formats: JPG, PNG, GIF
                                </div>
                                @error('logo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Organization Information -->
                <div class="col-lg-6 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="fas fa-building me-2"></i> Organization Information
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="organization_name" class="form-label fw-bold">Organization Name</label>
                                <input type="text" class="form-control @error('organization_name') is-invalid @enderror"
                                    id="organization_name" name="organization_name"
                                    value="{{ old('organization_name', $settings['organization_name'] ?? 'कोशी प्रदेश') }}">
                                @error('organization_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="address" class="form-label fw-bold">Address</label>
                                <input type="text" class="form-control @error('address') is-invalid @enderror"
                                    id="address" name="address"
                                    value="{{ old('address', $settings['address'] ?? 'कोशी प्रदेश') }}">
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Contact Information -->
                <div class="col-12 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="fas fa-address-card me-2"></i> Contact Information
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label fw-bold">Email Address</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                                            id="email" name="email"
                                            value="{{ old('email', $settings['email'] ?? 'info@koshimun.gov.np') }}">
                                    </div>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="phone" class="form-label fw-bold">Phone Number</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                        <input type="text" class="form-control @error('phone') is-invalid @enderror"
                                            id="phone" name="phone"
                                            value="{{ old('phone', $settings['phone'] ?? '014574921,014574922') }}">
                                    </div>
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Separate multiple numbers with commas</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- About Section -->
                <div class="col-12 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="fas fa-info-circle me-2"></i> About Information
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="description" class="form-label fw-bold">Organization Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                                    rows="5">{{ old('description', $settings['description'] ?? 'एक संरचना हो जसले डाटा सङ्ग्रह, भण्डारण, पुनःप्राप्ति, र सुरक्षाको प्रभावकारी व्यवस्थापन सम्भव बनाउँछ।') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">This description will be displayed in the contact section of the home
                                    page</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-end">
                <a href="{{ route('dashboard') }}" class="btn btn-secondary me-2">
                    <i class="fas fa-arrow-left me-1"></i> Back to Dashboard
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i> Save Changes
                </button>
            </div>
        </form>
    </div>
@endsection