@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@push('styles')
    <style>
        .divider {
            border: none;
            height: 1px;
            background-color: #ddd;
            margin: 20px 0;
        }
    </style>
@endpush


@section('content')
    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">

        <div class="card pb-2.5">
            <div class="card-header" id="basic_settings">
                <h3 class="card-title">
                    Form Assignment
                </h3>
                <div class="flex items-center gap-2">
                    <a href="{{ route('penilaian.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i>
                        Back</a>
                </div>
            </div>

            <div class="card-body">
                <form
                    action="{{ isset($penilaian->permohonan_id) ? route('penilaian.update', $permohonan) : route('penilaian.store') }}"
                    method="POST" class="">

                    @if (isset($penilaian->permohonan_id))
                        @method('PUT')
                        <input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
                    @else
                        <input type="number" name="permohonan_id" value="{{ $permohonan->id }}">
                    @endif
                    @csrf
                    <div class="pl-1 lg:pl-5 xl:pl-5 grid gap-2.5 p-5">
                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">
                                Penilai yang Dilakukan oleh
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <select
                                    class="input tomselect w-full @error('jenis_penilaian_id') border-danger bg-danger-light @enderror"
                                    name="jenis_penilaian_id" id="jenis_penilaian_id">
                                    <option value="">Jenis Penilaian</option>
                                    @foreach ($jenisPenilaian as $item)
                                        @if (isset($penilaian->permohonan_id))
                                            <option value="{{ $item->id }}"
                                                {{ $penilaian->teams_id == $item->id ? 'selected' : '' }}>
                                                {{ $item->name }}</option>
                                        @else
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                @error('jenis_penilaian_id')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">
                                Tim Penilai yang di tunjuk
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <select
                                    class="input tomselect w-full @error('teams_id') border-danger bg-danger-light @enderror"
                                    name="teams_id" id="teams_id">
                                    <option value="">Pilih Tim Penilai</option>
                                    @foreach ($teamPenilai as $item)
                                        @if (isset($penilaian->permohonan_id))
                                            <option value="{{ $item->id }}"
                                                {{ $penilaian->teams_id == $item->id ? 'selected' : '' }}>
                                                {{ $item->regions->name }}</option>
                                        @else
                                            <option value="{{ $item->id }}">{{ $item->regions->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                @error('teams_id')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">
                                Penilai yang di tunjuk
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <select id="user_id" name="user_id"
                                    class="input  @error('user_id') border-danger bg-danger-light @enderror  w-full">
                                    <option value="">Pilih Penilai</option>
                                </select>
                            </div>
                        </div>


                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">
                                Jadwal Kunjungan
                            </label>

                            <div class="flex flex-wrap items-baseline w-full">
                                <input class="input @error('tanggal_kunjungan') border-danger bg-danger-light @enderror"
                                    type="datetime-local" name="tanggal_kunjungan"
                                    value="{{ isset($penilaian->tanggal_kunjungan) ? \Carbon\Carbon::createFromTimestamp($penilaian->tanggal_kunjungan)->format('Y-m-d\TH:i') : '' }}">
                                @error('tanggal_kunjungan')
                                    <em class="alert text-danger text-sm">{{ $message }}</em>
                                @enderror
                            </div>
                        </div>

                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                            <label class="form-label max-w-56">
                                Catatan
                            </label>
                            <div class="flex flex-wrap items-baseline w-full">
                                <textarea class="textarea  @error('keterangan') border-danger bg-danger-light  @enderror" rows="3" type="text"
                                    name="keterangan">{{ $penilaian->keterangan ?? '' }}</textarea>
                            </div>
                            @error('keterangan')
                                <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>
                    <div class="flex justify-end card-footer">
                        <button type="submit"
                            @if ($permohonan->status == 'Assign') class="btn btn-success"
                            @else
                                class="btn btn-warning" @endif>
                            Aproved
                        </button>
                    </div>

                </form>
            </div>
        </div>

    </div>
@endsection


@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let teamsSelect = document.getElementById('teams_id');
            let penilaiSelect = document.getElementById('user_id');

            // Mengambil nilai user_id dari variabel PHP
            let selectedUserId = @json($penilaian->user_id ?? null); // Gunakan null jika tidak ada

            function fetchPenilai(teamId) {
                penilaiSelect.innerHTML = '';

                if (teamId) {
                    fetch(`/penilaian/getUserTeams/${teamId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data && data.length > 0) {
                                data.forEach((user) => {
                                    let option = document.createElement('option');
                                    option.value = user.id;
                                    option.text = user.name;

                                    if (selectedUserId && selectedUserId == user.id) {
                                        option.selected = true;
                                    }

                                    penilaiSelect.appendChild(option);
                                });
                            } else {
                                let option = document.createElement('option');
                                option.value = '';
                                option.text = 'Tidak ada penilai.';
                                penilaiSelect.appendChild(option);
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching team members:', error);
                            let option = document.createElement('option');
                            option.value = '';
                            option.text = 'Terjadi kesalahan.';
                            penilaiSelect.appendChild(option);
                        });
                } else {
                    let option = document.createElement('option');
                    option.value = '';
                    option.text = 'Pilih tim terlebih dahulu.';
                    penilaiSelect.appendChild(option);
                }
            }

            teamsSelect.addEventListener('change', function() {
                let teamId = this.value;
                fetchPenilai(teamId);
            });

            let selectedTeamId = teamsSelect.value;
            if (selectedTeamId) {
                fetchPenilai(selectedTeamId);
            }
        });
    </script>
@endpush