@extends('layouts.app')

@section('title', 'Edit 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-edit text-warning"></i>
            Edit Record SLA #{{ $sla->id }}
        </h1>
        <div class="d-flex gap-2">
            <a href="{{ route('sla.show', $sla) }}" class="btn btn-info btn-sm">
                <i class="fas fa-eye"></i> Detail
            </a>
            <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-warning">
                        <i class="fas fa-shield-alt"></i>
                        Form Edit Error ISP / Server Lokal
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('sla.update', $sla) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <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') ?? $sla->jenis_error) === 'isp' ? 'selected' : '' }}>
                                        ISP (Internet Service Provider)
                                    </option>
                                    <option value="server_lokal" {{ (old('jenis_error') ?? $sla->jenis_error) === 'server_lokal' ? 'selected' : '' }}>
                                        Server Lokal
                                    </option>
                                </select>
                                @error('jenis_error')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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') ?? $sla->tingkat_dampak) === 'rendah' ? 'selected' : '' }}>
                                        Rendah - Minimal impact
                                    </option>
                                    <option value="sedang" {{ (old('tingkat_dampak') ?? $sla->tingkat_dampak) === 'sedang' ? 'selected' : '' }}>
                                        Sedang - Moderate impact
                                    </option>
                                    <option value="tinggi" {{ (old('tingkat_dampak') ?? $sla->tingkat_dampak) === 'tinggi' ? 'selected' : '' }}>
                                        Tinggi - High impact
                                    </option>
                                    <option value="kritis" {{ (old('tingkat_dampak') ?? $sla->tingkat_dampak) === 'kritis' ? 'selected' : '' }}>
                                        Kritis - Critical impact
                                    </option>
                                </select>
                                @error('tingkat_dampak')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="mb-3">
                            <label for="status" class="form-label">
                                <i class="fas fa-flag text-primary"></i>
                                Status <span class="text-danger">*</span>
                            </label>
                            <select class="form-control @error('status') is-invalid @enderror" 
                                    id="status" name="status" required>
                                <option value="">Pilih Status</option>
                                <option value="ongoing" {{ (old('status') ?? $sla->status) === 'ongoing' ? 'selected' : '' }}>
                                    Ongoing - Masih Berlangsung
                                </option>
                                <option value="resolved" {{ (old('status') ?? $sla->status) === 'resolved' ? 'selected' : '' }}>
                                    Resolved - Sudah Selesai
                                </option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </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') ?? $sla->deskripsi_error }}" required
                                   placeholder="Contoh: Koneksi internet terputus total">
                            @error('deskripsi_error')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <!-- Waktu Mulai Error -->
                            <div class="col-md-6 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') ?? $sla->waktu_mulai_error->format('Y-m-d\TH:i') }}" required>
                                @error('waktu_mulai_error')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Waktu Selesai Error -->
                            <div class="col-md-6 mb-3">
                                <label for="waktu_selesai_error" class="form-label">
                                    <i class="fas fa-check-circle text-success"></i>
                                    Waktu Selesai Error
                                </label>
                                <input type="datetime-local" class="form-control @error('waktu_selesai_error') is-invalid @enderror" 
                                       id="waktu_selesai_error" name="waktu_selesai_error" 
                                       value="{{ old('waktu_selesai_error') ?? ($sla->waktu_selesai_error ? $sla->waktu_selesai_error->format('Y-m-d\TH:i') : '') }}">
                                @error('waktu_selesai_error')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Kosongkan jika error masih berlangsung
                                </small>
                            </div>
                        </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') ?? $sla->pic_penanganan }}"
                                   placeholder="Nama teknisi/admin yang menangani">
                            @error('pic_penanganan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Penyebab Error -->
                        <div class="mb-3">
                            <label for="penyebab_error" class="form-label">
                                <i class="fas fa-search text-warning"></i>
                                Penyebab Error
                            </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') ?? $sla->penyebab_error }}</textarea>
                            @error('penyebab_error')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Solusi Perbaikan -->
                        <div class="mb-3">
                            <label for="solusi_perbaikan" class="form-label">
                                <i class="fas fa-tools text-success"></i>
                                Solusi Perbaikan
                            </label>
                            <textarea class="form-control @error('solusi_perbaikan') is-invalid @enderror" 
                                      id="solusi_perbaikan" name="solusi_perbaikan" rows="3"
                                      placeholder="Jelaskan langkah-langkah perbaikan yang dilakukan...">{{ old('solusi_perbaikan') ?? $sla->solusi_perbaikan }}</textarea>
                            @error('solusi_perbaikan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </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') ?? $sla->catatan_tambahan }}</textarea>
                            @error('catatan_tambahan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

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

    <!-- Current Status Info -->
    <div class="row justify-content-center">
        <div class="col-xl-8 col-lg-10">
            <div class="card border-left-{{ $sla->status === 'ongoing' ? 'warning' : 'success' }} shadow mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-8">
                            <h6 class="font-weight-bold text-{{ $sla->status === 'ongoing' ? 'warning' : 'success' }}">
                                <i class="fas fa-info-circle"></i> Status Saat Ini
                            </h6>
                            <p class="mb-2">
                                <strong>Status:</strong> 
                                @if($sla->status === 'ongoing')
                                    <strong style="color: #ffc107; background-color: #fff3cd; padding: 4px 8px; border-radius: 4px; font-size: 14px;">Berlangsung</strong>
                                @else
                                    <strong style="color: #28a745; background-color: #d4edda; padding: 4px 8px; border-radius: 4px; font-size: 14px;">Selesai</strong>
                                @endif
                                <br>
                                <strong>Jenis Error:</strong> 
                                @if($sla->jenis_error === 'isp')
                                    <strong style="color: white; background-color: #dc3545; padding: 4px 8px; border-radius: 4px; font-size: 14px;">ISP</strong>
                                @else
                                    <strong style="color: white; background-color: #17a2b8; padding: 4px 8px; border-radius: 4px; font-size: 14px;">Server Lokal</strong>
                                @endif
                                <br>
                                <strong>Tingkat Dampak:</strong> 
                                @if($sla->tingkat_dampak === 'rendah')
                                    <strong style="color: white; background-color: #28a745; padding: 4px 8px; border-radius: 4px; font-size: 14px;">Rendah</strong>
                                @elseif($sla->tingkat_dampak === 'sedang')
                                    <strong style="color: #212529; background-color: #ffc107; padding: 4px 8px; border-radius: 4px; font-size: 14px;">Sedang</strong>
                                @elseif($sla->tingkat_dampak === 'tinggi')
                                    <strong style="color: white; background-color: #dc3545; padding: 4px 8px; border-radius: 4px; font-size: 14px;">Tinggi</strong>
                                @else
                                    <strong style="color: white; background-color: #343a40; padding: 4px 8px; border-radius: 4px; font-size: 14px;">Kritis</strong>
                                @endif
                            </p>
                            @if($sla->status === 'ongoing')
                                <p class="text-warning mb-0">
                                    <i class="fas fa-clock"></i>
                                    <strong>Durasi Berlangsung:</strong> {{ $sla->waktu_mulai_error->diffForHumans() }}
                                </p>
                            @else
                                <p class="text-success mb-0">
                                    <i class="fas fa-check-circle"></i>
                                    <strong>Total Downtime:</strong> {{ $sla->formatted_downtime }}
                                </p>
                            @endif
                        </div>
                        <div class="col-lg-4 text-right">
                            <small class="text-muted">
                                Dibuat: {{ $sla->created_at->format('d/m/Y H:i') }}<br>
                                Update: {{ $sla->updated_at->format('d/m/Y H:i') }}
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-fill waktu selesai ketika status diubah ke resolved
document.getElementById('status').addEventListener('change', function() {
    const waktuSelesaiInput = document.getElementById('waktu_selesai_error');
    if (this.value === 'resolved' && !waktuSelesaiInput.value) {
        const now = new Date();
        const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
        waktuSelesaiInput.value = localDateTime;
    } else if (this.value === 'ongoing') {
        waktuSelesaiInput.value = '';
    }
});
</script>
@endsection