@extends('layouts.main')

@section('title')
    KYC Forms: Index
@endsection

@section('content')
    <div class="card m-3">
        <div class="content-header">
            <div class="container-fluid">
                {{-- <div class="row">
                    <div>
                        <a href="{{ route('kyc.create') }}" class="btn btn-sm btn-primary"><i
                class="fa fa-plus"></i>&nbsp;&nbsp;Add KYC Form</a>
        </div>
    </div> --}}
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <fieldset class="border mb-3">
                    <legend class="float-none w-auto ps-2 fs-5 font-weight-bold">Export Filter</legend>
                    <form action="{{ route('kyc.excel-export') }}" method="POST" id="excelExportForm">
                        @csrf
                        <div class="row p-2">
                            <div class="col-sm-12 col-md-4 col-lg-4 mb-3">
                                <label for="applicationDate" class="form-label fs-sm">Application Date</label>
                                <input type="text" class="js-flatpickr form-control" id="applicationDate"
                                    name="date_range" placeholder="Select Date Range"
                                    value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" data-mode="range">
                            </div>

                            <div class="col-sm-12 col-md-2 col-lg-2">
                                <div class="btn-group" role="group">
                                    <button type="submit" class="btn btn-success">Export</button>
                                    <button type="button" class="btn btn-primary" id="formResetBtn">Reset</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </fieldset>

                <div class="row m-2">
                    <table id="kycFormTable" class="table table-sm table-hover nowrap" width="100%">
                        <thead>
                            <tr>
                                <th>S.N</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Is Verified</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>S.N</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Is Verified</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#applicationDate').daterangepicker({
                opens: 'left'
            });

            $('#kycFormTable').DataTable({
                bSortCellsTop: true,
                scrollX: true,
                fixedColumns: {
                    left: 0,
                    right: 1
                },
                fixedHeader: {
                    header: true,
                },
                ajax: {
                    url: "{{ route('get-kyc-datas') }}",
                    dataSrc: 'kycDatas'
                },
                columns: [{
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: 'full_name_en',
                        render: function(data, type, row) {
                            return row.account_opening_detail.name;
                        }
                    },
                    {
                        data: 'email',
                        render: function(data) {
                            return data;
                        }
                    },
                    {
                        data: 'is_verified',
                        render: function(data, type, row, meta) {
                            return '<input name="kyc_is_verified_toggle" class="kyc_is_verified_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: 'created_at',
                        render: function(data) {
                            const dateTime = new Date(data);
                            const dateOnly = dateTime.toISOString().split('T')[0];
                            const date = dateOnly.replace(/-/g, "/");

                            return date;
                        }
                    },
                    {
                        data: null,
                        render: function(data, type) {

                            var showUrl = "{{ route('kyc.show', ':id') }}";
                            showUrl = showUrl.replace(':id', data.id);

                            var editUrl = "{{ route('kyc.edit', ':id') }}";
                            editUrl = editUrl.replace(':id', data.id);

                            var deleteUrl = "{{ route('kyc.destroy', ':id') }}";
                            deleteUrl = deleteUrl.replace(':id', data.id);

                            var printUrl = "{{ route('kyc.print', ':id') }}";
                            printUrl = printUrl.replace(':id', data.id);

                            return "<a href='" + showUrl +
                                "' class='btn btn-sm btn-success kyc-show' style='min-width: 150px;' title='View and Verify'><i class='fa fa-eye'> View</i></a>" +
                                "<a href='" + printUrl +
                                "' target='__blank' class='btn btn-sm btn-primary kyc-print ml-2' title='Print'><i class='fa fa-print'></i></a>";

                        }
                    }
                ],
                drawCallback: function(settings) {
                    // Manually initialize the plugin after each table draw
                    $('.kyc_is_verified_toggle').each(function() {
                        $(this).bootstrapToggle();
                    });
                },
            });
        });

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

            var updateUrl = "{{ route('change-kyc-verified-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_verified': isChecked,
                },
                success: function(response) {
                    if (response == 1) {
                        Toast.fire({
                            icon: 'success',
                            title: 'Verfied Status updated successfully.',
                        });
                    }
                },
                error: function(response) {
                    Swal.fire('There is some issue while updating!!');
                }
            });
        });

        $(document).on("click", ".kyc-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) {
                            if (response == 1) {
                                Toast.fire({
                                    icon: 'success',
                                    title: 'KYC Form deleted successfully.'
                                });

                                $('#kycTable').DataTable().ajax.reload();
                            } else {
                                Toast.fire({
                                    icon: 'warning',
                                    title: 'Cannot delete the kyc form! Try Again!'
                                });
                            }
                        },
                        error: function(response) {
                            Swal.fire(
                                'Something went wrong, please contact us!!'
                            );
                        }
                    });
                }
            });
        });

        $(document).on('click', '#formResetBtn', function(e) {
            e.preventDefault();
            $("#excelExportForm")[0].reset()
        });
    </script>
@endsection