@extends('layouts.app')
@section('title','View All Route Redirect')
@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Slug Redirect</p>
            @can('slug-redirect-create')
                <a class="btn btn-sm btn-success text-center" href="{{route('slug-redirect.create')}}">Add New</a>
            @endcan
        </div>
        <div class="mb-3">
            <ul class="list-unstyled">
                <li>
                    <strong class="text-danger">Old slug:</strong>
                    A slug that already exists in the blog table. This must be unique in the Slug Redirect table.
                </li>
                <li>
                    <strong class="text-danger">New slug:</strong>
                    A slug that you want to redirect to the old slug.
                </li>
            </ul>
        </div>
        <div class="card rounded-0">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-sm dataTable">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Old Slug</th>
                            <th>New Slug</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal fade" id="del-model" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form method="POST" id="deleteForm">
                        @csrf
                        @method('DELETE')

                        <div class="modal-header">
                            <h5 class="modal-title">Delete</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            <p>Are you sure you want to delete this redirect?</p>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-danger">Delete</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('js')
    <script>
        $(function (){

            var t = $('.dataTable').DataTable({
                processing: true,
                serverSide: true,
                order:[[0,'desc']],
                ajax: "{{route('get.slug-redirect')}}",
                columns: [
                    {data:'id'},
                    {data:'old_slug'},
                    {data:'new_slug'},
                    {data:null},
                ],
                columnDefs:[
                    {
                        targets:0,
                        orderable:false,
                        searchable:false,
                        width:'80px',
                        render:function(data,type,row,meta){
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        targets:-1,
                        searchable:false,
                        orderable:false,
                        render:function(data,type,row){


                            let URL="{{ route('slug-redirect.destroy', ':id') }}";
                            URL=URL.replace(':id',row.id);

                            let showURL="{{ route('slug-redirect.show', ':id') }}";
                            showURL=showURL.replace(':id',row.id);

                            return '<div class="d-flex">'+
                                @can('slug-redirect-show')
                                    '<a class="me-1" href="'+showURL+'"><span class="badge bg-success">Show</span></a>'+
                                @endcan
                                @can('slug-redirect-delete')
                                    '<a href="javascript:void(0)"><span class="badge bg-danger deleteBtn" data-url="'+URL+'" data-bs-toggle="modal" data-bs-target="#del-model">Delete</span></a>'+
                                @endcan
                                    '</div>';
                        }
                    }
                ]
            });

        });


        $(document).on('click','.deleteBtn',function(){
            let url = $(this).data('url');
            $('#deleteForm').attr('action',url);
        });
    </script>
@endpush