@extends('layouts.teacher.app')

@section('content')
<style>
    .detail-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    
    .info-row {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .info-row:last-child {
        border-bottom: none;
    }
    
    .info-label {
        font-weight: 600;
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .info-value {
        color: #212529;
        font-size: 0.95rem;
    }
    
    .status-badge {
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-weight: 500;
        font-size: 0.9rem;
    }
    
    .section-header {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        border-left: 4px solid #0d6efd;
    }
</style>

<div class="pagetitle">
    <h1>Butiran Permohonan Keluar</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('teacher.dashboard') }}">Utama</a></li>
            <li class="breadcrumb-item"><a href="{{ route('outing.listapp') }}">Senarai Permohonan</a></li>
            <li class="breadcrumb-item active">Butiran</li>
        </ol>
    </nav>
</div>

<section class="section">
    @include('errors')
    @include('layouts.messages')
    
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <form action="{{ route('outing.appapproval') }}" method="POST" id="regform">
                @csrf
                
                <div class="card detail-card">
                    <div class="card-body p-4">
                        <h5 class="card-title mb-4">
                            <i class="bi bi-file-earmark-text me-2"></i>Maklumat Permohonan
                        </h5>
                        
                        <!-- Application Details -->
                        <div class="info-row">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="info-label">ID Permohonan</span>
                                </div>
                                <div class="col-md-8">
                                    <span class="info-value font-monospace">{{ $details->id }}</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="info-label">Nama Pelajar</span>
                                </div>
                                <div class="col-md-8">
                                    <span class="info-value"><strong>{{ $details->user_name }}</strong></span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="info-label">Sekolah</span>
                                </div>
                                <div class="col-md-8">
                                    <span class="info-value">{{ $mrsm->nama_mrsm }}</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="info-label">Tarikh & Masa Keluar</span>
                                </div>
                                <div class="col-md-8">
                                    <span class="info-value">
                                        {{ \Carbon\Carbon::parse($details->start_date . ' ' . $details->start_time)->format('d M Y, h:i A') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="info-row">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="info-label">Tarikh & Masa Masuk</span>
                                </div>
                                <div class="col-md-8">
                                    <span class="info-value">
                                        {{ \Carbon\Carbon::parse($details->end_date . ' ' . $details->end_time)->format('d M Y, h:i A') }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="info-row">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="info-label">Alasan</span>
                                </div>
                                <div class="col-md-8">
                                    <span class="info-value">
                                        {{-- {{ $details->reason ?? '-' }} --}}
                                        {{ $reason }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        @if($details->extra_detail)
                        <div class="info-row">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="info-label">Maklumat Tambahan</span>
                                </div>
                                <div class="col-md-8">
                                    <span class="info-value">
                                        {{ $details->extra_detail }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        @endif
                        
                        <div class="info-row">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="info-label">Status Semasa</span>
                                </div>
                                <div class="col-md-8">
                                    @if($details->appl_status === 'APPROVE')
                                        <span class="status-badge bg-success text-white">
                                            <i class="bi bi-check-circle me-1"></i>LULUS
                                        </span>
                                    @elseif($details->appl_status === 'REJECT')
                                        <span class="status-badge bg-danger text-white">
                                            <i class="bi bi-x-circle me-1"></i>DITOLAK
                                        </span>
                                    @else
                                        <span class="status-badge bg-warning text-dark">
                                            <i class="bi bi-clock me-1"></i>PENDING
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        
                        @if($details->appl_status == 'PENDING')
                            <!-- Approval Section -->
                            <div class="section-header mt-4">
                                <h6 class="mb-0">
                                    <i class="bi bi-pencil-square me-2"></i>Kemaskini Status Permohonan
                                </h6>
                            </div>
                            
                            <div class="mb-3">
                                <label for="appstatus" class="form-label info-label">
                                    Status Kelulusan <span class="text-danger">*</span>
                                </label>
                                <select name="appstatus" id="appstatus" class="form-select" required>
                                    <option value="" selected disabled>Sila Pilih Status</option>
                                    @foreach($approvals as $approval)
                                        <option value="{{ $approval->id }}" data-status="{{ $approval->appl_status }}">{{ $approval->appl_status }}</option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <!-- Reject Reason Field (shown only when REJECT is selected) -->
                            <div class="mb-3" id="reject_reason_container" style="display: none;">
                                <label for="reject_reason" class="form-label info-label">
                                    Alasan Penolakan <span class="text-danger">*</span>
                                </label>
                                <textarea name="reject_reason" id="reject_reason" class="form-control" rows="3" placeholder="Sila nyatakan alasan penolakan..."></textarea>
                                <small class="text-muted">Alasan ini akan dihantar kepada pelajar/ibu bapa.</small>
                            </div>
                            
                            <input type="hidden" name="idouting" value="{{ $details->id }}">
                            
                            <div class="d-flex gap-2 justify-content-end mt-4">
                                <a href="{{ route('outing.listapp') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-arrow-left me-1"></i>Kembali
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-lg me-1"></i>Kemaskini Status
                                </button>
                            </div>
                        @else
                            <!-- Already Processed -->
                            <div class="info-row">
                                <div class="row">
                                    <div class="col-md-4">
                                        <span class="info-label">Diluluskan Oleh</span>
                                    </div>
                                    <div class="col-md-8">
                                        <span class="info-value">{{ $details->approval_by ?? '-' }}</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="info-row">
                                <div class="row">
                                    <div class="col-md-4">
                                        <span class="info-label">Tarikh Kemaskini</span>
                                    </div>
                                    <div class="col-md-8">
                                        <span class="info-value">
                                            {{ $details->approval_date ? \Carbon\Carbon::parse($details->approval_date)->format('d M Y, h:i A') : '-' }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            
                            @if($details->appl_status === 'REJECT' && $details->reject_reason)
                            <div class="info-row">
                                <div class="row">
                                    <div class="col-md-4">
                                        <span class="info-label">Alasan Penolakan</span>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="alert alert-danger mb-0">
                                            <i class="bi bi-exclamation-triangle me-2"></i>{{ $details->reject_reason }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            
                            <div class="d-flex justify-content-end mt-4">
                                <a href="{{ route('outing.listapp') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-arrow-left me-1"></i>Kembali ke Senarai
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

<script src="{{ asset('js/parsley.min.js') }}"></script>
<script>
    $('#regform').parsley();
    
    // Show/hide reject reason field based on status selection
    $('#appstatus').on('change', function() {
        const selectedOption = $(this).find('option:selected');
        const status = selectedOption.data('status');
        const rejectContainer = $('#reject_reason_container');
        const rejectTextarea = $('#reject_reason');
        
        if (status === 'REJECT') {
            rejectContainer.slideDown();
            rejectTextarea.attr('required', true);
        } else {
            rejectContainer.slideUp();
            rejectTextarea.attr('required', false);
            rejectTextarea.val(''); // Clear the value
        }
    });
</script>
@endsection
```