@extends('layouts.admin.tabler')
@section('content')
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <!-- Page pre-title -->
                            <h2 class="page-title">
                    Data Karyawan
                </h2>
            </div>

        </div>
    </div>
</div>
<div class="page-body">
<div class="container-xl">
<div class="row">
    <div class="col-12">
        <div class="card">
        <div class="card-body">
        <div class="row">
                            <div class="col-12">
                                @if (Session::get('success'))
                                <div class="alert alert-success">
                                    {{ Session::get('success') }}
                                </div>
                                @endif

                                @if (Session::get('warning'))
                                <div class="alert alert-warning">
                                    {{ Session::get('warning')}}
                                </div>
                                @endif
                            </div>
                        </div>
            <div class="row">
                <div class="col-12">
                    <a href="#" class="btn btn-primary" id="btnTambahkaryawan">
                    <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                    Tambah Data</a>

                </div>
            </div>
        <table class="table table-bordered mt-2">
            <thead>
                <tr>
                <th>No.</th>
                <th>Nik</th>
                <th>Nama Karyawan</th>
                <th>Jabatan</th>
                <th>No HP</th>
                <th>Foto</th>
                <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($karyawan as $d)
                @php
                        $path = Storage::url('uploads/karyawan/'.$d->foto);
                    @endphp
                <tr>
                    <td>{{ $loop->iteration}}</td>
                    <td>{{$d->nik}}</td>
                    <td>{{$d->nama_lengkap}}</td>
                    <td>{{$d->jabatan}}</td>
                    <td>{{ $d->no_hp }}</td>
                    <td> 
                        @if (empty($d->foto))
                        <img src="{{ asset('assets/img/nophoto.png') }}" class="avatar" alt="">
                        @else 
                        <img src="{{ url($path) }}" class="avatar" alt="">
                        @endif 
                        
                    </td>
                    <td> <div class="btn-group">
                                                    <a href="#" class="edit btn btn-info btn-sm" nik="{{ $d->nik }}">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="30" height="30" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                                                            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                                                            <path d="M16 5l3 3"></path>
                                                        </svg>
                                                    </a>
                                                    <form action="/karyawan/{{ $d->nik }}/delete" method="POST" style="margin-left:5px" hidden>
                                                        @csrf
                                                        <!-- @method('DELETE') -->
                                                        <a class="btn btn-danger btn-sm delete-confirm">
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-filled" width="30" height="30" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                                <path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z" stroke-width="0" fill="currentColor"></path>
                                                                <path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor"></path>
                                                            </svg>
                                                        </a>
                                                    </form>
                                                </div></td>
                                   </tr>
                    
                @endforeach
            </tbody>
        </table>
        </div>
        </div>
    </div>
</div>
</div>

</div>
<!-- Modal Tambah -->
<div class="modal modal-blur fade" id="modal-inputkaryawan" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Karyawan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                        <form action="/karyawan/store" method="POST" id="frmKaryawan" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-12">
            <div class="input-icon mb-3">
                <span class="input-icon-addon">
                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-user"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2a5 5 0 1 1 -5 5l.005 -.217a5 5 0 0 1 4.995 -4.783z" /><path d="M14 14a5 5 0 0 1 5 5v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1a5 5 0 0 1 5 -5h4z" /></svg>
                </span>
                <input type="text" value="" class="form-control" id="nik" name="nik" placeholder="NIK">
                
            </div>
            <div class="input-icon mb-3">
                <span class="input-icon-addon">
                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-user"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2a5 5 0 1 1 -5 5l.005 -.217a5 5 0 0 1 4.995 -4.783z" /><path d="M14 14a5 5 0 0 1 5 5v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1a5 5 0 0 1 5 -5h4z" /></svg>
                </span>
                <input type="text" value="" class="form-control" id="nama_lengkap" name="nama_lengkap" placeholder="Nama Lengkap">
                
            </div>
            <div class="input-icon mb-3">
                <span class="input-icon-addon">
                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-user"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2a5 5 0 1 1 -5 5l.005 -.217a5 5 0 0 1 4.995 -4.783z" /><path d="M14 14a5 5 0 0 1 5 5v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1a5 5 0 0 1 5 -5h4z" /></svg>
                </span>
                <input type="text" value="" class="form-control" id="jabatan" name="jabatan" placeholder="Jabatan">
                
            </div>
            <div class="input-icon mb-3">
                <span class="input-icon-addon">
                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-phone"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
                </span>
                <input type="text" value="" class="form-control" id="no_hp" name="no_hp" placeholder="No HP">
                
            </div>
            <div class="row mt-2">
                <div class="col-12">
                                        <input type="file" class="form-control">
                </div>
                
            </div>
                    </div>
    </div>
    <div class="row mt-2">
        <div class="col-12">
            <div class="form-group">
                <button class="btn btn-primary w-100"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-send"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 14l11 -11" /><path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5" /></svg>Simpan</button>
            </div>
        </div>
    </div>
