@extends('layout.app')

@section('title', 'Generate Voucher - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Generate Voucher" 
    :breadcrumbs="[
        ['name' => 'Voucher', 'url' => route('voucher.index')],
        ['name' => 'Generate']
    ]"
    :action="route('voucher.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;">confirmation_number</i> Form Generate Voucher
                    </h6>
                </div>
                <div class="card-body pt-3">
                    @if(session('success'))
                        <div class="alert alert-success text-white">{{ session('success') }}</div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger text-white">{{ session('error') }}</div>
                    @endif

                <form method="POST" action="{{ route('voucher.store') }}">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Paket <span class="text-danger">*</span></label>
                                <select class="form-control @error('paket_internet_id') is-invalid @enderror" 
                                        id="paket_internet_id" name="paket_internet_id" required>
                                    <option value="">Pilih Paket</option>
                                    @foreach($paketList as $paket)
                                    <option value="{{ $paket->id }}" data-harga="{{ $paket->harga }}"
                                            {{ old('paket_internet_id') == $paket->id ? 'selected' : '' }}>
                                        {{ $paket->nama_paket }} - Rp {{ number_format($paket->harga, 0, ',', '.') }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('paket_internet_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Pelanggan <span class="text-danger">*</span></label>
                                <select class="form-control @error('pelanggan_id') is-invalid @enderror" 
                                        id="pelanggan_id" name="pelanggan_id" required>
                                    <option value="">Pilih Pelanggan</option>
                                    @foreach($pelangganList as $p)
                                    <option value="{{ $p->id }}" 
                                            {{ (old('pelanggan_id') == $p->id || $selectedPelangganId == $p->id) ? 'selected' : '' }}>
                                        {{ $p->nama }} - {{ $p->nomor_telepon }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('pelanggan_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Jumlah Voucher <span class="text-danger">*</span></label>
                                <input type="number" 
                                       class="form-control @error('jumlah') is-invalid @enderror" 
                                       id="jumlah" 
                                       name="jumlah" 
                                       min="1" 
                                       max="100" 
                                       value="{{ old('jumlah', 1) }}" 
                                       required>
                                <small class="text-muted">Maksimal 100 voucher per generate</small>
                                @error('jumlah')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Masa Aktif (Hari) <span class="text-danger">*</span></label>
                                <input type="number" 
                                       class="form-control @error('masa_aktif_hari') is-invalid @enderror" 
                                       id="masa_aktif_hari" 
                                       name="masa_aktif_hari" 
                                       min="1" 
                                       value="{{ old('masa_aktif_hari', 30) }}" 
                                       required>
                                @error('masa_aktif_hari')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Harga <span class="text-danger">*</span></label>
                        <input type="number" 
                               class="form-control @error('harga') is-invalid @enderror" 
                               id="harga" 
                               name="harga" 
                               min="0" 
                               value="{{ old('harga') }}" 
                               required>
                        @error('harga')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="alert alert-info text-white mb-3">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>
                        <strong>Catatan:</strong> Voucher akan langsung aktif setelah di-generate dan terikat dengan pelanggan yang dipilih.
                    </div>
                    
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ route('voucher.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>
                        <button type="submit" class="btn bg-gradient-success mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">add</i>Generate Voucher
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Informasi</h6>
            </div>
            <div class="card-body pt-0">
                <h6>Fitur Generate Voucher:</h6>
                <ul class="list-unstyled">
                    <li><i class="material-symbols-rounded text-success me-2" style="font-size: 18px; vertical-align: middle;">check_circle</i>Pilih pelanggan langsung</li>
                    <li><i class="material-symbols-rounded text-success me-2" style="font-size: 18px; vertical-align: middle;">check_circle</i>Voucher langsung aktif</li>
                    <li><i class="material-symbols-rounded text-success me-2" style="font-size: 18px; vertical-align: middle;">check_circle</i>Generate multiple voucher</li>
                    <li><i class="material-symbols-rounded text-success me-2" style="font-size: 18px; vertical-align: middle;">check_circle</i>Set masa aktif custom</li>
                    <li><i class="material-symbols-rounded text-success me-2" style="font-size: 18px; vertical-align: middle;">check_circle</i>Harga fleksibel</li>
                </ul>
                
                <hr>
                
                <h6>Status Voucher:</h6>
                <ul class="list-unstyled">
                    <li><span class="badge badge-sm bg-gradient-success me-2">Aktif</span> Siap digunakan</li>
                    <li><span class="badge badge-sm bg-gradient-warning me-2">Expired</span> Sudah kadaluarsa</li>
                    <li><span class="badge badge-sm bg-gradient-danger me-2">Nonaktif</span> Dinonaktifkan</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Auto-fill harga from selected paket
document.getElementById('paket_internet_id').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const harga = selectedOption.getAttribute('data-harga');
    if (harga) {
        document.getElementById('harga').value = harga;
    }
});
</script>
@endsection