@extends('layouts.admin')

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

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

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

            {{-- Hidden inputs to handle image clearing --}}
            <input type="hidden" name="clear_background_image" id="clear_background_image" value="">
            <input type="hidden" name="clear_header_background" id="clear_header_background" value="">

            <div class="form-group">
                <label for="site_title">Site Title</label>
                <input type="text" name="site_title" id="site_title" class="form-control" value="{{ $settings['site_title'] }}" required>
            </div>

            <div class="form-group">
                <label for="site_subtitle">Site Subtitle</label>
                <input type="text" name="site_subtitle" id="site_subtitle" class="form-control" value="{{ $settings['site_subtitle'] }}">
            </div>

            <div class="form-group">
                <label for="background_image">Background Image</label>
                <input type="file" name="background_image" id="background_image" class="form-control">
                @if (isset($settings['background_image']) && $settings['background_image'])
                    <div class="position-relative mt-2" style="display: inline-block;">
                        <img src="{{ asset('storage/' . $settings['background_image']) }}" alt="Background Image" style="max-height: 200px; max-width:100%">
                        <button type="button" class="btn btn-danger btn-sm position-absolute" style="top: 5px; left: 5px; color:#fff" onclick="clearBackgroundImage()">&#10006;</button>
                    </div>
                @endif
            </div>

            <div class="form-group">
                <label for="color_code">Background Color Code</label>
                <input type="color" name="color_code" id="color_code" class="form-control" value="{{ $settings['color_code'] }}">
            </div>

            <div class="form-group">
                <label for="countdown_end_date">Countdown End Date</label>
                <input type="datetime-local" name="countdown_end_date" id="countdown_end_date" class="form-control" value="{{ $settings['countdown_end_date'] ? date('Y-m-d\TH:i', strtotime($settings['countdown_end_date'])) : '' }}">
            </div>

            <div class="form-group">
                <label for="closure_message">Closure Message</label>
                <textarea name="closure_message" id="closure_message" class="form-control">{{ $settings['closure_message'] }}</textarea>
            </div>

            <div class="form-group">
                <label for="subscription_text">Subscription Text</label>
                <input type="text" name="subscription_text" id="subscription_text" class="form-control" value="{{ $settings['subscription_text'] }}">
            </div>

            <div class="form-group">
                <label for="copyright_text">Copyright Text</label>
                <input type="text" name="copyright_text" id="copyright_text" class="form-control" value="{{ $settings['copyright_text'] }}">
            </div>

            <div class="form-group">
                <label for="header_background">Header Background</label>
                <input type="file" name="header_background" id="header_background" class="form-control">
                @if (isset($settings['header_background']) && $settings['header_background'])
                    <div class="position-relative mt-2" style="display: inline-block;">
                        <img src="{{ asset('storage/' . $settings['header_background']) }}" alt="Header Background" style="max-height: 200px; max-width:100%">
                        <button type="button" class="btn btn-danger btn-sm position-absolute" style="top: 5px; left: 5px; color:#fff" onclick="clearHeaderBackground()">&#10006;</button>
                    </div>
                @endif
            </div>

            <div class="form-group">
                <label for="header_height">Header Height</label>
                <input type="number" step="1" min="0" name="header_height" id="header_height" class="form-control" value="{{ $settings['header_height'] }}">
            </div>

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


    </div>

    <script>
        function clearBackgroundImage() {
            document.getElementById('clear_background_image').value = '1';
            document.getElementById('settingsForm').submit();
        }

        function clearHeaderBackground() {
            document.getElementById('clear_header_background').value = '1';
            document.getElementById('settingsForm').submit();
        }
    </script>
@endsection