@extends('layouts.siswa')

@section('title', 'Presensi Harian - MagangTime')
@section('page-title', 'Presensi Harian')

@section('content')
<div class="d-flex justify-content-center align-items-center" style="min-height: 70vh;">
    <div class="col-md-10 col-lg-9">
        <div class="card">
            <div class="card-header bg-primary text-white text-center">
                <h4 class="mb-0"><i class="fas fa-calendar-check me-2"></i>Presensi Hari Ini</h4>
                <div class="clock mt-2 text-white" id="currentTime" style="color: #ffffff !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);"></div>
                <small>{{ \Carbon\Carbon::now()->isoFormat('dddd, D MMMM Y') }}</small>
            </div>

            @if(\App\Models\Holiday::isHoliday(today()))
                <div class="alert alert-info text-center mx-3 mt-3">
                    <i class="fas fa-calendar-alt fa-lg me-2"></i>
                    <strong>Hari ini adalah hari libur!</strong><br>
                    <small>Presensi tidak dapat dilakukan pada hari libur.</small>
                </div>
            @endif

            <div class="card-body">
                @php
                    $isHoliday = \App\Models\Holiday::isHoliday(today());
                    $currentHour = \Carbon\Carbon::now('Asia/Jakarta')->hour;
                    $canCheckOut = $todayAttendance && $todayAttendance->check_in_time && !$todayAttendance->check_out_time && $currentHour >= 16;
                @endphp

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-dark">
                            <tr>
                                <th width="5%">No</th>
                                <th class="text-center">Presensi</th>
                                <th class="text-center">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center">1</td>
                                <td>
                                    <div class="d-grid gap-2">
                                        <!-- TOMBOL MASUK -->
                                        <form method="POST" action="{{ route('siswa.presensi') }}" class="d-inline">
                                            @csrf
                                            <input type="hidden" name="type" value="masuk">
                                            <button type="submit" class="btn btn-success w-100" 
                                                    {{ $todayAttendance && $todayAttendance->check_in_time || $isHoliday ? 'disabled' : '' }}>
                                                <i class="fas fa-sign-in-alt me-2"></i>
                                                {{ $todayAttendance && $todayAttendance->check_in_time ? 'Sudah Masuk' : 'Masuk' }}
                                            </button>
                                        </form>
                                        
                                        <!-- TOMBOL PULANG -->
                                        <form method="POST" action="{{ route('siswa.presensi') }}" class="d-inline">
                                            @csrf
                                            <input type="hidden" name="type" value="pulang">
                                            <button type="submit" class="btn btn-warning w-100"
                                                    {{ !$canCheckOut || $isHoliday ? 'disabled' : '' }}>
                                                <i class="fas fa-sign-out-alt me-2"></i>
                                                @if($todayAttendance && $todayAttendance->check_out_time)
                                                    Sudah Pulang
                                                @elseif(!$todayAttendance || !$todayAttendance->check_in_time)
                                                    Pulang (Masuk Dulu)
                                                @elseif($currentHour < 16)
                                                    Pulang (Mulai Jam 16:00)
                                                @else
                                                    Pulang
                                                @endif
                                            </button>
                                        </form>
                                        
                                        <!-- TOMBOL IZIN -->
                                        <button type="button" class="btn btn-info w-100" data-bs-toggle="modal" data-bs-target="#izinModal"
                                                {{ $todayAttendance && ($todayAttendance->check_in_time || $todayAttendance->status === 'izin') || $isHoliday ? 'disabled' : '' }}>
                                            <i class="fas fa-exclamation-circle me-2"></i>Izin
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    @if($todayAttendance)
                                        <div class="mb-1">
                                            <strong>Status:</strong> 
                                            <span class="badge bg-{{ $todayAttendance->status_badge }}">
                                                {{ ucfirst($todayAttendance->status) }}
                                            </span>
                                        </div>
                                        @if($todayAttendance->check_in_time)
                                            <div class="mb-1">
                                                <strong>Jam Masuk:</strong> {{ $todayAttendance->check_in_time->setTimezone('Asia/Makassar')->format('H:i:s') }}
                                            </div>
                                        @endif
                                        @if($todayAttendance->check_out_time)
                                            <div class="mb-1">
                                                <strong>Jam Pulang:</strong> {{ $todayAttendance->check_out_time->setTimezone('Asia/Makassar')->format('H:i:s') }}
                                            </div>
                                        @endif
                                        @if($todayAttendance->notes)
                                            <div><strong>Catatan:</strong> {{ $todayAttendance->notes }}</div>
                                        @endif
                                    @else
                                        <span class="text-muted">Belum melakukan presensi</span>
                                    @endif

                                    <!-- Info Aturan Waktu -->
                                    <div class="mt-2">
                                        <small class="text-info">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Presensi pulang dapat dilakukan mulai jam 16:00
                                        </small>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Izin -->
<div class="modal fade" id="izinModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Form Izin</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('siswa.presensi') }}">
                @csrf
                <input type="hidden" name="type" value="izin">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Alasan Izin <span class="text-danger">*</span></label>
                        <textarea name="alasan_izin" class="form-control" rows="3" required 
                                  placeholder="Masukkan alasan izin..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-info">Kirim Izin</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function updateTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString('id-ID', {
        hour: '2-digit', minute: '2-digit', second: '2-digit'
    });
    document.getElementById('currentTime').textContent = timeString;
}
updateTime();
setInterval(updateTime, 1000);
</script>
@endsection