</form>

            </div>

        </div>
    </div>
</div>
<!-- {{-- Modal Edit --}} -->
<div class="modal modal-blur fade" id="modal-editkaryawan" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Data Karyawan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="loadeditform">

            </div>

        </div>
    </div>
</div>

@endsection

@push('myscript')
<script>

    $(function(){
$("#btnTambahkaryawan").click(function(){
    
$("#modal-inputkaryawan").modal("show");
});

$(".edit").click(function() {
            var nik = $(this).attr('nik');
            $.ajax({
                type: 'POST'
                , url: '/karyawan/edit'
                , cache: false
                , data: {
                    _token: "{{ csrf_token(); }}"
                    , nik: nik
                }
                , success: function(respond) {
                    $("#loadeditform").html(respond);
                }
            });
            $("#modal-editkaryawan").modal("show");
        });

        $(".delete-confirm").click(function(e) {
            var form = $(this).closest('form');
            e.preventDefault();
            Swal.fire({
                title: 'Apakah Anda Yakin Data Ini Mau Di Hapus ?'
                , text: "Jika Ya Maka Data Akan Terhapus Permanent"
                , icon: 'warning'
                , showCancelButton: true
                , confirmButtonColor: '#3085d6'
                , cancelButtonColor: '#d33'
                , confirmButtonText: 'Ya, Hapus Saja!'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                    Swal.fire(
                        'Deleted!'
                        , 'Data Berhasil Di Hapus'
                        , 'success'
                    )
                }
            })
        });
$('#frmKaryawan').submit(function(){
var nik = $("#nik").val();
var nama_lengkap = $("#nama_lengkap").val();
var jabatan = $("#jabatan").val();
var no_hp = $("#no_hp").val();
if(nik== ""){
    Swal.fire({
        title: 'Warning!'
        , text: 'Nik Harus Diisi'
        , icon: 'warning'
        , confirmButtonText: 'Ok'
    }).then((result) => {
        $("#nik").focus();
    })

    return false;
} else if(nama_lengkap== ""){
    Swal.fire({
        title: 'Warning!'
        , text: 'Nama Lengkap Harus Diisi'
        , icon: 'warning'
        , confirmButtonText: 'Ok'
    }).then((result) => {
        $("#nama_lengkap").focus();
    })

    return false;
} else if (jabatan== ""){
    Swal.fire({
        title: 'Warning!'
        , text: 'Jabatan Harus Diisi'
        , icon: 'warning'
        , confirmButtonText: 'Ok'
    }).then((result) => {
        $("#nik").focus();
    })

    return false;
} else if (no_hp== ""){
    Swal.fire({
        title: 'Warning!'
        , text: 'No HP Harus Diisi'
        , icon: 'warning'
        , confirmButtonText: 'Ok'
    }).then((result) => {
        $("#no_hp").focus();
    })

    return false;
}

});
    });

</script>
    
@endpush