<?php
if (Auth('admin')->User()->dashboard_style == 'light') {
    $text = 'dark';
    $bg = 'light';
} else {
    $text = 'light';
    $bg = 'dark';
}
?>
@extends('layouts.app')
@section('content')
<style>
    .settings-modern-page {
        --settings-primary: var(--brand-primary, {{ $settings->brand_primary_color ?? '#f7931a' }});
        --settings-secondary: var(--brand-secondary, {{ $settings->brand_secondary_color ?? '#155c9d' }});
        --settings-accent: var(--brand-accent, {{ $settings->brand_accent_color ?? '#0f766e' }});
        --settings-dark: var(--brand-dark, {{ $settings->brand_dark_color ?? '#102033' }});
        --settings-light: var(--brand-light, {{ $settings->brand_light_color ?? '#fff7ed' }});
        margin: -0.5rem -1rem 0;
        padding: 1.4rem;
        min-height: calc(100vh - 8rem);
        background:
            linear-gradient(125deg, rgba(21, 92, 157, .13), transparent 28%),
            linear-gradient(235deg, rgba(247, 147, 26, .16), transparent 32%),
            linear-gradient(0deg, rgba(15, 118, 110, .11), transparent 38%),
            linear-gradient(135deg, #f8fbff 0%, #eef4ff 52%, #fffaf2 100%);
        color: var(--settings-dark);
    }

    .settings-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: center;
        border-radius: 24px;
        padding: 1.35rem;
        color: #fff;
        background: linear-gradient(135deg, var(--settings-secondary), var(--settings-accent) 58%, var(--settings-primary));
        box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
        overflow: hidden;
        position: relative;
    }

    .settings-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(120deg, rgba(255,255,255,.18), transparent 38%),
            linear-gradient(280deg, rgba(255,255,255,.12), transparent 42%);
        pointer-events: none;
    }

    .settings-hero > * {
        position: relative;
        z-index: 2;
    }

    .settings-badge {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .42rem .75rem;
        border-radius: 999px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.22);
        color: rgba(255,255,255,.9);
        font-size: .74rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: .65rem;
    }

    .settings-hero h1 {
        color: #fff;
        font-size: clamp(1.55rem, 2vw, 2.2rem);
        font-weight: 900;
        margin: 0;
        letter-spacing: 0;
    }

    .settings-hero p {
        margin: .5rem 0 0;
        max-width: 760px;
        color: rgba(255,255,255,.86);
        line-height: 1.65;
    }

    .settings-hero-actions {
        display: flex;
        gap: .65rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .settings-hero-btn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        border-radius: 14px;
        padding: .75rem 1rem;
        background: rgba(255,255,255,.16);
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.25);
        font-weight: 800;
        text-decoration: none !important;
        white-space: nowrap;
    }

    .settings-panel {
        margin-top: 1.25rem;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: 24px;
        background: rgba(255,255,255,.95);
        box-shadow: 0 16px 44px rgba(15, 23, 42, .08);
        overflow: hidden;
        backdrop-filter: blur(12px);
    }

    .settings-tabs {
        display: flex;
        gap: .65rem;
        padding: 1rem;
        background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92));
        border-bottom: 1px solid rgba(148, 163, 184, .18);
        overflow-x: auto;
    }

    .settings-tabs .nav-item {
        margin: 0;
    }

    .settings-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        border-radius: 14px;
        padding: .75rem .95rem;
        color: #475569;
        background: #fff;
        border: 1px solid rgba(148, 163, 184, .22);
        font-weight: 800;
        white-space: nowrap;
        transition: all .18s ease;
    }

    .settings-tabs .nav-link.active,
    .settings-tabs .nav-link:hover {
        color: #fff !important;
        background: var(--settings-primary) !important;
        border-color: var(--settings-primary) !important;
        box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
    }

    .settings-body {
        padding: 1.25rem;
    }

    .settings-modern-page .form-row {
        row-gap: .75rem;
    }

    .settings-modern-page h4,
    .settings-modern-page h5,
    .settings-modern-page h6 {
        color: var(--settings-dark);
        font-weight: 800;
        letter-spacing: 0;
    }

    .settings-modern-page .form-control,
    .settings-modern-page .select2-container .select2-selection {
        min-height: 46px;
        border-radius: 13px !important;
        border: 1px solid #dbe4ef !important;
        background: #fff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }

    .settings-modern-page .form-control:focus {
        border-color: var(--settings-primary) !important;
        box-shadow: 0 0 0 .18rem rgba(15, 23, 42, .08) !important;
    }

    .settings-modern-page .btn-primary,
    .settings-modern-page input[type="submit"].btn-primary {
        border: 0 !important;
        border-radius: 14px;
        background: var(--settings-primary) !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
        font-weight: 900;
    }

    .settings-modern-page .border {
        border-color: rgba(148, 163, 184, .28) !important;
        border-radius: 16px !important;
        background: #f8fafc;
    }

    .settings-alerts {
        margin-top: 1rem;
    }

    @media (max-width: 991px) {
        .settings-hero {
            grid-template-columns: 1fr;
        }

        .settings-hero-actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 575px) {
        .settings-modern-page {
            margin: -0.5rem -.75rem 0;
            padding: .95rem;
        }

        .settings-hero,
        .settings-body {
            padding: 1rem;
        }

        .settings-tabs {
            padding: .75rem;
        }
    }
</style>

<div class="settings-modern-page">
    <div class="settings-hero">
        <div>
            <span class="settings-badge">
                <i class="fas fa-sliders-h"></i>
                Control Center
            </span>
            <h1>App Settings</h1>
            <p>Manage website identity, preferences, email delivery, and brand colors from one polished settings workspace.</p>
        </div>
        <div class="settings-hero-actions">
            <a class="settings-hero-btn" href="{{ url('/') }}" target="_blank">
                <i class="fas fa-external-link-alt"></i>
                View Site
            </a>
        </div>
    </div>

    <div class="settings-alerts">
        <x-danger-alert />
        <x-success-alert />
        @if (count($errors) > 0)
            <div class="alert alert-danger alert-dismissable" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                @foreach ($errors->all() as $error)
                    <div><i class="fa fa-warning"></i> {{ $error }}</div>
                @endforeach
            </div>
        @endif
    </div>

    <div class="settings-panel">
        <ul class="nav nav-pills settings-tabs" role="tablist">
            <li class="nav-item">
                <a href="#info" class="nav-link active" data-toggle="tab">
                    <i class="fas fa-building"></i>
                    Website Information
                </a>
            </li>
            <li class="nav-item">
                <a href="#pref" class="nav-link" data-toggle="tab">
                    <i class="fas fa-cog"></i>
                    Preference
                </a>
            </li>
            <li class="nav-item">
                <a href="#email" class="nav-link" data-toggle="tab">
                    <i class="fas fa-envelope"></i>
                    Email
                </a>
            </li>
            <li class="nav-item">
                <a href="#colors" class="nav-link" data-toggle="tab">
                    <i class="fas fa-palette"></i>
                    Colors
                </a>
            </li>
        </ul>
        <div class="tab-content settings-body">
            <div class="tab-pane fade show active" id="info">
                @include('admin.Settings.AppSettings.webinfo')
            </div>
            <div class="tab-pane fade" id="pref">
                @include('admin.Settings.AppSettings.webpreference')
            </div>
            <div class="tab-pane fade" id="email">
                @include('admin.Settings.AppSettings.email')
            </div>
            <div class="tab-pane fade" id="colors">
                @include('admin.Settings.AppSettings.colors')
            </div>
        </div>
    </div>
</div>
            <script>
            $('.select2').select2();
            var themeForm = document.getElementById("themeForm");
            if (themeForm) {
                themeForm.addEventListener('submit', function(){
                    var themeBtn = document.getElementById("themeBtn");
                    var element = document.getElementById("loadingTheme");
                    if (themeBtn) {
                        themeBtn.disabled = true;
                    }
                    if (element) {
                        element.classList.remove("d-none");
                    }
                });
            }

            function changecurr() {
                var e = document.getElementById("select_c");
                var selected = e.options[e.selectedIndex].id;
                document.getElementById("s_c").value = selected;
                console.log(selected);
            }



            $('#updatepreference').on('submit', function() {
                //alert('love');
                $.ajax({
                    url: "{{ route('updatepreference') }}",
                    type: 'POST',
                    data: $('#updatepreference').serialize(),
                    success: function(response) {
                        if (response.status === 200) {
                            $.notify({
                                // options
                                icon: 'flaticon-alarm-1',
                                title: 'Success',
                                message: response.success,
                            }, {
                                // settings
                                type: 'success',
                                allow_dismiss: true,
                                newest_on_top: false,
                                placement: {
                                    from: "top",
                                    align: "right"
                                },
                                offset: 20,
                                spacing: 10,
                                z_index: 1031,
                                delay: 5000,
                                timer: 1000,
                                animate: {
                                    enter: 'animated fadeInDown',
                                    exit: 'animated fadeOutUp'
                                },

                            });
                        } else {

                        }
                    },
                    error: function(error) {
                        console.log(error);
                    },

                });
            });

            let sendmail = document.querySelector('#sendmailserver');
            let smtp = document.querySelector('#smtpserver');
            let smtptext = document.querySelectorAll('.smtp');
            //console.log(sendmail);
            if (sendmail) {
                sendmail.addEventListener('click', sortform);
            }
            if (smtp) {
                smtp.addEventListener('click', sortform);
            }

            if (smtp && smtp.checked) {
                smtptext.forEach(smtps => {
                    smtps.classList.remove('d-none');
                    smtps.setAttribute('required', '');
                });
            }

            function sortform() {
                if (sendmail && sendmail.checked) {
                    smtptext.forEach(element => {
                        element.classList.add('d-none');
                        element.removeAttribute('required', '');
                    });
                }
                if (smtp && smtp.checked) {
                    smtptext.forEach(smtps => {
                        smtps.classList.remove('d-none');
                        smtps.setAttribute('required', '');
                    });
                }
            }

            // Submit email preference form
            $('#emailform').on('submit', function() {
                //alert('love');
                $.ajax({
                    url: "{{ route('updateemailpreference') }}",
                    type: 'POST',
                    data: $('#emailform').serialize(),
                    success: function(response) {
                        if (response.status === 200) {
                            $.notify({
                                // options
                                icon: 'flaticon-alarm-1',
                                title: 'Success',
                                message: response.success,
                            }, {
                                // settings
                                type: 'success',
                                allow_dismiss: true,
                                newest_on_top: false,
                                placement: {
                                    from: "top",
                                    align: "right"
                                },
                                offset: 20,
                                spacing: 10,
                                z_index: 1031,
                                delay: 5000,
                                timer: 1000,
                                animate: {
                                    enter: 'animated fadeInDown',
                                    exit: 'animated fadeOutUp'
                                },

                            });
                        } else {

                        }
                    },
                    error: function(error) {
                        console.log(error);
                    },
                });
            });
        </script>
    
    @endsection
