@extends('admin.layouts.master')

@section('title', 'Add Video')

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/plugins/dropzone/dropzone.css') }}" type="text/css">
    <style>
        .video-dropzone {
            border: 2px dashed #9D6F52 !important;
            background: rgba(157, 111, 82, 0.06) !important;
            border-radius: .5rem;
            min-height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .video-dropzone.dz-drag-hover {
            background: rgba(157, 111, 82, 0.12) !important;
        }
        .video-dropzone .dz-preview { margin: 1rem; }
        label.error, .invalid-feedback, .video-upload-error {
            color: #dc3545;
            font-size: .825rem;
            display: block;
            margin-top: .35rem;
        }
        #uploadProgressWrap {
            display: none;
            margin-top: 1rem;
        }
        #uploadProgressWrap.active { display: block; }
        #uploadProgressBar {
            height: 10px;
            border-radius: 999px;
            background: #9D6F52;
            width: 0%;
            transition: width .15s linear;
        }
        #uploadProgressTrack {
            background: #ece7e3;
            border-radius: 999px;
            overflow: hidden;
            height: 10px;
        }
    </style>
@endpush

@section('content')
    @include('admin.partials.page-header', [
        'title' => 'Add Video',
        'crumbs' => [
            ['label' => 'Videos', 'url' => route('admin.video-master.index')],
            ['label' => 'Add'],
        ],
    ])

    <div class="card mt-3">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.video-master.store') }}" enctype="multipart/form-data" id="videoMasterCreateForm" novalidate>
                @csrf
                <div class="mb-3">
                    <label class="form-label" for="vm_name">Name <span class="text-danger">*</span></label>
                    <input type="text" name="vm_name" id="vm_name" class="form-control" value="{{ old('vm_name') }}" maxlength="255" placeholder="Enter video name" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Video File <span class="text-danger">*</span></label>
                    <div id="videoDropzone" class="dropzone video-dropzone">
                        <div class="dz-message needsclick">
                            <div class="avatar-lg mx-auto mb-3">
                                <span class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                    <i class="ti ti-video fs-24"></i>
                                </span>
                            </div>
                            <h4 class="mb-2">Drop video here or click to upload</h4>
                            <p class="text-muted fst-italic mb-3 mb-0">Only one video. Allowed: MP4, MOV, AVI, WEBM, MKV (max 200MB).</p>
                            <span class="btn btn-sm btn-primary shadow">Browse Video</span>
                        </div>
                    </div>
                    <div class="video-upload-error" id="videoUploadError"></div>

                    <div id="uploadProgressWrap" class="mt-3">
                        <div class="d-flex justify-content-between small mb-1">
                            <span id="uploadProgressLabel">Uploading video…</span>
                            <span id="uploadProgressPercent">0%</span>
                        </div>
                        <div id="uploadProgressTrack">
                            <div id="uploadProgressBar"></div>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" id="btnSaveVideo">Save</button>
                <a href="{{ route('admin.video-master.index') }}" class="btn btn-light border">Cancel</a>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/dropzone/dropzone-min.js') }}"></script>
