@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card mx-4 shadow-lg">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper d-flex gap-2">
                        {{-- <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 type="button" onclick="window.location='{{ url($url_menu) }}'"class="btn btn-secondary mb-0">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                {{-- Inline form for creating new assignment --}}
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase mb-2 text-sm">Tambah Penugasan Baru untuk {{ $assignment->employee_name }}
                            - {{ $assignment->employee_nik }}
                        </p>
                        <hr class="horizontal dark mt-0">

                        @if ($authorize && $authorize->add == '1')
                            <form role="form" method="POST" action="{{ url($url_menu) }}" id="empas-single-form">
                                @csrf
                                <input type="hidden" name="employee_niks[]" value="{{ $assignment->employee_nik }}">
                                <input type="hidden" name="redirect_to" value="{{ url($url_menu . '/show/' . encrypt($assignment->id)) }}">

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="pa_position_id_inline">
                                                Posisi <span class="text-danger">*</span>
                                            </label>
                                            <select class="form-control" id="pa_position_id_inline" name="pa_position_id"
                                                required>
                                                <option value="">Pilih Posisi</option>
                                                @forelse ($positions as $position)
                                                    <option value="{{ $position->id }}">
                                                        {{ $position->position_name }}
                                                    </option>
                                                @empty
                                                    <option value="" disabled>Tidak ada posisi untuk departemen {{ $assignment->department_name }}</option>
                                                @endforelse
                                            </select>
                                            @if ($positions->isEmpty())
                                                <small class="text-muted">Hanya menampilkan posisi dari departemen {{ $assignment->department_name }}</small>
                                            @else
                                                <small class="text-muted">Menampilkan {{ $positions->count() }} posisi dari departemen {{ $assignment->department_name }}</small>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-control-label" for="supervisor_nik_inline">
                                                Penilai <span class="text-danger">*</span>
                                            </label>
                                            <select class="form-control" id="supervisor_nik_inline" name="supervisor_nik"
                                                required>
                                                <option value="">Pilih Penilai</option>
                                                @foreach ($supervisors as $supervisor)
                                                    <option value="{{ $supervisor->nik }}">
                                                        {{ $supervisor->full_name }} - {{ $supervisor->nik }}
                                                        @if ($supervisor->job_title)
                                                            ({{ $supervisor->job_title }})
                                                        @endif
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-control-label">
                                                Berlaku Mulai <span class="text-danger">*</span>
                                            </label>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <select class="form-control" id="effective_year_inline"
                                                        name="effective_year" required>
                                                        <option value="">Tahun</option>
                                                        @foreach ($yearOptions as $value => $label)
                                                            <option value="{{ $value }}"
                                                                {{ $value == $defaultYear ? 'selected' : '' }}>
                                                                {{ $label }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-6">
                                                    <select class="form-control" id="effective_month_inline"
                                                        name="effective_month" required>
                                                        <option value="">Bulan</option>
                                                        @foreach ($monthOptions as $value => $label)
                                                            <option value="{{ $value }}"
                                                                {{ $value == $defaultMonth ? 'selected' : '' }}>
                                                                {{ $label }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 text-end">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-floppy-disk me-1"></i>
                                            <span class="font-weight-bold">Simpan Penugasan Baru</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        @endif
                    </div>
                </div>

                <div class="card my-4">
                    <div class="card-body">
                        <p class="text-uppercase mb-2 text-sm">Detail {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">

                        {{-- alert --}}
                        @include('components.alert')

                        {{-- Employee Info --}}
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <h5 class="font-weight-bold text-dark mb-2">{{ $assignment->employee_name }} -
                                    {{ $assignment->employee_nik }}</h5>
                                <p class="mb-1 text-sm"><strong>Departemen:</strong>
                                    {{ $assignment->department_name ?? '-' }}</p>
                                <p class="mb-0 text-sm"><strong>Jabatan:</strong> {{ $assignment->job_title_name ?? '-' }}
                                </p>
                            </div>
                        </div>

                        {{-- Assignment History Table --}}
                        <div class="row">
                            <div class="col-12">
                                <h6 class="font-weight-bold text-dark mb-3">Riwayat Penugasan</h6>
                                <div class="table-responsive">
                                    <table class="align-items-center mb-0 table">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th class="text-center">Posisi</th>
                                                <th class="text-center">Penilai</th>
                                                <th class="text-center">Berlaku Mulai</th>
                                                <th class="text-center">Berlaku Sampai</th>
                                                <th class="text-center">Ditentukan Pada</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($assignmentHistory as $history)
                                                <tr>
                                                    <td class="font-weight-normal text-center text-sm">
                                                        {{ $history->position_name ?? '-' }}
                                                    </td>
                                                    <td class="font-weight-normal text-center text-sm">
                                                        {{ $history->supervisor_name ?? '-' }} -
                                                        {{ $history->supervisor_nik ?? '-' }}
                                                    </td>
                                                    <td class="font-weight-normal text-center text-sm">
                                                        {{ $history->effective_from ? $format->formatMonthYear($history->effective_from) : '-' }}
                                                    </td>
                                                    <td class="font-weight-normal text-center text-sm">
                                                        {{ $history->effective_to ? $format->formatMonthYear($history->effective_to) : 'Aktif' }}
                                                    </td>
                                                    <td class="font-weight-normal text-center text-sm">
                                                        {{ $history->decided_at ? $format->tanggal($history->decided_at, 'd M Y H:i') : '-' }}
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="5" class="text-secondary text-center">Belum ada data
                                                        penugasan.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }

        // Inline form validation
        $(function() {
            $('select').select2({
                theme: 'bootstrap4',
                width: '100%'
            });

            const inlineForm = document.getElementById('empas-single-form');
            let isSubmitting = false;

            if (inlineForm) {
                inlineForm.addEventListener('submit', async (e) => {
                    e.preventDefault();

                    if (isSubmitting) {
                        return false;
                    }

                    // Get form values
                    const employeeNik = '{{ $assignment->employee_nik }}';
                    const paPositionId = document.getElementById('pa_position_id_inline').value;
                    const supervisorNik = document.getElementById('supervisor_nik_inline').value;
                    const effectiveMonth = document.getElementById('effective_month_inline').value;
                    const effectiveYear = document.getElementById('effective_year_inline').value;

                    // Validate: PA Position is selected
                    if (!paPositionId) {
                        Swal.fire({
                            title: 'Posisi Belum Dipilih',
                            text: 'Mohon pilih posisi PA untuk penugasan',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Validate: Supervisor is selected
                    if (!supervisorNik) {
                        Swal.fire({
                            title: 'Penilai Belum Dipilih',
                            text: 'Mohon pilih penilai untuk penugasan',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Validate: Effective date is selected
                    if (!effectiveMonth || !effectiveYear) {
                        Swal.fire({
                            title: 'Tanggal Belum Dipilih',
                            text: 'Mohon pilih bulan dan tahun efektif',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Validate: Month must be between 1-12
                    const monthNum = parseInt(effectiveMonth);
                    if (isNaN(monthNum) || monthNum < 1 || monthNum > 12) {
                        Swal.fire({
                            title: 'Bulan Tidak Valid',
                            text: 'Bulan harus antara 1-12',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Validate: Year must be between 1900-2100
                    const yearNum = parseInt(effectiveYear);
                    if (isNaN(yearNum) || yearNum < 1900 || yearNum > 2100) {
                        Swal.fire({
                            title: 'Tahun Tidak Valid',
                            text: 'Tahun harus antara 1900-2100',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        return false;
                    }

                    // Check for duplicate assignment via AJAX
                    try {
                        Swal.fire({
                            title: 'Memeriksa Data...',
                            text: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                            didOpen: () => Swal.showLoading()
                        });

                        const response = await fetch('{{ url('ajax/check-duplicate-assignments') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify({
                                employee_niks: [employeeNik],
                                effective_month: effectiveMonth,
                                effective_year: effectiveYear
                            })
                        });

                        const result = await response.json();

                        Swal.close();

                        if (result.has_duplicates) {
                            // Show confirmation that it will UPDATE existing assignment
                            const duplicate = result.duplicates[0];
                            const confirmResult = await Swal.fire({
                                title: 'Penugasan Sudah Ada',
                                html: `<div class="text-start">
                                    <p class="mb-2">{{ $assignment->employee_name }} sudah memiliki penugasan pada <strong>${result.effective_date_formatted}</strong>:</p>
                                    <div class="mb-3">
                                        • Posisi saat ini: <strong>${duplicate.position_name}</strong>
                                    </div>
                                    <p class="mb-2">Penugasan yang ada akan <strong>diperbarui</strong> dengan data baru.</p>
                                    <p class="mb-0 text-muted small">Lanjutkan?</p>
                                </div>`,
                                icon: 'info',
                                showCancelButton: true,
                                confirmButtonColor: '#028284',
                                cancelButtonColor: '#6c757d',
                                confirmButtonText: 'Ya, Lanjutkan',
                                cancelButtonText: 'Batal'
                            });

                            if (!confirmResult.isConfirmed) {
                                return false;
                            }
                        }

                        // Proceed with submission
                        isSubmitting = true;

                        Swal.fire({
                            title: 'Menyimpan Data...',
                            text: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                            didOpen: () => Swal.showLoading()
                        });

                        setTimeout(() => inlineForm.submit(), 100);

                    } catch (error) {
                        Swal.fire({
                            title: 'Terjadi Kesalahan',
                            text: 'Gagal memeriksa data. Silakan coba lagi.',
                            icon: 'error',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        console.error('Duplicate check error:', error);
                    }

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