@extends('layout.main')
@section('title', 'Pilih Pegawai')

@section('prev-page')
    <a href="{{ route('dashboard') }}" class="text-default">
        <i class="icon-arrow-left52 position-left"></i><span class="text-semibold">Home</span>
    </a> - <a href="{{ route('admin.payroll') }}" class="text-default">
        <span class="text-semibold">Daftar Payroll</span>
    </a>
@endsection

@section('content')
    <div class="panel panel-flat">
        <div class="panel-heading {{ empty($input->key) ? 'has-visible-elements' : '' }}">
            <h6 class="panel-title">Tambah Payroll Pegawai</h6>
            <div class="heading-elements {{ empty($input->key) ? '' : 'visible-elements' }}">
                <form action="{{ route('admin.payroll.select.employee') }}" method="GET" class="form-horizontal">
                    @csrf
                    <div class="col-md-8 col-xs-10">
                        <input type="text" name="key" id="key" value="{{ empty($input->key) ? '' : $input->key }}" placeholder="Search" class="form-control heading-btn" />
                    </div>
                    <div class="col-md-4 col-xs-2">
                        <button type="submit" type="submit" class="btn btn-default text-right heading-btn">Cari</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="panel-body">
            <div class="col-md-12 table-responsive">
                <table class="table  table-hover table-xxs text-size-small">
                    <thead>
                        <tr>
                            <th data-toggle="true">Nama Pegawai</th>
                            <th data-toggle="true">Email</th>
                            <th data-toggle="true">Jabatan</th>
                            <th data-toggle="true">No. Hp</th>
                            <th data-toggle="true" class="text-center" style="width: 30px;"><i class="icon-menu-open2"></i></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($employees as $employee)
                            <tr>
                                <td>
                                    <span class="label label-primary">{{ $employee->name }}</span>
                                </td>
                                <td>{{ $employee->email }}</td>
                                <td>{{ $employee->position }}</td>
                                <td>{{ $employee->mobile_phone }}</td>
                                <td class="text-right">
                                    <a href="{{ route('admin.payroll.new', $employee->id) }}" onclick="return showMe(this);" class="btn bg-blue btn-xs">Pilih</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="text-center" colspan="5">Belum ada data</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="panel-footer text-center">
            @if (!empty($metadata))
                {!! $metadata->links !!}
            @endif
        </div>
    </div>
@endsection

@section('other-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/tables/footable/footable.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/table_responsive.js') }}"></script>

    <script>
        function showMe(element) {
            var ele = $(element);
            swal({
                title: "Apakah anda yakin?",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya!',
                cancelButtonText: 'Tidak',
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) location.href = ele.attr('href');
            });
            return false;
        };
    </script>
@endsection