@extends('layouts.master')
@section('title')
    Tutorials
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
    <style>
        .dropzone {
            border: 2px dashed #007bff;
            border-radius: 5px;
            background: #f8f9fa;
            padding: 20px;
        }
    </style>
    <style>
        .preview-image {
            max-width: 150px;
            margin: 10px;
        }

        .file-preview {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .media-gallery img, .media-gallery video {
            margin: 5px;
        }

        .display-none {
            display: none;
        }
    </style>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Tutorials
        @endslot
        @slot('title')
            @lang('translation.add')
        @endslot
    @endcomponent

    @include('partials.session')

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title mb-0">Add Tutorial</h1>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 form-group mb-3">
                            <label class="form-label">Upload Files (Images/Videos)</label>
                            <form action="{{ route('tutorial.store') }}" method="POST" enctype="multipart/form-data" class="dropzone" id="media-dropzone">
                                @csrf
                            </form>
                            <small class="text-muted">Supported formats: Images (jpg, jpeg, png, gif) and Videos (mp4, webm).</small>
                        </div>
                    </div>

                    @if ($tutorials->count() > 0)
                        <div class="col-md-12">
                            <h3 class="mt-4">Uploaded Media</h3>
                            <div class="row media-gallery">
                                @foreach ($tutorials as $tutorial)
                                    <div class="col-md-3 mb-4 position-relative">
                                        <div class="file-preview">
                                            @if ($tutorial->type == \App\Models\Tutorial::TypeImage)
                                                <img src="{{ asset('tutorials/' . $tutorial->media_url) }}" class="img-fluid preview-image" alt="image">
                                            @elseif ($tutorial->type == \App\Models\Tutorial::TypeVideo)
                                                <video class="img-fluid" width="100%" controls>
                                                    <source src="{{ asset('tutorials/' . $tutorial->media_url) }}"
                                                            type="video/{{ pathinfo($tutorial->media_url, PATHINFO_EXTENSION) }}">
                                                    Your browser does not support the video tag.
                                                </video>
                                            @endif
                                        </div>
                                        @can(['Delete Tutorial'])
                                            <button type="button" onclick="showDeleteConfirmation(event, {{ $tutorial->id }})"
                                                    class="btn btn-sm btn-danger delete-btn"
                                                    style="position: absolute; top: 10px; right: 10px; z-index: 1000;">&#10006;
                                            </button>
                                        @endcan
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <p>No media files uploaded yet.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- App JS -->
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

    <script>

        Dropzone.autoDiscover = false;

        const myDropzone = new Dropzone("#media-dropzone", {
            url: "{{ route('tutorial.store') }}",
            paramName: "media_file",
            maxFilesize: 100,
            acceptedFiles: "image/*,video/*",
            addRemoveLinks: false,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            init: function () {
                this.on("success", function (file, response) {
                    console.log("File uploaded successfully", response);
                    iziToast['success']({
                        message: "File uploaded successfully",
                        position: "topRight"
                    });
                });

                this.on("error", function (file, errorMessage) {
                    console.error("Error uploading file", errorMessage);
                    iziToast['error']({
                        message: "Error uploading file",
                        position: "topRight"
                    });
                });
            }
        });


        function showDeleteConfirmation(event, tutorialId) {
            event.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: 'This will delete the media file permanently!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Delete it',
                cancelButtonText: 'No, Cancel',
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = '/system-setup/tutorial/delete/' + tutorialId;
                }
            });
        }

        $(document).ready(function () {
            $(document).on('change', '.media-upload', function (e) {
                const files = e.target.files;
                const previewContainer = $(this).siblings('.file-preview');
                previewContainer.empty();

                if (files.length === 0) {
                    previewContainer.hide();
                    return;
                }

                previewContainer.show();

                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    const reader = new FileReader();
                    const filePreview = $('<div class="mb-2"></div>');

                    if (file.type.startsWith('image/')) {
                        reader.onload = function (e) {
                            filePreview.html(`
                                <img src="${e.target.result}" class="preview-image">
                                <span>${file.name}</span>
                            `);
                        };
                        reader.readAsDataURL(file);
                    } else if (file.type.startsWith('video/')) {
                        filePreview.html(`
                            <i class="fas fa-video"></i>
                            <span>${file.name}</span>
                        `);
                    }

                    previewContainer.append(filePreview);
                }
            });
        });
    </script>
@endsection