@extends('layouts.admin')
@section('title','TEKNISI')
@section('navtitle','Data Teknisi')
@section('content')
    <div class="card">
        <div class="card-body">
            <table class="table table-striped" id="datatable">
                <thead>
                    <tr>
                        <th>CREATED_AT</th>
                        <th>NAMA</th>
                        <th>STATUS</th>
                        <th width="100">ACTION</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <x-modal-form/>
@endsection
@push('css')
    <link rel="stylesheet" href="{{asset('theme/css/datatable.css')}}"/>
    <link rel="stylesheet" href="{{asset('theme/datatable/datatable.css')}}"/>
    <link rel="stylesheet" href="{{asset('theme/datatable/responsive.css')}}"/>
@endpush
@push('js')
    <script src="{{asset('theme/datatable/datatables.js')}}"></script>
    <script src="{{asset('theme/c/mytable.js')}}"></script>
    <script>
        var tblx = $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            order:[[0,'desc']],
            ajax: { url: '{{route("teknisi.data")}}', type: 'POST',},
            columns: [
                { data: 'created_at', searchable: false },
                { data: 'nama' },
                { data: 'status', searchable: false, className: 'text-center'},
                { data: 'action', searchable: false, className: 'text-center' }
            ],
        });
        $('#datatable').on('click', '.btn-reject',function(){
            var href = $(this).data('href');
            Swal.fire({
                title: 'Tolak data  ?',
                text: "Pendaftaran akan ditolak dan terhapus secara permanen.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Tolak',
                confirmButtonColor: 'var(--bs-danger)',
                showLoaderOnConfirm: true,
                preConfirm: ()=>{
                    return new Promise(function(resolve, reject) {
                        $.ajax({
                            url:href, type:'GET', dataType:'JSON',
                            error:(e)=>resolve({error:true,message:`error ${e.status}: ${e.statusText}`}),
                            success:(r)=>resolve(r)
                        });
                    });
                },allowOutsideClick:false
            }).then((r)=>{
                if(r.isConfirmed){
                    let v = r.value;
                    if(v.success){
                        bsAlert.success('SUCCESS','Data Berhasil diTolak');
                        tblx.ajax.reload();
                    }else{
                        bsAlert.error('ERROR',v.message);
                    }
                }
            });
        });
        $('#datatable').on('click', '.btn-sts',function(){
            var href = $(this).data('href');
            let title = $(this).attr('title');
            let html = $(this).html();
            var btn = $(this); 
            Swal.fire({
                title: title,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'OK',
                confirmButtonColor: 'var(--bs-warning)',
                showLoaderOnConfirm: true,
                preConfirm: ()=>{
                    return new Promise(function(resolve, reject) {
                        $.ajax({
                            url:href, type:'GET', dataType:'JSON',
                            error:(e)=>resolve({error:true,message:`error ${e.status}: ${e.statusText}`}),
                            success:(r)=>resolve(r),
                        });
                    });
                },allowOutsideClick:false
            }).then((r)=>{
                if(r.isConfirmed){
                    let v = r.value;
                    if(v.success){
                        bsAlert.success('SUCCESS',v.message);
                        btn.removeClass('btn-outline-secondary btn-primary');
                        if(v.sts==1){
                            html = "Aktif";
                            btn.addClass('btn-primary');
                            btn.attr('title','Non-Aktifkan User ?');
                        }else{
                            btn.addClass('btn-outline-secondary');
                            html = "Non-Aktif";
                            btn.attr('title','Aktifkan User ?');
                        }
                    }else{
                        bsAlert.error('ERROR',v.message);
                    }
                }
                btn.html(html);
            });
        });
    </script>
@endpush