@extends('layouts.admin.app')

@section('title', 'Thêm Trang Chính Sách')

@section('content')
    <div class="bg-white shadow-md rounded-lg p-6 fade-in">

        <h2 class="text-2xl font-bold text-gray-800 mb-6">Thêm Trang Chính Sách</h2>
        <div class="bg-white shadow rounded-lg p-6 space-y-6">
            <form id="policyForm" action="{{ route('admin.policy-pages.store') }}" method="POST" class="space-y-6">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Khóa<span class="text-red-500">*</span></label>
                        <input type="text" name="key" value="{{ old('key') }}" placeholder="VD: refund, privacy"
                            class="w-full border border-gray-300 rounded-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                        <small class="text-gray-500 text-xs">Khóa duy nhất, không trùng. VD: chinh-sach-doi-tra</small>
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Tiêu đề<span
                                class="text-red-500">*</span></label>
                        <input type="text" name="title" value="{{ old('title') }}"
                            placeholder="VD: Chính sách đổi trả"
                            class="w-full border border-gray-300 rounded-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Thứ tự hiển thị</label>
                        <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}"
                            class="w-full border border-gray-300 rounded-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 font-medium mb-2">Nội dung</label>
                    <div class="mb-2 flex gap-2">
                        <button type="button" id="btnUploadVideo"
                            class="px-3 py-1 rounded bg-green-600 text-white text-sm hover:bg-green-700">
                            Upload video
                        </button>
                        <input type="file" id="videoInput" accept="video/mp4,video/webm,video/quicktime" hidden>
                    </div>
                    <textarea id="content" name="content" rows="10"
                        class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">{{ old('content') }}</textarea>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                        class="w-4 h-4 text-blue-600 border-gray-300 rounded">
                    <label class="ml-2 text-gray-700">Hiển thị trên website</label>
                </div>

                <div class="flex justify-end space-x-3">
                    <a href="{{ route('admin.policy-pages.index') }}"
                        class="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">
                        Hủy
                    </a>
                    <button type="submit" class="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600">
                        Lưu trang
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script type="module" src="{{ asset('ckeditor5/new-ckeditor.js') }}"></script>

    <style>
        .ck-editor__editable {
            min-height: 400px !important;
        }
    </style>
    <script>
        $(document).ready(function() {
            $('#policyForm').on('submit', function(e) {
                e.preventDefault();

                const form = this;
                const $btn = $(form).find("button[type='submit']");
                const originalText = $btn.text().trim();
                const formData = new FormData(form);

                if (window.editorInstance) {
                    formData.append('content', window.editorInstance.getData());
                }

                $.ajax({
                    url: form.action,
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        setBtnLoading($btn, originalText);
                    },
                    success: function(res) {
                        showAlert('Thêm trang thành công!', 'success');
                        window.location.href = '/admin/policy-pages';
                    },
                    error: function(xhr) {
                        handleAjaxError(xhr);
                    },
                    complete: function () {
                        clearBtnLoading($btn, originalText);
                    }
                });
            });

            $('#btnUploadVideo').on('click', function() {
                $('#videoInput').click();
            });

            $('#videoInput').on('change', function() {
                var file = this.files[0];
                if (!file) return;

                var formData = new FormData();
                formData.append('file', file);
                formData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: '{{ route('news.upload-video') }}',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        if (res.url && window.editorInstance) {
                            var videoTag =
                                '<p><video controls style="width:100%;max-width:600px;"><source src="' +
                                res.url + '" type="' + file.type +
                                '">Trình duyệt không hỗ trợ video.</video></p>';
                            window.editorInstance.setData(window.editorInstance.getData() +
                                videoTag);
                        }
                    },
                    error: function() {
                        showAlert('Lỗi tải lên video.', 'error');
                    }
                });
            });
        });
    </script>
@endsection