@extends('layouts.app')

@section('title', 'Tambah Record SLA')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-plus text-primary"></i>
            Tambah Record SLA
        </h1>
        <div class="d-flex gap-2">
            <a href="{{ route('sla.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="row justify-content-center">
        <div class="col-xl-8 col-lg-10">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-shield-alt"></i>
                        Form Input Error ISP / Server Lokal
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('sla.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <!-- Jenis Error -->
                            <div class="col-md-6 mb-3">
                                <label for="jenis_error" class="form-label">
                                    <i class="fas fa-exclamation-triangle text-warning"></i>
                                    Jenis Error <span class="text-danger">*</span>
                                </label>
                                <select class="form-control @error('jenis_error') is-invalid @enderror" 
                                        id="jenis_error" name="jenis_error" required>
                                    <option value="">Pilih Jenis Error</option>
                                    <option value="isp" {{ old('jenis_error') === 'isp' ? 'selected' : '' }}>
                                        ISP (Internet Service Provider)
                                    </option>
                                    <option value="server_lokal" {{ old('jenis_error') === 'server_lokal' ? 'selected' : '' }}>
                                        Server Lokal
                                    </option>
                                </select>
                                @error('jenis_error')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Pilih apakah error berasal dari ISP atau server internal
                                </small>
                            </div>

                            <!-- Tingkat Dampak -->
                            <div class="col-md-6 mb-3">
                                <label for="tingkat_dampak" class="form-label">
                                    <i class="fas fa-thermometer-half text-info"></i>
                                    Tingkat Dampak <span class="text-danger">*</span>
                                </label>
                                <select class="form-control @error('tingkat_dampak') is-invalid @enderror" 
                                        id="tingkat_dampak" name="tingkat_dampak" required>
                                    <option value="">Pilih Tingkat Dampak</option>
                                    <option value="rendah" {{ old('tingkat_dampak') === 'rendah' ? 'selected' : '' }}>
                                        Rendah - Minimal impact
                                    </option>
                                    <option value="sedang" {{ old('tingkat_dampak') === 'sedang' ? 'selected' : '' }}>
                                        Sedang - Moderate impact
                                    </option>
                                    <option value="tinggi" {{ old('tingkat_dampak') === 'tinggi' ? 'selected' : '' }}>
                                        Tinggi - High impact
                                    </option>
                                    <option value="kritis" {{ old('tingkat_dampak') === 'kritis' ? 'selected' : '' }}>
                                        Kritis - Critical impact
                                    </option>
                                </select>
                                @error('tingkat_dampak')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Seberapa besar dampak error terhadap layanan
                                </small>
                            </div>
                        </div>

                        <!-- Deskripsi Error -->
                        <div class="mb-3">
                            <label for="deskripsi_error" class="form-label">
                                <i class="fas fa-file-alt text-primary"></i>
                                Deskripsi Error <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control @error('deskripsi_error') is-invalid @enderror" 
                                   id="deskripsi_error" name="deskripsi_error" 
                                   value="{{ old('deskripsi_error') }}" required
                                   placeholder="Contoh: Koneksi internet terputus total">
                            @error('deskripsi_error')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Jelaskan secara singkat masalah yang terjadi
                            </small>
                        </div>

                        <!-- Waktu Mulai Error -->
                        <div class="mb-3">
                            <label for="waktu_mulai_error" class="form-label">
                                <i class="fas fa-clock text-danger"></i>
                                Waktu Mulai Error <span class="text-danger">*</span>
                            </label>
                            <input type="datetime-local" class="form-control @error('waktu_mulai_error') is-invalid @enderror" 
                                   id="waktu_mulai_error" name="waktu_mulai_error" 
                                   value="{{ old('waktu_mulai_error') }}" required>
                            @error('waktu_mulai_error')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Kapan error mulai terjadi (tanggal dan waktu)
                            </small>
                        </div>

                        <!-- PIC Penanganan -->
                        <div class="mb-3">
                            <label for="pic_penanganan" class="form-label">
                                <i class="fas fa-user-tie text-success"></i>
                                PIC Penanganan
                            </label>
                            <input type="text" class="form-control @error('pic_penanganan') is-invalid @enderror" 
                                   id="pic_penanganan" name="pic_penanganan" 
                                   value="{{ old('pic_penanganan') }}"
                                   placeholder="Nama teknisi/admin yang menangani">
                            @error('pic_penanganan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Siapa yang bertanggung jawab menangani masalah ini
                            </small>
                        </div>

                        <!-- Penyebab Error -->
                        <div class="mb-3">
                            <label for="penyebab_error" class="form-label">
                                <i class="fas fa-search text-warning"></i>
                                Penyebab Error (Jika Diketahui)
                            </label>
                            <textarea class="form-control @error('penyebab_error') is-invalid @enderror" 
                                      id="penyebab_error" name="penyebab_error" rows="3"
                                      placeholder="Jelaskan penyebab error jika sudah diketahui...">{{ old('penyebab_error') }}</textarea>
                            @error('penyebab_error')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Opsional - Bisa diisi nanti setelah investigasi
                            </small>
                        </div>

                        <!-- Catatan Tambahan -->
                        <div class="mb-4">
                            <label for="catatan_tambahan" class="form-label">
                                <i class="fas fa-sticky-note text-info"></i>
                                Catatan Tambahan
                            </label>
                            <textarea class="form-control @error('catatan_tambahan') is-invalid @enderror" 
                                      id="catatan_tambahan" name="catatan_tambahan" rows="3"
                                      placeholder="Informasi tambahan yang relevan...">{{ old('catatan_tambahan') }}</textarea>
                            @error('catatan_tambahan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Informasi tambahan yang mungkin berguna
                            </small>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('sla.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Batal
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Simpan Record SLA
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="row justify-content-center">
        <div class="col-xl-8 col-lg-10">
            <div class="card border-left-info shadow mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <h6 class="font-weight-bold text-info">
                                <i class="fas fa-info-circle"></i> Panduan Pengisian
                            </h6>
                            <ul class="text-sm text-gray-700 mb-0">
                                <li><strong>ISP Error:</strong> Masalah dari provider internet (Telkom, Biznet, dll)</li>
                                <li><strong>Server Lokal:</strong> Masalah pada server/infrastruktur internal</li>
                                <li><strong>Tingkat Dampak:</strong> Seberapa besar pengaruh terhadap layanan</li>
                                <li><strong>Waktu Mulai:</strong> Kapan pertama kali error terdeteksi</li>
                            </ul>
                        </div>
                        <div class="col-lg-6">
                            <h6 class="font-weight-bold text-warning">
                                <i class="fas fa-lightbulb"></i> Tips
                            </h6>
                            <ul class="text-sm text-gray-700 mb-0">
                                <li>Catat waktu error seakurat mungkin</li>
                                <li>Dokumentasikan semua gejala yang terlihat</li>
                                <li>Update status ketika error sudah resolved</li>
                                <li>Gunakan tingkat dampak sesuai kondisi real</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set default waktu mulai error ke sekarang
    const now = new Date();
    const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
    
    const waktuMulaiInput = document.getElementById('waktu_mulai_error');
    if (!waktuMulaiInput.value) {
        waktuMulaiInput.value = localDateTime;
    }

    // Auto-fill PIC dengan nama user yang login (jika kosong)
    const picInput = document.getElementById('pic_penanganan');
    if (!picInput.value) {
        @auth
            picInput.value = '{{ Auth::user()->name }}';
        @endauth
    }

    // Dynamic form validation feedback
    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input, select, textarea');
    
    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            if (this.hasAttribute('required') && !this.value.trim()) {
                this.classList.add('is-invalid');
            } else {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            }
        });
        
        input.addEventListener('input', function() {
            if (this.classList.contains('is-invalid') && this.value.trim()) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            }
        });
    });

    // Form submission with loading state
    form.addEventListener('submit', function(e) {
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        // Show loading state
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyimpan...';
        submitBtn.disabled = true;
        
        // Re-enable button after 5 seconds (fallback)
        setTimeout(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }, 5000);
    });
});
</script>
@endpush
@endsection