@extends('front.layouts.front')


@section('css')
    <style>
        .profile {
            height: inherit;
        }

    </style>
@endsection

@section('content')
    <!-- page title -->
    <section class="section section--first section--last section--head" data-bg="{{ asset('assets/img/bg.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__wrap">
                        <h2 class="section__title">Trailers</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title -->

    <!-- section -->
    <section class="section section--last">
        <div class="container">
            <div class="row galary">
                @foreach ($Clips as $Clip)
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 p-0" id="remove_{{ $Clip->id }}">
                        <div class="hovereffect">
                            <video class="img-responsive" src="{{ $Clip->url }}" alt=""></video>
                            <div class="overlay">
                                <h2>{{ $Clip->videos->titles->title ?? 'updated' }}</h2>
                                <p>{{ $Clip->updated_at->diffForHumans() }}</p>
                                <a class="info edit" href="{{ route('front.trailers.create',[$Clip->name]) }}" data-image="{{ $Clip->url }}" data-id="{{ $Clip->id }}" data-video_id="{{ $Clip->video_id }}"><i class="fa-solid fa-pencil"></i></a>
                                <a class="info delete" href="javascript:;" data-id="{{ $Clip->id }}"><i class="fa-solid fa-trash"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- end section -->
@endsection

@section('script')
    <script>
        $( document ).ready( function() {
            $(document).on('click', '.delete', function(e) {
                var id = $(this).data("id");
                swal({
                    title: "Are you sure?",
                    text: "You want to permanently delete the selected Memes",
                    icon: "warning",
                    buttonClassName: "btn-danger",
                    buttons: ["Trash Can", "Permanently"],
                }).then((isConfirm) => {
                    var type = 2;
                    if (isConfirm) {
                        type = 1;
                    }

                    $.ajax({
                        type: "post",
                        url: "{{ route('front.trailers.delete', ['_id']) }}".replace('_id', id),
                        dataType: "json",
                        data : {
                            '_token': $('meta[name="csrf-token"]').attr("content"),
                            'type' : type
                        },
                        success: function(response) {
                            var notyf = new Notyf();
                            if (response.status) {
                                notyf.success({
                                    message: response.message,
                                    duration: 5000,
                                    position: {
                                        x: "center",
                                        y: "top",
                                    },
                                });
                                $('#remove_' + id).remove();
                            } else {
                                notyf.error({
                                    message: response.message,
                                    duration: 5000,
                                    position: {
                                        x: "center",
                                        y: "top",
                                    },
                                });
                            }
                        },
                    });
                });
            });
        });
    </script>
@endsection