@extends('front.layouts.front')
@section('maincss')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
@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">Cutting Room Floor</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title -->

    <!-- section -->
    <section class="section">
        <div class="container">
            <form id="frm-example" action="{{ route('front.cuttingroom.multipleselect') }}" method="POST">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive table-responsive--border">
                            <table class="card__table select" id="example">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="sign__group sign__group--checkbox">
                                                <input type="checkbox" value="1" id="example-select-all" />
                                                <label for="example-select-all"></label>
                                            </div>
                                        </th>
                                        <th>Type</th>
                                        <th>movie Name</th>
                                        <th>Last Update</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($Clips as $Clip)
                                        <tr id="remove_{{ $Clip->id }}">
                                            <td>{{ $Clip->id }},{{ $Clip->type }}</td>
                                            <td>@if($Clip->type == 1) <i class="fas fa-video"></i> @else <i class="fas fa-image"></i> @endif</td>
                                            <td>{{ $Clip->videos->titles->title }}</td>
                                            <td>{{ $Clip->deleted_at->diffForHumans() }}</td>
                                            <td>
                                                <a href="javascript:;" data-id="{{ $Clip->id }}" data-type="{{ $Clip->type }}" class="text-success ml-2 restore"><i class="fas fa-trash-restore"></i></a>
                                                <a href="javascript:;" data-id="{{ $Clip->id }}" data-type="{{ $Clip->type }}" class="text-danger ml-2 delete"><i class="fas fa-trash-can"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-sm-2 mt-2">
                        <select name="type" class="form__input" >
                            <option value="1">Restore</option>
                            <option value="2">Detele</option>
                        </select>
                    </div>
                    <div class="col-sm-2 mt-2 p-0">
                        <button class="btn btn-success" type="submit">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!-- end section -->
@endsection

@section('script')
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            var table = $('#example').DataTable({

                'columnDefs': [{
                    'targets': 0,
                    'searchable': false,
                    'orderable': false,
                    'className': 'dt-body-center',
                    'render': function(data, type, full, meta) {
                        // return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
                        var id = $('<div/>').text(data).html();
                        return '<div class="sign__group sign__group--checkbox"><input type="checkbox" name="id[]" value="' + id + '" id="data_'+ id +'" /><label for="data_'+ id +'"></label></div>';
                    }
                }],
                'order': [
                    [2, 'asc']
                ]
            });

            $('#example-select-all').on('click', function() {
                var rows = table.rows({'search': 'applied'}).nodes();
                $('input[type="checkbox"]', rows).prop('checked', this.checked);
            });

            $('#example tbody').on('change', 'input[type="checkbox"]', function() {
                if (!this.checked) {
                    var el = $('#example-select-all').get(0);
                    if (el && el.checked && ('indeterminate' in el)) {
                        el.indeterminate = true;
                    }
                }
            });

            $('#frm-example').on('submit', function(e) {
                e.preventDefault();
                var form = this;
                table.$('input[type="checkbox"]').each(function() {
                    if (!$.contains(document, this)) {
                        if (this.checked) {
                            $(form).append(
                                $('<input>')
                                .attr('type', 'hidden')
                                .attr('name', this.name)
                                .val(this.value)
                            );
                        }
                    }
                });
                $.ajax({
                    type: "post",
                    url: "{{ route('front.cuttingroom.multipleselect') }}",
                    dataType: "json",
                    data : $(form).serialize(),
                    success: function(response) {
                        var notyf = new Notyf();
                        if (response.status) {
                            notyf.success({
                                message: response.message,
                                duration: 5000,
                                position: {
                                    x: "center",
                                    y: "top",
                                },
                            });
                            response.data.forEach((ele) => {
                                $('#remove_' + ele).remove();
                            });
                        } else {
                            notyf.error({
                                message: response.message,
                                duration: 5000,
                                position: {
                                    x: "center",
                                    y: "top",
                                },
                            });
                        }
                    },
                });
            });
        });
        $(document).on('click', '.delete', function(e) {
            var id = $(this).data("id");
            var type = $(this).data("type");
            console.log(type);
            if(type == 1){
                var url = "{{ route('front.trailers.delete', ['_id']) }}".replace('_id', id);
            } else {
                var url = "{{ route('front.memes.delete', ['_id']) }}".replace('_id', id);
            }
            swal({
                title: "Are you sure?",
                text: "You want to permanently delete the selected file",
                icon: "warning",
                buttonClassName: "btn-danger",
                buttons: ["No", "Yes"],
            }).then((isConfirm) => {
                if (isConfirm) {
                    $.ajax({
                        type: "post",
                        url: url,
                        dataType: "json",
                        data : {
                            '_token': $('meta[name="csrf-token"]').attr("content"),
                            'type' : 1
                        },
                        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",
                                    },
                                });
                            }
                        },
                    });
                }

            });
        });
        $(document).on('click', '.restore', function(e) {
            var id = $(this).data("id");
            var type = $(this).data("type");
            console.log(type);
                var url = "{{ route('front.cuttingroom.restore') }}";
            swal({
                title: "Are you sure?",
                text: "You want to restore the selected file",
                icon: "warning",
                buttonClassName: "btn-danger",
                buttons: ["No", "Yes"],
            }).then((isConfirm) => {
                if (isConfirm) {
                    $.ajax({
                        type: "post",
                        url: url,
                        dataType: "json",
                        data : {
                            '_token': $('meta[name="csrf-token"]').attr("content"),
                            'type' : type,
                            'id' : id
                        },
                        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