@extends('admin.sidebar')
@section('content')
    <style>
        #uploadWrapper {
            display: none;
        }
    </style>
    {{-- TABLE --}}
    <div class="card">
        <div class="card-header center">
            <h5 class="card-title">
                Video Background
            </h5>
        </div>
        @include('message')
        <div class="card-body" style="overflow-x:auto;">
            <a href="#modalAdd" id="add" data-bs-toggle="modal" data-bs-target="#modalAdd" class="btn btn-success mb-3"><i
                    class="bi bi-plus"></i>
                Tambahkan Video Background</a>
            <table class="table table-striped" id="table1">
                <thead>
                    <tr>
                        <th>Nama Video</th>

                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($videobackground as $item)
                        <tr>

                            <td>{{ $item->video }}</td>
                            <td>
                                <a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                    data-deskripsi="{{ $item->deskripsi }}" data-kategori="{{ $item->kategori }}"
                                    data-id="{{ Crypt::encryptString($item->id) }}"
                                    onclick="$('#modalEdit #updateForm').attr('action', '{{ route('videobackground.update', Crypt::encryptString($item->id)) }}')"
                                    class="open-AddBookDialog btn btn-primary m-1" href=""><i
                                        class="bi bi-pencil-square"></i></a>
                                <a href="" class="btn btn-danger m-1"data-bs-toggle="modal"
                                    data-bs-target="#modalDelete"
                                    onclick="$('#modalDelete #formDelete').attr('action', '{{ route('videobackground.destroy', Crypt::encryptString($item->id)) }}')"><i
                                        class="bi bi-trash-fill"></i></a>

                            </td>
                        </tr>
                    @endforeach

                </tbody>
            </table>

        </div>
    </div>
    {{-- TABLE --}}
    {{-- Modal STORE||START|| --}}
    <div class="modal fade text-left modal-borderless" id="modalAdd" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="false">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambahkan video Background</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form action="{{ route('videobackground.store') }}" method="POST" enctype="multipart/form-data"
                        id="uploadForm">
                        @csrf
                        <div class="form-group">
                            <label for="video">Video Background</label>
                            <input type="file" class="form-control" id="video" name="video" required>
                        </div>
                        <div class="w-100">
                            <label for="uploadProgressBar"> Upload Progress</label>
                            <progress class="w-100 " style="height: 40px;" id="uploadProgressBar" value="0"
                                max="100"></progress>
                        </div>


                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-primary ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Submit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal STORE||END|| --}}

    {{-- Modal UPDATE||START|| --}}
    <div class="modal fade text-left modal-borderless" id="modalEdit" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Video Background</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form action="" method="post" enctype="multipart/form-data" id="updateForm">
                        @csrf
                        @method('put')
                        <div class="form-group">
                            <label for="video-edit">Video Background</label>
                            <input type="file" class="form-control" id="video-edit" name="video">
                        </div>
                        <div class="w-100">
                            <label for="updateProgressBar"> update Progress</label>
                            <progress class="w-100  " style="height: 40px;" id="updateProgressBar" value="0"
                                max="100"></progress>
                        </div>


                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-warning ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Edit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal UPDATE||END|| --}}

    {{-- Modal DESTROY||START|| --}}
    <div class="modal fade text-left modal-borderless" id="modalDelete" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Hapus Video Background</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form id="formDelete" action="" method="post">
                        @csrf
                        @method('delete')
                        <div class="form-group" id="pass">
                            <h5>Apakah anda yakin ingin menghapus item?</h5>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-primary ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Delete</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal DESTROY||END|| --}}




    {{-- script --}}
    @push('script-modal')
        {{-- data modal Update --}}
        <script>
            $(document).ready(function() {
                $('#uploadForm').submit(function(e) {
                    e.preventDefault();

                    var formData = new FormData(this);

                    $.ajax({
                        xhr: function() {
                            var xhr = new window.XMLHttpRequest();

                            xhr.upload.addEventListener("progress", function(evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = (evt.loaded / evt.total) * 100;
                                    $('#uploadProgressBar').val(percentComplete);
                                }
                            }, false);

                            return xhr;
                        },
                        url: $(this).attr('action'),
                        type: $(this).attr('method'),
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            if (data.error) {
                                console.log('alert tampil');
                                jQuery.getScript('https://cdn.jsdelivr.net/npm/sweetalert2@11',
                                    function() {
                                        Swal.fire({
                                            title: data.error,
                                            icon: 'error',
                                            confirmButtonText: 'OK'
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                window.location.href =
                                                    "/videobackground";
                                            }
                                        });
                                    });
                            } else {
                                window.location.href = "/videobackground";
                                jQuery.getScript(
                                    'https://cdn.jsdelivr.net/npm/sweetalert2@11',
                                    function() {
                                        Swal.fire({
                                            title: 'Video Berhasil Diupload',
                                            icon: 'success',
                                            confirmButtonText: 'OK'
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                window.location.href =
                                                    "/videobackground";
                                            }
                                        });
                                    });

                            }


                        },
                        error: function(xhr, status, error) {



                            jQuery.getScript(
                                'https://cdn.jsdelivr.net/npm/sweetalert2@11',
                                function() {
                                    Swal.fire({
                                        title: 'Video Gagal Diupload!',
                                        text: xhr.responseJSON.message,
                                        icon: 'danger',
                                        confirmButtonText: 'OK'
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            window.location.href =
                                                "/videobackground";
                                        }
                                    });
                                });
                        }
                    });

                });
            });


            $(document).ready(function() {
                $('#updateForm').submit(function(e) {
                    e.preventDefault();

                    var formData = new FormData(this);

                    $.ajax({
                        xhr: function() {
                            var xhr = new window.XMLHttpRequest();

                            xhr.upload.addEventListener("progress", function(evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = (evt.loaded / evt
                                        .total) * 100;
                                    $('#updateProgressBar').val(
                                        percentComplete);
                                }
                            }, false);

                            return xhr;
                        },

                        url: $(this).attr('action'),
                        type: $(this).attr('method'),
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            if (data.error) {
                                console.log('alert tampil');
                                jQuery.getScript('https://cdn.jsdelivr.net/npm/sweetalert2@11',
                                    function() {
                                        Swal.fire({
                                            title: data.error,
                                            icon: 'error',
                                            confirmButtonText: 'OK'
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                window.location.href =
                                                    "/videobackground";
                                            }
                                        });
                                    });
                            } else {
                                window.location.href = "/videobackground";
                                jQuery.getScript(
                                    'https://cdn.jsdelivr.net/npm/sweetalert2@11',
                                    function() {
                                        Swal.fire({
                                            title: 'Video Berhasil Diupload',
                                            icon: 'success',
                                            confirmButtonText: 'OK'
                                        }).then((result) => {
                                            if (result.isConfirmed) {
                                                window.location.href =
                                                    "/videobackground";
                                            }
                                        });
                                    });

                            }
                        },
                        error: function(xhr, status, error) {


                            jQuery.getScript(
                                'https://cdn.jsdelivr.net/npm/sweetalert2@11',
                                function() {
                                    Swal.fire({
                                        title: 'Video Gagal Diupload!',
                                        text: xhr.responseJSON.message,
                                        icon: 'danger',
                                        confirmButtonText: 'OK'
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            window.location.href =
                                                "/videobackground";
                                        }
                                    });
                                });
                        }
                    });
                });
            });
        </script>

        <script>
            $(document).on('click', '#edit', function() {
                let deskripsi = $(this).data('deskripsi')
                let kategori = $(this).data('kategori')


                $('.form-group #deskripsi-edit').val(deskripsi)
                $('.form-group #kategori-edit').val(kategori)



            });
        </script>
    @endpush
    {{-- script --}}
@endsection