@extends('layouts.app')

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

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2>
            @if(auth()->user()->isPegawai())
                Pengajuan Cuti Saya
            @else
                Data Cuti
            @endif
        </h2>
        @if(auth()->user()->isPegawai())
        <p class="text-muted mb-0 small">Kelola pengajuan cuti Anda</p>
        @endif
    </div>
    <div class="d-flex gap-2">
        @if(auth()->user()->isPegawai())
        <a href="{{ route('cuti.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i> Ajukan Cuti
        </a>
        @endif
    </div>
</div>

{{-- Grafik Cuti --}}
@if(isset($chartData))
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Trend Pengajuan Cuti (6 Bulan Terakhir)</h5>
            </div>
            <div class="card-body">
                <canvas id="cutiTrendChart" height="100"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Distribusi Jenis Cuti</h5>
            </div>
            <div class="card-body">
                <canvas id="cutiJenisChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Status Cuti</h5>
            </div>
            <div class="card-body">
                <canvas id="cutiStatusChart"></canvas>
            </div>
        </div>
    </div>
</div>
@endif

<div class="card">
    <div class="card-body">
        <form method="GET" action="{{ route('cuti.index') }}" class="mb-3">
            <div class="row g-3">
                <div class="col-md-3">
                    <select name="status" class="form-select">
                        <option value="">Semua Status</option>
                        <option value="Menunggu Persetujuan" {{ request('status') == 'Menunggu Persetujuan' ? 'selected' : '' }}>Menunggu Persetujuan</option>
                        <option value="Disetujui" {{ request('status') == 'Disetujui' ? 'selected' : '' }}>Disetujui</option>
                        <option value="Ditolak" {{ request('status') == 'Ditolak' ? 'selected' : '' }}>Ditolak</option>
                    </select>
                </div>
                @if(auth()->user()->isKepalaTataUsaha() || auth()->user()->isPimpinan())
                <div class="col-md-3">
                    <select name="pegawai_id" class="form-select">
                        <option value="">Semua Pegawai</option>
                        @foreach($pegawaiList as $p)
                        <option value="{{ $p->id }}" {{ request('pegawai_id') == $p->id ? 'selected' : '' }}>
                            {{ $p->nama_lengkap }}
                        </option>
                        @endforeach
                    </select>
                </div>
                @endif
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i> Filter
                    </button>
                </div>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>Pegawai</th>
                        <th>Jenis Cuti</th>
                        <th>Tanggal</th>
                        <th>Jumlah Hari</th>
                        <th>Status</th>
                        <th class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($cuti as $c)
                    <tr>
                        <td>{{ $c->pegawai->nama_lengkap }}</td>
                        <td>{{ $c->jenis_cuti }}</td>
                        <td>{{ $c->tanggal_mulai->format('d/m/Y') }} - {{ $c->tanggal_selesai->format('d/m/Y') }}</td>
                        <td>{{ $c->jumlah_hari }} hari</td>
                        <td>
                            @if($c->status == 'Menunggu Persetujuan')
                            <span class="badge bg-warning">{{ $c->status }}</span>
                            @elseif($c->status == 'Disetujui')
                            <span class="badge bg-success">{{ $c->status }}</span>
                            @else
                            <span class="badge bg-danger">{{ $c->status }}</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <a href="{{ route('cuti.show', $c) }}" class="btn btn-sm btn-info">
                                <i class="bi bi-eye"></i>
                            </a>
                            @if($c->status == 'Menunggu Persetujuan' && auth()->user()->isPimpinan())
                            <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#approveModal{{ $c->id }}">
                                <i class="bi bi-check-circle"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#rejectModal{{ $c->id }}">
                                <i class="bi bi-x-circle"></i>
                            </button>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center">Tidak ada data cuti</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            {{ $cuti->links() }}
        </div>
    </div>
</div>

