@extends('layout.default')
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
    <div class="card card-custom">
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="card-title">
                <h3 class="card-label">Platform
                    {{--                <div class="text-muted pt-2 font-size-sm">Datatable initialized from HTML table</div>--}}
                </h3>
            </div>
            <div class="card-toolbar">
                <a href="{{ url('/admin/campaign-analyzer/platforms/create') }}" class="btn btn-primary font-weight-bolder">
                    <span class="svg-icon svg-icon-light svg-icon-2x">
                        <i style="color: white" class="flaticon2-plus"></i>
                    </span>New Platform
                </a>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-separate table-head-custom table-foot-custom table-checkable dataTable dtr-inline" id="kt_datatable">
               <thead>
                <tr>
                    <th>Title</th>
                    <th>Status</th>
                    <th>Metrics</th>
                    <th>Rules</th>
                    <th>Instructions</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                @foreach($platforms as $platform)
                    <tr>
                        <td>{{ $platform->title }}</td>
                        <td>
                            <span class="switch switch-icon">
                                <label>
                                    <input type="checkbox" name="active" onclick="changeStatus(this)" data-url="{{ url('/admin/campaign-analyzer/platforms-change-status/' . $platform->id) }}" data-token="{{ csrf_token() }}" {{ ($platform->status) ? "checked" : null }} >
                                    <span></span>
                                </label>
                            </span>
                        </td>
                        <td><a href="{{ url('/admin/campaign-analyzer/platform/' . $platform->id . '/metrics') }}" class="btn btn-danger" title="metric">Access</a></td>
                        <td><a href="{{ url('/admin/campaign-analyzer/platform/' . $platform->id . '/rules') }}" class="btn btn-info" title="rules">Access</a></td>
                        <td>{!! $platform->instructions !!}</td>
                        <td>
                            <a href="{{ url('/admin/campaign-analyzer/platforms/' . $platform->id . '/edit') }}" class="btn" title="edit"><i class="m-menu__link-icon flaticon-edit"></i></a>
                            <button onclick="deleteKB(this)" id="{{$platform->id}}" type="button" data-url="{{ url('/admin/campaign-analyzer/platforms/' . $platform->id) }}" data-token="{{ csrf_token() }}" class="btn" title="Delete">
                                <i class="m-menu__link-icon flaticon2-trash"></i>
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/datatable.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/sweetdelete.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        function changeStatus(buttonSwitch) {
            var token = $(buttonSwitch).data('token');
            var url = $(buttonSwitch).data('url');
            Swal.fire({
                title: "Would you like to change the status?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "Cancel",
                reverseButtons: true
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: url,
                        type: 'post',
                        data: {_method: 'post', _token: token},
                        success: function() {
                            Swal.fire({
                                icon: "success",
                                title: "Changed!",
                            }).then(function(){
                                location.reload();
                            });
                        },
                        error: function(){
                            Swal.fire({
                                icon: "error",
                                title: "Oops!",
                                text: "The status cannot be changed",
                            });
                        },
                    });
                } else {
                    if($(clickedButton).is(':checked') == false) {
                        clickedButton.checked = true;
                    } else {
                        clickedButton.checked = false;
                    }
                }
            });
        };
    </script>
@endsection