@extends('layouts.admin.app')
@section('title', 'Add News')
@push('style')
<style>
    .news-form-card { background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 28px 32px; margin-top: 20px; }
    .news-form-card h2 { color: #fff; font-size: 22px; margin: 0 0 24px; }
    .news-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .form-group-admin { margin-bottom: 20px; }
    .form-group-admin > label { display: block; color: #ccc; font-size: 13px; margin-bottom: 8px; }
    .admin-input, .admin-textarea, .admin-select { width: 100%; background: #111; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; color: #fff; font-size: 14px; outline: none; }
    .admin-textarea { min-height: 120px; resize: vertical; }
    .admin-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
    .media-upload-zone { border: 2px dashed rgba(123,97,255,.45); border-radius: 16px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; text-align: center; padding: 24px; }
    .media-upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .media-upload-icon { color: #7b61ff; margin-bottom: 12px; }
    .media-upload-zone p { color: #888; margin: 4px 0 0; font-size: 13px; }
    #media-preview-img, #media-preview-video { max-width: 100%; max-height: 200px; border-radius: 12px; display: none; margin-bottom: 12px; }
    .news-form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); }
    .btn-news-cancel { color: #aaa; border: 1px solid rgba(255,255,255,.12); padding: 12px 24px; border-radius: 12px; text-decoration: none; }
    .btn-news-save { background: #22c55e; color: #fff; border: none; padding: 12px 28px; border-radius: 12px; cursor: pointer; font-weight: 600; }
    label.error { color: #f87171; font-size: 12px; margin-top: 6px; display: block; font-weight: 400; }
    .admin-input.error, .admin-textarea.error, .admin-select.error { border-color: #f87171 !important; }
    .media-upload-zone.error { border-color: #f87171 !important; }
    /* CKEditor dark theme */
    .ck.ck-editor { border-radius: 12px; overflow: hidden; }
    .ck.ck-toolbar { background: #1a1a1a !important; border-color: rgba(255,255,255,.08) !important; }
    .ck.ck-toolbar .ck-button { color: #ddd !important; }
    .ck.ck-toolbar .ck-button:hover, .ck.ck-toolbar .ck-button.ck-on { background: rgba(123,97,255,.25) !important; }
    .ck.ck-content.ck-editor__editable { background: #111 !important; color: #fff !important; border-color: rgba(255,255,255,.08) !important; min-height: 220px; }
    .ck.ck-editor__editable.ck-focused { border-color: rgba(123,97,255,.45) !important; box-shadow: none !important; }
    .ck.ck-editor__editable a { color: #7b61ff; }
    .content-editor.error + .ck.ck-editor .ck-editor__editable { border-color: #f87171 !important; }
    @media (max-width: 992px) { .news-form-grid { grid-template-columns: 1fr; } }
</style>
@endpush

@section('content')
<div class="content_area">
    @include('admin.layouts.alert')

    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <a href="{{ route('admin.news.index') }}">News</a>
        <span>›</span>
        <span class="active">Create News</span>
    </div>

    <div class="news-form-card">
        <h2>Create News</h2>

        <form id="newsCreateForm" action="{{ route('admin.news.store') }}" method="POST" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="news-form-grid">
                <div>
                    <div class="form-group-admin">
                        <label>Title</label>
                        <input type="text" name="title" id="title" class="admin-input" value="{{ old('title') }}" placeholder="Enter news title">
                    </div>
                    <div class="form-group-admin">
                        <label>League</label>
                        <select name="league_id" id="league_id" class="admin-select">
                            <option value="">Select league (optional)</option>
                            @foreach ($leagues as $league)
                                <option value="{{ $league->id }}" @selected(old('league_id') == $league->id)>{{ $league->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group-admin">
                        <label>Short Description</label>
                        <textarea name="short_description" id="short_description" class="admin-textarea" placeholder="Brief summary shown in listings...">{{ old('short_description') }}</textarea>
                    </div>
                    <div class="form-group-admin">
                        <label>Content</label>
                        <textarea name="content" id="content" class="admin-textarea content-editor" placeholder="Write the full news content...">{{ old('content') }}</textarea>
                    </div>
                </div>
                <div>
                    <div class="form-group-admin">
                        <label>Media Type</label>
                        <select name="media_type" id="media_type" class="admin-select">
                            <option value="1" @selected(old('media_type', '1') == '1')>Image</option>
                            <option value="2" @selected(old('media_type') == '2')>Video</option>
                            <option value="3" @selected(old('media_type') == '3')>Other</option>
                        </select>
                    </div>
                    <div class="form-group-admin">
                        <label>Status</label>
                        <select name="status" id="status" class="admin-select">
                            <option value="1" @selected(old('status', '1') == '1')>Active</option>
                            <option value="0" @selected(old('status') == '0')>Inactive</option>
                        </select>
                    </div>
                    <div class="form-group-admin">
                        <label>Published At</label>
                        <input type="datetime-local" name="published_at" id="published_at" class="admin-input" value="{{ old('published_at') }}">
                    </div>
                    <div class="form-group-admin">
                        <label>Upload Media</label>
                        <div style="margin-bottom:12px;">
                            <img id="media-preview-img" alt="">
                            <video id="media-preview-video" controls></video>
                        </div>
                        <div class="media-upload-zone" id="media-upload-zone">
                            <input type="file" name="media" id="media" accept="image/png,image/jpeg,video/mp4">
                            <div class="media-upload-icon">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M12 16V4m0 0L8 8m4-4l4 4M4 20h16" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <span style="color:#ccc;">Drag &amp; Drop media here</span>
                            <p>MP4, PNG, JPG up to 50MB</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news-form-actions">
                <a href="{{ route('admin.news.index') }}" class="btn-news-cancel">Cancel</a>
                <button type="submit" class="btn-news-save">Create News</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
<script>
    $(function () {
        const maxFileSize = 51200 * 1024;
        let contentEditor = null;

        ClassicEditor
            .create(document.querySelector('#content'), {
                toolbar: [
                    'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList',
                    '|', 'blockQuote', 'insertTable', '|', 'undo', 'redo'
                ]
            })
            .then(editor => {
                contentEditor = editor;
                // Keep the textarea in sync so jQuery validation reads the latest HTML.
                editor.model.document.on('change:data', () => editor.updateSourceElement());
            })
            .catch(err => console.error(err));

        $.validator.addMethod('validMedia', function (value, element) {
            if (!element.files || !element.files.length) return false;
            const file = element.files[0];
            const allowedTypes = ['image/png', 'image/jpeg', 'video/mp4'];
            const allowedExt = /\.(png|jpe?g|mp4)$/i;
            return allowedTypes.includes(file.type) && allowedExt.test(file.name) && file.size <= maxFileSize;
        }, 'Please upload a PNG, JPG, or MP4 file up to 50MB.');

        $('#newsCreateForm').validate({
            ignore: [],
            errorClass: 'error',
            errorElement: 'label',
            rules: {
                title: { required: true, maxlength: 255 },
                league_id: { digits: true },
                short_description: { maxlength: 5000 },
                content: { maxlength: 50000 },
                media_type: { required: true },
                status: { required: true },
                media: { required: true, validMedia: true }
            },
            messages: {
                title: {
                    required: 'Please enter news title.',
                    maxlength: 'Title cannot exceed 255 characters.'
                },
                media: {
                    required: 'Please upload media.',
                    validMedia: 'Please upload a PNG, JPG, or MP4 file up to 50MB.'
                }
            },
            errorPlacement: function (error, element) {
                if (element.attr('name') === 'media') {
                    error.insertAfter('#media-upload-zone');
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element) {
                if (element.name === 'media') {
                    $('#media-upload-zone').addClass('error');
                } else {
                    $(element).addClass('error');
                }
            },
            unhighlight: function (element) {
                if (element.name === 'media') {
                    $('#media-upload-zone').removeClass('error');
                } else {
                    $(element).removeClass('error');
                }
            },
            submitHandler: function (form) {
                form.submit();
            }
        });

        let previewUrl = null;
        $('#media').on('change', function () {
            const file = this.files[0];
            $(this).valid();
            if (!file) return;
            if (previewUrl) URL.revokeObjectURL(previewUrl);
            previewUrl = URL.createObjectURL(file);

            const img = document.getElementById('media-preview-img');
            const video = document.getElementById('media-preview-video');

            if (file.type.startsWith('video/')) {
                img.style.display = 'none';
                video.src = previewUrl;
                video.style.display = 'block';
                $('#media_type').val('2');
            } else {
                video.style.display = 'none';
                video.removeAttribute('src');
                img.src = previewUrl;
                img.style.display = 'block';
                $('#media_type').val('1');
            }
        });
    });
</script>
@endpush