@extends('layouts.admin.app')

@section('title', 'Create Sponsor Event')

@push('style')
<style>
    .event-form-card { background: #161616; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 28px 32px; margin-top: 20px; }
    .event-form-card h2 { color: #fff; font-size: 22px; margin: 0 0 24px; }
    .event-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .form-group-admin { margin-bottom: 20px; }
    .admin-input, .admin-textarea { 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: 260px; 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; }
    .event-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-event-cancel { color: #aaa; border: 1px solid rgba(255,255,255,.12); padding: 12px 24px; border-radius: 12px; text-decoration: none; }
    .btn-event-create { background: #7ed957; color: #000; border: none; padding: 12px 28px; border-radius: 20px; cursor: pointer; font-weight: 600; transition: 0.3s; }
    .btn-event-create:hover { background: #6fce46; }
    label.error { color: #f87171; font-size: 12px; margin-top: 6px; display: block; font-weight: 400; }
    .admin-input.error, .admin-textarea.error, .custom-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: 160px; }
    .ck.ck-editor__editable.ck-focused { border-color: rgba(123,97,255,.45) !important; box-shadow: none !important; }
    .ck.ck-content.ck-editor__editable a { color: #7b61ff; }
    .admin-textarea.error + .ck.ck-editor .ck-editor__editable { border-color: #f87171 !important; }
    /* CKEditor dropdown panels (Heading / Paragraph, etc.) */
    .ck.ck-dropdown__panel { background: #1a1a1a !important; border-color: rgba(255,255,255,.12) !important; }
    .ck.ck-list { background: #1a1a1a !important; }
    .ck.ck-list .ck-list__item .ck-button { color: #ddd !important; background: transparent !important; }
    .ck.ck-list .ck-list__item .ck-button .ck-button__label { color: #ddd !important; }
    .ck.ck-list .ck-list__item .ck-button:hover:not(.ck-disabled) { background: rgba(123,97,255,.25) !important; }
    .ck.ck-list .ck-list__item .ck-button.ck-on { background: rgba(123,97,255,.35) !important; color: #fff !important; }
    .ck.ck-list .ck-list__item .ck-button.ck-on .ck-button__label { color: #fff !important; }
    @media (max-width: 992px) { .event-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.events.index') }}">Events</a>
        <span>›</span>
        <span class="active">Create Event</span>
    </div>

    <div class="event-form-card">
        <h2>Create New Event</h2>

        <form id="eventCreateForm" action="{{ route('admin.events.store') }}" method="POST" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="event-form-grid">
                <div>
                    <div class="form-group-admin">
                        <label>Event Name</label>
                        <input type="text" name="title" id="title" class="admin-input" value="{{ old('title') }}" placeholder="Enter event name">
                    </div>
                    <div class="form-group-admin">
                        <label>Sponsor</label>
                        <div class="custom-select-wrapper">
                            <select name="sponsor_id" id="sponsor_id" class="custom-select">
                                <option value="">Select sponsor (optional)</option>
                                @foreach ($sponsors as $sponsor)
                                    <option value="{{ $sponsor->id }}" @selected(old('sponsor_id') == $sponsor->id)>{{ $sponsor->company_name }}</option>
                                @endforeach
                            </select>
                            <span class="select-arrow">▼</span>
                        </div>
                    </div>
                    <div class="form-group-admin">
                        <label>Start Date</label>
                        <input type="date" name="start_date" id="start_date" class="admin-input" value="{{ old('start_date') }}">
                    </div>
                    <div class="form-group-admin">
                        <label>Start Time (NZT)</label>
                        <input type="time" name="start_time" id="start_time" class="admin-input" value="{{ old('start_time') }}">
                    </div>
                    <div class="form-group-admin">
                        <label>End Date</label>
                        <input type="date" name="end_date" id="end_date" class="admin-input" value="{{ old('end_date') }}">
                    </div>
                    <div class="form-group-admin">
                        <label>End Time (NZT)</label>
                        <input type="time" name="end_time" id="end_time" class="admin-input" value="{{ old('end_time') }}">
                    </div>
                    <div class="form-group-admin">
                        <label>Location / Venue</label>
                        <input type="text" name="location" id="location" class="admin-input" value="{{ old('location') }}" placeholder="Auckland, NZ">
                    </div>
                    <div class="form-group-admin">
                        <label>Description</label>
                        <textarea name="description" id="description" class="admin-textarea content-editor" placeholder="Write a short summary or caption...">{{ old('description') }}</textarea>
                    </div>
                </div>
                <div>
                    <div class="form-group-admin">
                        <label>Upload Event Image (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 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_30861_7958)">
                                    <path d="M20 21.6641V34.9974" stroke="#7B61FF" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M6.66672 24.8313C3.27496 21.3659 2.38031 16.1638 4.4195 11.7645C6.45869 7.36508 11.0065 4.6857 15.843 5.03425C20.6795 5.38281 24.7961 8.68664 26.1834 13.333H29.1667C32.4706 13.3326 35.3857 15.4943 36.3447 18.656C37.3037 21.8177 36.0808 25.2345 33.3334 27.0696" stroke="#7B61FF" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M13.3335 28.3307L20.0002 21.6641L26.6668 28.3307" stroke="#7B61FF" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    </g>
                                </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="event-form-actions">
                <a href="{{ route('admin.events.index') }}" class="btn-event-cancel">Cancel</a>
                <button type="submit" class="btn-event-create">Create Sponsor Event</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;
        const timePattern = /^([01]\d|2[0-3]):([0-5]\d)$/;

        ClassicEditor
            .create(document.querySelector('#description'), {
                toolbar: [
                    'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList',
                    '|', 'blockQuote', 'insertTable', '|', 'undo', 'redo'
                ]
            })
            .then(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('validTime', function (value, element) {
            return this.optional(element) || timePattern.test(value);
        }, 'Please enter a valid time (HH:MM).');

        $.validator.addMethod('greaterThanOrEqualDate', function (value, element, param) {
            const start = $(param).val();
            if (!start || !value) return true;
            return value >= start;
        }, 'End date must be after or equal to start date.');

        $.validator.addMethod('greaterThanOrEqualTime', function (value, element) {
            const startDate = $('#start_date').val();
            const endDate = $('#end_date').val();
            const startTime = $('#start_time').val();
            if (!value || !startTime || startDate !== endDate) return true;
            return value >= startTime;
        }, 'End time must be after or equal to start time on the same day.');

        $.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.');

        $('#eventCreateForm').validate({
            ignore: [],
            errorClass: 'error',
            errorElement: 'label',
            rules: {
                title: { required: true, maxlength: 255 },
                sponsor_id: { digits: true },
                start_date: { required: true, date: true },
                start_time: { required: true, validTime: true },
                end_date: { required: true, date: true, greaterThanOrEqualDate: '#start_date' },
                end_time: { required: true, validTime: true, greaterThanOrEqualTime: true },
                location: { maxlength: 255 },
                description: { maxlength: 50000 },
                media: { required: true, validMedia: true }
            },
            messages: {
                title: {
                    required: 'Please enter event name.',
                    maxlength: 'Event name cannot exceed 255 characters.'
                },
                start_date: { required: 'Please select start date.' },
                start_time: {
                    required: 'Please select start time.',
                    validTime: 'Please enter a valid start time (HH:MM).'
                },
                end_date: {
                    required: 'Please select end date.',
                    greaterThanOrEqualDate: 'End date must be after or equal to start date.'
                },
                end_time: {
                    required: 'Please select end time.',
                    validTime: 'Please enter a valid end time (HH:MM).',
                    greaterThanOrEqualTime: 'End time must be after or equal to start time on the same day.'
                },
                location: { maxlength: 'Location cannot exceed 255 characters.' },
                description: { maxlength: 'Description cannot exceed 50000 characters.' },
                media: {
                    required: 'Please upload event 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 if (element.attr('name') === 'sponsor_id') {
                    error.insertAfter(element.closest('.custom-select-wrapper'));
                } 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();
            }
        });

        $('#start_date, #end_date, #start_time, #end_time').on('change input', function () {
            $('#end_date').valid();
            $('#end_time').valid();
        });

        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';
            } else {
                video.style.display = 'none';
                video.removeAttribute('src');
                img.src = previewUrl;
                img.style.display = 'block';
            }
        });
    });
</script>
@endpush