@extends('layouts.app')

@section('title', 'İzin Başvuru Sihirbazı')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title mb-0">İzin Başvuru Sihirbazı</h3>
                </div>
                <div class="card-body">
                    <!-- Progress Bar -->
                    <div class="mb-4">
                        <div class="progress" style="height: 25px;">
                            <div class="progress-bar" role="progressbar" 
                                 style="width: {{ ($currentStep / 4) * 100 }}%" 
                                 aria-valuenow="{{ $currentStep }}" aria-valuemin="0" aria-valuemax="4">
                                Adım {{ $currentStep }} / 4
                            </div>
                        </div>
                        <div class="d-flex justify-content-between mt-2">
                            <small>İzin Bilgileri</small>
                            <small>Açıklama</small>
                            <small>Belge Yükleme</small>
                            <small>Önizleme</small>
                        </div>
                    </div>

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <!-- Step Content -->
                    @if($currentStep == 1)
                        <!-- Step 1: Leave Information -->
                        <form action="{{ route('employee.leaves.wizard.step', 1) }}" method="POST">
                            @csrf
                            <h5>Adım 1: İzin Bilgileri</h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="leave_type_id" class="form-label">İzin Türü <span class="text-danger">*</span></label>
                                        <select class="form-select @error('leave_type_id') is-invalid @enderror" 
                                                id="leave_type_id" name="leave_type_id" required>
                                            <option value="">İzin Türü Seçin</option>
                                            @foreach(\App\Models\LeaveType::all() as $leaveType)
                                                <option value="{{ $leaveType->id }}" {{ old('leave_type_id') == $leaveType->id ? 'selected' : '' }}>
                                                    {{ $leaveType->name }} ({{ $leaveType->days_allowed }} gün)
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('leave_type_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="days" class="form-label">Gün Sayısı <span class="text-danger">*</span></label>
                                        <input type="number" min="1" max="30" 
                                               class="form-control @error('days') is-invalid @enderror" 
                                               id="days" name="days" value="{{ old('days') }}" required>
                                        @error('days')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="start_date" class="form-label">Başlangıç Tarihi <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control @error('start_date') is-invalid @enderror" 
                                               id="start_date" name="start_date" 
                                               value="{{ old('start_date') }}" required>
                                        @error('start_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="end_date" class="form-label">Bitiş Tarihi <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control @error('end_date') is-invalid @enderror" 
                                               id="end_date" name="end_date" 
                                               value="{{ old('end_date') }}" required>
                                        @error('end_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    Sonraki Adım <i class="fas fa-arrow-right"></i>
                                </button>
                            </div>
                        </form>

                    @elseif($currentStep == 2)
                        <!-- Step 2: Reason and Details -->
                        <form action="{{ route('employee.leaves.wizard.step', 2) }}" method="POST">
                            @csrf
                            <h5>Adım 2: Açıklama ve Detaylar</h5>
                            
                            <div class="mb-3">
                                <label for="reason" class="form-label">İzin Nedeni <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('reason') is-invalid @enderror" 
                                          id="reason" name="reason" rows="4" required 
                                          placeholder="İzin nedeninizi detaylı olarak açıklayın...">{{ old('reason') }}</textarea>
                                @error('reason')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="emergency_contact" class="form-label">Acil Durum Kişisi</label>
                                        <input type="text" class="form-control @error('emergency_contact') is-invalid @enderror" 
                                               id="emergency_contact" name="emergency_contact" 
                                               value="{{ old('emergency_contact') }}" 
                                               placeholder="İzin sırasında ulaşılabilecek kişi">
                                        @error('emergency_contact')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="emergency_phone" class="form-label">Acil Durum Telefonu</label>
                                        <input type="text" class="form-control @error('emergency_phone') is-invalid @enderror" 
                                               id="emergency_phone" name="emergency_phone" 
                                               value="{{ old('emergency_phone') }}" 
                                               placeholder="Telefon numarası">
                                        @error('emergency_phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between">
                                <a href="{{ route('employee.leaves.wizard.start') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left"></i> Önceki Adım
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    Sonraki Adım <i class="fas fa-arrow-right"></i>
                                </button>
                            </div>
                        </form>

                    @elseif($currentStep == 3)
                        <!-- Step 3: Document Upload -->
                        <form action="{{ route('employee.leaves.wizard.step', 3) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <h5>Adım 3: Belge Yükleme</h5>
                            
                            <div class="mb-3">
                                <label for="document" class="form-label">Belge Yükle</label>
                                <input type="file" class="form-control @error('document') is-invalid @enderror" 
                                       id="document" name="document" 
                                       accept=".pdf,.jpg,.jpeg,.png">
                                <div class="form-text">PDF, JPG, JPEG veya PNG formatında dosya yükleyebilirsiniz. (Maksimum 5MB)</div>
                                @error('document')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i>
                                <strong>Not:</strong> Belge yükleme opsiyoneldir. İzin türünüze göre belge gerekli olabilir.
                            </div>

                            <div class="d-flex justify-content-between">
                                <a href="{{ route('employee.leaves.wizard.start') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left"></i> Önceki Adım
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    Sonraki Adım <i class="fas fa-arrow-right"></i>
                                </button>
                            </div>
                        </form>

                    @elseif($currentStep == 4)
                        <!-- Step 4: Preview and Submit -->
                        <h5>Adım 4: Önizleme ve Onay</h5>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <h6>İzin Bilgileri</h6>
                                <table class="table table-borderless">
                                    <tr>
                                        <td><strong>İzin Türü:</strong></td>
                                        <td>{{ $wizardData['leave_type_name'] ?? 'N/A' }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Gün Sayısı:</strong></td>
                                        <td>{{ $wizardData['days'] ?? 'N/A' }} gün</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Başlangıç:</strong></td>
                                        <td>{{ isset($wizardData['start_date']) ? \Carbon\Carbon::parse($wizardData['start_date'])->format('d.m.Y') : 'N/A' }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Bitiş:</strong></td>
                                        <td>{{ isset($wizardData['end_date']) ? \Carbon\Carbon::parse($wizardData['end_date'])->format('d.m.Y') : 'N/A' }}</td>
                                    </tr>
                                </table>
                            </div>
                            
                            <div class="col-md-6">
                                <h6>İzin Nedeni</h6>
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <p>{{ $wizardData['reason'] ?? 'N/A' }}</p>
                                    </div>
                                </div>
                                
                                @if(isset($wizardData['emergency_contact']) || isset($wizardData['emergency_phone']))
                                    <h6 class="mt-3">Acil Durum Bilgileri</h6>
                                    <table class="table table-borderless">
                                        @if(isset($wizardData['emergency_contact']))
                                            <tr>
                                                <td><strong>Kişi:</strong></td>
                                                <td>{{ $wizardData['emergency_contact'] }}</td>
                                            </tr>
                                        @endif
                                        @if(isset($wizardData['emergency_phone']))
                                            <tr>
                                                <td><strong>Telefon:</strong></td>
                                                <td>{{ $wizardData['emergency_phone'] }}</td>
                                            </tr>
                                        @endif
                                    </table>
                                @endif
                            </div>
                        </div>

                        <form action="{{ route('employee.leaves.wizard.complete') }}" method="POST">
                            @csrf
                            <div class="d-flex justify-content-between">
                                <a href="{{ route('employee.leaves.wizard.start') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left"></i> Önceki Adım
                                </a>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-check"></i> Başvuruyu Gönder
                                </button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const startDateInput = document.getElementById('start_date');
    const endDateInput = document.getElementById('end_date');
    const daysInput = document.getElementById('days');
    
    if (startDateInput && endDateInput && daysInput) {
        // Set minimum date to today
        const today = new Date().toISOString().split('T')[0];
        startDateInput.min = today;
        
        // Calculate days when dates change
        function calculateDays() {
            if (startDateInput.value && endDateInput.value) {
                const startDate = new Date(startDateInput.value);
                const endDate = new Date(endDateInput.value);
                const diffTime = Math.abs(endDate - startDate);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
                daysInput.value = diffDays;
            }
        }
        
        startDateInput.addEventListener('change', function() {
            endDateInput.min = this.value;
            calculateDays();
        });
        
        endDateInput.addEventListener('change', calculateDays);
    }
});
</script>
@endsection