@extends('admin.layouts.main', ['title' => 'Data Penyakit'])
@section('content')
    <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">
                        Data Penyakit
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-body">
                    <a href="{{ route('penyakit.add') }}" class="btn btn-primary mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded-plus"
                            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"></path>
                            <path d="M9 12h6"></path>
                            <path d="M12 9v6"></path>
                            <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
                        </svg>
                        Tambah
                    </a>
                    <div>
                        <table id="table" class="table card-table table-vcenter text-nowrap datatable">
                            <thead>
                                <tr>
                                    <th width="5%">No</th>
                                    <th>Kode Penyakit</th>
                                    <th>Nama Penyakit</th>
                                    <th>Solusi Penyakit</th>
                                    <th>Gambar Penyakit</th>
                                    <th width="125px">Aksi</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        const table = $('#table').DataTable({
            ordering: true,
            autowidth: false,
            serverSide: true,
            processing: true,
            responsive: true,
            ajax: {
                'url': '{{ route('penyakit.index') }}',
            },
            columns: [{
                    data: 'DT_RowIndex',
                    width: '10px',
                    searchable: false,
                    sortable: false
                },
                {
                    data: 'code',
                    searchable: true,
                    sortable: true
                },
                {
                    data: 'name',
                    searchable: true,
                    sortable: true
                },
                {
                    data: 'solution',
                    searchable: true,
                    sortable: true
                },
                {
                    data: 'image',
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            columnDefs: [{
                className: 'text-center',
                targets: '_all'
            }]
        });

        if (window.performance && window.performance.navigation.type === 2) {} else {
            @if (session('success'))
                Swal.fire({
                    position: 'top-end',
                    icon: 'success',
                    title: '{!! session('success') !!}',
                    showConfirmButton: false,
                    timer: 1500,
                    toast: true
                })
            @endif

            @if (session('error'))
                Swal.fire({
                    position: 'top-end',
                    icon: 'error',
                    title: '{!! session('error') !!}',
                    showConfirmButton: false,
                    timer: 1500,
                    toast: true
                })
            @endif
        }

        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('body').on('click', '#delete', function() {
            let id = $(this).val();

            Swal.fire({
                title: 'Apakah anda yakin akan menghapus data ini ?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya',
                confirmButtonColor: '#3085d6',
                cancelButtonText: 'Tidak',
                cancelButtonColor: '#FF0000',
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        type: "POST",
                        url: "/admin/penyakit/action/delete",
                        data: {
                            id: id
                        },
                        success: function(response) {
                            if (response.status == 'success') {
                                Swal.fire({
                                    position: 'top-end',
                                    icon: 'success',
                                    title: response.message,
                                    showConfirmButton: false,
                                    timer: 1500,
                                    toast: true
                                })
                                table.draw()
                            }
                            if (response.status == 'error') {
                                Swal.fire({
                                    position: 'top-end',
                                    icon: 'error',
                                    title: response.message,
                                    showConfirmButton: false,
                                    timer: 1500,
                                    toast: true
                                })
                            }
                        }
                    });
                }
            })
        });
    </script>
@endpush