@extends('layouts.app')

@section('title', 'Ajukan Cuti')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-calendar-event"></i> Ajukan Cuti</h2>
    <a href="{{ route('cuti.index') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Kembali
    </a>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('cuti.store') }}">
            @csrf
            
            @php
                if (!isset($pegawai)) {
                    $pegawai = auth()->user()->pegawai;
                }
            @endphp
            @if($pegawai)
            <input type="hidden" name="pegawai_id" value="{{ $pegawai->id }}">
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> <strong>Pegawai:</strong> {{ $pegawai->nama_lengkap }} ({{ $pegawai->nip }}) - <strong>Status:</strong> {{ $pegawai->status_pegawai ?? 'Kontrak' }}
            </div>
            @endif

            {{-- Informasi Kuota Cuti --}}
            @php
                if (!isset($currentYear)) {
                    $currentYear = date('Y');
                }
            @endphp
            @if(isset($quotas) && $pegawai && !empty($quotas))
            <div class="card mb-4 border-primary">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> Informasi Kuota Cuti Tahun {{ $currentYear }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($quotas as $jenisCuti => $quota)
                        @if($quota['available'])
                        <div class="col-md-6 mb-3">
                            <div class="card h-100 {{ $quota['remaining'] === 0 || ($quota['remaining'] !== null && $quota['remaining'] < 1) ? 'border-danger' : 'border-success' }}">
                                <div class="card-body p-3">
                                    <h6 class="card-title mb-2">
                                        <strong>{{ $jenisCuti }}</strong>
                                        @if($quota['remaining'] === 0 || ($quota['remaining'] !== null && $quota['remaining'] < 1))
                                        <span class="badge bg-danger float-end">Habis</span>
                                        @elseif($quota['remaining'] !== null)
                                        <span class="badge bg-success float-end">{{ $quota['remaining'] }} hari tersisa</span>
                                        @endif
                                    </h6>
                                    <small class="text-muted d-block mb-1">{{ $quota['rule']['description'] }}</small>
                                    @if($quota['max'] !== null)
                                    <div class="mt-2">
                                        <small>
                                            <strong>Kuota:</strong> {{ $quota['max'] }} hari | 
                                            <strong>Terpakai:</strong> {{ $quota['taken'] }} hari | 
                                            <strong>Sisa:</strong> 
                                            @if($quota['remaining'] !== null)
                                                <span class="{{ $quota['remaining'] > 0 ? 'text-success' : 'text-danger' }}">{{ $quota['remaining'] }} hari</span>
                                            @else
                                                <span class="text-info">Unlimited</span>
                                            @endif
                                        </small>
                                    </div>
                                    @else
                                    <div class="mt-2">
                                        <small>
                                            <strong>Terpakai:</strong> {{ $quota['taken'] }} hari | 
                                            <strong>Sisa:</strong> <span class="text-info">Unlimited (dengan surat dokter)</span>
                                        </small>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="col-md-6 mb-3">
                            <div class="card h-100 border-secondary">
                                <div class="card-body p-3">
                                    <h6 class="card-title mb-2">
                                        <strong>{{ $jenisCuti }}</strong>
                                        <span class="badge bg-secondary float-end">Tidak Tersedia</span>
                                    </h6>
                                    <small class="text-muted">{{ $quota['rule']['description'] }}</small>
                                </div>
                            </div>
                        </div>
                        @endif
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="jenis_cuti" class="form-label">Jenis Cuti <span class="text-danger">*</span></label>
                        <select class="form-select @error('jenis_cuti') is-invalid @enderror" 
                                id="jenis_cuti" name="jenis_cuti" required>
                            <option value="">Pilih Jenis Cuti</option>
                            @foreach($quotas ?? [] as $jenisCuti => $quota)
                            <option value="{{ $jenisCuti }}" 
                                    {{ old('jenis_cuti') == $jenisCuti ? 'selected' : '' }}
                                    data-max="{{ $quota['max'] ?? 'unlimited' }}"
                                    data-remaining="{{ $quota['remaining'] ?? 'unlimited' }}"
                                    data-taken="{{ $quota['taken'] }}"
                                    data-available="{{ $quota['available'] ? '1' : '0' }}"
                                    data-description="{{ $quota['rule']['description'] ?? '' }}">
                                {{ $jenisCuti }}
                                @if(!$quota['available'])
                                (Tidak Tersedia)
                                @elseif($quota['remaining'] !== null)
                                (Sisa: {{ $quota['remaining'] }} hari)
                                @else
                                (Unlimited)
                                @endif
                            </option>
                            @endforeach
                        </select>
                        <div id="quota-info" class="mt-2" style="display: none;">
                            <small class="text-muted" id="quota-description"></small>
                            <div class="mt-1">
                                <small id="quota-details"></small>
                            </div>
                        </div>
                        @error('jenis_cuti')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Jumlah Hari (Otomatis)</label>
                        <input type="text" class="form-control" id="jumlah_hari_preview" readonly 
                               placeholder="Akan terhitung otomatis setelah memilih tanggal">
                        <small class="text-muted">Jumlah hari akan dihitung otomatis berdasarkan tanggal mulai dan selesai</small>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="tanggal_mulai" class="form-label">Tanggal Mulai <span class="text-danger">*</span></label>
                        <input type="date" class="form-control @error('tanggal_mulai') is-invalid @enderror" 
                               id="tanggal_mulai" name="tanggal_mulai" 
                               value="{{ old('tanggal_mulai') }}" 
                               min="{{ date('Y-m-d') }}" required>
                        @error('tanggal_mulai')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="tanggal_selesai" class="form-label">Tanggal Selesai <span class="text-danger">*</span></label>
                        <input type="date" class="form-control @error('tanggal_selesai') is-invalid @enderror" 
                               id="tanggal_selesai" name="tanggal_selesai" 
                               value="{{ old('tanggal_selesai') }}" required>
                        @error('tanggal_selesai')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label for="alasan" class="form-label">Alasan <span class="text-danger">*</span></label>
                <textarea class="form-control @error('alasan') is-invalid @enderror" 
                          id="alasan" name="alasan" rows="4" required>{{ old('alasan') }}</textarea>
                @error('alasan')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="alamat_cuti" class="form-label">Alamat Selama Cuti</label>
                        <textarea class="form-control @error('alamat_cuti') is-invalid @enderror" 
                                  id="alamat_cuti" name="alamat_cuti" rows="2">{{ old('alamat_cuti') }}</textarea>
                        @error('alamat_cuti')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="no_telepon_cuti" class="form-label">No. Telepon Selama Cuti</label>
                        <input type="text" class="form-control @error('no_telepon_cuti') is-invalid @enderror" 
                               id="no_telepon_cuti" name="no_telepon_cuti" value="{{ old('no_telepon_cuti') }}">
                        @error('no_telepon_cuti')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{{ route('cuti.index') }}" class="btn btn-secondary">Batal</a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-send"></i> Ajukan Cuti
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
const jenisCutiSelect = document.getElementById('jenis_cuti');
const tanggalMulaiInput = document.getElementById('tanggal_mulai');
const tanggalSelesaiInput = document.getElementById('tanggal_selesai');
const jumlahHariPreview = document.getElementById('jumlah_hari_preview');
const quotaInfo = document.getElementById('quota-info');
const quotaDescription = document.getElementById('quota-description');
const quotaDetails = document.getElementById('quota-details');

// Update info kuota ketika jenis cuti dipilih
jenisCutiSelect.addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const max = selectedOption.dataset.max;
    const remaining = selectedOption.dataset.remaining;
    const taken = selectedOption.dataset.taken;
    const available = selectedOption.dataset.available === '1';
    const description = selectedOption.dataset.description;

    if (this.value && available) {
        quotaInfo.style.display = 'block';
        quotaDescription.textContent = description;
        
        if (max === 'unlimited' || remaining === 'unlimited') {
            quotaDetails.innerHTML = `<span class="badge bg-info">Kuota: Unlimited</span> <span class="badge bg-secondary">Terpakai: ${taken} hari</span>`;
            quotaDetails.className = 'mt-1';
        } else {
            const remainingNum = parseInt(remaining);
            const maxNum = parseInt(max);
            const takenNum = parseInt(taken);
            
            if (remainingNum <= 0) {
                quotaDetails.innerHTML = `<span class="badge bg-danger">Kuota Habis!</span> <span class="badge bg-secondary">Terpakai: ${takenNum}/${maxNum} hari</span>`;
                quotaDetails.className = 'mt-1';
            } else {
                quotaDetails.innerHTML = `
                    <span class="badge bg-success">Sisa: ${remainingNum} hari</span> 
                    <span class="badge bg-secondary">Terpakai: ${takenNum}/${maxNum} hari</span>
                    ${remainingNum < 5 ? '<span class="badge bg-warning ms-1">Kuota Menipis!</span>' : ''}
                `;
                quotaDetails.className = 'mt-1';
            }
        }
    } else if (this.value && !available) {
        quotaInfo.style.display = 'block';
        quotaDescription.textContent = description;
        quotaDetails.innerHTML = '<span class="badge bg-danger">Jenis cuti ini tidak tersedia untuk status kepegawaian Anda</span>';
        quotaDetails.className = 'mt-1';
    } else {
        quotaInfo.style.display = 'none';
    }

    // Hitung ulang jumlah hari jika sudah ada tanggal
    calculateDays();
});

