@extends('ui::layouts.app')

@push('style')
    <link href="{{ asset('web/vendor/fullcalendar/fullcalendar.min.css') }}" rel="stylesheet">
    <link href="{{ asset('web/vendor/fullcalendar/fullcalendar.print.min.css') }}" rel="stylesheet" media='print'>

    <style type="text/css">
        .aqua-custom {
            background: linear-gradient(-45deg, #00d2ff 0%, #3a47d5 100%) !important;
        }

        .red-custom {
            background: linear-gradient(-45deg, #daae51 0%, #d53369 100%) !important;
        }

        .orange-custom {
            background: linear-gradient(-45deg, #fcff9e 0%, #c67700 100%) !important;
        }

        .green-custom {
            background: linear-gradient(-45deg, #6a6b5f 0%, #b9b4ad 100%) !important;
        }

        .yellow-custom {
            background: linear-gradient(-45deg, #c5b617 0%, #f6f309 100%) !important;
        }
        .ui.table td.jumlah,
        .ui.table tr.jumlah {
            background: #276f86 !important;
            color: #fff !important;
        }

        .ui.jumlah.label,
        .ui.jumlah.labels .label {
            background-color: #276f86 !important;
            border-color: #276f86 !important;
            color: #fff !important;
        }

        .ui.negative.label,
        .ui.negative.labels .label {
            background-color: #FFF6F6 !important;
            border-color: #FFF6F6 !important;
            color: #9f3a38 !important;
        }
    </style>
@endpush


@section('content')
    <div class="ui raised segment">
        <a class="ui red ribbon label">Selamat Kembali</a>
        <br><br>
        <div class="ui stackable grid">
            <div class="sixteen wide column">
                <table class="ui celled table" style="width:100% !important">
                    <tbody>
                        <tr>
                            <td width="50%">
                                <h4 class="ui image header">
                                    <i class="id card icon" class="ui mini rounded image"></i>
                                    <div class="content">
                                        <span
                                            style="font-size: 14px !important;font-weight: normal !important;padding-left:10px">Nama</span>
                                    </div>
                                </h4>
                            </td>
                            <td>{{ data_get($staff, 'name',auth()->user()->name) }}</td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <h4 class="ui image header">
                                    <i class="certificate icon" class="ui mini rounded image"></i>
                                    <div class="content">
                                        <span
                                            style="font-size: 14px !important;font-weight: normal !important;padding-left:10px">No.
                                            Pekerja</span>
                                    </div>
                                </h4>
                            </td>
                            <td>{{ data_get($staff, 'employeeCode',auth()->user()->id) }}</td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <h4 class="ui image header">
                                    <i class="sitemap icon" class="ui mini rounded image"></i>
                                    <div class="content" style="font-style: unset">
                                        <span
                                            style="font-size: 14px !important;font-weight: normal !important;padding-left:10px">Department</span>
                                    </div>
                                </h4>
                            </td>
                            <td>{{ data_get($staff, 'staffinfo.department.description') }}</td>
                        </tr>
                        <tr>
                            <td width="50%">
                                <h4 class="ui image header">
                                    <i class="user tie icon" class="ui mini rounded image"></i>
                                    <div class="content" style="font-style: unset">
                                        <span
                                            style="font-size: 14px !important;font-weight: normal !important;padding-left:10px">Peranan</span>
                                    </div>
                                </h4>
                            </td>
                            <td>
                                @php
                                    $roles = $staff->roles->pluck('name')->toArray();
                                @endphp
                                {{ !empty($roles) ? implode(', ', $roles) : '-' }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{ asset('web/vendor/fullcalendar/lib/moment.min.js') }}"></script>
    <script src="{{ asset('web/vendor/fullcalendar/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('web/vendor/fullcalendar/locale/ms-my.js') }}"></script>

    <script>
        $(document).ready(function() {

        });
    </script>

@endpush
