@extends('layouts.main')

@section('title', ' Internal Site')

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

        <section class="content">
            <div class="container-fluid">
                <div class="row m-2">
                    <table id="internalSiteTable" class="table table-sm table-hover nowrap" width="100%">
                        <thead>
                            <tr>
                                <th>S.N</th>
                                <th>Name</th>
                                <th>Is Active</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>S.N</th>
                                <th>Name</th>
                                <th>Is Active</th>
                                <th>Action</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div><!-- /.container-fluid -->
        </section>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#internalSiteTable').DataTable({
                bSortCellsTop: true,
                scrollX: true,
                fixedColumns: {
                    left: 0,
                    right: 1
                },
                fixedHeader: {
                    header: true,
                },
                ajax: {
                    url: "{{ route('get-internal-site') }}",
                    dataSrc: 'internalSite'
                },
                columns: [{
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'active',
                        render: function(data, type, row, meta) {
                            return '<input name="internalsite_is_active_toggle" class="internalsite-is-active-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, row, meta) {
                            var editUrl = "{{ route('internal-site.edit', ':id') }}";
                            editUrl = editUrl.replace(':id', row.id);

                            var deleteUrl = "{{ route('internal-site.destroy', ':id') }}";
                            deleteUrl = deleteUrl.replace(':id', row.id);

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

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

            var updateUrl = "{{ route('change-internalsite-active-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_active': isChecked,
                },
                success: function(response) {
                    if (response == 1) {
                        Toast.fire({
                            icon: 'success',
                            title: 'Active Status updated successfully.',
                        });
                    }
                },
                error: function(response) {
                    Swal.fire('Something went wrong, please contact us!!');
                }
            });
        });

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

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

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                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: 'Internal site deleted successfully.'
                                });

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