@extends('layout.app')

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

@section('content')
<x-material-page-header 
    title="Kelola Voucher" 
    :breadcrumbs="[
        ['name' => 'Voucher', 'url' => route('voucher.index')]
    ]"
>
    <a href="{{ route('voucher.create') }}" class="btn btn-sm bg-gradient-success mb-0 me-2">
        <i class="material-symbols-rounded me-1" style="font-size: 18px; line-height: 1;">add</i> Tambah Voucher
    </a>
    <button type="button" class="btn btn-sm bg-gradient-success mb-0 me-2" data-bs-toggle="modal" data-bs-target="#generateModal">
        <i class="material-symbols-rounded me-1" style="font-size: 18px; line-height: 1;">confirmation_number</i> Generate Voucher
    </button>
    <a href="{{ route('voucher.print') }}" class="btn btn-sm bg-gradient-warning mb-0 me-2" target="_blank" title="Print Semua Voucher">
        <i class="material-symbols-rounded me-1" style="font-size: 18px; line-height: 1;">print</i> Print Semua
    </a>
    <a href="{{ route('voucher.export') }}" class="btn btn-sm bg-gradient-info mb-0">
        <i class="material-symbols-rounded me-1" style="font-size: 18px; line-height: 1;">download</i> Export CSV
    </a>
</x-material-page-header>

