@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Edit Response Deadline Setting</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('response-deadline-settings.index') }}">Response Deadline Settings</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        @if (session()->has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-octagon me-1"></i>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Edit Setting: {{ $responseDeadlineSetting->name }}</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('response-deadline-settings.update', $responseDeadlineSetting->id) }}" method="POST">
                            @csrf
                            @method('PUT')

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">Nama Setting <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                           id="name" name="name" value="{{ old('name', $responseDeadlineSetting->name) }}" 
                                           placeholder="Contoh: 5 Menit, 1 Jam" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Nama yang akan ditampilkan di dropdown</small>
                                </div>
                                <div class="col-md-6">
                                    <label for="unit" class="form-label">Unit <span class="text-danger">*</span></label>
                                    <select class="form-control @error('unit') is-invalid @enderror" 
                                            id="unit" name="unit" required>
                                        <option value="">Pilih Unit...</option>
                                        <option value="minutes" {{ old('unit', $responseDeadlineSetting->unit) == 'minutes' ? 'selected' : '' }}>Minutes</option>
                                        <option value="hours" {{ old('unit', $responseDeadlineSetting->unit) == 'hours' ? 'selected' : '' }}>Hours</option>
                                    </select>
                                    @error('unit')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="duration_minutes" class="form-label">Durasi (dalam menit) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('duration_minutes') is-invalid @enderror" 
                                           id="duration_minutes" name="duration_minutes" value="{{ old('duration_minutes', $responseDeadlineSetting->duration_minutes) }}" 
                                           min="1" max="10080" placeholder="Contoh: 5, 30, 60" required>
                                    @error('duration_minutes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Durasi dalam menit (maksimal 1 minggu = 10080 menit)</small>
                                </div>
                                <div class="col-md-6">
                                    <label for="sort_order" class="form-label">Urutan Tampil</label>
                                    <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                           id="sort_order" name="sort_order" value="{{ old('sort_order', $responseDeadlineSetting->sort_order) }}" 
                                           min="0" placeholder="0">
                                    @error('sort_order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Semakin kecil semakin atas di dropdown</small>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="description" class="form-label">Deskripsi (Opsional)</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                              id="description" name="description" rows="3">{{ old('description', $responseDeadlineSetting->description) }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Deskripsi tambahan untuk setting ini</small>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" 
                                               {{ old('is_active', $responseDeadlineSetting->is_active) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">
                                            Setting aktif (akan muncul di form assignment)
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="d-flex justify-content-between">
                                        <a href="{{ route('response-deadline-settings.index') }}" class="btn btn-secondary">
                                            <i class="bi bi-arrow-left"></i> Kembali
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-check-circle"></i> Update Setting
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">Info Setting Saat Ini</h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td><strong>Nama:</strong></td>
                                <td>{{ $responseDeadlineSetting->name }}</td>
                            </tr>
                            <tr>
                                <td><strong>Durasi:</strong></td>
                                <td>{{ $responseDeadlineSetting->duration_minutes }} menit</td>
                            </tr>
                            <tr>
                                <td><strong>Format:</strong></td>
                                <td>{{ $responseDeadlineSetting->formatted_duration }}</td>
                            </tr>
                            <tr>
                                <td><strong>Unit:</strong></td>
                                <td>{{ ucfirst($responseDeadlineSetting->unit) }}</td>
                            </tr>
                            <tr>
                                <td><strong>Sort Order:</strong></td>
                                <td>{{ $responseDeadlineSetting->sort_order }}</td>
                            </tr>
                            <tr>
                                <td><strong>Status:</strong></td>
                                <td>
                                    @if($responseDeadlineSetting->is_active)
                                        <span class="badge bg-success">Aktif</span>
                                    @else
                                        <span class="badge bg-danger">Nonaktif</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Dibuat:</strong></td>
                                <td>{{ $responseDeadlineSetting->created_at->format('d M Y') }}</td>
                            </tr>
                        </table>

                        @if($responseDeadlineSetting->description)
                            <hr>
                            <h6>Deskripsi:</h6>
                            <p class="text-muted">{{ $responseDeadlineSetting->description }}</p>
                        @endif
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">Preview Display</h6>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-2">Akan tampil di dropdown sebagai:</p>
                        <div class="border rounded p-2 bg-light">
                            <option>{{ $responseDeadlineSetting->name }} ({{ $responseDeadlineSetting->formatted_duration }})</option>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const durationInput = document.getElementById('duration_minutes');
    const unitSelect = document.getElementById('unit');
    
    // Auto suggest unit based on duration
    durationInput.addEventListener('input', function() {
        const duration = parseInt(this.value);
        if (duration >= 60 && unitSelect.value === 'minutes') {
            unitSelect.value = 'hours';
        } else if (duration < 60 && unitSelect.value === 'hours') {
            unitSelect.value = 'minutes';
        }
    });
});
</script>
@endpush