@extends('layouts.master')

@section('title')
    عرض ملحقات @isset($room->name)
        {{$room->name}}
    @endisset
@endsection

@section('first-css')
@endsection

@section('content-body')
    <!--**********************************
                                    Content body start
                                ***********************************-->
    @include('massages')

    <!-- row -->
    <div class="container-fluid container-fluid-traning bg-white">
        <!--**********************************Tabs Start***********************************-->
        <div class="d-flex flex-wrap align-items-start justify-content-start  mb-3">

            <button type="button" class="btn btn-primary  me-1" data-bs-toggle="modal" data-bs-target="#addClassRoom">
                <i class="mdi mdi-plus-circle ms-2"></i>اضافة ملحق جديد
            </button>
        </div>
        <!--**********************************Tabs End***********************************-->
        <div class="row">
            <div class="col-xl-12 tab-content">
                @include('appendix.tables.all')
            </div>
        </div>
    </div>

    <!--**********************************
                                    Content body end
                        ***********************************-->
    @include('appendix.modals.file')
    @include('appendix.modals.update')
    @include('appendix.modals.new')
@endsection
@section('script')
    <script src="{{ asset('/js/update/update-appendix.js') }}"></script>
    <script>
        $('#addImageModal').hide();
        document.querySelectorAll('.show-add-image').forEach(item => {
            item.addEventListener('click', e => {
                e.preventDefault();
                $('#addImageModal').show();
            })
        });
        document.querySelectorAll('.close-modal-image').forEach(item => {
            item.addEventListener('click', e => {
                e.preventDefault();
                $('#addImageModal').hide();
            })
        });
        document.querySelectorAll('.close-image-preview').forEach(item => {
            item.addEventListener('click', e => {
                e.preventDefault();
                $('#addImageModal').hide();
            })
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/resumablejs@1.1.0/resumable.min.js"></script>
    <script type="text/javascript">
        let browseFile = $('#browseFile');
        let resumable = new Resumable({
            target: '{{ route('upload') }}',
            query: {
                _token: '{{ csrf_token() }}'
            }, // CSRF token
            fileType: ['png', 'jpg', 'pdf','mp4','mp3','doc','xlsx','pptx','txt','cpp','zip','rar'],
            chunkSize: 10 * 1024 *
                1024, // default is 1*1024*1024, this should be less than your maximum limit in php.ini
            headers: {
                'Accept': 'application/json'
            },
            testChunks: false,
            throttleProgressCallbacks: 1,
        });

        resumable.assignBrowse(browseFile[0]);

        resumable.on('fileAdded', function(file) { // trigger when file picked
            showProgress();
            resumable.upload() // to actually start uploading.
        });

        resumable.on('fileProgress', function(file) { // trigger when file progress update
            updateProgress(Math.floor(file.progress() * 100));
        });

        resumable.on('fileSuccess', function(file, response) { // trigger when file upload complete
            response = JSON.parse(response)
            $('#videoPreview').attr('src', response.path);
            $('.videoUrlPreview').val(response.filename);
            var url = '{{ route('delete', ':id') }}';
            url = url.replace(':id', response.filename);
            $('#canceledUploadVideo').attr('href', url);
            $('.card-footer').show();
            $('#browseFile').hide();
        });

        resumable.on('fileError', function(file, response) { // trigger when there is any error
            alert('file uploading error.')
        });


        let progress = $('.progress');

        function showProgress() {
            progress.find('.progress-bar').css('width', '0%');
            progress.find('.progress-bar').html('0%');
            progress.find('.progress-bar').removeClass('bg-success');
            progress.show();
        }

        function updateProgress(value) {
            progress.find('.progress-bar').css('width', `${value}%`)
            progress.find('.progress-bar').html(`${value}%`)
        }

        function hideProgress() {
            progress.hide();
        }
    </script>
@endsection