@push('title')
    Settings
@endpush
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="../../assets/vendor/libs/bs-stepper/bs-stepper.css" />
<x-app-layout>

    <div class="alertbox">
        @if (session('success'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true" id="success-alert">
                <div class="toast-header bg-success">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('success') }}</div>
            </div>
        @endif

        @if (session('info'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="success-alert">
                <div class="toast-header bg-info">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('info') }}</div>
            </div>
        @endif

        @if (session('warning'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="success-alert">
                <div class="toast-header bg-warning">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('warning') }}</div>
            </div>
        @endif

        @if (session('danger'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="success-alert">
                <div class="toast-header bg-danger">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('danger') }}</div>
            </div>
        @endif
    </div>

    <div>
        <div class="bs-stepper wizard-vertical vertical wizard-vertical-icons-example mt-2">
            <div class="bs-stepper-header">
                <div class="step" data-target="#general-settings">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-circle">
                            <i class='bx bx-home-alt'></i>
                        </span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">General Settings</span>
                            <span class="bs-stepper-subtitle">Setup General Settings</span>
                        </span>
                    </button>
                </div>
                <div class="line"></div>
                <div class="step" data-target="#theme-settings">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-circle">
                            <i class='bx bxs-palette'></i>
                        </span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">Theme Settings</span>
                            <span class="bs-stepper-subtitle">Setup Theme Settings</span>
                        </span>
                    </button>
                </div>
                <div class="line"></div>
                <div class="step" data-target="#module-settings">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-circle">
                            <i class='bx bxs-objects-horizontal-left'></i>
                        </span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">Module Settings</span>
                            <span class="bs-stepper-subtitle">Setup Module Settings</span>
                        </span>
                    </button>
                </div>
                <div class="line"></div>
                <div class="step" data-target="#auth-settings">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-circle">
                            <i class='bx bxs-user-rectangle'></i>
                        </span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">Authentication Settings</span>
                            <span class="bs-stepper-subtitle">Setup User Authentications</span>
                        </span>
                    </button>
                </div>

            </div>
            <div class="bs-stepper-content">
                @include('settings.partials.general')
                @include('settings.partials.theme')
                @include('settings.partials.module')
                @include('settings.partials.auth')
            </div>


        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
    <script src="../../assets/vendor/libs/bs-stepper/bs-stepper.js"></script>
    <script src="../../assets/js/form-wizard-icons.js"></script>
    <script>
        $("#success-alert").fadeTo(5000, 500).slideUp(500, function() {
            $("#success-alert").slideUp(500);
        });
        var colorPicker = new iro.ColorPicker(".colorPicker", {
            width: 280,
            color: "#182535",
            borderWidth: 0,
            layoutDirection: "horizontal",
            layout: [{
                    component: iro.ui.Box,
                },
                {
                    component: iro.ui.Slider,
                    options: {
                        sliderType: 'hue'
                    }
                }
            ]
        });

        var values = document.getElementById("values");
        var hexInput = document.getElementById("hexInput");

        colorPicker.on(["color:init", "color:change"], function(color) {
            values.innerHTML = [
                "hex: " + color.hexString,
                "rgb: " + color.rgbString,
                "hsl: " + color.hslString,
            ].join("<br>");

            hexInput.value = color.hexString;
        });

        hexInput.addEventListener('change', function() {
            colorPicker.color.hexString = this.value;
            console.log(this.value);
        });
    </script>
    <script>
        document.getElementById('enable_recaptcha').addEventListener('change', function() {
            let keysDiv = document.getElementById('recaptcha-keys');
            keysDiv.style.display = this.value == '1' ? 'block' : 'none';
        });
    </script>
</x-app-layout>