@extends('layouts.master')
@section('title') @lang('translation.users') @endsection

@section('css')
    <!-- Select2 css-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <!-- Breadcrumb Trail -->
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.users')
        @endslot
        @slot('title')
            @lang('translation.vide-view')
        @endslot
    @endcomponent

    <!-- Session Messages -->
    @include('partials.session')

    <!-- Edit Form -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title mb-0">@lang('translation.vide-view')</h1>
                </div>
                <div class="card-body">
                    <div class="row">
                        {!! $video->embedded_link !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12"  id="comments">
            @include('dashboard.video.comments')
        </div>


        <!-- Add Comment Form -->
        <form action="{{ url('/comment/store/') }}" method="POST">
            @csrf
            <input type="hidden" name="videoID" value="{{ $video->id }}">
            <div class="form-group mb-3">
                <label for="comment">Comment:</label>
                <textarea name="comment" id="comment" class="form-control" rows="3" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    <div id="DeleteModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-5">
                    <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop"
                               colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
                    </lord-icon>
                    <div class="mt-4">
                        <h4 class="mb-3">Confirm your action!</h4>
                        <p class="text-muted mb-4"><strong>Are you sure you want to delete this user?</strong>
                        </p>
                        <div class="hstack gap-2 justify-content-center">
                            <button type="button" class="btn btn-light"
                                    data-bs-dismiss="modal">Close
                            </button>
                            <a id="DeleteModalHref" href="{{ url('https://google.com') }}"
                               class="btn btn-danger">Confirm</a>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        function ShowDeleteModal(id) {
            $('#DeleteModalHref').attr('href', '/comment/delete/' + id);
            $('#DeleteModal').modal('show');
        }

        $(document).ready(function () {
            $('form').submit(function (e) {
                e.preventDefault();
                var form = $(this);
                var url = form.attr('action');
                var type = form.attr('method');
                var data = form.serialize();
                $.ajax({
                    url: url,
                    type: type,
                    data: data,
                    success: function (response) {
                        console.log(response);
                        $('#comments').html(response.html);
                        form.trigger('reset');
                    }
                });
            });
        });

    </script>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Select2 cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ URL::asset('assets/js/pages/select2.init.js') }}"></script>
    <!-- Input Mask -->
    <script src="{{ URL::asset('assets/libs/cleave.js/cleave.js.min.js') }}"></script>
    <script src="{{ URL::asset('assets/js/pages/form-masks.init.js') }}"></script>
    <!-- App JS -->
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
@endsection