<script>
Dropzone.autoDiscover = false;
$(function () {
    var storeUrl = @json(route('admin.video-master.store'));
    var listUrl = @json(route('admin.video-master.index'));
    var csrf = @json(csrf_token());
    var uploading = false;

    function setProgress(pct, label) {
        $('#uploadProgressWrap').addClass('active');
        $('#uploadProgressBar').css('width', pct + '%');
        $('#uploadProgressPercent').text(pct + '%');
        if (label) {
            $('#uploadProgressLabel').text(label);
        }
    }

    function resetProgress() {
        $('#uploadProgressWrap').removeClass('active');
        $('#uploadProgressBar').css('width', '0%');
        $('#uploadProgressPercent').text('0%');
        $('#uploadProgressLabel').text('Uploading video…');
    }

    function selectedVideo() {
        if (!window.videoMasterDropzone) {
            return null;
        }
        var accepted = window.videoMasterDropzone.getAcceptedFiles();
        if (accepted.length) {
            return accepted[accepted.length - 1];
        }
        var queued = window.videoMasterDropzone.getQueuedFiles();
        if (queued.length) {
            return queued[queued.length - 1];
        }
        var files = window.videoMasterDropzone.files || [];
        for (var i = files.length - 1; i >= 0; i--) {
            if (files[i] && files[i].accepted !== false && files[i].status !== 'error') {
                return files[i];
            }
        }
        return null;
    }

    function showUploadError(msg) {
        $('#videoUploadError').text(msg);
        if (window.Swal) {
            Swal.fire('Upload failed', msg, 'error');
        }
    }

    window.videoMasterDropzone = new Dropzone('#videoDropzone', {
        url: storeUrl,
        method: 'post',
        autoProcessQueue: false,
        uploadMultiple: false,
        parallelUploads: 1,
        maxFiles: 1,
        maxFilesize: 200,
        createImageThumbnails: false,
        acceptedFiles: '.mp4,.mov,.avi,.webm,.mkv,.m4v,video/mp4,video/quicktime,video/x-msvideo,video/webm,video/x-matroska',
        addRemoveLinks: true,
        dictDefaultMessage: 'Drop video here or click to upload',
        dictInvalidFileType: 'Only video files are allowed.',
        dictFileTooBig: 'Video must be 200MB or smaller.',
        dictMaxFilesExceeded: 'Only one video can be uploaded.',
        init: function () {
            var drop = this;
            drop.on('addedfile', function (file) {
                if (drop.files.length > 1) {
                    drop.removeFile(drop.files[0]);
                }
                $('#videoUploadError').empty();
                resetProgress();
            });
            drop.on('error', function (file, message) {
                if (!file || file.status === 'canceled') {
                    return;
                }
                // Client-side reject (type/size) — clear preview
                if (file.accepted === false) {
                    $('#videoUploadError').text(typeof message === 'string' ? message : 'Invalid video file.');
                    setTimeout(function () {
                        if (file.previewElement) {
                            drop.removeFile(file);
                        }
                    }, 0);
                }
            });
        }
    });

    $('#videoMasterCreateForm').on('submit', function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();

        if (uploading) {
            return false;
        }

        var name = $.trim($('#vm_name').val());
        if (name.length < 2) {
            showUploadError('Please enter a video name (at least 2 characters).');
            $('#vm_name').focus();
            return false;
        }

        var file = selectedVideo();
        if (!file) {
            showUploadError('Please choose a video file first.');
            return false;
        }

        uploading = true;
        var $btn = $('#btnSaveVideo').prop('disabled', true).text('Uploading…');
        $('#videoUploadError').empty();
        setProgress(1, 'Preparing upload…');

        if (window.Swal) {
            Swal.fire({
                title: 'Uploading video…',
                html: '<div class="text-muted small mb-2">Please wait. Do not close this page.</div><div id="swalUploadPct">1%</div>',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: function () {
                    Swal.showLoading();
                }
            });
        }

        var data = new FormData();
        data.append('_token', csrf);
        data.append('vm_name', name);
        data.append('video', file, file.name || 'video.mp4');

        $.ajax({
            url: storeUrl,
            method: 'POST',
            data: data,
            processData: false,
            contentType: false,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            xhr: function () {
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function (ev) {
                        if (!ev.lengthComputable) {
                            return;
                        }
                        var pct = Math.max(1, Math.min(99, Math.round((ev.loaded / ev.total) * 100)));
                        var uploaded = ev.loaded >= ev.total;
                        setProgress(pct, uploaded ? 'Saving video…' : 'Uploading video…');
                        if (window.Swal && Swal.isVisible()) {
                            $('#swalUploadPct').text(uploaded ? 'Saving video…' : pct + '%');
                        }
                    }, false);
                }
                return xhr;
            },
            success: function (res) {
                setProgress(100, 'Upload complete');
                uploading = false;
                if (window.Swal) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Saved',
                        text: (res && res.message) ? res.message : 'Video uploaded successfully',
                        timer: 1400,
                        showConfirmButton: false
                    }).then(function () {
                        window.location.href = (res && res.redirect) ? res.redirect : listUrl;
                    });
                } else {
                    window.location.href = (res && res.redirect) ? res.redirect : listUrl;
                }
            },
            error: function (xhr) {
                uploading = false;
                $btn.prop('disabled', false).text('Save');
                resetProgress();
                var msg = 'Upload failed. Please try again.';
                if (xhr.status === 419) {
                    msg = 'Session expired. Refresh the page and try again.';
                } else if (xhr.responseJSON) {
                    if (xhr.responseJSON.errors) {
                        var errors = xhr.responseJSON.errors;
                        msg = (errors.vm_name && errors.vm_name[0])
                            || (errors.video && errors.video[0])
                            || msg;
                    } else if (xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                } else if (xhr.status === 0) {
                    msg = 'Network error. Check your connection and try again.';
                } else if (xhr.status >= 500) {
                    msg = 'Server error while uploading. Check Videos table / folder permissions.';
                }
                showUploadError(msg);
            }
        });

        return false;
    });
});
</script>
@endpush