@extends('layout.app')
@section('_style')
    <!-- Bootstrap fileupload css -->
    <link href="{{ asset(('assets/plugins/bootstrap-fileupload/bootstrap-fileupload.css')) }}" rel="stylesheet"/>
    <style>
        /* Màn Cài đặt chung SUPER ADMIN - nhóm cài đặt theo khối (.sa-*), đồng bộ bộ .crm-list-* dùng chung */
        label.required:after { content: " *"; color: var(--crm-danger); }

        .sa-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 24px 0; }
        .sa-section { border: 1px solid var(--crm-border-soft); border-radius: 12px; background: var(--crm-surface); }
        .sa-section__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--crm-border-soft); }
        .sa-section__icon {
            display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 10px; background: #F3E8FF; color: #7C3AED;
        }
        .sa-section__icon--blue { background: #e0f2fe; color: #0369a1; }
        .sa-section__icon--green { background: var(--crm-success-soft); color: #047857; }
        .sa-section__icon--amber { background: #fef3c7; color: #b45309; }
        .sa-section__title { margin: 0; color: var(--crm-text-strong); font-size: 15px; font-weight: 700; }
        .sa-section__desc { display: block; color: var(--crm-text-muted); font-size: 12px; }
        .sa-section__body { padding: 16px 18px 4px; }

        .sa-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 16px; }
        .sa-col-6 { grid-column: span 6; }
        .sa-col-4 { grid-column: span 4; }
        .sa-col-3 { grid-column: span 3; }
        .sa-col-12 { grid-column: span 12; }
        .sa-body .form-group > label { margin-bottom: 6px; }
        .sa-body .help-block { display: block; min-height: 0; margin-top: 4px; color: var(--crm-text-muted); font-size: 12px; }
        .sa-body .has-error .help-block, .sa-body .help-block:not(:empty) { color: var(--crm-danger); }
        .sa-hint { display: block; margin-top: 6px; color: var(--crm-text-muted); font-size: 12px; }

        /* Ô màu: ô nhập mã màu + ô xem trước */
        .sa-color { display: flex; align-items: center; gap: 8px; }
        .sa-color__swatch { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--crm-border); border-radius: 8px; background: #fff; }

        /* Khối cấu hình V9tech */
        .sa-subpanel { margin-bottom: 12px; padding: 14px 14px 2px; border: 1px dashed #c4b5fd; border-radius: 10px; background: #faf5ff; }
        .sa-subpanel__title { margin-bottom: 10px; color: #6d28d9; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

        /* Công tắc (dùng cho checkbox, vẫn giữ nguyên name/value để submit như cũ) */
        .sa-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--crm-border-soft); border-radius: 10px; background: var(--crm-surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
        .sa-switch:hover { border-color: #c4b5fd; }
        .sa-switch__text { color: var(--crm-text-strong); font-size: 13px; font-weight: 600; line-height: 1.35; }
        .sa-switch__text small { display: block; color: var(--crm-text-muted); font-size: 11px; font-weight: 500; }
        .sa-switch input { position: absolute; opacity: 0; pointer-events: none; }
        .sa-switch__track { position: relative; flex: 0 0 40px; width: 40px; height: 22px; border-radius: 999px; background: #cbd5e1; transition: background-color .15s ease; }
        .sa-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); transition: transform .15s ease; }
        .sa-switch input:checked + .sa-switch__track { background: #7C3AED; }
        .sa-switch input:checked + .sa-switch__track::after { transform: translateX(18px); }
        .sa-switch input:focus-visible + .sa-switch__track { box-shadow: 0 0 0 3px rgba(124, 58, 237, .25); }
        .sa-switch.is-on { border-color: #c4b5fd; background: #faf5ff; }
        /* crm-2026-global.css ép mọi label thành block + chữ đậm -> giữ bố cục công tắc dạng hàng ngang */
        .crm-2026 .sa-body label.sa-switch { display: flex !important; margin-bottom: 0 !important; font-weight: 400 !important; }
        .crm-2026 .sa-switch__track { display: inline-block !important; }
        /* Nút phụ trong form (Chọn ảnh, Quản lý mẫu tin): nền tím nhạt như nút phụ ở header */
        .crm-2026 .sa-body .btn-light { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(124,58,237,.18) !important; background: #F3E8FF !important; color: #7C3AED !important; }
        .crm-2026 .sa-body .btn-light:hover { border-color: #7C3AED !important; background: #7C3AED !important; color: #fff !important; }
        .sa-switch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }

        /* Thanh lưu dính cuối trang */
        .sa-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 24px; border-top: 1px solid var(--crm-border-soft); background: rgba(255,255,255,.96); backdrop-filter: blur(4px); }
        .sa-savebar__note { color: var(--crm-text-muted); font-size: 12px; }
        .sa-savebar .btn { min-width: 140px; }

        @media (max-width: 1199.98px) {
            .sa-col-3 { grid-column: span 6; }
            .sa-switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 767.98px) {
            .sa-body { padding: 14px 12px 0; }
            .sa-col-6, .sa-col-4, .sa-col-3 { grid-column: span 12; }
            .sa-switch-grid { grid-template-columns: minmax(0, 1fr); }
            .sa-savebar { padding: 12px; }
        }
    </style>
@endsection
@section('content')
    @php
        $permissions = setting('permissions');
        $znsDrivers = \App\Services\Zns\ZnsManager::drivers();
        $znsDriver = \App\Services\Zns\ZnsManager::currentDriver();
        $hasPerm = function ($key) use ($permissions) {
            return !empty($permissions) && in_array($key, $permissions);
        };
        // Danh sách chức năng có thể ẩn: [value gửi lên (giữ nguyên như cũ), nhãn, mô tả ngắn]
        $hideableFeatures = [
            ['sms.index', 'Quản lý tin nhắn', 'Menu SMS / tin nhắn'],
            ['package.index', 'Quản lý gói nạp ví', 'Danh sách gói nạp ví'],
            ['package.customer', 'Quản lý nạp tiền', 'Tab ví tiền ở chi tiết khách hàng'],
            ['settings.index', 'Hạn mức thăng hạng rank', 'Cấu hình rank khách hàng'],
            ['promotions.index', 'Voucher khuyến mại', 'Quản lý voucher'],
            ['landipages.index', 'Quản lý landing page', 'Trang đích quảng cáo'],
            ['posts.index', 'Quản lý optin form', 'Form thu thập khách hàng'],
            ['customer-post.index', 'Khách hàng từ form', 'Danh sách khách từ form'],
            ['rules.index', 'Quản lý automation', 'Kịch bản tự động'],
            ['the_last', 'Xem thông báo', 'Chuông thông báo'],
            ['comment.edit', 'Tắt sửa trao đổi', 'Không cho sửa / xoá tin trao đổi'],
        ];
    @endphp
    <div class="col-md-12 col-lg-12">
        <div class="card crm-list-card">
            <div class="card-header crm-list-header">
                <h3 class="card-title"><i class="fas fa-cogs"></i> Cài đặt chung SUPER ADMIN</h3>
            </div>

            {!! Form::open(array('url' => route('settings.storeAdmin'), 'method' => 'post', 'files'=> true,'id'=>'fvalidate','class'=>'sent-sms')) !!}
            <div class="sa-body">
                {{-- ===== Thông tin hệ thống ===== --}}
                <section class="sa-section">
                    <div class="sa-section__head">
                        <span class="sa-section__icon"><i class="fas fa-globe"></i></span>
                        <div>
                            <h4 class="sa-section__title">Thông tin hệ thống</h4>
                            <span class="sa-section__desc">Tiêu đề, hạn sử dụng, màu và logo hiển thị trên toàn hệ thống</span>
                        </div>
                    </div>
                    <div class="sa-section__body">
                        <div class="sa-grid">
                            <div class="sa-col-6">
                                <div class="form-group">
                                    {!! Form::label('title_website', 'Tiêu đề website', array('class' => 'control-label required')) !!}
                                    {!! Form::text('title_website',setting('title_website'), array('class' => 'form-control')) !!}
                                    <span class="help-block">{{ $errors->first('title_website', ':message') }}</span>
                                </div>
                            </div>
                            <div class="sa-col-3">
                                <div class="form-group">
                                    {!! Form::label('expiry', 'Ngày hết hạn sử dụng', array('class' => 'control-label required')) !!}
                                    {!! Form::text('expiry',setting('expiry'), array('class' => 'form-control','data-toggle' => 'datepicker','id'=>'date', 'autocomplete' => 'off')) !!}
                                    <span class="help-block">{{ $errors->first('expiry', ':message') }}</span>
                                </div>
                            </div>
                            <div class="sa-col-3">
                                <div class="form-group">
                                    {!! Form::label('default_color', 'Màu chủ đạo', array('class' => 'control-label')) !!}
                                    <div class="sa-color">
                                        <span class="sa-color__swatch js-color-swatch" style="background: {{ setting('default_color') ?: '#ffffff' }}"></span>
                                        {!! Form::text('default_color',setting('default_color'), array('class' => 'form-control js-color-input', 'placeholder' => '#7C3AED')) !!}
                                    </div>
                                    <span class="help-block">{{ $errors->first('default_color', ':message') }}</span>
                                </div>
                            </div>
                            <div class="sa-col-12">
                                <div class="form-group required {{ $errors->has('logo_website') ? 'has-error' : '' }}">
                                    {!! Form::label('logo_website', 'Ảnh đại diện (logo)') !!}
                                    {{-- Giữ nguyên cấu trúc plugin bootstrap-fileupload --}}
                                    <div class="fileupload fileupload-{{!empty(setting('logo_website')) ? 'exists' : 'new' }}"
                                         data-provides="fileupload">
                                        <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px">
                                            @if(!empty(setting('logo_website')))
                                                <img src="{{ setting('logo_website') }}" alt="image"/>
                                            @endif
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-light btn-file">
                                                <span class="fileupload-new"><i class="fas fa-image"></i> Chọn ảnh</span>
                                                <span class="fileupload-exists"><i class="fas fa-undo"></i> Thay đổi</span>
                                                <input type="file" name="logo_website" accept="image/*" class="btn-default upload"/>
                                            </button>
                                        </div>
                                    </div>
                                    <span class="help-block">{{ $errors->first('logo_website', ':message') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- ===== Tích hợp ZNS ===== --}}
                <section class="sa-section">
                    <div class="sa-section__head">
                        <span class="sa-section__icon sa-section__icon--blue"><i class="fas fa-comment-dots"></i></span>
                        <div>
                            <h4 class="sa-section__title">Tích hợp ZNS</h4>
                            <span class="sa-section__desc">Nhà cung cấp gửi tin Zalo Notification Service và mẫu tin</span>
                        </div>
                    </div>
                    <div class="sa-section__body">
                        <div class="sa-grid">
                            <div class="sa-col-4">
                                <div class="form-group">
                                    {!! Form::label('zns_driver', 'Nhà cung cấp gửi ZNS', array('class' => 'control-label')) !!}
                                    {!! Form::select('zns_driver', $znsDrivers, $znsDriver, array('class' => 'form-control', 'id' => 'zns_driver')) !!}
                                    <span class="help-block">{{ $errors->first('zns_driver', ':message') }}</span>
                                </div>
                            </div>
                            <div class="sa-col-6">
                                <div class="form-group">
                                    <label class="control-label">Mẫu tin ZNS</label>
                                    <a href="{{ route('zns-templates.index') }}" class="btn btn-light">
                                        <i class="fas fa-list"></i> Quản lý mẫu tin & tham số
                                    </a>
                                    <span class="sa-hint">Định nghĩa template ID và cấu trúc params cho từng sự kiện</span>
                                </div>
                            </div>
                            <div class="sa-col-12 zns-v9tech-config" style="{{ $znsDriver == \App\Services\Zns\ZnsManager::DRIVER_V9TECH ? '' : 'display:none' }}">
                                <div class="sa-subpanel">
                                    <div class="sa-subpanel__title"><i class="fas fa-plug"></i> Cấu hình V9tech</div>
                                    <div class="sa-grid">
                                        <div class="sa-col-6">
                                            <div class="form-group">
                                                {!! Form::label('v9tech_token', 'Access token (Bearer)', array('class' => 'control-label')) !!}
                                                {!! Form::text('v9tech_token',setting('v9tech_token'), array('class' => 'form-control')) !!}
                                                <span class="help-block">{{ $errors->first('v9tech_token', ':message') }}</span>
                                            </div>
                                        </div>
                                        <div class="sa-col-3">
                                            <div class="form-group">
                                                {!! Form::label('v9tech_customer_code', 'Mã khách hàng', array('class' => 'control-label')) !!}
                                                {!! Form::text('v9tech_customer_code',setting('v9tech_customer_code'), array('class' => 'form-control')) !!}
                                                <span class="help-block">{{ $errors->first('v9tech_customer_code', ':message') }}</span>
                                            </div>
                                        </div>
                                        <div class="sa-col-3">
                                            <div class="form-group">
                                                {!! Form::label('v9tech_callback_url', 'Callback URL', array('class' => 'control-label')) !!}
                                                {!! Form::text('v9tech_callback_url',setting('v9tech_callback_url'), array('class' => 'form-control')) !!}
                                                <span class="help-block">{{ $errors->first('v9tech_callback_url', ':message') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- ===== Tuỳ chọn dữ liệu ===== --}}
                <section class="sa-section">
                    <div class="sa-section__head">
                        <span class="sa-section__icon sa-section__icon--green"><i class="fas fa-sliders-h"></i></span>
                        <div>
                            <h4 class="sa-section__title">Tuỳ chọn dữ liệu</h4>
                            <span class="sa-section__desc">Quy tắc khi nhập dữ liệu khách hàng</span>
                        </div>
                    </div>
                    <div class="sa-section__body">
                        <div class="sa-switch-grid">
                            <label class="sa-switch {{ setting('accept_duplicate_phone') == 'on' ? 'is-on' : '' }}">
                                <span class="sa-switch__text">Đồng ý cho nhập số trùng<small>Cho phép tạo khách hàng có số điện thoại đã tồn tại</small></span>
                                <input type="checkbox" name="accept_duplicate_phone" {{setting('accept_duplicate_phone') == 'on' ? 'checked' : ''}}>
                                <span class="sa-switch__track"></span>
                            </label>
                        </div>
                        <span class="help-block">{{ $errors->first('accept_duplicate_phone', ':message') }}</span>
                    </div>
                </section>

                {{-- ===== Ẩn chức năng (name="permissions[]" - giữ nguyên value như cũ) ===== --}}
                <section class="sa-section">
                    <div class="sa-section__head">
                        <span class="sa-section__icon sa-section__icon--amber"><i class="fas fa-eye-slash"></i></span>
                        <div>
                            <h4 class="sa-section__title">Ẩn chức năng</h4>
                            <span class="sa-section__desc">Bật công tắc để ẩn chức năng tương ứng khỏi hệ thống</span>
                        </div>
                    </div>
                    <div class="sa-section__body">
                        <div class="sa-switch-grid" id="list-user">
                            @foreach($hideableFeatures as $i => $feature)
                                <label class="sa-switch {{ $hasPerm($feature[0]) ? 'is-on' : '' }}" for="perm_{{ $i }}">
                                    <span class="sa-switch__text">{{ $feature[1] }}<small>{{ $feature[2] }}</small></span>
                                    <input type="checkbox" id="perm_{{ $i }}" name="permissions[]"
                                           value="{{ $feature[0] }}" {{ $hasPerm($feature[0]) ? 'checked' : '' }}>
                                    <span class="sa-switch__track"></span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                </section>
            </div>

            <div class="sa-savebar">
                <span class="sa-savebar__note"><i class="fas fa-info-circle"></i> Các thay đổi áp dụng cho toàn hệ thống sau khi lưu.</span>
                <button type="submit" class="btn btn-primary" id="click-sent"><i class="fas fa-save"></i> Lưu cài đặt</button>
            </div>
            {{ Form::close() }}
        </div>
    </div>
@endsection
@section('_script')
    <script src="{{ asset('assets/plugins/bootstrap-fileupload/bootstrap-fileupload.js') }}"></script>
    <script src="{{asset('js/format-number.js')}}"></script>
    <script>
        $(document).on('keyup', '.number', function () {
            let earn = $(this).val();
            $(this).val(formatNumber(earn));
        })
        $('[data-toggle="datepicker"]').datepicker({
            format: 'yyyy-mm-dd',
            autoHide: true,
            zIndex: 2048,
        });
        // Chỉ hiện cấu hình V9tech khi chọn driver V9tech
        $(document).on('change', '#zns_driver', function () {
            $('.zns-v9tech-config').toggle($(this).val() === '{{ \App\Services\Zns\ZnsManager::DRIVER_V9TECH }}');
        });
        // Tô sáng thẻ công tắc đang bật
        $(document).on('change', '.sa-switch input[type=checkbox]', function () {
            $(this).closest('.sa-switch').toggleClass('is-on', this.checked);
        });
        // Xem trước màu chủ đạo khi gõ mã màu
        $(document).on('input', '.js-color-input', function () {
            $('.js-color-swatch').css('background', $(this).val() || '#ffffff');
        });
    </script>
@endsection