@extends('layouts.index')
@section('title')
    Employee Masterlist
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/prism/prism.css" />
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{ url('/') }}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Employee Masterlist
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Employee Masterlist</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->

        <div class="row">
            <!-- Column -->
            <div class="col-lg-8 col-xl-9 col-md-9">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center mb-4">
                            <h4>All of Employee</h4>
                            @role('admin')
                                <div class="ms-auto">
                                    <div class="btn-group">
                                        <a href="{{ url('master-pegawai/create') }}"> 
                                            <button type="button"
                                                class="btn btn-light-primary text-primary font-weight-medium px-4"
                                                data-bs-toggle="modal" data-bs-target="#createmodel">
                                                <i class="fa fa-plus"></i> Add Data
                                            </button>
                                        </a>
                                    </div>
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" onclick="registrasiAkun()"> 
                                            <button type="button"
                                                class="btn btn-light-success text-success font-weight-medium px-4"
                                                data-bs-toggle="modal" data-bs-target="#createmodel">
                                                <i class="fa fa-user"></i> Register All Employee
                                            </button>
                                        </a>
                                    </div>
                                </div>
                            @endrole
                        </div>
                        <div class="table-responsive">
                            <table id="zero_config" class="table table-bordered display">
                                <thead>
                                    <tr>
                                        <th style="width: 200px;">Nama</th>
                                        <th>Position</th>
                                        <th>Division</th>
                                        <th>Registered</th>
                                        <th>Option</th>
                                    </tr>
                                </thead>
                                <tbody id="list">
                                    @foreach ($list as $item)
                                        {{-- @php
                                            dd($item->id);
                                        @endphp --}}
                                        <tr id="list_{{ $item->id }}">
                                            <td>
                                                <a href="{{ url('master-pegawai/detail') }}">
                                                @php
                                                    $path = asset('back/images/users/3.jpg');
                                                    if ($item->pegawai) {
                                                        if ($item->pegawai->user) {
                                                            if (Storage::exists($item->pegawai->user->photos)) {
                                                                $path = Storage::url($item->pegawai->user->photos);
                                                            }else{
                                                                $path = $item->pegawai->foto_storage;
                                                            }
                                                        }
                                                    }
                                                @endphp
                                                    <img src="{{ $path }}" alt="user" class="rounded-circle"
                                                        width="30" height="30" style="object-fit: cover;" />
                                                </a>
                                                <a href="{{ route('master-pegawai.detail', $item->id) }}"
                                                    class="text-secondary">
                                                    <span class="fw-normal">{{ $item->nama_lengkap }}</span>
                                                </a>
                                            </td>
                                            <td>{{ isset($item->jabatan->nama) ? $item->jabatan->nama : 'no position yet' }}</td>
                                            <td>{{ isset($item->unit_kerja->nama) ? $item->unit_kerja->nama : 'no division yet' }}</td>
                                            <td>
                                                @php
                                                    $type_register = 'danger';
                                                    $text_register = 'not yet';
                                                    if ($item->user) {
                                                        $type_register = 'success';
                                                        $text_register = 'already';
                                                    }
                                                @endphp
                                                <span
                                                    class="
                                                            badge
                                                            bg-light-{{ $type_register }}
                                                            text-{{ $type_register }}
                                                            font-weight-medium
                                                        ">{{ $text_register }}</span>
                                            </td>
                                            <td>
                                                <div class="dropdown dropstart">
                                                    <a href="#" class="link btn btn-outline-primary" id="dropdownMenuButton"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="fa fa-list"></i>
                                                    </a>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                        <li><a class="dropdown-item"
                                                                href="{{ route('master-pegawai.detail', $item->id) }}">Detail
                                                            </a></li>
                                                        @if($item->id == Auth::user()->id)
                                                        <li><a class="dropdown-item"
                                                            href="{{ route('master-pegawai.edit', $item->id) }}">Edit
                                                        </a></li>
                                                        @endif
                                                        @role('admin')
                                                        <li><a class="dropdown-item"
                                                                href="{{ route('master-pegawai.edit', $item->id) }}">Edit
                                                            </a></li>
                                                        <li>
                                                            <a class="dropdown-item" onclick="deleteData({{ $item->id }})">Delete</a></li>
                                                        @endrole
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-lg-4 col-xl-3 col-md-3">
                <div class="card">

                    <div class="card-body">
                        {{-- <form>
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i data-feather="search"
                                        class="feather-sm fill-white"></i></span>
                                <input type="text" class="form-control" placeholder="Cari Berdasarkan Nama"
                                    aria-label="Amount (to the nearest dollar)" />
                                <button class="btn btn-info">Cari</button>
                            </div>
                        </form> --}}
                        <div class="list-group mt-4">
                            <a href="{{url('master-pegawai')}}" class="list-group-item {{isset($search) ?: 'active'}}"><i data-feather="list"
                                    class="feather-sm fill-white me-2"></i>
                                All of Employee</a>
                                @foreach ($unit_kerja as $item)
                                <a href="{{url('master-pegawai?id_unit_kerja='.$item->id_unit_kerja)}}" class="list-group-item 
                                    {{isset($search['id_unit_kerja']) ? (($search['id_unit_kerja'] == $item->id_unit_kerja) ? 'active' : null) : null}} 
                                    d-flex align-items-center"><i
                                        data-feather="flag" class="feather-sm fill-white me-2"></i>
                                    {{($item->unit_kerja) ? $item->unit_kerja->nama : 'no division yet'}}
                                    <span
                                        class="
                                        badge
                                        bg-light-info
                                        text-info
                                        font-weight-medium
                                        rounded-pill
                                        ms-auto
                                    ">{{$item->total}}</span>
                                </a>
                                @endforeach
                        </div>
                        <h4 class="mt-4">Position</h4>
                        <div class="list-group">
                            @foreach ($jabatan as $item)
                                <a href="{{url('master-pegawai?id_jabatan='.$item->id_jabatan)}}" class="list-group-item 
                                    {{isset($search['id_jabatan']) ? (($search['id_jabatan'] == $item->id_jabatan) ? 'active' : null) : null}} 
                                    d-flex align-items-center"><i
                                        data-feather="flag" class="feather-sm fill-white me-2"></i>
                                    {{ $item->jabatan ? $item->jabatan->nama : 'no position yet' }}
                                    <span
                                        class="
                                        badge
                                        bg-light-info
                                        text-info
                                        font-weight-medium
                                        rounded-pill
                                        ms-auto
                                    ">{{$item->total}}</span>
                                </a>
                                @endforeach
                        </div>
                        <h4 class="mt-4">Option</h4>
                        <div class="list-group">
                            <a href="javascript:void(0)" class="list-group-item" data-bs-toggle="offcanvas"
                                data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                                <span class="badge bg-info me-2"><i data-feather="download"
                                        class="feather-sm fill-white"></i></span>
                                Import Data
                            </a>
                            {{-- <a href="javascript:void(0)" class="list-group-item">
                                <span class="badge bg-warning text-white me-2"><i data-feather="upload"
                                        class="feather-sm fill-white"></i></span>
                                Export Data
                            </a> --}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                        Import Data Pegawai
                    </h5>
                    <hr>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <div>
                        <div class="
                        alert
                        my-3
                        customize-alert
                        btn-rounded-lg
                        text-primary text-primary
                        alert-light-primary
                        fade
                        show
                      "
                            role="alert">
                            <div class="d-flex align-items-start font-weight-medium">
                                <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="feather feather-info  text-primary feather-sm me-2 mt-1 flex-shrink-0">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="16" x2="12" y2="12"></line>
                                    <line x1="12" y1="8" x2="12" y2="8"></line>
                                </svg>
                                Silakan Download Template Excel Terlebih dahulu
                                <br>
                                <a href="{{asset('template_import_pegawai.xlsx')}}">
                                    <button type="button" class="btn btn-outline-primary mt-3" download> Download Template</button>
                                </a>
                            </div>
                        </div>
                    </div>

                    <form id="import">
                        <div class="card">
                            <div class="card-body">
                                <div class="mb-3 mt-3 border-end">
                                    <label for="formFile" class="form-label">Upload File</label>
                                    <input class="form-control" type="file" name="file" id="formFile">
                                </div>  
                                <button
                                    id="btnImport"
                                    class="
                                        btn btn-primary
                                        font-weight-medium
                                        rounded-pill
                                        px-4
                                    ">
                                    <div class="d-flex align-items-center" >
                                        Simpan &nbsp;
                                        <span id="spinner" style="display:none" class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>

@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

    <script src="{{ asset('back') }}/assets/extra-libs/prism/prism.js"></script>
    <script>

        
        function pegawaiDelete(id) {
            Swal.fire({
                title: 'Are you sure to delete this employee?',
                icon: 'info',
                confirmButtonText: `Ya, Delete !`,
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('master-pegawai.delete-modal') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "id": id
                        },

                        success: function(result) {
                            Swal.fire('Employee is succesfully deleted', '', 'success')
                            $('#list_' + id).remove();
                        }
                    });
                } else {

                }
            });
        }
    </script>