// Update tanggal selesai minimum
tanggalMulaiInput.addEventListener('change', function() {
    const tanggalMulai = this.value;
    if (tanggalMulai) {
        tanggalSelesaiInput.min = tanggalMulai;
        calculateDays();
    }
});

// Hitung jumlah hari
tanggalSelesaiInput.addEventListener('change', function() {
    calculateDays();
});

function calculateDays() {
    const tanggalMulai = tanggalMulaiInput.value;
    const tanggalSelesai = tanggalSelesaiInput.value;
    const selectedOption = jenisCutiSelect.options[jenisCutiSelect.selectedIndex];
    const remaining = selectedOption ? selectedOption.dataset.remaining : null;

    if (tanggalMulai && tanggalSelesai) {
        const mulai = new Date(tanggalMulai);
        const selesai = new Date(tanggalSelesai);
        const diffTime = Math.abs(selesai - mulai);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;

        jumlahHariPreview.value = diffDays + ' hari';
        
        // Validasi dengan sisa kuota
        if (remaining && remaining !== 'unlimited') {
            const remainingNum = parseInt(remaining);
            if (diffDays > remainingNum) {
                jumlahHariPreview.className = 'form-control border-danger';
                jumlahHariPreview.style.color = 'red';
                jumlahHariPreview.value += ` (Melebihi sisa kuota: ${remainingNum} hari)`;
            } else {
                jumlahHariPreview.className = 'form-control border-success';
                jumlahHariPreview.style.color = 'green';
            }
        } else {
            jumlahHariPreview.className = 'form-control';
            jumlahHariPreview.style.color = '';
        }
    }
}

// Validasi form sebelum submit
document.querySelector('form').addEventListener('submit', function(e) {
    const selectedOption = jenisCutiSelect.options[jenisCutiSelect.selectedIndex];
    if (!selectedOption || selectedOption.dataset.available !== '1') {
        e.preventDefault();
        alert('Jenis cuti yang dipilih tidak tersedia untuk status kepegawaian Anda.');
        return false;
    }

    const tanggalMulai = tanggalMulaiInput.value;
    const tanggalSelesai = tanggalSelesaiInput.value;
    if (tanggalMulai && tanggalSelesai) {
        const mulai = new Date(tanggalMulai);
        const selesai = new Date(tanggalSelesai);
        const diffTime = Math.abs(selesai - mulai);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
        const remaining = selectedOption.dataset.remaining;

        if (remaining && remaining !== 'unlimited') {
            const remainingNum = parseInt(remaining);
            if (diffDays > remainingNum) {
                e.preventDefault();
                alert(`Jumlah hari cuti (${diffDays} hari) melebihi sisa kuota yang tersedia (${remainingNum} hari).`);
                return false;
            }
        }
    }
});
</script>
@endpush
@endsection