@extends('layouts.backoffice.index', ['title' => 'Slider'])

@section('main')
    <section class="section">
        <div class="card shadow">
            <div class="card-header">
                <div class="clearfix w-100">
                    <div class="float-left">
                        <h5><b>Slider</b></h5>
                    </div>
                    <div class="float-right">
                        <a href="" data-toggle="modal" data-target="#modal-add" class="btn btn-primary"><i
                                class="fa fa-plus"></i> Tambah Data</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    @if (count($sliders) == 0)
                        <div class="col-md-12 form-group">
                            <div class="alert alert-warning text-center">
                                <h4>Data Tidak Ditemukan</h4>
                            </div>
                        </div>
                    @endif
                    @foreach ($sliders as $slider)
                        <div class="col-md-6 col-sm-6">
                            <div class="card shadow-sm">
                                <div class="">
                                    <video src="{{ asset('storage/' . $slider->media_path) }}" class="w-100"
                                        controls></video>
                                </div>
                                <div class="card-body p-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            @if ($slider->status == 'publish')
                                                <label for="" class="badge badge-success">Pubish</label>
                                            @else
                                                <label for="" class="badge badge-danger">Draft</label>
                                            @endif
                                        </div>
                                        <div class="col-md-6 text-right">
                                            <button class="btn btn-warning btn-edit" data-id="{{ $slider->id }}"
                                                data-status="{{ $slider->status }}" data-media="{{ $slider->media_path }}"
                                                data-toggle="modal" data-target="#modal-edit"><i class="fas fa-edit"></i>
                                                Edit </button>
                                            <button class="btn btn-danger btn-delete" data-id="{{ $slider->id }}"
                                                data-toggle="modal" data-target="#modal-delete"><i class="fas fa-trash"></i>
                                                Hapus </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="modal-delete">
        <div class="modal-dialog modal-dialog-centered">
            <form action="" method="POST" id="form-delete">
                @csrf
                @method('DELETE')
                <div class="modal-content">
                    <div class="modal-body bg-warning">
                        <div class="alert alert-warning alert-has-icon p-0">
                            <div class="alert-icon"><i class="fa fa-trash"></i></div>
                            <div class="alert-body">
                                <div class="alert-title">Konfirmasi Hapus Data</div>
                                Apakah anda yakin ingin menghapus data ini ? <br> data yang sudah dihapus tidak dapat
                                dikembalikan
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-danger btn-block" data-dismiss="modal"><i
                                        class="fa fa-times"></i> Batal Hapus</button>
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-success btn-block"><i class="fa fa-check"></i> Hapus
                                    Data</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modal-add">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white pb-4">
                    <h5 class="modal-title">Tambah Video</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <form method="POST" action="{{ route('backoffice.slider.store') }}" enctype="multipart/form-data"
                    id="form-add">
                    @csrf

                    <div class="modal-body">
                        <div class="alert alert-primary">
                            <h6>Pemberitahuan :</h6>
                            <ul>
                                <li>Ukuran video yang direkomendasikan adalah 1920 x 1080 px atau video dengan format
                                    landscape</li>
                                <li><b>Ukuran file harus kurang dari (20mb)</b></li>
                                <li>Masukan dengan tanda bintang merah wajib diisi / dipilih</li>
                            </ul>
                        </div>

                        <!-- VIDEO UPLOAD -->
                        <div class="form-group">
                            <label><b>Video</b> <span class="text-danger">*</span></label>

                            <div class="upload-area">
                                <input type="file" id="video-add" name="video" class="upload-input"
                                    accept="video/mp4,video/webm,video/ogg" required data-max-size="20480">

                                <div class="upload-message">
                                    <i class="fas fa-video fa-3x text-primary"></i>
                                    <p class="mt-2 mb-0">Klik atau tarik video ke sini</p>
                                    <small class="text-muted">Format: mp4, webm, ogg</small>
                                </div>
                            </div>

                            <div id="preview-video-add" class="mt-3"></div>
                            <small class="text-muted d-block mt-1">Video akan tampil di halaman utama</small>
                        </div>

                        <!-- STATUS -->
                        <div class="form-group">
                            <label>Status <span class="text-danger">*</span></label>
                            <div class="selectgroup w-100">
                                <label class="selectgroup-item">
                                    <input type="radio" name="status" value="2" class="selectgroup-input"
                                        required>
                                    <span class="selectgroup-button">
                                        <i class="fas fa-check"></i> Publish
                                    </span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="status" value="1" class="selectgroup-input"
                                        checked required>
                                    <span class="selectgroup-button">
                                        <i class="fas fa-times"></i> Draft
                                    </span>
                                </label>
                            </div>
                        </div>

                        <hr>

                        <div class="row">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-danger btn-block" data-dismiss="modal">
                                    <i class="fa fa-times"></i> Batal
                                </button>
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-success btn-block">
                                    <i class="fa fa-save"></i> Simpan
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modal-edit">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white pb-4">
                    <h5 class="modal-title">Edit Data</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form action="#" method="POST" enctype="multipart/form-data" class="w-100" id="form-edit">
                    @method('PUT')
                    @csrf

                    <div class="modal-body">
                        <div class="form-group">
                            <div class="alert alert-primary">
                                <h6>Pemberitahuan :</h6>
                                <ul>
                                    <li>Ukuran video yang direkomendasikan adalah 1920 x 1080 px atau video dengan format
                                        landscape</li>
                                    <li><b>Ukuran file harus kurang dari (20mb)</b></li>
                                    <li>Masukan dengan tanda bintang merah wajib diisi / dipilih</li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label><b> Video </b> <span class="text-danger"><b>*</b></span> </label>
                            <div class="mb-2 preview-single fade-in" id="preview-media-edit">
                                <video src="" alt="" class="w-100 rounded" style="max-height:300px"
                                    id="preview-media-in-edit" controls>
                            </div>
                            <div class="upload-area">
                                <input type="file" id="video-edit" name="video" class="upload-input"
                                    accept="video/mp4,video/webm,video/ogg" data-max-size="20480">
                                <div class="upload-message">
                                    <input type="hidden" id="old-video-path">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-primary"></i>
                                    <p class="mt-2 mb-0">Ganti Video</p>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Status <span class="text-danger"><b>*</b></span> </label>
                            <div class="selectgroup w-100">
                                <label class="selectgroup-item">
                                    <input type="radio" name="status" value="2"
                                        class="selectgroup-input publish-status">
                                    <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-check"></i>
                                        Publish</span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="status" value="1"
                                        class="selectgroup-input draft-status">
                                    <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-times"></i>
                                        Draft</span>
                                </label>
                            </div>
                            <small>Jika status <b>Publish</b> akan tampil dihalaman utama</small>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-danger mb-3 btn-block" data-dismiss="modal"><i
                                        class="fa fa-times"></i> Batal</button>
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-success mb-3 btn-block" id="btn-edit-submit"><i
                                        class="fa fa-save"></i>
                                    Simpan</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css" />

    <style>
        /* Styling Custom Input File agar terlihat seperti Dropzone */
        .upload-area {
            position: relative;
            width: 100%;
            min-height: 150px;
            border: 2px dashed #6777ef;
            /* Warna primary theme */
            border-radius: 10px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.3s ease;
            overflow: hidden;
            cursor: pointer;
        }

        .upload-area:hover {
            background-color: #eef0ff;
            border-color: #4c59d6;
        }

        /* Sembunyikan input file asli tapi buat memenuhi area agar bisa diklik */
        .upload-input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }

        .upload-message {
            z-index: 1;
            pointer-events: none;
            /* Agar klik tembus ke input */
        }

        /* Styling Preview Image */
        .preview-single img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .preview-gallery-item {
            position: relative;
            margin-bottom: 15px;
        }

        .preview-gallery-item img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ddd;
        }

        .fade-in {
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
    <style>
        /* Styling Preview Image */
        .preview-single-image img {
            max-width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .gallery-img {
            width: 100%;
            height: 200px;
            /* ubah sesuai kebutuhan */
            overflow: hidden;
        }

        .gallery-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: 5px;
            /* opsional */
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.getElementById('video-edit').addEventListener('change', function(e) {
            const oldVideoURL = document.getElementById('old-video-path')?.value;

            const preview = document.getElementById('preview-media-edit');

            const file = e.target.files[0];
            if (file && file.size > 20 * 1024 * 1024) {
                Swal.fire({
                    icon: 'warning',
                    title: 'File Terlalu Besar',
                    text: 'Ukuran maksimal video adalah 20MB'
                });
                if (oldVideoURL) {
                    console.log(oldVideoURL);
                    preview.innerHTML = `
                    <video controls class="w-100">
                        <source src="${oldVideoURL}">
                    </video>
                `;
                }
                e.target.value = '';
                return;
            }
            handleFileSelect(e, 'preview-media-edit', false);
        });
        document.getElementById('video-add').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file && file.size > 20 * 1024 * 1024) {
                Swal.fire({
                    icon: 'warning',
                    title: 'File Terlalu Besar',
                    text: 'Ukuran maksimal video adalah 20MB'
                });
                e.target.value = '';
            }
        });
    </script>
    <script>
        function handleFileSelect(event, previewId, isMultiple = false) {
            const files = event.target.files;
            const previewContainer = document.getElementById(previewId);

            previewContainer.innerHTML = '';
            if (files.length === 0) return;

            const renderFile = (file) => {
                const type = file.type;

                // IMAGE
                if (type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const div = document.createElement('div');
                        div.className = isMultiple ?
                            'col-4 preview-gallery-item fade-in' :
                            'preview-single fade-in';

                        div.innerHTML = `<img src="${e.target.result}" alt="Preview Image">`;
                        previewContainer.appendChild(div);
                    };
                    reader.readAsDataURL(file);
                }

                // VIDEO
                else if (type.startsWith('video/')) {
                    const videoURL = URL.createObjectURL(file);

                    const div = document.createElement('div');
                    div.className = 'preview-single fade-in';

                    div.innerHTML = `
                <video controls class="w-100 rounded" style="max-height:300px">
                    <source src="${videoURL}" type="${type}">
                    Browser tidak mendukung video.
                </video>
            `;

                    previewContainer.appendChild(div);
                }
            };

            if (isMultiple) {
                Array.from(files).forEach(renderFile);
            } else {
                renderFile(files[0]);
            }
        }

        // IMAGE
        document.getElementById('image-add')?.addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-image-add', false);
        });

        document.getElementById('image-edit')?.addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-image-edit', false);
        });

        // VIDEO
        document.getElementById('video-add')?.addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-video-add', false);
        });
        // document.getElementById('video-edit')?.addEventListener('change', function(e) {

        // });
    </script>

    <script>
        $(document).on('click', '.btn-delete', function() {
            let id = $(this).data('id');
            let url = "{{ route('backoffice.slider.destroy', ':id') }}";
            url = url.replace(':id', id);
            $('#form-delete').attr('action', url);
        });
        $(document).on('click', '.btn-edit', function() {
            let id = $(this).data('id');
            let status = $(this).data('status');
            let media_path = $(this).data('media');
            let url = "{{ route('backoffice.slider.update', ':id') }}";
            url = url.replace(':id', id);

            $('#form-edit').attr('action', url);
            $('#preview-media-in-edit').attr('src', "{{ asset('storage') }}/" + media_path).show();
            $('#old-video-path').val("{{ asset('storage') }}/" + media_path);
            let radioValue = (status === "publish") ? 2 : 1;

            $('input[name="status"][value="' + radioValue + '"]').prop('checked', true);
            $('input[name="status"][value="' + radioValue + '"]').trigger('change');

        });
    </script>
@endpush