@extends('admin.layouts.master')

@section('title', 'Cấu hình website')

@section('content')
<div class="content-page"><div class="content"><div class="container-fluid">
<form method="POST" action="{{ route('admin.site-settings.update') }}" enctype="multipart/form-data">
    @csrf @method('PUT')
    @if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
    @if($errors->any())<div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif

    <div class="card"><div class="card-header"><h4 class="mb-0">Hiển thị tài nguyên</h4></div><div class="card-body">
        <div class="form-check form-switch"><input type="checkbox" class="form-check-input" id="randomize_resources" name="randomize_resources" value="1" @checked(old('randomize_resources', $setting->randomize_resources))><label class="form-check-label" for="randomize_resources">Random tài nguyên theo ngày</label></div>
        <small class="text-muted">Bật: thứ tự thay đổi mỗi ngày. Tắt: tài nguyên mới nhất hiển thị trước.</small>
    </div></div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center"><h4 class="mb-0">Banner trang chủ</h4><button type="button" class="btn btn-sm btn-primary" id="add-banner">+ Thêm banner</button></div>
        <div class="card-body"><div class="row" id="banner-list">
            @foreach($banners as $banner)
            <div class="col-md-6 mb-3 banner-card"><div class="border rounded p-3 h-100">
                <img src="{{ asset($banner->image) }}" class="d-block mb-2 rounded" style="width:100%;height:120px;object-fit:cover">
                <label class="form-label">Thay ảnh</label><input type="file" name="banners[{{ $banner->id }}][image]" class="form-control mb-2" accept="image/*">
                <label class="form-label">Link khi bấm</label><input type="url" name="banners[{{ $banner->id }}][url]" class="form-control mb-2" value="{{ old("banners.{$banner->id}.url", $banner->url) }}">
                <label class="form-label">Thứ tự</label><input type="number" min="0" name="banners[{{ $banner->id }}][sort_order]" class="form-control mb-2" value="{{ old("banners.{$banner->id}.sort_order", $banner->sort_order) }}">
                <div class="d-flex gap-3"><label><input type="checkbox" name="banners[{{ $banner->id }}][is_active]" value="1" @checked($banner->is_active)> Hiển thị</label><label class="text-danger"><input type="checkbox" name="delete_banners[{{ $banner->id }}]" value="1"> Xóa</label></div>
            </div></div>
            @endforeach
        </div></div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center"><div><h4 class="mb-0">Popup tùy chỉnh</h4><small>Popup “BÁO CÁO SẾP” là mặc định và luôn hiện trước.</small></div><button type="button" class="btn btn-sm btn-primary" id="add-popup">+ Thêm popup</button></div>
        <div class="card-body"><div id="popup-list">
            @foreach($popups as $popup)
                @include('admin.site_settings._popup_fields', ['prefix' => "popups[{$popup->id}]", 'popup' => $popup, 'deleteName' => "delete_popups[{$popup->id}]"])
            @endforeach
        </div></div>
    </div>

    <div class="card"><div class="card-header"><h4 class="mb-0">Chế độ bảo trì</h4></div><div class="card-body">
        <div class="form-check form-switch mb-3"><input type="checkbox" class="form-check-input" id="maintenance_enabled" name="maintenance_enabled" value="1" @checked(old('maintenance_enabled', $setting->maintenance_enabled))><label class="form-check-label" for="maintenance_enabled">Chặn người dùng truy cập website</label></div>
        <textarea class="form-control" name="maintenance_message" rows="3">{{ old('maintenance_message', $setting->maintenance_message) }}</textarea>
    </div></div>
    <button class="btn btn-primary mb-4" type="submit">Lưu cấu hình</button>
</form>
</div></div></div>

<template id="banner-template"><div class="col-md-6 mb-3 banner-card"><div class="border border-primary rounded p-3 h-100">
    <button type="button" class="btn btn-sm btn-danger float-end remove-new-item">Xóa</button><h5>Banner mới</h5>
    <label class="form-label">Ảnh banner</label><input type="file" data-name="image" class="form-control mb-2" accept="image/*" required>
    <label class="form-label">Link khi bấm</label><input type="url" data-name="url" class="form-control mb-2">
    <label class="form-label">Thứ tự</label><input type="number" min="0" data-name="sort_order" class="form-control mb-2" value="0">
    <label><input type="checkbox" data-name="is_active" value="1" checked> Hiển thị</label>
</div></div></template>

<template id="popup-template"><div class="border border-primary rounded p-3 mb-3 popup-card">
    <button type="button" class="btn btn-sm btn-danger float-end remove-new-item">Xóa</button><h5>Popup mới</h5>
    <div class="row"><div class="col-md-9 mb-2"><label>Tiêu đề</label><input data-name="title" class="form-control" required></div><div class="col-md-3 mb-2"><label>Thứ tự</label><input type="number" min="0" data-name="sort_order" class="form-control" value="0"></div><div class="col-12 mb-2"><label>Nội dung (dùng :date để chèn ngày)</label><textarea data-name="message" class="form-control" rows="2"></textarea></div><div class="col-md-6 mb-2"><label>Dòng phụ</label><input data-name="subtitle" class="form-control"></div><div class="col-md-6 mb-2"><label>Chữ trên nút</label><input data-name="button_text" class="form-control" value="OK! Tuyệt vời" required></div><div class="col-12 mb-2"><label>Link nút (có thể để trống)</label><input type="url" data-name="button_url" class="form-control"></div></div>
    <label><input type="checkbox" data-name="is_active" value="1" checked> Hiển thị</label>
</div></template>
@endsection

@push('css')<style>.popup-card label{margin-bottom:4px}.gap-3{gap:1rem}</style>@endpush
@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    let bannerIndex = 0, popupIndex = 0;
    function addFromTemplate(templateId, targetId, group, index) {
        const fragment = document.getElementById(templateId).content.cloneNode(true);
        fragment.querySelectorAll('[data-name]').forEach(el => el.name = `${group}[${index}][${el.dataset.name}]`);
        document.getElementById(targetId).appendChild(fragment);
    }
    document.getElementById('add-banner').onclick = () => addFromTemplate('banner-template', 'banner-list', 'new_banners', bannerIndex++);
    document.getElementById('add-popup').onclick = () => addFromTemplate('popup-template', 'popup-list', 'new_popups', popupIndex++);
    document.addEventListener('click', e => { if (e.target.classList.contains('remove-new-item')) e.target.closest('.banner-card,.popup-card').remove(); });
});
</script>
@endpush