<script>
    function deleteData(id) {
        Swal.fire({
            title: "Delete Employee?",
            text: `Are you sure to delete this employee?`,
            icon: "warning",
            showCancelButton: !0,
            confirmButtonColor: "rgb(11, 42, 151)",
            cancelButtonColor: "rgb(209, 207, 207)",
            confirmButtonText: "Yes, Delete!",
            cancelButtonText: "Cancel"
        }).then(function (t) {
            if (t.isConfirmed) {

            $.ajax({
                        url: "{{ route('master-pegawai.hapus') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "id": id
                        },

                        success: function(result) {
                            Swal.fire('Employee is succesfully deleted', '', 'success').then(function(event) {
                                if (event.isConfirmed) {
                                    location.reload();
                                } else {
                                    location.reload();
                                }
                            })
                        }
                    });

                }
        })
    }
    

    const importFile = document.getElementById('import');

    importFile.addEventListener('submit', async (e) => {
        e.preventDefault();
        $('#btnImport').prop('disabled', true);
        $('#spinner').show();

        const file = $('#formFile')[0].files;
        const _token = "{{ csrf_token() }}";

        let formData = new FormData();
        formData.append("file", file[0]);

        try {
            let response = await fetch("{{ route('master-pegawai.import') }}", {
                method: "POST",
                body: formData,
                headers: {
                    "X-CSRF-TOKEN": _token
                }
            });
            var datasend = await response.json();

            if (datasend.success) {
                
                Swal.fire('Import data berhasil', '', 'success')
                setInterval(() => {
                    location.reload();
                }, 1000);
            }else{
                Swal.fire('Import data gagal', '', 'error')
                $('#btnImport').prop('disabled', false);
                $('#spinner').hide();
            }

        } catch (err) {
            console.log(err);
        }

        return false;
    });

    function registrasiAkun() {
        Swal.fire({
            title: 'Ready for registration?',
            text: 'Information about your account will be sent via registered email! !',
            icon: 'info',
            html: '<ul id="registeredResult"></ul><div id="registeredSuccess"></div>',
            confirmButtonText: `Yes, ready !`,
            cancelButtonText: `Close`,
            showCancelButton: true,
            closeOnConfirm: false,
            showLoaderOnConfirm: true,
            preConfirm: (login) => {
                Swal.showLoading()
                fetch("{{url('master-pegawai/json?registered=true')}}")
                .then(function(response) {
                    response.json().then(function(resp) {
                        var res = resp.data;
                        var opt = "";
                        var loop = 0;
                        if (res.length > 0) {
                            
                            return res.forEach(e => {
                                $('#registeredResult').append(
                                    `<li id="registeredList-${e.id}">${e.email} 
                                        <div id="registeredSpinner-${e.id}" class="spinner-border spinner-border-sm" role="status">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                    </li>`
                                )
                                let data = {
                                    "_token": "{{ csrf_token() }}",
                                    "id": e.id
                                };
                                fetch(`{{ route('users.registrasi-akun') }}`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                    },
                                    body: JSON.stringify(data),
                                })
                                .then(response => {
                                    if (!response.ok) {
                                        throw new Error(response.statusText)
                                    }
                                    $(`#registeredList-${e.id}`).append(
                                        `<span class="badge bg-light-success text-success">Success</span>`
                                    )
                                    $(`#registeredSpinner-${e.id}`).hide();
                                })
                                .catch(error => {
                                    $(`#registeredList-${e.id}`).append(
                                        `<span class="badge bg-light-danger text-danger">Failed</span>`
                                    )
                                    $(`#registeredSpinner-${e.id}`).hide();
                                })
                            });
                        }else{
                            Swal.showValidationMessage(
                                `All employee has registered`
                            )
                        }

                    }).catch(error => {
                        Swal.showValidationMessage(
                        `Request failed: ${error}`
                        )
                    });
                });
                return false;
            },
            allowOutsideClick: () => !Swal.isLoading(),
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire('Success Registration', '', 'success')
            }
        });
    }

    $('#zero_config').DataTable();
    </script>
@endsection