@extends('backoffice.layouts.app')

@push('styles')
<style>
    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .setting-card {
        border: 1px solid rgba(99,102,241,.12) !important;
        box-shadow: 0 12px 30px rgba(15,23,42,.18);
        transition: all .25s ease;
    }

    .setting-card:hover {
        transform: translateY(-2px);
        border-color: rgba(99,102,241,.24) !important;
    }

    .card-header-custom {
        border-bottom: 1px solid rgba(148,163,184,.08);
        background: transparent;
    }

    .preview-box {
        border: 1px solid rgba(148,163,184,.08);
        border-radius: 16px;
        background: rgba(255,255,255,.03);
        padding: 1rem;
    }

    .preview-image {
        border-radius: 14px;
        border: 1px solid rgba(148,163,184,.1);
        background: rgba(255,255,255,.04);
        padding: .5rem;
        object-fit: contain;
    }

    .preview-logo {
        max-height: 56px;
        max-width: 220px;
    }

    .preview-icon {
        width: 56px;
        height: 56px;
    }

    .section-title {
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #94a3b8;
    }

    .submit-loading {
        display: inline-flex;
        align-items: center;
    }

    .status-card-item {
        padding: .9rem 1rem;
        border-radius: 14px;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(148,163,184,.06);
    }

    .notes-list li {
        margin-bottom: .6rem;
        color: #94a3b8;
    }
</style>
@endpush

@section('content')
<div class="container-xxl container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

        <div class="position-absolute top-0 end-0"
             style="
                width:240px;
                height:240px;
                background:
                radial-gradient(
                    circle,
                    rgba(99,102,241,.14) 0%,
                    transparent 72%
                );
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-3">

            <div>

                <h5 class="mb-1 text-white fw-semibold">
                    Website Settings
                </h5>

                <small class="text-body-secondary">
                    Manage website identity, SEO, media, and maintenance status
                </small>

            </div>

            <a href="{{ url('/') }}"
               target="_blank"
               rel="noopener"
               class="btn btn-primary">

                <i class="ti tabler-world me-1"></i>
                View Website

            </a>

        </div>

    </div>

    {{-- ALERT --}}
    @if (session('success'))

        <div class="alert alert-success alert-dismissible" role="alert">

            {{ session('success') }}

            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close">
            </button>

        </div>

    @endif

    @if (session('error'))

        <div class="alert alert-danger alert-dismissible" role="alert">

            {{ session('error') }}

            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close">
            </button>

        </div>

    @endif

    @if ($errors->any())

        <div class="alert alert-danger" role="alert">

            <div class="fw-semibold mb-1">
                Please check the form again.
            </div>

            <ul class="mb-0 ps-3">

                @foreach ($errors->all() as $error)

                    <li>{{ $error }}</li>

                @endforeach

            </ul>

        </div>

    @endif

    <form method="POST"
          action="{{ route('admin.settings.website.update') }}"
          enctype="multipart/form-data"
          id="websiteSettingForm">

        @csrf

        <div class="row g-4">

            {{-- LEFT --}}
            <div class="col-xl-8">

                <div class="card border-0 shadow-sm overflow-hidden glass-card setting-card h-100">

                    <div class="card-header card-header-custom">

                        <h5 class="card-title mb-1 text-white">
                            Configuration
                        </h5>

                        <small class="text-body-secondary">
                            Update public website information and assets
                        </small>

                    </div>

                    <div class="card-body pt-4">

                        {{-- BASIC --}}
                        <div class="mb-4">

                            <div class="section-title mb-3">
                                Basic Information
                            </div>

                            <div class="row g-3">

                                <div class="col-md-6">

                                    <label for="input_title"
                                           class="form-label text-white">

                                        Title

                                    </label>

                                    <input
                                        type="text"
                                        name="title"
                                        id="input_title"
                                        class="form-control @error('title') is-invalid @enderror"
                                        value="{{ old('title', $setting->title ?? '') }}"
                                        maxlength="100"
                                        required
                                    >

                                    @error('title')

                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>

                                    @enderror

                                </div>

                                <div class="col-md-6">

                                    <label for="input_judul"
                                           class="form-label text-white">

                                        Judul

                                    </label>

                                    <input
                                        type="text"
                                        name="judul"
                                        id="input_judul"
                                        class="form-control @error('judul') is-invalid @enderror"
                                        value="{{ old('judul', $setting->judul ?? '') }}"
                                        maxlength="100"
                                    >

                                    @error('judul')

                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>

                                    @enderror

                                </div>

                                <div class="col-12">

                                    <label for="input_deskripsi"
                                           class="form-label text-white">

                                        Deskripsi

                                    </label>

                                    <textarea
                                        name="deskripsi"
                                        id="input_deskripsi"
                                        rows="3"
                                        class="form-control @error('deskripsi') is-invalid @enderror"
                                        maxlength="255"
                                    >{{ old('deskripsi', $setting->deskripsi ?? '') }}</textarea>

                                    @error('deskripsi')

                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>

                                    @enderror

                                </div>

                                <div class="col-12">

                                    <label for="input_keyword"
                                           class="form-label text-white">

                                        Keyword

                                    </label>

                                    <input
                                        type="text"
                                        name="keyword"
                                        id="input_keyword"
                                        class="form-control @error('keyword') is-invalid @enderror"
                                        value="{{ old('keyword', $setting->keyword ?? '') }}"
                                        maxlength="255"
                                    >

                                    @error('keyword')

                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>

                                    @enderror

                                </div>

                            </div>

                        </div>

                        <hr class="my-4 border-secondary">

                        {{-- SYSTEM --}}
                        <div class="mb-4">

                            <div class="section-title mb-3">
                                System Configuration
                            </div>

                            <div class="row g-3">

                                <div class="col-md-8">

                                    <label for="input_url"
                                           class="form-label text-white">

                                        URL Website

                                    </label>

                                    <input
                                        type="url"
                                        name="urlweb"
                                        id="input_url"
                                        class="form-control @error('urlweb') is-invalid @enderror"
                                        value="{{ old('urlweb', $setting->urlweb ?? '') }}"
                                        maxlength="255"
                                        required
                                    >

                                    @error('urlweb')

                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>

                                    @enderror

                                </div>

                            </div>

                        </div>

                        <hr class="my-4 border-secondary">

                        {{-- MEDIA --}}
                        <div>

                            <div class="section-title mb-3">
                                Media Assets
                            </div>

                            <div class="row g-4">

                                {{-- LOGO --}}
                                <div class="col-md-6">

                                    <label for="input_logo"
                                           class="form-label text-white">

                                        Logo

                                    </label>

                                    <input
                                        type="file"
                                        name="logo"
                                        id="input_logo"
                                        class="form-control @error('logo') is-invalid @enderror"
                                        accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
                                    >

                                    <div class="form-text">
                                        Allowed: JPG, PNG, WEBP. Max 2MB.
                                    </div>

                                    @error('logo')

                                        <div class="invalid-feedback d-block">
                                            {{ $message }}
                                        </div>

                                    @enderror

                                    @if (!empty($setting->logo))

                                        <div class="preview-box mt-3">

                                            <div class="text-body-secondary small mb-2">
                                                Current Logo
                                            </div>

                                            <img
                                                src="{{ Storage::url($setting->logo) }}"
                                                alt="Current Logo"
                                                class="preview-image preview-logo"
                                                id="logoPreview"
                                            >

                                        </div>

                                    @endif

                                </div>

                                {{-- FAVICON --}}
                                <div class="col-md-6">

                                    <label for="input_favicon"
                                           class="form-label text-white">

                                        Favicon

                                    </label>

                                    <input
                                        type="file"
                                        name="favicon"
                                        id="input_favicon"
                                        class="form-control @error('favicon') is-invalid @enderror"
                                        accept=".png,.ico,image/png,image/x-icon"
                                    >

                                    <div class="form-text">
                                        Allowed: PNG, ICO. Max 1MB.
                                    </div>

                                    @error('favicon')

                                        <div class="invalid-feedback d-block">
                                            {{ $message }}
                                        </div>

                                    @enderror

                                    @if (!empty($setting->favicon))

                                        <div class="preview-box mt-3">

                                            <div class="text-body-secondary small mb-2">
                                                Current Favicon
                                            </div>

                                            <img
                                                src="{{ Storage::url($setting->favicon) }}"
                                                alt="Current Favicon"
                                                class="preview-image preview-icon"
                                                id="faviconPreview"
                                            >

                                        </div>

                                    @endif

                                </div>

                                {{-- GIF ICON --}}
                                <div class="col-md-9">

                                    <label for="input_gificon"
                                           class="form-label text-white">

                                        GIF Icons

                                    </label>

                                    <input
                                        type="file"
                                        name="gificon"
                                        id="input_gificon"
                                        class="form-control @error('gificon') is-invalid @enderror"
                                        accept=".gif,.ico,image/gif,image/x-icon"
                                    >

                                    <div class="form-text">
                                        Allowed: GIF, ICO. Max 1MB.
                                    </div>

                                    @error('gificon')

                                        <div class="invalid-feedback d-block">
                                            {{ $message }}
                                        </div>

                                    @enderror

                                    @if (!empty($setting->gificon))

                                        <div class="preview-box mt-3">

                                            <div class="text-body-secondary small mb-2">
                                                Current Icon
                                            </div>

                                            <img
                                                src="{{ Storage::url($setting->gificon) }}"
                                                alt="Current GIF Icon"
                                                class="preview-image preview-icon"
                                                id="gifPreview"
                                            >

                                        </div>

                                    @endif

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="card-footer border-top d-flex justify-content-end">

                        <button type="submit"
                                id="websiteSubmitBtn"
                                class="btn btn-primary px-4">

                            <span class="submit-text">

                                <i class="ti tabler-device-floppy me-1"></i>
                                Save Changes

                            </span>

                            <span class="submit-loading d-none">

                                <span class="spinner-border spinner-border-sm me-1"
                                      role="status"
                                      aria-hidden="true">
                                </span>

                                Saving...

                            </span>

                        </button>

                    </div>

                </div>

            </div>

            {{-- RIGHT --}}
            <div class="col-xl-4">

                {{-- STATUS --}}
                <div class="card border-0 shadow-sm overflow-hidden glass-card setting-card mb-4">

                    <div class="card-header card-header-custom">

                        <h5 class="card-title mb-0 text-white">
                            Current Status
                        </h5>

                    </div>

                    <div class="card-body">

                        <div class="status-card-item mb-3 d-flex justify-content-between align-items-center">

                            <span class="text-body-secondary">
                                Website
                            </span>

                            @if ((int) ($setting->statusweb ?? 0) === 1)

                                <span class="badge bg-warning">
                                    Maintenance
                                </span>

                            @else

                                <span class="badge bg-success">
                                    Active
                                </span>

                            @endif

                        </div>

                        <div class="status-card-item mb-3">

                            <div class="text-body-secondary small mb-1">
                                URL
                            </div>

                            <a href="{{ $setting->urlweb ?? url('/') }}"
                               target="_blank"
                               rel="noopener">

                                {{ $setting->urlweb ?? url('/') }}

                            </a>

                        </div>

                        <div class="status-card-item">

                            <div class="text-body-secondary small mb-1">
                                Title
                            </div>

                            <div class="fw-semibold text-white">

                                {{ $setting->title ?? '-' }}

                            </div>

                        </div>

                    </div>

                </div>

                {{-- NOTES --}}
                <div class="card border-0 shadow-sm overflow-hidden glass-card setting-card">

                    <div class="card-header card-header-custom">

                        <h5 class="card-title mb-0 text-white">
                            Notes
                        </h5>

                    </div>

                    <div class="card-body">

                        <ul class="notes-list mb-0 ps-3">

                            <li>
                                Changes to logo and favicon apply after saving.
                            </li>

                            <li>
                                Maintenance mode blocks normal visitors.
                            </li>

                            <li>
                                Keep SEO description under 255 characters.
                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </form>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const form =
        document.getElementById('websiteSettingForm');

    const btn =
        document.getElementById('websiteSubmitBtn');

    if (form && btn) {

        form.addEventListener('submit', function () {

            btn.disabled = true;

            btn.querySelector('.submit-text')
                ?.classList.add('d-none');

            btn.querySelector('.submit-loading')
                ?.classList.remove('d-none');

        });

    }

    // =========================
    // IMAGE PREVIEW
    // =========================
    function bindPreview(inputId, previewId) {

        const input =
            document.getElementById(inputId);

        const preview =
            document.getElementById(previewId);

        if (!input || !preview) return;

        input.addEventListener('change', function (e) {

            const file =
                e.target.files[0];

            if (!file) return;

            preview.src =
                URL.createObjectURL(file);

        });

    }

    bindPreview('input_logo', 'logoPreview');
    bindPreview('input_favicon', 'faviconPreview');
    bindPreview('input_gificon', 'gifPreview');

});
</script>
@endpush