@extends('layout.app')

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

@section('content')
<x-material-page-header 
    title="Detail Voucher" 
    :breadcrumbs="[
        ['name' => 'Voucher', 'url' => route('voucher.index')],
        ['name' => 'Detail']
    ]"
>
    <a href="{{ route('voucher.index') }}" class="btn btn-sm bg-gradient-secondary mb-0 me-2">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">arrow_back</i> Kembali
    </a>
    <a href="{{ route('voucher.edit', $voucher) }}" class="btn btn-sm bg-gradient-primary mb-0">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i> Edit
    </a>
</x-material-page-header>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-8">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Informasi Voucher</h6>
                </div>
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label font-weight-bold">Kode Voucher</label>
                                <p class="form-control-plaintext">{{ $voucher->kode_voucher }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label font-weight-bold">Status</label>
                                <p class="form-control-plaintext">
                                    <span class="badge badge-sm bg-gradient-{{ $voucher->status_badge_class }}">{{ $voucher->status }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label font-weight-bold">Paket Internet</label>
                                <p class="form-control-plaintext">{{ $voucher->paket->nama_paket ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label font-weight-bold">Harga</label>
                                <p class="form-control-plaintext">Rp {{ number_format($voucher->harga, 0, ',', '.') }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label font-weight-bold">Masa Aktif</label>
                                <p class="form-control-plaintext">{{ $voucher->masa_aktif_hari }} hari</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label font-weight-bold">Tanggal Dibuat</label>
                                <p class="form-control-plaintext">{{ $voucher->created_at->format('d/m/Y H:i') }}</p>
                            </div>
                        </div>
                    </div>
                    
                    @if($voucher->pelanggan)
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label font-weight-bold">Pelanggan</label>
                                <p class="form-control-plaintext">{{ $voucher->pelanggan->nama }}</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label class="form-label font-weight-bold">Tanggal Digunakan</label>
                            <p class="form-control-plaintext">
                                {{ $voucher->tanggal_digunakan ? $voucher->tanggal_digunakan->format('d/m/Y H:i') : '-' }}
                            </p>
                        </div>
                    </div>
                </div>
                @endif
            </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">Aksi</h6>
                </div>
                <div class="card-body pt-0">
                    @if($voucher->status === 'Belum Digunakan')
                    <form method="POST" action="{{ route('voucher.activate') }}" class="mb-3">
                        @csrf
                        <input type="hidden" name="kode_voucher" value="{{ $voucher->kode_voucher }}">
                        <div class="input-group input-group-outline mb-3">
                            <label class="form-label">Pilih Pelanggan <span class="text-danger">*</span></label>
                            <select class="form-control" 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>
                        </div>
                        <button type="submit" class="btn bg-gradient-success mb-0 w-100">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">check_circle</i>Aktivasi Voucher
                        </button>
                    </form>
                    @endif
                    
                    @if($voucher->status === 'Aktif')
                    <div class="alert alert-info text-white">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>
                        Voucher sudah aktif dan dapat digunakan.
                    </div>
                    @endif
                    
                    @if($voucher->status === 'Terpakai')
                    <div class="alert alert-success text-white">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">check_circle</i>
                        Voucher sudah digunakan.
                    </div>
                    @endif
                    
                    @if($voucher->status === 'Expired')
                    <div class="alert alert-warning text-white">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i>
                        Voucher sudah expired.
                    </div>
                    @endif
                    
                    <div class="mt-3">
                        <a href="{{ route('voucher.print') }}?kode_voucher={{ $voucher->kode_voucher }}" class="btn bg-gradient-primary mb-0 w-100" target="_blank">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">print</i>Print Voucher
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Informasi Paket</h6>
                </div>
                <div class="card-body pt-0">
                    @if($voucher->paket)
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Nama Paket</label>
                        <p class="form-control-plaintext">{{ $voucher->paket->nama_paket }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Kecepatan</label>
                        <p class="form-control-plaintext">{{ $voucher->paket->kecepatan }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Jenis</label>
                        <p class="form-control-plaintext">{{ $voucher->paket->jenis }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold">Grup Paket</label>
                        <p class="form-control-plaintext">{{ $voucher->paket->grup_paket }}</p>
                    </div>
                    @else
                    <div class="alert alert-warning text-white">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i>
                        Paket internet tidak ditemukan.
                    </div>
                    @endif
                </div>
            </div>
    </div>
</div>
@endsection