<div class="container-fluid py-4">
    <!-- Filters -->
    <div class="card my-4">
        <div class="card-header pb-0 pt-3">
            <h6 class="mb-0">Filter Data</h6>
        </div>
        <div class="card-body pt-0">
            <form method="GET" action="{{ route('voucher.index') }}">
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group input-group-outline mb-3">
                            <label class="form-label">Status</label>
                            <select name="status" id="status" class="form-control">
                                <option value="">Semua Status</option>
                                <option value="Belum Digunakan" {{ request('status') == 'Belum Digunakan' ? 'selected' : '' }}>Belum Digunakan</option>
                                <option value="Aktif" {{ request('status') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                <option value="Expired" {{ request('status') == 'Expired' ? 'selected' : '' }}>Expired</option>
                                <option value="Nonaktif" {{ request('status') == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group input-group-outline mb-3">
                            <label class="form-label">Paket</label>
                            <select name="paket_id" id="paket_id" class="form-control">
                                <option value="">Semua Paket</option>
                                @foreach($paketList as $paket)
                                <option value="{{ $paket->id }}" {{ request('paket_id') == $paket->id ? 'selected' : '' }}>
                                    {{ $paket->nama_paket }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group input-group-outline mb-3">
                            <label class="form-label">Pencarian</label>
                            <input type="text" name="search" id="search" class="form-control" 
                                   value="{{ request('search') }}" placeholder="Nama pelanggan, telepon, atau kode voucher">
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <button type="submit" class="btn bg-gradient-primary mb-0 me-2">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">search</i>Filter
                        </button>
                        <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>Reset
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

<!-- Data Table -->
<div class="card my-4">
    <div class="card-header pb-0 pt-3">
        <h6 class="mb-0">Daftar Pelanggan dengan Voucher</h6>
    </div>
    <div class="card-body pt-0">
        @forelse($pelanggan as $index => $p)
        <div class="card mb-4">
            <div class="card-header pb-0 pt-3">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h6 class="mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">person</i>
                            <a href="#voucher-list-{{ $p->id }}" class="text-decoration-none" data-bs-toggle="collapse" aria-expanded="{{ request('pelanggan_id') == $p->id ? 'true' : 'false' }}" aria-controls="voucher-list-{{ $p->id }}" role="button">
                                {{ $p->nama }}
                            </a>
                            <small class="text-muted">- {{ $p->nomor_telepon }}</small>
                            <br>
                            <small class="text-muted">
                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">email</i>{{ $p->email ?? 'Tidak ada email' }}
                                <span class="mx-2">|</span>
                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">location_on</i>{{ $p->alamat ?? 'Tidak ada alamat' }}
                                <span class="mx-2">|</span>
                                <span class="badge badge-sm bg-gradient-{{ $p->status_layanan === 'Aktif' ? 'success' : ($p->status_layanan === 'Suspend' ? 'warning' : 'danger') }}">
                                    {{ $p->status_layanan }}
                                </span>
                            </small>
                        </h6>
                    </div>
                    <div class="col-md-4 text-end">
                        <div class="d-flex align-items-center justify-content-end">
                            <span class="badge badge-sm bg-gradient-primary me-2">{{ $p->voucher->count() }} Voucher</span>
                            <div class="btn-group" role="group">
                                <a href="{{ route('pelanggan.show', $p) }}" class="btn btn-sm bg-gradient-info mb-0" title="Lihat Detail Pelanggan">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">visibility</i>
                                </a>
                                <a href="{{ route('pelanggan.edit', $p) }}" class="btn btn-sm bg-gradient-secondary mb-0" title="Edit Pelanggan">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i>
                                </a>
                                <a href="{{ route('voucher.print') }}?pelanggan_id={{ $p->id }}" class="btn btn-sm bg-gradient-warning mb-0" target="_blank" title="Print Semua Voucher Pelanggan">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">print</i>
                                </a>
                                <a href="{{ route('voucher.create') }}?pelanggan_id={{ $p->id }}" class="btn btn-sm bg-gradient-success mb-0" title="Tambah Voucher">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">add</i>
                                </a>
                                <button type="button" class="btn btn-sm bg-gradient-danger mb-0" title="Hapus Pelanggan" 
                                        onclick="confirmDeletePelanggan('{{ route('pelanggan.destroy', $p) }}', '{{ $p->nama }}')">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">delete</i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body pt-0">
                <div id="voucher-list-{{ $p->id }}" class="collapse {{ request('pelanggan_id') == $p->id ? 'show' : '' }}">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                        <thead>
                            <tr>
                                <th>Kode Voucher</th>
                                <th>Paket</th>
                                <th>Harga</th>
                                <th>Status</th>
                                <th>Tanggal Aktivasi</th>
                                <th>Tanggal Expired</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($p->voucher as $voucher)
                            <tr>
                                <td>
                                    <strong class="font-monospace">{{ $voucher->kode_voucher }}</strong>
                                </td>
                                <td>{{ $voucher->paket->nama_paket ?? '-' }}</td>
                                <td>Rp {{ number_format($voucher->harga, 0, ',', '.') }}</td>
                                <td>
                                    <span class="badge badge-sm bg-gradient-{{ $voucher->status_badge_class }}">
                                        {{ $voucher->status }}
                                    </span>
                                </td>
                                <td>{{ $voucher->tanggal_aktivasi?->format('d/m/Y H:i') ?? '-' }}</td>
                                <td>{{ $voucher->tanggal_expired?->format('d/m/Y H:i') ?? '-' }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('voucher.show', $voucher) }}" class="btn btn-sm bg-gradient-info mb-0" title="Lihat Detail">
                                            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">visibility</i>
                                        </a>
                                        <a href="{{ route('voucher.print') }}?kode_voucher={{ $voucher->kode_voucher }}" 
                                           class="btn btn-sm bg-gradient-warning mb-0" title="Print Voucher" target="_blank">
                                            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">print</i>
                                        </a>
                                        <a href="{{ route('voucher.edit', $voucher) }}" class="btn btn-sm bg-gradient-secondary mb-0" title="Edit Voucher">
                                            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i>
                                        </a>
                                        <button type="button" class="btn btn-sm bg-gradient-danger mb-0" title="Hapus Voucher" 
                                                onclick="confirmDelete('{{ route('voucher.destroy', $voucher) }}', '{{ $voucher->kode_voucher }}')">
                                            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">delete</i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="text-center py-5">
            <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">confirmation_number</i>
            <h5 class="text-muted">Belum Ada Voucher</h5>
            <p class="text-muted">Belum ada pelanggan yang memiliki voucher.</p>
            <div class="d-flex justify-content-center gap-2">
                <a href="{{ route('voucher.create') }}" class="btn bg-gradient-primary mb-0">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">add</i>Tambah Voucher
                </a>
                <button type="button" class="btn bg-gradient-success mb-0" data-bs-toggle="modal" data-bs-target="#generateModal">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">confirmation_number</i>Generate Voucher
                </button>
            </div>
        </div>
        @endforelse
        
        <!-- Pagination -->
        @if($pelanggan->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $pelanggan->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Generate Modal -->
<div class="modal fade" id="generateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('voucher.store') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">confirmation_number</i>Generate Voucher
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <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 }}">
                                {{ $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 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(\App\Models\Pelanggan::where('status_layanan', 'Aktif')->get() as $p)
                            <option value="{{ $p->id }}">{{ $p->nama }} - {{ $p->nomor_telepon }}</option>
                            @endforeach
                        </select>
                        @error('pelanggan_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <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="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 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="30" 
                               required>
                        @error('masa_aktif_hari')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </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" 
                               required>
                        @error('harga')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">close</i>Batal
                    </button>
                    <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>
@endsection

@section('scripts')
<script>
function confirmDelete(url, code) {
    if (confirm('Apakah Anda yakin ingin menghapus voucher "' + code + '"?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = url;
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        
        const methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        methodInput.value = 'DELETE';
        
        form.appendChild(csrfInput);
        form.appendChild(methodInput);
        document.body.appendChild(form);
        form.submit();
    }
}

function confirmDeletePelanggan(url, nama) {
    if (confirm('Apakah Anda yakin ingin menghapus pelanggan "' + nama + '" dan semua vouchernya?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = url;
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        
        const methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        methodInput.value = 'DELETE';
        
        form.appendChild(csrfInput);
        form.appendChild(methodInput);
        document.body.appendChild(form);
        form.submit();
    }
}

// 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