@extends('admin.layouts.app')
@section('content')
<style>
    .progress-bar-container {
    margin-bottom: 10px;
    width: 100%;
    background-color: #ddd;
}

.progress-bar {
    height: 25px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 25px;
    color: white;
    overflow: hidden;
    white-space: nowrap;
}

.progress-bar-fill {
    display: inline-block;
    height: 100%;
    background-color: blue;
}
</style>

@if(isset($bundle))
<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">Edit Video Bundle</h3>
            <div class="nk-block-des text-soft">

            </div>
        </div><!-- .nk-block-head-content -->
        <div class="nk-block-head-content">
            <div class="toggle-wrap nk-block-tools-toggle">
                <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                <div class="toggle-expand-content" data-content="pageMenu">
                    <ul class="nk-block-tools g-3">
                        <li class="nk-block-tools-opt">

                        </li>
                    </ul>
                </div>
            </div><!-- .toggle-wrap -->
        </div><!-- .nk-block-head-content -->
    </div><!-- .nk-block-between -->
</div><!-- .nk-block-head -->


<div class="components-preview">
    <div class="nk-block nk-block-lg">
        <div class="card card-bordered">
            <div class="card-inner">
                <form id="uploadForm" action="{{ route('videoBundle.update', $bundle->id) }}" method="post" enctype="multipart/form-data">
                   @csrf
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="full-name-1">Bundle Name</label>
                                <div class="form-control-wrap">
                                    <input type="text" class="form-control" name="name" value="{{ $bundle->name }}">
                                </div>
                                @if ($errors->has('name'))
                                    <p class="error">{{ $errors->first('name') }}</p>
                                @endif
                            </div>
                        </div>
                        
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="full-name-1">Bundle Price</label>
                                <div class="form-control-wrap">
                                    <input type="number" class="form-control" name="price" value="{{ $bundle->price }}">
                                </div>
                                @if ($errors->has('price'))
                                    <p class="error">{{ $errors->first('price') }}</p>
                                @endif
                            </div>
                        </div>

                    
                      <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="default-06">Bundle Thumbnail</label>
                                <div class="form-control-wrap">
                                    <div class="custom-file">
                                        <input type="file" class="form-control" id="bundleThumbnail" name="bundleThumbnail">
                                    </div>
                                    @if ($errors->has('thumbnail'))
                                        <p class="error">{{ $errors->first('thumbnail') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                            
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="default-06">Videos</label>
                                <div class="form-control-wrap">
                                    <div class="custom-file">
                                        <select class="form-control" id="select2update" name="video_ids[]" multiple>
                                            @foreach($videos as $video)
                                            <option value="{{ $video->id }}" {{ $bundle->videos->contains('id', $video->id) ? 'selected' : '' }}>{{ $video->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @if ($errors->has('videos'))
                                        <p class="error">{{ $errors->first('videos') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                            
                        <!--<div class="col-lg-6">-->
                        <!--    <div class="form-group">-->
                        <!--        <label class="form-label">Status</label>-->
                        <!--        <div class="form-control-wrap">-->
                        <!--            <input type="text" class="form-control" name="status" value="">-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        
                        <div class="col-12">
                            <div class="form-group">
                                <button class="btn btn-primary" type="submit">Submit</button>
                            </div>
                        </div>
                    </div>
                    </form>
            </div>
        </div>
    </div><!-- .nk-block -->
</div><!-- .components-preview -->

@else

<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">Create Video Bundle</h3>
            <div class="nk-block-des text-soft">

            </div>
        </div><!-- .nk-block-head-content -->
        <div class="nk-block-head-content">
            <div class="toggle-wrap nk-block-tools-toggle">
                <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                <div class="toggle-expand-content" data-content="pageMenu">
                    <ul class="nk-block-tools g-3">
                        <li class="nk-block-tools-opt">

                        </li>
                    </ul>
                </div>
            </div><!-- .toggle-wrap -->
        </div><!-- .nk-block-head-content -->
    </div><!-- .nk-block-between -->
</div><!-- .nk-block-head -->


<div class="components-preview">
    <div class="nk-block nk-block-lg">
        <div class="card card-bordered">
            <div class="card-inner">
                <form id="uploadForm" action="{{ route('videoBundle.save') }}" method="post" enctype="multipart/form-data">
                   @csrf
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="full-name-1">Bundle Name</label>
                                <div class="form-control-wrap">
                                    <input type="text" class="form-control" name="name">
                                </div>
                                @if ($errors->has('name'))
                                    <p class="error">{{ $errors->first('name') }}</p>
                                @endif
                            </div>
                        </div>
                        
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="full-name-1">Bundle Price</label>
                                <div class="form-control-wrap">
                                    <input type="number" class="form-control" name="price">
                                </div>
                                @if ($errors->has('price'))
                                    <p class="error">{{ $errors->first('price') }}</p>
                                @endif
                            </div>
                        </div>

                    
                      <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="default-06">Bundle Thumbnail</label>
                                <div class="form-control-wrap">
                                    <div class="custom-file">
                                        <input type="file" class="form-control" id="bundleThumbnail" name="bundleThumbnail">
                                    </div>
                                    @if ($errors->has('thumbnail'))
                                        <p class="error">{{ $errors->first('thumbnail') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                            
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="default-06">Videos</label>
                                <div class="form-control-wrap">
                                    <div class="custom-file">
                                        <select class="form-control" id="select2create" name="video_ids[]" multiple>
                                        @foreach($videos as $video)
                                        <!--<input type="file" class="form-control" id="bundleVideos" name="bundleVideos[]" multiple>-->
                                        <option value="{{ $video->id }}">{{ $video->title }}</option>
                                        @endforeach
                                        </select>
                                    </div>
                                    @if ($errors->has('videos'))
                                        <p class="error">{{ $errors->first('videos') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                            
                        <!--<div class="col-lg-6">-->
                        <!--    <div class="form-group">-->
                        <!--        <label class="form-label">Status</label>-->
                        <!--        <div class="form-control-wrap">-->
                        <!--            <input type="text" class="form-control" name="status" value="">-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        
                        <div class="col-12">
                            <div class="form-group">
                                <button class="btn btn-primary" type="submit">Submit</button>
                            </div>
                        </div>
                    </div>
                    </form>
            </div>
        </div>
    </div><!-- .nk-block -->
</div><!-- .components-preview -->
@endif

@section('scripts')

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $("#select2update").select2({
        placeholder: "select videos",
        allowClear: true
    });
    
    $("#select2create").select2({
        placeholder: "select videos",
        allowClear: true
    });
    // $(document).ready(function () {
    //     $('#uploadForm').on('submit', function (e) {
    //         e.preventDefault();
    //         var formData = new FormData(this);
    //         var totalFiles = $('#bundleVideos')[0].files.length;
    //         var uploadProgress = new Array(totalFiles).fill(0);
    
    //         // Initialize progress bars
    //         $('#progressBars').empty();
    //         for (let i = 0; i < totalFiles; i++) {
    //             $('#progressBars').append(`
    //                 <div class="progress-container">
    //                     <span>${$('#bundleVideos')[0].files[i].name}</span>
    //                     <div class="progress">
    //                         <div class="progress-bar" id="progress-bar-${i}" style="width: 0%">0%</div>
    //                     </div>
    //                 </div>
    //             `);
    //         }
    
    //         $.ajax({
    //             type: 'POST',
    //             url: "{{ route('videoBundle.save') }}", 
    //             data: formData,
    //             processData: false,
    //             contentType: false,
    //             xhr: function () {
    //                 var xhr = new window.XMLHttpRequest();
    //                 xhr.upload.addEventListener('progress', function (e) {
    //                     if (e.lengthComputable) {
    //                         // Update the progress bar for each file
    //                         var percentComplete = (e.loaded / e.total) * 100;
    //                         uploadProgress.forEach((_, i) => {
    //                             uploadProgress[i] = percentComplete;
    //                             $(`#progress-bar-${i}`).css('width', percentComplete + '%').text(percentComplete.toFixed(2) + '%');
    //                         });
    
    //                         // Check if all are 100%
    //                         if (uploadProgress.every(p => p === 100)) {
    //                             // Enable the submit button
    //                             $('button[type="submit"]').prop('disabled', false);
    //                         }
    //                     }
    //                 }, false);
    //                 return xhr;
    //             },
    //             success: function (response) {
    //                 console.log(response);
    //                 // Success logic here
    //             },
    //             error: function (xhr, status, error) {
    //                 console.error(xhr.responseText);
    //                 // Error logic here
    //             }
    //         });
    //     });
    // });
    
</script>

@endsection


@endsection