@extends('layout.app')

@section('title', 'Tambah Paket Internet - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Tambah Paket Internet" 
    :breadcrumbs="[
        ['name' => 'Paket Internet', 'url' => route('paket-internet.index')],
        ['name' => 'Tambah']
    ]"
    :action="route('paket-internet.index')" 
    actionLabel="Kembali" 
    actionIcon="arrow_back"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">speed</i> Form Tambah Paket Internet
                    </h6>
                </div>
                <div class="card-body pt-3">
                <form method="POST" action="{{ route('paket-internet.store') }}">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Nama Paket <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('nama_paket') is-invalid @enderror" 
                                       id="nama_paket" name="nama_paket" value="{{ old('nama_paket') }}" required>
                                @error('nama_paket')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="kecepatan" class="form-label">Kecepatan <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('kecepatan') is-invalid @enderror" 
                                       id="kecepatan" name="kecepatan" value="{{ old('kecepatan') }}" 
                                       placeholder="Contoh: 10 Mbps" required>
                                @error('kecepatan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="harga" class="form-label">Harga <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="number" class="form-control @error('harga') is-invalid @enderror" 
                                           id="harga" name="harga" value="{{ old('harga') }}" min="0" required>
                                </div>
                                @error('harga')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="masa_aktif" class="form-label">Masa Aktif (Hari) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('masa_aktif') is-invalid @enderror" 
                                       id="masa_aktif" name="masa_aktif" value="{{ old('masa_aktif') }}" min="1" required>
                                @error('masa_aktif')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="jenis" class="form-label">Jenis Paket <span class="text-danger">*</span></label>
                                <select class="form-control @error('jenis') is-invalid @enderror" 
                                        id="jenis" name="jenis" required>
                                    <option value="">Pilih Jenis</option>
                                    <option value="Unlimited" {{ old('jenis') == 'Unlimited' ? 'selected' : '' }}>Unlimited</option>
                                    <option value="Kuota" {{ old('jenis') == 'Kuota' ? 'selected' : '' }}>Kuota</option>
                                </select>
                                @error('jenis')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="grup_paket" class="form-label">Grup Paket <span class="text-danger">*</span></label>
                                <select class="form-control @error('grup_paket') is-invalid @enderror" 
                                        id="grup_paket" name="grup_paket" required>
                                    <option value="">Pilih Grup</option>
                                    <option value="Rumahan" {{ old('grup_paket') == 'Rumahan' ? 'selected' : '' }}>Rumahan</option>
                                    <option value="Kantor" {{ old('grup_paket') == 'Kantor' ? 'selected' : '' }}>Kantor</option>
                                    <option value="Hotspot" {{ old('grup_paket') == 'Hotspot' ? 'selected' : '' }}>Hotspot</option>
                                </select>
                                @error('grup_paket')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3" id="kuota-field" style="display: none;">
                        <label for="kuota" class="form-label">Kuota (GB)</label>
                        <input type="number" class="form-control @error('kuota') is-invalid @enderror" 
                               id="kuota" name="kuota" value="{{ old('kuota') }}" min="1">
                        @error('kuota')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn bg-gradient-primary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i>Simpan
                        </button>
                        <a href="{{ route('paket-internet.index') }}" class="btn bg-gradient-secondary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">close</i>Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Informasi</h6>
            </div>
            <div class="card-body">
                <p class="text-muted">
                    <i class="fas fa-info-circle me-2"></i>
                    Pastikan data yang diisi sudah benar dan lengkap.
                </p>
                <p class="text-muted">
                    <i class="fas fa-wifi me-2"></i>
                    Kecepatan internet dalam Mbps (Megabit per second).
                </p>
                <p class="text-muted">
                    <i class="fas fa-calendar me-2"></i>
                    Masa aktif dalam hari (30 hari = 1 bulan).
                </p>
                <p class="text-muted">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">data_usage</i>
                    Kuota hanya untuk paket jenis "Kuota".
                </p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.getElementById('jenis').addEventListener('change', function() {
    const kuotaField = document.getElementById('kuota-field');
    const kuotaInput = document.getElementById('kuota');
    
    if (this.value === 'Kuota') {
        kuotaField.style.display = 'block';
        kuotaInput.required = true;
    } else {
        kuotaField.style.display = 'none';
        kuotaInput.required = false;
        kuotaInput.value = '';
    }
});

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const jenisSelect = document.getElementById('jenis');
    if (jenisSelect.value === 'Kuota') {
        document.getElementById('kuota-field').style.display = 'block';
        document.getElementById('kuota').required = true;
    }
});
</script>
@endsection