@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    {{-- Header Tombol --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        <button class="btn btn-primary mb-0"
                            onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                            <i class="fas fa-floppy-disk me-1"></i>
                            <span class="font-weight-bold">Simpan</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Form Content --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Form Pengajuan Resign</p>
                            <hr class="horizontal dark mt-0">

                            <div class="row">
                                @foreach ($table_header as $header)
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="{{ $header->field }}"
                                                class="form-control-label">{{ $header->alias }}</label>

                                            {{-- Tipe Image --}}
                                            @if ($header->type == 'image')
                                                @php
                                                    $imageValue = $employee->{$header->field} ?? null;

                                                    $isUrl =
                                                        $imageValue &&
                                                        (str_starts_with($imageValue, 'http://') ||
                                                            str_starts_with($imageValue, 'https://'));
                                                    $thumbPath = 'storage/' . $imageValue . 'tumb.png';
                                                    $fullPath = 'storage/' . $imageValue;
                                                    $defaultImage = asset('img/profile.png');

                                                    if ($isUrl) {
                                                        $imageUrl = $imageValue;
                                                    } elseif (
                                                        !empty($imageValue) &&
                                                        file_exists(public_path($thumbPath))
                                                    ) {
                                                        $imageUrl = asset($thumbPath);
                                                    } elseif (
                                                        !empty($imageValue) &&
                                                        file_exists(public_path($fullPath))
                                                    ) {
                                                        $imageUrl = asset($fullPath);
                                                    } else {
                                                        $imageUrl = $defaultImage;
                                                    }
                                                @endphp
                                                <div class="col-sm-auto mb-3">
                                                    <div class="position-relative">
                                                        <div>
                                                            <span
                                                                class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                <img id="preview_{{ $header->field }}"
                                                                    src="{{ $imageUrl }}"
                                                                    onerror="this.onerror=null; this.src='{{ asset('img/profile.png') }}';"
                                                                    alt="image" class="w-30 border-radius-lg shadow-sm">
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @else
                                                @if ($header->field == 'nama')
                                                    @if (!isset($fromEmployee) || !$fromEmployee)
                                                        <div class="input-group" data-bs-toggle="modal"
                                                            data-bs-target="#searchKaryawanModal" style="cursor: pointer;">
                                                            <input class="form-control bg-white" type="text"
                                                                id="{{ $header->field }}" name="{{ $header->field }}"
                                                                value="{{ old($header->field, $employee->{$header->field} ?? '') }}"
                                                                readonly placeholder="Klik untuk memilih karyawan..."
                                                                style="cursor: pointer;">
                                                            <span class="input-group-text bg-primary text-light">
                                                                <i class="fas fa-search"></i>
                                                            </span>
                                                        </div>
                                                    @else
                                                        <input class="form-control bg-light" type="text"
                                                            id="{{ $header->field }}" name="{{ $header->field }}"
                                                            value="{{ old($header->field, $employee->{$header->field} ?? '') }}"
                                                            readonly>
                                                    @endif
                                                @else
                                                    <input class="form-control bg-light"
                                                        type="{{ $header->type == 'email' ? 'email' : 'text' }}"
                                                        id="{{ $header->field }}" name="{{ $header->field }}"
                                                        value="{{ old($header->field, $employee->{$header->field} ?? '') }}"
                                                        readonly>
                                                @endif
                                            @endif

                                        </div>
                                    </div>
                                @endforeach

                                {{-- Tanggal Proses --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="tanggal_proses" class="form-control-label">Tanggal Proses</label>
                                        <input class="form-control" type="date" id="tanggal_proses" name="tanggal_proses"
                                            value="{{ old('tanggal_proses', date('Y-m-d')) }}" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Pencarian Karyawan --}}
    <div class="modal fade" id="searchKaryawanModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalLabel">Pilih Karyawan</h5>
                    <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table display align-items-center mb-0 w-100" id="list_karyawan">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="100"
                                        class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 text-center">
                                        Action</th>
                                    <th
                                        class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 text-center">
                                        Foto</th>
                                    <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">NIK
                                    </th>
                                    <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">Nama
                                    </th>
                                    <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">
                                        Email Pribadi</th>
                                    <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">
                                        Jenis Kelamin</th>
                                    <th class="text-uppercase text-secondary text-xs font-weight-bolder opacity-7 ps-2">
                                        Status Pegawai</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#list_karyawan')) {
                $('#list_karyawan').DataTable().destroy();
            }

            $('#list_karyawan').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('/tsrsgn/api/getDataAjax') }}",
                    type: 'GET'
                },
                columns: [{
                        data: null,
                        orderable: false,
                        searchable: false,
                        className: 'text-center align-middle',
                        render: function(data, type, row) {
                            return `
                                <button type="button" class="btn btn-primary btn-sm mb-0 px-3" 
                                    onclick="pilihKaryawan('${row.nik}', '${row.nama}', '${row.email_pribadi}', '${row.jenis_kelamin}', '${row.status_pegawai}', '${row.foto || ''}')"
                                    title="Pilih Karyawan">
                                    <span class="font-weight-bold ms-1">Select</span>
                                </button>
                            `;
                        }
                    },
                    {
                        data: 'foto',
                        name: 'foto',
                        className: 'text-center align-middle',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            let defaultImg = "{{ asset('img/profile.png') }}";
                            let imgUrl = data ? "{{ asset('storage/') }}/" + data : defaultImg;

                            if (data && (data.startsWith('http://') || data.startsWith(
                                    'https://'))) {
                                imgUrl = data;
                            }

                            return `<img src="${imgUrl}" onerror="this.onerror=null; this.src='${defaultImg}';" 
                                    class="border-radius-lg shadow-sm" style="height: 40px; width: 40px; object-fit: cover; border-radius: 50%;">`;
                        }
                    },
                    {
                        data: 'nik',
                        name: 'nik',
                        className: 'text-sm font-weight-normal align-middle'
                    },
                    {
                        data: 'nama',
                        name: 'nama',
                        className: 'text-sm font-weight-normal align-middle'
                    },
                    {
                        data: 'email_pribadi',
                        name: 'email_pribadi',
                        className: 'text-sm font-weight-normal align-middle'
                    },
                    {
                        data: 'jenis_kelamin',
                        name: 'jenis_kelamin',
                        className: 'text-sm font-weight-normal align-middle'
                    },
                    {
                        data: 'status_pegawai',
                        name: 'status_pegawai',
                        className: 'text-sm font-weight-normal align-middle'
                    }
                ]
            });
        });

        function pilihKaryawan(nik, nama, email_pribadi, jenis_kelamin, status_pegawai, foto) {
            $('#nik').val(nik);
            $('#nama').val(nama);
            $('#email_pribadi').val(email_pribadi);
            $('#jenis_kelamin').val(jenis_kelamin);
            $('#status_pegawai').val(status_pegawai);

            let defaultImg = "{{ asset('img/profile.png') }}";
            let imgUrl = defaultImg;

            if (foto && foto !== '') {
                if (foto.startsWith('http://') || foto.startsWith('https://')) {
                    imgUrl = foto;
                } else {
                    imgUrl = "{{ asset('storage/') }}/" + foto;
                }
            }

            $('#preview_foto').attr('src', imgUrl);

            $('#searchKaryawanModal').modal('hide');
        }
    </script>
@endpush