@extends('layouts.main')

@section('title')
    Account Opening: Index
@endsection

@section('content')
    <div class="card m-3">
        <section class="content">
            <div class="container-fluid">
                <div class="row m-2">
                    <table id="accountOpeningTable" class="table table-sm table-hover nowrap" width="100%">
                        <thead>
                            <tr>
                                <th>S.N</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Account Type</th>
                                <th>Citizen Type</th>
                                <th>Contact</th>
                                <th>Is Approved</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>S.N</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Account Type</th>
                                <th>Citizen Type</th>
                                <th>Contact</th>
                                <th>Is Approved</th>
                                <th>Action</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#accountOpeningTable').DataTable({
                bSortCellsTop: true,
                scrollX: true,
                fixedColumns: {
                    left: 0,
                    right: 1
                },
                fixedHeader: {
                    header: true,
                },
                ajax: {
                    url: "{{ route('get-accountOpening-datas') }}",
                    dataSrc: 'accountOpeningDatas'
                },
                columns: [{
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: 'first_name',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'last_name',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'accountType_id',
                        render: function(data, type, row) {
                            return row.account_types.name;
                        }
                    },
                    {
                        data: 'citizenship_type',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'phone_no',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'is_approved',
                        render: function(data, type, row, meta) {
                            return '<input name="accountOpening_is_approved_toggle" class="accountOpening-is-approved-toggle" data-on="True" data-off="False" data-id="' +
                                row.id +
                                '" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger"' +
                                (data === 1 ? 'checked' : '') + ' data-size="small" />';
                        }
                    },
                    {
                        data: null,
                        render: function(data, type) {
                            var editUrl = "{{ route('accountOpening.edit', ':id') }}";
                            editUrl = editUrl.replace(':id', data.uuid);

                            var deleteUrl = "{{ route('accountOpening.destroy', ':id') }}";
                            deleteUrl = deleteUrl.replace(':id', data.uuid);
                            console.log(deleteUrl);

                            return "<a href='" + editUrl +
                                "' class='btn btn-sm btn-success accountOpening-edit'><i class='fa fa-edit'></i></a>" +
                                "<button href='" + deleteUrl +
                                "' class='btn btn-sm btn-danger accountOpening-delete ml-2'><i class='fa fa-trash'></i></button>";
                        }
                    }
                ],
                drawCallback: function(settings) {
                    $('.accountOpening-is-approved-toggle').each(function() {
                        $(this).bootstrapToggle();
                    });
                },
            });
        });

        $(document).on("change", ".accountOpening-is-approved-toggle", function(e) {
            e.preventDefault();
            var isChecked = $(this).prop('checked');
            var id = $(this).attr('data-id');

            var updateUrl = "{{ route('change-accountOpening-approved-status', [':id']) }}";
            updateUrl = updateUrl.replace(':id', id);

            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: "PUT",
                url: updateUrl,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: {
                    'is_approved': isChecked,
                },
                success: function(response) {
                    if (response == 1) {
                        Toast.fire({
                            icon: 'success',
                            title: 'Approved Status updated successfully.',
                        });
                    }
                },
                error: function(response) {
                    Swal.fire('Something went wrong, please contact us!!');
                }
            });
        });

        $(document).on("click", ".accountOpening-delete", function(e) {
            e.preventDefault();

            var route = $(this).attr('href');
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert it.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#b1b1b0',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        type: "DELETE",
                        url: route,
                        success: function(response) {
                            console.log(response);
                            if (response == 1) {
                                Toast.fire({
                                    icon: 'success',
                                    title: 'AccountOpening deleted successfully.'
                                });

                                $('#accountOpeningTable').DataTable().ajax.reload();
                            } else {
                                Toast.fire({
                                    icon: 'warning',
                                    title: 'Cannot delete the accountOpening! Try Again!'
                                });
                            }
                        },
                        error: function(response) {
                            Swal.fire(
                                'Something went wrong, please contact us!!'
                            );
                        }
                    });
                }
            });
        });
    </script>
@endsection