@extends('operations.layout.mainlayout')

@section('content')
    {{--    @if(session('role') != 4 && session('role') != 3 && session('role') != 9)--}}
    {{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
    {{--    @endif--}}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: #e35a80!important;">Westgard Rules</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="mx-auto col-md-8">

                        <!-- /.card -->

                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Status</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($rules as $rule)
                                        <tr>
                                            <td>{{$rule->NAME}}</td>
                                            <td>{{$rule->DESCRIPTION}}</td>
                                            <td>

                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox" id="rule-{{$rule->ID}}" rule-id="{{$rule->ID}}" class="custom-control-input rule-status" @if($rule->is_active_for_profile) checked @endif>
                                                    <label class="custom-control-label" for="rule-{{$rule->ID}}">
                                                    </label>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('footer-scripts')
    <script>
        $('body').on('change', '.rule-status', function() {
            let id = $(this).attr("rule-id");
            let is_checked  = $(this).is(":checked");
            var checkbox = $(this);

            var data = {
                is_checked,
                id
            }
            checkbox.prop("disabled", true);
            $.ajax({
                type: "POST",
                url: "/operations/qc/westgard/status",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                toastr.success("Changed Successfully");
            }).fail(function(jqXHR, textStatus, errorThrown) {
                // Put the switch back where it was so it keeps showing the
                // state that is actually stored.
                checkbox.prop("checked", !is_checked);
                var message = (jqXHR.responseJSON && jqXHR.responseJSON.error) ? jqXHR.responseJSON.error : "Error";
                toastr.error(message);
            }).always(function() {
                checkbox.prop("disabled", false);
            });
        });
    </script>
@endsection