@extends('layouts.app')

@section('title', 'Laporan Penggunaan Voucher')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-chart-line me-2"></i>
                Laporan Penggunaan Voucher
            </h1>
            <p class="text-muted mb-0">Analisis penggunaan voucher diskon</p>
        </div>
        <a href="{{ route('vouchers.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>
            Kembali ke Voucher
        </a>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Penggunaan
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ number_format($stats['total_usage']) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-ticket-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Total Diskon Diberikan
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                Rp {{ number_format($stats['total_discount'], 0, ',', '.') }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Total Revenue Impact
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                Rp {{ number_format($stats['total_revenue_impact'], 0, ',', '.') }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-area fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Rata-rata Diskon
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                Rp {{ number_format($stats['avg_discount'], 0, ',', '.') }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-percentage fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter & Search -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('vouchers.usage-report') }}" class="row g-3">
                <div class="col-md-3">
                    <label for="voucher_id" class="form-label">Voucher</label>
                    <select class="form-select" id="voucher_id" name="voucher_id">
                        <option value="">Semua Voucher</option>
                        @foreach($vouchers as $voucher)
                            <option value="{{ $voucher->id }}" {{ request('voucher_id') == $voucher->id ? 'selected' : '' }}>
                                {{ $voucher->code }} - {{ $voucher->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">Semua Status</option>
                        <option value="used" {{ request('status') == 'used' ? 'selected' : '' }}>Digunakan</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Dibatalkan</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="start_date" class="form-label">Dari Tanggal</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" 
                           value="{{ request('start_date') }}">
                </div>
                <div class="col-md-2">
                    <label for="end_date" class="form-label">Sampai Tanggal</label>
                    <input type="date" class="form-control" id="end_date" name="end_date" 
                           value="{{ request('end_date') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-1"></i>
                            Filter
                        </button>
                        <a href="{{ route('vouchers.usage-report') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i>
                            Reset
                        </a>
                        <button type="button" class="btn btn-success" onclick="exportData()">
                            <i class="fas fa-download me-1"></i>
                            Export
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Usage Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-list me-2"></i>
                Riwayat Penggunaan Voucher
                <span class="badge bg-primary ms-2">{{ $usages->total() }}</span>
            </h5>
        </div>
        <div class="card-body">
            @if($usages->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Tanggal</th>
                                <th>Voucher</th>
                                <th>Customer</th>
                                <th>Order ID</th>
                                <th>Jumlah Order</th>
                                <th>Diskon</th>
                                <th>Total Bayar</th>
                                <th>Persentase Diskon</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($usages as $usage)
                                <tr>
                                    <td>
                                        <div class="fw-bold">{{ $usage->used_at->format('d/m/Y') }}</div>
                                        <small class="text-muted">{{ $usage->used_at->format('H:i') }}</small>
                                    </td>
                                    <td>
                                        @if($usage->voucher)
                                            <div>
                                                <code class="text-primary">{{ $usage->voucher->code }}</code>
                                            </div>
                                            <small class="text-muted">{{ $usage->voucher->name }}</small>
                                        @else
                                            <span class="text-muted">Voucher dihapus</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($usage->customer_email)
                                            <div>{{ $usage->customer_email }}</div>
                                        @endif
                                        @if($usage->customer_phone)
                                            <small class="text-muted">{{ $usage->customer_phone }}</small>
                                        @endif
                                        @if(!$usage->customer_email && !$usage->customer_phone)
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($usage->order_id)
                                            <code>{{ $usage->order_id }}</code>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="fw-bold">{{ $usage->formatted_order_amount }}</td>
                                    <td class="text-success fw-bold">-{{ $usage->formatted_discount_amount }}</td>
                                    <td class="fw-bold">{{ $usage->formatted_final_amount }}</td>
                                    <td>
                                        <span class="badge bg-info">{{ $usage->discount_percentage }}%</span>
                                    </td>
                                    <td>{!! $usage->status_badge !!}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            @if($usage->voucher)
                                                <a href="{{ route('vouchers.show', $usage->voucher) }}" 
                                                   class="btn btn-sm btn-outline-info" title="Lihat Voucher">
                                                    <i class="fas fa-ticket-alt"></i>
                                                </a>
                                            @endif
                                            @if($usage->invoice)
                                                <a href="{{ route('invoices.show', $usage->invoice) }}" 
                                                   class="btn btn-sm btn-outline-primary" title="Lihat Invoice">
                                                    <i class="fas fa-file-invoice"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="text-muted">
                        Menampilkan {{ $usages->firstItem() }} - {{ $usages->lastItem() }} 
                        dari {{ $usages->total() }} penggunaan
                    </div>
                    {{ $usages->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-chart-line fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Belum ada data penggunaan</h5>
                    <p class="text-muted">Belum ada voucher yang digunakan dengan filter yang dipilih</p>
                    @if(request()->hasAny(['voucher_id', 'status', 'start_date', 'end_date']))
                        <a href="{{ route('vouchers.usage-report') }}" class="btn btn-primary">
                            <i class="fas fa-times me-2"></i>
                            Reset Filter
                        </a>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
function exportData() {
    // Get current filter parameters
    const params = new URLSearchParams(window.location.search);
    params.set('export', 'csv');
    
    // Create download link
    const exportUrl = '{{ route("vouchers.usage-report") }}?' + params.toString();
    window.open(exportUrl, '_blank');
}

// Set default date range (last 30 days) if no dates are set
document.addEventListener('DOMContentLoaded', function() {
    const startDate = document.getElementById('start_date');
    const endDate = document.getElementById('end_date');
    
    if (!startDate.value && !endDate.value) {
        const today = new Date();
        const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));
        
        startDate.value = thirtyDaysAgo.toISOString().split('T')[0];
        endDate.value = today.toISOString().split('T')[0];
    }
});
</script>
@endpush

@push('styles')
<style>
.border-left-primary {
    border-left: 0.25rem solid #4e73df !important;
}

.border-left-success {
    border-left: 0.25rem solid #1cc88a !important;
}

.border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
    border-left: 0.25rem solid #f6c23e !important;
}

.text-xs {
    font-size: 0.7rem;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-gray-300 {
    color: #dddfeb !important;
}

.text-gray-800 {
    color: #5a5c69 !important;
}

.shadow {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
}

.btn-group .btn {
    border-radius: 0.25rem !important;
    margin-right: 2px;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

code {
    font-size: 0.875em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: #f8f9fa;
}
</style>
@endpush
@endsection