@extends('admin.layouts.app')

@section('title','Users')

@section('content')
    <div class="card mb-3">
        <div class="card-header" style="position: relative;">
            <i class="fa fa-table"></i> Languages
            <a href="{{ route('admin.language.option.create') }}" class="wlc btn btn-sm btn-success"><i class="fa fa-plus"></i> {{ __('New language Option') }}</a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Option</th>
                        <th>Badges</th>
                        <th>Language</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <th>#</th>
                        <th>Option</th>
                        <th>Badges</th>
                        <th>Language</th>
                        <th>Action</th>
                    </tr>
                    </tfoot>
                    <tbody>
                    @if(isset($languageOptions))
                        @php
                        $i = 1;
                        @endphp
                        @foreach($languageOptions as $option)
                            <tr>
                                <td>{{ $i++ }}</td>
                                <td>{{ $option->name }}</td>
                                <td>
                                    @if($option->badges->count() > 0)
                                        @foreach($option->badges as $optionBadge)
                                            <li>{{ $optionBadge->badge->name }}</li>
                                        @endforeach
                                    @endif
                                </td>
                                <td>{{ $option->language->name }}</td>
                                <td>
                                    <a class="badge badge-primary"  href="{{ route('admin.language.option.edit', $option->id) }}">Edit</a>
                                    <a class="badge badge-danger delete-language-option" data-sid="{{ $option->id }}"  href="#">Delete</a>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(document).ready(function () {

            //new request
            var deleteRequest;

            $('.delete-language-option').on('click', function (e) {
                e.preventDefault();

                // Abort any pending request
                if (deleteRequest) {
                    deleteRequest.abort();
                }
                var sid = $(this).data("sid");
                var token =  $('meta[name="csrf-token"]').attr('content');
                var url = '{{ route("admin.language.option.delete",":sid") }}';
                url = url.replace(':sid', sid);


                const swalWithBootstrapButtons = Swal.mixin({
                    customClass: {
                        confirmButton: 'btn btn-success',
                        cancelButton: 'btn btn-danger'
                    },
                    buttonsStyling: false
                })

                swalWithBootstrapButtons.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel!',
                    reverseButtons: true
                }).then((result) => {
                    if (result.value) {

                        deleteRequest = $.ajax({
                            url: url,
                            type: "DELETE",
                            data: {
                                "id": sid,
                                "_method": 'DELETE',
                                "_token": token,
                            },
                        });
                        // Callback handler that will be called on success
                        deleteRequest.done(function (response, textStatus, jqXHR){
                            //console.log(response);
                            if($.isEmptyObject(response.error)){
                                swal.fire({icon: response.type, title: response.title, text: response.text})
                                    .then((result) => {
                                        // Reload the Page
                                        location.reload();
                                    });
                            }else{
                                //
                                console.log("errororororo");
                            }
                        });

                        // Callback handler that will be called on failure
                        deleteRequest.fail(function (jqXHR, textStatus, errorThrown){
                            // Log the error to the console
                            console.error(
                                "The following error occurred: "+
                                textStatus, errorThrown
                            );
                        });
                    } else if (
                        /* Read more about handling dismissals below */
                        result.dismiss === Swal.DismissReason.cancel
                    ) {
                        swalWithBootstrapButtons.fire(
                            'Cancelled',
                            'experience is safe :)',
                            'error'
                        )
                    }
                })
            })
        })
    </script>
@endsection