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

@section('head-link')
    <link href="{{ asset('assets/summernote-0.9.0-dist/summernote-bs5.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/summernote-0.9.0-dist/summernote-bs5.js') }}"></script>
@endsection
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <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 back --}}
                        <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</button>
                        {{-- check authorize edi --}}
                        @if ($authorize->edit == '1')
                            {{-- check status active --}}
                            @if ($list->isactive == 1)
                                {{-- button save --}}
                                <button class="btn btn-primary mb-0" style="display: none;" id="{{ $dmenu }}-save"
                                    onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                    <i class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan
                                </button>
                                {{-- button edit --}}
                                <!-- <button class="btn btn-warning mb-0" id="{{ $dmenu }}-edit"><i
                                            class="fas fa-edit me-1"> </i><span class="font-weight-bold">Edit</button> -->
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow-lg">
                    <div class="card-body">
                        <ul class="list-group">
                            <li class="list-group-item d-flex align-items-center py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Nama Posisi</strong><span
                                    class="mx-1">:</span><span style="width: 65%;">{{ $list->posisi }}</span></li>
                            <li class="list-group-item d-flex align-items-center py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Departemen</strong><span
                                    class="mx-1">:</span><span style="width: 65%;">{{ $deapartemen->nama }}</span></li>
                            <li class="list-group-item d-flex align-items-center py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Kuota</strong><span class="mx-1">:</span><span
                                    style="width: 65%;">{{ $list->quota }}</span></li>
                            <li class="list-group-item d-flex align-items-center py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Tanggal Awal Periode Magang</strong><span
                                    class="mx-1">:</span><span
                                    style="width: 65%;">{{ date('d M Y', strtotime($list->start_period)) }}</span></li>
                            <li class="list-group-item d-flex align-items-center py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Tanggal Akhir Periode Magang</strong><span
                                    class="mx-1">:</span><span
                                    style="width: 65%;">{{ date('d M Y', strtotime($list->end_period)) }}</span></li>
                            <li class="list-group-item d-flex align-items-center py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Tanggal Awal Pendaftaran</strong><span
                                    class="mx-1">:</span><span
                                    style="width: 65%;">{{ date('d M Y', strtotime($list->start_regis)) }}</span></li>
                            <li class="list-group-item d-flex align-items-center py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Tanggal Akhir Pendaftaran</strong><span
                                    class="mx-1">:</span><span
                                    style="width: 65%;">{{ date('d M Y', strtotime($list->end_regis)) }}</span></li>
                            <li class="list-group-item d-flex align-items-start py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Deskripsi</strong><span
                                    class="mx-1">:</span><span style="width: 65%;">{!! $list->deskripsi !!}</span></li>
                            <li class="list-group-item d-flex align-items-start py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Kualifikasi</strong><span
                                    class="mx-1">:</span><span style="width: 65%;">{!! $list->kualifikasi !!}</span></li>
                            <li class="list-group-item d-flex align-items-start py-3" style="gap: 8px;"><strong
                                    style="width: 35%; min-width:140px;">Benefit</strong><span class="mx-1">:</span><span
                                    style="width: 65%;">{!! $list->benefit !!}</span></li>
                            <li class="list-group-item d-flex align-items-start py-3" style="gap: 8px;">
                                <strong style="width: 35%; min-width:140px;">QR Code</strong><span class="mx-1">:</span>
                                <span style="width: 65%; display: flex; flex-direction: column; gap: 8px;">
                                    @if ($list->qrcode != null)
                                        <img src="{{ asset('storage/' . $list->qrcode) }}" alt="QR Code"
                                            style="width: 180px; height: 180px; border:1px solid #eee; border-radius:8px; margin-bottom:8px;">
                                        <a href="{{ asset('storage/' . $list->qrcode) }}" download
                                            class="btn btn-outline-primary btn-sm" style="width: 180px;">Download QR
                                            Code</a>
                                    @else
                                        <span>QR Code Belum Tersedia</span>
                                    @endif
                                    @php
                                        $isKondisiTerpenuhi = false;
                                        if ($list) {
                                            $hariIni = \Illuminate\Support\Carbon::today();
                                            $tanggalMulaiRegistrasi = \Illuminate\Support\Carbon::parse(
                                                $list->start_regis,
                                            )->startOfDay();
                                            $tanggalAkhirRegistrasi = \Illuminate\Support\Carbon::parse(
                                                $list->end_regis,
                                            )->startOfDay();
                                            if (
                                                $list->isactive == 1 &&
                                                $list->visible == 1 &&
                                                $tanggalMulaiRegistrasi->lte($hariIni) &&
                                                $tanggalAkhirRegistrasi->gte($hariIni)
                                            ) {
                                                $isKondisiTerpenuhi = true;
                                            }
                                        }
                                    @endphp
                                    <a href="{{ route('lamar.index', $idencrypt) }}" target="_blank"
                                        class="btn {{ $isKondisiTerpenuhi ? 'btn-primary' : 'btn-secondary' }} btn-sm"
                                        style="width: 180px;">Buka Form</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            //set disable all input form
            $('#{{ $dmenu }}-form').find('label').addClass('disabled');
            $('#{{ $dmenu }}-form').find('input').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('select').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('textarea').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                '');
            $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                '');
            $('.icon-modal-search').css('display', 'none');

            // function enable input form
            function enable_text() {
                $('#{{ $dmenu }}-form').find('label').removeClass('disabled');
                $('#{{ $dmenu }}-form').find('input').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('select').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('textarea').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                    'none');
                $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                    'none');
                $('.icon-modal-search').css('display', '');

                // $('#summernote').summernote('enable');
            }

            //event button edit
            $('#{{ $dmenu }}-edit').click(function() {
                enable_text();
                $(this).css('display', 'none');
                $('#{{ $dmenu }}-save').css('display', '');
            });
            // $('#summernote').summernote('disable');
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#summernote_deskripsi').summernote({
                placeholder: 'Deskripsi Lowongan',
                tabsize: 2,
                height: 200,
            });

            $('#summernote_kualifikasi').summernote({
                placeholder: 'Kualifikasi Lowongan',
                tabsize: 2,
                height: 200,
            });

            $('#summernote_benefit').summernote({
                placeholder: 'Benefit Lowongan',
                tabsize: 2,
                height: 200,
            });

            function customMatcher(params, data) {
                if ($.trim(params.term) === '') {
                    return data;
                }

                // Konversi ke huruf kecil untuk pencarian case-insensitive
                let searchTerm = params.term.toLowerCase();
                let text = data.text.toLowerCase();

                // Mencari di mana saja dalam teks
                if (text.includes(searchTerm)) {
                    return data;
                }

                return null;
            }
        });
    </script>
@endpush