@extends('layouts.app')
@section('content')
    <div class="page">
        <div class="page-wrapper">
            <!-- Page header -->
            <div class="page-header d-print-none">
                <div class="container-xl">
                    <div class="row g-2 align-items-center">
                        <div class="col">
                            <h2 class="page-title">
                                Carousels
                            </h2>
                        </div>
                        <!-- Page title actions -->
                        <div class="col-auto">
                            <div class="d-flex">
                                <a href=" {{ route('carousel.create') }}" class="btn btn-primary">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                                    New Carousel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Page body -->
            @include('homeScreen.carousel.partials.carousel-list', ['rows' => $rows])
        </div>
    </div>

    <div class="modal modal-blur fade" id="carousel-detail-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Carousel Detail</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <span id="carousel-detail-placeholder"></span>
                </div>
            </div>
        </div>
    </div>

@stop

@push('javascript')

    <script>
        var dataTable = $('.carouselDataTable').DataTable({
            rowReorder : true,
            fnRowCallback: function (nRow, aData, iDisplayIndex) {
                nRow.setAttribute('id', aData.id); //Initialize row id for every row
                nRow.setAttribute('data-id', aData.id); //Initialize row id for every row
                nRow.setAttribute('data-order-id', aData.order); //Initialize row id for every row
            },
            responsive: true,
            "bLengthChange": true,
            "lengthMenu": [ 10, 25, 50, 75, 100 ],
            // "dom": '<"toolbar">Blfrtip',
            "bSort" : true,
            processing: true,
            serverSide: true,
            "ajax": {
                "url": "{!! route('carousel.data') !!}",
                "type": "POST",
                'headers': {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                "data": function ( d ) {
                    if ($("#showInactive").is(":checked"))
                    {
                        d.include_inactive_items = 1;
                    }
                }
            },
            columns: [
                {data: 'id'},
                // {data: 'heading', name: 'home_screen_carousels.heading'},
                // {data: 'sub_text', name: 'home_screen_carousels.sub_text'},
                {data: "image", "render" : function (data){
                        return '<img src="'+ data +'" style="width: 180px; height: 80px" alt="" />'
                    }},
                {data: "is_active", "render" : function (data){
                        if (data == 'Yes') {
                            return '<span class="badge bg-green">Yes</span>'
                        } else {
                            return '<span class= "badge bg-red">No</span>'
                        }
                    }},
                {data: "position"},
                {data: "created_at"},
                {
                    data: "action", "render": function (data) {
                        var $columnData = '';
                        $columnData += '<button style="margin-right: 5px; border-radius: 5px;" title="show" class="btn btn-info btn-sm"  data-title="Carousel Details" data-bs-toggle="modal" data-bs-target="#showModal" data-request-url=" '+ data.show +'" ><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg></button>';
                        $columnData += '<a href = "' + data.edit + '" style="margin-right: 5px; border-radius: 5px;" title="edit" class="btn btn-primary btn-sm" ><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg></a>';
                        $columnData += '<a href = "' + data.delete + '" style="margin-right: 5px; border-radius: 5px;" title="delete" class="btn btn-danger btn-sm remove-size" ><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="width: 18px; height: 18px"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="4" y1="7" x2="20" y2="7" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg></a>';
                        return $columnData;
                    }
                }
            ],
            "order": [[ 5, 'desc' ]]
        });


        dataTable.on('row-reorder', function ( e, diff, edit ) {
            if(edit.nodes.length <= 0){
                return;
            }
            console.log(edit.nodes);
            const from = $(edit.nodes[0]).attr('data-id');
            const to = $(edit.nodes[1]).attr('data-id');
            updateOrder(from, to);
        });
        function updateOrder(from, to){
            $.ajax({
                method: "POST",
                url : "{{route('carousel.reorder')}}",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    from,
                    to
                },
                success: function(res){
                    console.log(res)
                }
            })
        }
    </script>
    <script>
        $(function() {
            $(document).off('click', '.remove-size').on('click', '.remove-size', function (e) {
                e.preventDefault();
                var action_url = $(this).attr('href');
                Swal.fire({
                    title: 'Are you sure?',
                    type: 'warning',
                    text: 'Do you really want to remove this?',
                    icon: 'warning',
                    confirmButtonText: 'Yes, delete it!',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                }).then((result) => {
                    if (result.value) {
                        window.location.href = action_url;
                    }
                });
            });
        });
    </script>

@endpush