@extends('layouts.portal')

@section('title', 'Service Report')

@push('styles')
<style>
    /* ── Screen styles ── */
    .report-header {
        background: linear-gradient(135deg, #6f42c1, #fd7e14);
        color: white; border-radius: 10px;
        padding: 18px 24px; margin-bottom: 20px;
    }
    .report-header h3 { margin: 0; font-size: 20px; font-weight: 700; }
    .report-header small { opacity: 0.85; }
    .stat-box { border-radius: 8px; padding: 12px 16px; text-align: center; }
    .badge-status { font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
    .badge-success  { background: #d1e7dd; color: #0f5132; }
    .badge-pending  { background: #fff3cd; color: #856404; }
    .badge-rejected { background: #f8d7da; color: #842029; }
    .badge-processing { background: #cfe2ff; color: #084298; }
    .table th { background: #343a40; color: white; font-size: 12px; }
    .table td { vertical-align: middle; font-size: 12px; }
    .print-footer-bar {
        border-top: 2px dashed #dee2e6;
        margin-top: 20px; padding-top: 12px;
        color: #6c757d; font-size: 11px;
    }
    .print-toolbar {
        background: white; border-radius: 12px;
        padding: 12px 16px; margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,.07);
        display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    }

    /* ── Hide portal chrome when printing ── */
    @media print {
        .portal-topbar,
        .portal-sidebar,
        .print-toolbar,
        .print-footer-bar { display: none !important; }

        .portal-layout  { display: block !important; }
        .portal-main    { padding: 0 !important; }

        body { font-size: 11px; background: #fff !important; }

        .report-header {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        .table th, .badge-status {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        @page { margin: 10mm; }
    }
</style>
@endpush

@section('content')

{{-- Print Toolbar (hidden on print) --}}
<div class="print-toolbar">
    <button onclick="window.print()" class="btn btn-warning fw-bold">
        <i class="fas fa-print me-1"></i> Print / Save PDF
    </button>
    <a href="{{ route('user.dashboard') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-1"></i> Dashboard
    </a>
    {{-- Date filter --}}
    <form method="GET" action="{{ route('user.print') }}" class="d-flex align-items-center gap-2 ms-auto flex-wrap">
        <label class="text-muted small mb-0 fw-semibold">Date:</label>
        <input type="date" name="from" class="form-control form-control-sm" style="width:145px"
               value="{{ $from }}" max="{{ today()->toDateString() }}">
        <span class="text-muted small">to</span>
        <input type="date" name="to" class="form-control form-control-sm" style="width:145px"
               value="{{ $to }}" max="{{ today()->toDateString() }}">
        <button type="submit" class="btn btn-primary btn-sm">
            <i class="fas fa-search me-1"></i> Filter
        </button>
    </form>
    <span class="text-muted small">Ctrl+P se bhi print kar sakte hain</span>
</div>

{{-- Report Header --}}
<div class="report-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
        <h3><i class="fas fa-print me-2"></i>Service Usage Report</h3>
        <small>
            {{ $user->name }}
            @if($user->shop_name) · {{ $user->shop_name }} @endif
            · {{ $user->role_label }}
        </small>
    </div>
    <div class="text-end">
        <div style="font-size:15px;font-weight:600;">
            @if($from === $to)
                📅 {{ \Carbon\Carbon::parse($from)->format('d M Y') }}
            @else
                📅 {{ \Carbon\Carbon::parse($from)->format('d M Y') }}
                → {{ \Carbon\Carbon::parse($to)->format('d M Y') }}
            @endif
        </div>
        <small>Printed: {{ now()->format('d M Y, h:i A') }}</small>
    </div>
</div>

{{-- Summary Stats --}}
<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="stat-box border border-primary">
            <h4 class="text-primary mb-0">{{ $requests->count() }}</h4>
            <small class="text-muted">Total Requests</small>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-box border border-success">
            <h4 class="text-success mb-0">{{ $requests->where('status','success')->count() }}</h4>
            <small class="text-muted">Success</small>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-box border border-warning">
            <h4 class="text-warning mb-0">{{ $requests->whereIn('status',['pending','processing'])->count() }}</h4>
            <small class="text-muted">Pending</small>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-box border border-danger">
            <h4 class="fw-bold mb-0">₹{{ number_format($totalCharge, 2) }}</h4>
            <small class="text-muted">Total Charged</small>
        </div>
    </div>
</div>

{{-- Requests Table --}}
@if($requests->isEmpty())
    <div class="card">
        <div class="card-body text-center text-muted py-5">
            <i class="fas fa-inbox fa-3x mb-3 d-block opacity-50"></i>
            <p class="mb-0">Is date ke liye koi request nahi hai.</p>
        </div>
    </div>
@else
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-0">
                    <thead>
                        <tr>
                            <th width="40">#</th>
                            <th>Request No.</th>
                            <th>Service Name</th>
                            <th>Input</th>
                            <th width="90" class="text-center">Amount</th>
                            <th width="90" class="text-center">Status</th>
                            <th width="130">Date & Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($requests as $i => $req)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td><strong>{{ $req->request_no }}</strong></td>
                            <td>{{ $req->service->name ?? 'N/A' }}</td>
                            <td class="text-muted" style="max-width:180px;word-break:break-all">
                                @php
                                    $inp = $req->input_data ?? [];
                                    $display = $inp['mobile'] ?? $inp['epic_number'] ?? $inp['vehicle_number']
                                        ?? $inp['aadhaar_number'] ?? $inp['reference']
                                        ?? (is_array($inp) ? implode(', ', array_slice(array_values($inp), 0, 2)) : '-');
                                @endphp
                                {{ $display }}
                            </td>
                            <td class="text-center">
                                @if($req->charge > 0)
                                    <strong>₹{{ number_format($req->charge, 2) }}</strong>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="badge-status badge-{{ $req->status === 'success' ? 'success' : ($req->status === 'rejected' ? 'rejected' : ($req->status === 'processing' ? 'processing' : 'pending')) }}">
                                    {{ ucfirst($req->status) }}
                                </span>
                            </td>
                            <td>
                                {{ $req->created_at->format('d M Y') }}<br>
                                <small class="text-muted">{{ $req->created_at->format('h:i A') }}</small>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="table-dark">
                            <td colspan="4" class="text-end fw-bold">Total Amount Charged:</td>
                            <td class="text-center fw-bold">₹{{ number_format($totalCharge, 2) }}</td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
@endif

{{-- Footer bar (screen only) --}}
<div class="print-footer-bar d-flex justify-content-between flex-wrap mt-3">
    <span><i class="fas fa-building me-1"></i>{{ config('app.name') }}</span>
    <span>User: {{ $user->name }} ({{ $user->mobile ?? $user->email }})</span>
    <span>Generated: {{ now()->format('d M Y, h:i A') }}</span>
</div>

@endsection