@extends('admin.layouts.main')

@section('title', 'Tambah Video')

@section('menu', 'Video')

@section('content')
    <!--begin::Container-->
    <div id="kt_content_container" class="app-container container-fluid">
        <div class="row">
            <div class="col-lg-8 col-sm-12">
                <form id="form-create-video" method="post" action="{{ route('admin.video.store') }}"
                      enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <div class="card card-flush">
                        <div class="card-header">
                            <h3 class="card-title">Tambah Video</h3>
                        </div>
                        <div class="card-body py-5 px-10">
                            <div class="mb-5">
                                <label class="form-label" for="title">Judul<span class="text-danger ms-1">*</span></label>
                                <input type="text" class="form-control" name="title" id="title" placeholder="Masukkan judul" value="{{ old('title') }}" required>
                                @if ($errors->has('title'))
                                    <span class="error">{{ $errors->first('title') }}</span>
                                @endif
                            </div>

                            <div class="row">
                                <div class="col-lg-6 col-sm-12">
                                    <div class="mb-5">
                                        <label class="form-label" for="status">Status<span class="text-danger ms-1">*</span></label>
                                        <x-select-post-published-status name="status" id="status"/>
                                        @if ($errors->has('status'))
                                            <span class="error">{{ $errors->first('status') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-6 col-sm-12">
                                    <div class="mb-5">
                                        <label class="form-label" for="page-id">Page<span class="text-danger ms-1">*</span></label>
                                        <x-select-page name="page_id" id="page-id" />
                                        @if ($errors->has('page_id'))
                                            <span class="error">{{ $errors->first('page_id') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="mb-10">
                                <label class="form-label" for="url">Url<span class="text-danger ms-1">*</span></label>
                                <input type="text" class="form-control" name="url" id="url" placeholder="Masukkan url video" value="{{ old('url') }}" required>
                                <span class="text-gray-500">Contoh: https://www.youtube.com/embed/kode-video-youtube</span>
                                @if ($errors->has('url'))
                                    <span class="error">{{ $errors->first('url') }}</span>
                                @endif
                            </div>

                            <div class="card-footer">
                                <div class="float-end">
                                    <a class="btn btn-secondary me-1" href="{{ route('admin.video.index') }}">Kembali/Batal</a>
                                    <button type="submit" class="btn btn-primary ms-2">Simpan</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-4 col-sm-12">
                <div class="card card-flush">
                    <div class="card-header">
                        <h3 class="card-title">Preview</h3>
                    </div>
                    <div class="card-body py-5 px-10 text-center">
                        <img src="{{ asset('assets/metronic/img/video-placeholder.jpg') }}" class="rounded img-thumbnail text-center" width="100%" id="preview-video">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end::Container-->
@endsection

@push('js')
    <!-- Main Script -->
    <script>
        $(document).ready(function () {
            /* Set Nav-Link Active */
            $('#menu-item-videos').addClass('here show');
            $('#menu-link-videos').addClass('active');

            /* Url on Change Listener */
            $('#url').on('change, keyup', function () {let url = $(this).val();
                let videoId = url.split('embed/')[1];
                let videoUrl = 'https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';
                $('#preview-video').attr('src', videoUrl);
            });

            let url = $('#url').val();
            if (url) {
                let videoId = url.split('embed/')[1];
                let videoUrl = 'https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';
                $('#preview-video').attr('src', videoUrl);
            }

            /* Select2 on Change Listener */
            $('.form-select').on('change', function(){
                $(this).valid();
            });
        });
    </script>
    <!-- Main Script -->

    <!-- Validation -->
    <script>
        $(document).ready(function () {
            /* Add custom method */
            jQuery.validator.addMethod("title", function(value, element) {
                return this.optional(element) || /^[A-Za-z0-9\s\-_,\.;:()&]+$/i.test(value);
            });

            /* Create room type validation */
            $("#form-create-video").validate({
                ignore: [],
                rules: {
                    title: {
                        required: true,
                        minlength: 5,
                        maxlength: 100,
                        title: true,
                    },
                    url: {
                        required: true
                    },
                    status: {
                        required: true
                    }
                },
                messages: {
                    title: {
                        required: "Judul tidak boleh kosong",
                        minlength: "Judul minimal 5 karakter",
                        maxlength: "Judul maksimal 100 karakter",
                        title: "Judul hanya boleh mengandung huruf, angka, spasi, dan simbol -_,.;:()&"
                    },
                    url: {
                        required: "Url tidak boleh kosong"
                    },
                    status: {
                        required: "Status tidak boleh kosong"
                    }
                },
                errorPlacement: function (error, element) {
                    if (element.hasClass('form-select') && element.next('.select2-container').length) {
                        error.insertAfter(element.next('.select2-container'));
                    } else if (element.attr('name') === 'content') {
                        error.insertAfter('.error-content');
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
    <!-- Validation -->
@endpush