{{-- Modal Approve Cuti --}}
@foreach($cuti as $c)
@if($c->status == 'Menunggu Persetujuan' && auth()->user()->isPimpinan())
<!-- Modal Approve {{ $c->id }} -->
<div class="modal fade" id="approveModal{{ $c->id }}" tabindex="-1" aria-labelledby="approveModalLabel{{ $c->id }}" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="approveModalLabel{{ $c->id }}">Setujui Pengajuan Cuti</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('cuti.approve', $c) }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Pegawai:</label>
                        <p class="mb-0">{{ $c->pegawai->nama_lengkap }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Periode Cuti:</label>
                        <p class="mb-0">{{ $c->tanggal_mulai->format('d/m/Y') }} - {{ $c->tanggal_selesai->format('d/m/Y') }} ({{ $c->jumlah_hari }} hari)</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Jenis Cuti:</label>
                        <p class="mb-0">{{ $c->jenis_cuti }}</p>
                    </div>
                    <div class="mb-3">
                        <label for="catatan_approve_{{ $c->id }}" class="form-label">Catatan <small class="text-muted">(Opsional)</small></label>
                        <textarea class="form-control" id="catatan_approve_{{ $c->id }}" name="catatan" rows="3" placeholder="Tambahkan catatan persetujuan..."></textarea>
                    </div>
                    @if(auth()->user()->isPimpinan())
                    <div class="mb-3">
                        <label for="keterangan_pimpinan_approve_{{ $c->id }}" class="form-label">Keterangan Pimpinan <small class="text-muted">(Opsional)</small></label>
                        <textarea class="form-control" id="keterangan_pimpinan_approve_{{ $c->id }}" name="keterangan_pimpinan" rows="3" placeholder="Tambahkan keterangan tambahan dari pimpinan..."></textarea>
                        <small class="form-text text-muted">Keterangan ini akan ditambahkan pada catatan persetujuan</small>
                    </div>
                    <div class="alert alert-info mb-3">
                        <small><i class="bi bi-info-circle"></i> <strong>Catatan:</strong> Jika Anda ingin mengurangi jumlah hari cuti, isi form di bawah ini. Jika tidak diisi, cuti akan disetujui sesuai pengajuan.</small>
                    </div>
                    <div class="mb-3">
                        <label for="tanggal_selesai_baru_{{ $c->id }}" class="form-label">Ubah Tanggal Selesai <small class="text-muted">(Opsional)</small></label>
                        <input type="date" class="form-control" id="tanggal_selesai_baru_{{ $c->id }}" name="tanggal_selesai_baru" 
                               min="{{ $c->tanggal_mulai->format('Y-m-d') }}" 
                               max="{{ $c->tanggal_selesai->format('Y-m-d') }}"
                               placeholder="Kosongkan jika tidak diubah">
                        <small class="form-text text-muted">Jika diisi, harus antara tanggal mulai dan tanggal selesai pengajuan</small>
                    </div>
                    <div class="mb-3">
                        <label for="jumlah_hari_baru_{{ $c->id }}" class="form-label">Ubah Jumlah Hari <small class="text-muted">(Opsional)</small></label>
                        <input type="number" class="form-control" id="jumlah_hari_baru_{{ $c->id }}" name="jumlah_hari_baru" 
                               min="1" max="{{ $c->jumlah_hari }}"
                               placeholder="Kosongkan jika tidak diubah">
                        <small class="form-text text-muted">Jumlah hari saat ini: <strong>{{ $c->jumlah_hari }} hari</strong>. Maksimal yang dapat disetujui: {{ $c->jumlah_hari }} hari</small>
                    </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> Batal
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-circle"></i> Setujui
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Reject {{ $c->id }} -->
<div class="modal fade" id="rejectModal{{ $c->id }}" tabindex="-1" aria-labelledby="rejectModalLabel{{ $c->id }}" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="rejectModalLabel{{ $c->id }}">Tolak Pengajuan Cuti</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('cuti.reject', $c) }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Pegawai:</label>
                        <p class="mb-0">{{ $c->pegawai->nama_lengkap }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Periode Cuti:</label>
                        <p class="mb-0">{{ $c->tanggal_mulai->format('d/m/Y') }} - {{ $c->tanggal_selesai->format('d/m/Y') }} ({{ $c->jumlah_hari }} hari)</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Jenis Cuti:</label>
                        <p class="mb-0">{{ $c->jenis_cuti }}</p>
                    </div>
                    <div class="mb-3">
                        <label for="catatan_reject_{{ $c->id }}" class="form-label">Alasan Penolakan <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('catatan') is-invalid @enderror" 
                                  id="catatan_reject_{{ $c->id }}" name="catatan" rows="3" required placeholder="Masukkan alasan penolakan..."></textarea>
                        @error('catatan')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    @if(auth()->user()->isPimpinan())
                    <div class="mb-3">
                        <label for="keterangan_pimpinan_reject_{{ $c->id }}" class="form-label">Keterangan Pimpinan <small class="text-muted">(Opsional)</small></label>
                        <textarea class="form-control" id="keterangan_pimpinan_reject_{{ $c->id }}" name="keterangan_pimpinan" rows="3" placeholder="Tambahkan keterangan tambahan dari pimpinan..."></textarea>
                        <small class="form-text text-muted">Keterangan ini akan ditambahkan pada alasan penolakan</small>
                    </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> Batal
                    </button>
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-x-circle"></i> Tolak
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endforeach

@push('scripts')
@if(isset($chartData))
<script>
    // Grafik Trend Cuti Per Bulan
    const cutiTrendCtx = document.getElementById('cutiTrendChart');
    if (cutiTrendCtx) {
        new Chart(cutiTrendCtx, {
            type: 'line',
            data: {
                labels: @json($chartData['cuti_bulan_labels']),
                datasets: [{
                    label: 'Jumlah Pengajuan Cuti',
                    data: @json($chartData['cuti_per_bulan']),
                    borderColor: '#2563eb',
                    backgroundColor: 'rgba(37, 99, 235, 0.08)',
                    tension: 0.4,
                    fill: true,
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        border: {
                            color: '#e5e7eb'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: '#f3f4f6'
                        },
                        border: {
                            color: '#e5e7eb'
                        },
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    }

    // Grafik Distribusi Jenis Cuti
    const cutiJenisCtx = document.getElementById('cutiJenisChart');
    if (cutiJenisCtx) {
        const cutiJenisData = @json($chartData['cuti_jenis']);
        new Chart(cutiJenisCtx, {
            type: 'doughnut',
            data: {
                labels: Object.keys(cutiJenisData),
                datasets: [{
                    data: Object.values(cutiJenisData),
                    backgroundColor: [
                        '#2563eb', // Tahunan
                        '#10b981', // Sakit
                        '#f59e0b', // Melahirkan
                        '#06b6d4', // Khusus
                        '#6b7280'  // Lainnya
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 12
                            },
                            padding: 15
                        }
                    }
                }
            }
        });
    }

    // Grafik Status Cuti
    const cutiStatusCtx = document.getElementById('cutiStatusChart');
    if (cutiStatusCtx) {
        const cutiStatusData = @json($chartData['cuti_status']);
        new Chart(cutiStatusCtx, {
            type: 'doughnut',
            data: {
                labels: Object.keys(cutiStatusData),
                datasets: [{
                    data: Object.values(cutiStatusData),
                    backgroundColor: [
                        '#f59e0b', // Menunggu
                        '#10b981', // Disetujui
                        '#ef4444', // Ditolak
                        '#6b7280'  // Dibatalkan
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 12
                            },
                            padding: 15
                        }
                    }
                }
            }
        });
    }
</script>
@endif
@endpush
@endsection