@extends('admin.layouts.app')
@section('content')

<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">Experiences</h3>
            <div class="nk-block-des text-soft">
            </div>
        </div><!-- .nk-block-head-content -->
        <div class="nk-block-head-content">
            <div class="toggle-wrap nk-block-tools-toggle">
                <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                <div class="toggle-expand-content" data-content="pageMenu">
                    <ul class="nk-block-tools g-3">
                        <li class="nk-block-tools-opt">
                            <div class="drodown">
                                <a href="{{ route('admin.experience.create') }}" class="btn btn-icon btn-primary"><em class="icon ni ni-plus"></em></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div><!-- .toggle-wrap -->
        </div><!-- .nk-block-head-content -->
    </div><!-- .nk-block-between -->
</div><!-- .nk-block-head -->


<div class="components-preview table-bordered   mx-auto">

    <div class="nk-block nk-block-lg">
        <div class="card card-preview">
            <div class="card-inner">
                <table class="datatable-init nowrap table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Level</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>

                    <tbody>
                    @if( $experiences )
                    @php $i=1; @endphp
                        @foreach( $experiences as $result )
                        
                            <tr id="rowID-{{ $result->id }}">
                                <td>{{ $i++ }}</td>
                                <td>{{ucfirst($result->level)}}</td>
                                
                                <td>
                                    <ul class="preview-list">
                                    @if($result->status == 1)
                                        <li class="preview-item"><span class="badge bg-success">Active</span></li>

                                        @else
                                        <li class="preview-item"><span class="badge bg-danger">Inactive</span></li>
                                        @endif
                                    </ul>
                                </td>
                                <td>
                                    <div class="btn-group " role="group" aria-label="Basic example">
                                        <a class="btn btn-dim btn-primary" href='{{ route("admin.experience.edit", $result->id) }}'><em class="icon ni ni-edit"></em></a>
                                    </div>
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <button class="btn btn-danger deleteItem" data-exp-id="{{ $result->id }}"><i class="icon ni ni-trash-fill"></i></button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
            </div>
        </div><!-- .card-preview -->
    </div> <!-- nk-block -->
</div><!-- .components-preview -->


@section('scripts')
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

    <script>
        $('.deleteItem').on('click', function(evt) {
            var expId = $(this).data('exp-id');
            var parent = $(this).parent().parent().parent();
            
            Swal.fire({
              title: 'Are you sure?',
              text: "You won't be able to revert this!",
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
             
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('admin.experience.delete') }}",
                    type: 'post',
                    data: {
                        expId: expId,
                    }, 
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        Swal.fire(
                          'Deleted!',
                          response.success,
                          'success'
                        )
                        parent.remove();
                    },
                    error:function(response){
                        Swal.fire({
                          icon: 'error',
                          title: 'Oops...',
                          text: 'Something went wrong!',
                        })
                    },
                })
                
              }
            })
            
            
        }); 

    </script>

    
@endsection

@endsection