@extends('layouts.app')

@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-1">
        <div>
            <h1 class="mb-0 fw-bolder">{{ str('issue')->plural()->ucfirst() }}</h1>
        </div>
        <div>
            <a href="{{ route('issues.create') }}" class="btn btn-light shadow">
                <i class="fa fa-fw fa-plus"></i> Create
            </a>
        </div>
    </div>
    <div class="card shadow">
        <div class="card-body">
            <table id="table" class="table align-middle">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.13.8/dataTables.bootstrap5.min.css" integrity="sha512-TYucTg2DTKx05NRJKSS3IoVrDPfhuNYCw30zPRFOYgE1OD1j2VQQ+iCZj2mG8vNcXStFGdV+1XBLOWSij+P/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />    
@endpush

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-bs5/1.13.8/dataTables.bootstrap5.min.js" integrity="sha512-zw34c1fnMeY29qzodeC+GGKfyQQ7hN+a9yjGnIAZbkPPn/Xeh8Z46uea/fjq5Mwsp4bxvGKfJrTNnh/GdIZJ1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(()=>{
    'use strict'
    $('#table').DataTable({
        serverSide: true,
        ajax: {
            url: `{{ route('issues.index') }}`
        },
        columns: [
            { data:'name' },
            { 
                data:'id',
                className: 'text-end',
                width: '40px',
                render(data, type, row, meta){
                    return `<div class="dropdown dropstart">
                        <button class="btn btn-sm btn-light shadow" data-bs-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-vertical"></i></button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="{{ route('issues.index') }}/${data}/edit">Edit</a></li>
                            <li><a class="dropdown-item dt-row-delete" href="{{ route('issues.index') }}/${data}">Delete</a></li>
                        </ul>
                    </div>`;
                } 
            }
        ],
        rowCallback(row){
            let api = this.api();
            $(row).find('.dt-row-delete').click(function(e){
                e.preventDefault();
                let url = $(this).attr('href');
                Swal.fire({
                    title   : "Are you sure ?",
                    text    : "Data can't restore after deleted!",
                    icon    : "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, Delete!",
                    cancelButtonText: "No, Cancel",
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: url,
                            type: "DELETE",
                            data: {
                                _token  : '{{ csrf_token() }}',
                                _method : 'DELETE'
                            },
                            error   : function(response){
                                createAlert('Data failed to delete', { type:'danger' });
                            },
                            success : function(response) {
                                createAlert('Data has been updated');
                                api.ajax.reload(null, false);
                            }
                        });
                    }
                });
            });
        }
    });
})
</script>
@endpush