@extends('admin.layouts.main')

@section('title', 'Admin - Settings') 

@section('content')
        
<div class="container">
    <div class="page-inner">
        <div class="page-header d-flex align-items-center justify-content-between">
            <div>
                <div class="d-flex align-items-center">
                    <h3 class="fw-bold mb-3">Settings</h3>
                    <ul class="breadcrumbs mb-3 ml-3 d-flex align-items-center">
                        <li class="nav-home"><a href="#"><i class="icon-home"></i></a></li>
                        <li class="separator"><i class="icon-arrow-right"></i></li>
                        <li class="nav-item"><a href="#">Site Info</a></li>
                    </ul>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        @if(session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

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

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Site Name:</label>
                                        <input type="text" name="site_name" class="form-control" value="{{ $settings['site_name'] ?? '' }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Theme Color:</label>
                                        <input type="color" name="theme_color" class="form-control form-control-color" value="{{ $settings['theme_colour'] ?? '#000000' }}" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Header Logo:</label>
                                        <input type="file" name="header_logo" class="form-control" onchange="previewImage('header_logo_preview', this);">
                                        @if($settings && $settings['header_logo'])
                                            <img id="header_logo_preview" src="{{ asset('storage/' . $settings['header_logo']) }}" alt="Header Logo" class="img-fluid mt-2" style="max-width: 100px;">
                                        @endif
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Footer Logo:</label>
                                        <input type="file" name="footer_logo" class="form-control" onchange="previewImage('footer_logo_preview', this);">
                                        @if($settings && $settings['footer_logo'])
                                            <img id="footer_logo_preview" src="{{ asset('storage/' . $settings['footer_logo']) }}" alt="Footer Logo" class="img-fluid mt-2" style="max-width: 100px;">
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Favicon:</label>
                                        <input type="file" name="favicon" class="form-control" onchange="previewImage('favicon_preview', this);">
                                        @if($settings && $settings['favicon'])
                                            <img id="favicon_preview" src="{{ asset('storage/' . $settings['favicon']) }}" alt="Favicon" class="img-fluid mt-2" style="max-width: 50px;">
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection