@extends('dasgboard.layouts.app')

@section('title', $title)

@section('content')
    <div class="page-heading">
        <div>
            <h1>{{ $title }}</h1>
            <p>{{ $description }}</p>
        </div>
    </div>
    @if (session('success'))
        <div class="settings-alert">{{ session('success') }}</div>
    @endif

    @if (request()->routeIs('admin.site-settings'))
        <form method="POST" action="{{ route('admin.site-settings.visibility') }}">
            @csrf
            @method('PUT')
            <section class="visibility-panel">
                <div class="visibility-toolbar">
                    <strong>মোট {{ count($sectionDefinitions) }}টি বিভাগ</strong>
                    <div class="bulk-actions">
                        <button id="enableAll" type="button">সব চালু করুন</button>
                        <button id="disableAll" type="button">সব বন্ধ করুন</button>
                    </div>
                </div>
                <div class="section-list">
                    @foreach ($sectionDefinitions as $slug => $label)
                        @php($isEnabled = $savedSettings->get($slug, true))
                        <label class="section-row" id="{{ $slug }}">
                            <span class="section-copy">
                                <strong>{{ $label }}</strong>
                                <small class="status-text">{{ $isEnabled ? 'চালু আছে' : 'বন্ধ আছে' }}</small>
                            </span>
                            <span class="switch">
                                <input class="section-checkbox" type="checkbox" name="active_sections[]"
                                    value="{{ $slug }}" @checked($isEnabled)>
                                <span class="slider"></span>
                            </span>
                        </label>
                    @endforeach
                </div>
                <button class="visibility-save" type="submit">
                    <i class="fa-solid fa-floppy-disk"></i> অবস্থা সংরক্ষণ করুন
                </button>
            </section>
        </form>
    @else
        <section class="panel" style="max-width:720px">
            <div class="panel-head"><h2>অ্যাডমিন অ্যাকাউন্ট</h2></div>
            <form method="POST" action="{{ route('admin.settings.update') }}">
                @csrf @method('PUT')
                <label class="profile-field">নাম<input name="name" value="{{ old('name', auth()->user()->name) }}" required></label>
                <label class="profile-field">ইমেইল<input type="email" name="email" value="{{ old('email', auth()->user()->email) }}" required></label>
                <label class="profile-field">নতুন পাসওয়ার্ড<input type="password" name="password" minlength="8" placeholder="পরিবর্তন না করলে খালি রাখুন"></label>
                <label class="profile-field">পাসওয়ার্ড নিশ্চিত করুন<input type="password" name="password_confirmation" minlength="8"></label>
                @if ($errors->any())<p style="color:#b42318">{{ $errors->first() }}</p>@endif
                <button class="profile-save" type="submit">প্রোফাইল আপডেট করুন</button>
            </form>
        </section>
    @endif
@endsection

@push('styles')
    <style>
        .settings-alert{margin-bottom:18px;padding:12px 15px;border-radius:9px;background:#dcfce7;color:#15803d}.visibility-panel{padding:22px;background:#fff;border:1px solid #cde9d5;border-radius:16px;box-shadow:0 8px 28px #0f172a0d}.visibility-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.visibility-toolbar>strong{font-size:17px}.bulk-actions{display:flex;gap:9px}.bulk-actions button{padding:10px 14px;border:1px solid #cde9d5;border-radius:9px;background:#fff;color:#1f6047;cursor:pointer;font:inherit}.bulk-actions button:hover{background:#e6f0e9}.section-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.section-row{scroll-margin-top:94px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:92px;padding:17px 18px;border:1px solid #cde9d5;border-radius:13px;background:#fff;cursor:pointer}.section-row:hover{background:#f5f8f5}.section-copy strong{display:block;font-size:18px}.section-copy small{display:block;margin-top:5px;color:#617268}.switch{position:relative;flex:0 0 52px;width:52px;height:30px}.switch input{position:absolute;opacity:0;pointer-events:none}.slider{position:absolute;inset:0;border-radius:99px;background:#cbd5e1;transition:.2s}.slider:before{content:'';position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 7px #0003;transition:.2s}.switch input:checked+.slider{background:#1f6047}.switch input:checked+.slider:before{transform:translateX(22px)}.visibility-save,.profile-save{margin-top:18px;padding:12px 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#1f6047,#2f765c);color:#fff;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 8px 18px #1f60472e}.profile-field{display:grid;gap:6px;margin-bottom:15px;font-weight:600}.profile-field input{padding:11px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;font-weight:400}.profile-save{padding:11px 16px}@media(max-width:850px){.section-list{grid-template-columns:1fr}}@media(max-width:560px){.visibility-toolbar{align-items:flex-start;flex-direction:column}.bulk-actions{width:100%}.bulk-actions button{flex:1}.visibility-panel{padding:15px}.section-row{min-height:82px}}
    </style>
@endpush

@if (request()->routeIs('admin.site-settings'))
@push('scripts')
<script>
    const sectionCheckboxes = document.querySelectorAll('.section-checkbox');
    const updateStatusText = checkbox => {
        checkbox.closest('.section-row').querySelector('.status-text').textContent =
            checkbox.checked ? 'চালু আছে' : 'বন্ধ আছে';
    };
    sectionCheckboxes.forEach(checkbox => checkbox.addEventListener('change', () => updateStatusText(checkbox)));
    document.getElementById('enableAll').addEventListener('click', () => {
        sectionCheckboxes.forEach(checkbox => { checkbox.checked = true; updateStatusText(checkbox); });
    });
    document.getElementById('disableAll').addEventListener('click', () => {
        sectionCheckboxes.forEach(checkbox => { checkbox.checked = false; updateStatusText(checkbox); });
    });
</script>
@endpush
@endif