@extends('layouts.app')

@section('title', 'Laporan Penjualan')

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Laporan Penjualan</h1>
        <p class="page-subtitle">{{ \Carbon\Carbon::parse($from)->locale('id')->isoFormat('D MMMM YYYY') }} — {{ \Carbon\Carbon::parse($to)->locale('id')->isoFormat('D MMMM YYYY') }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('reports.export.pdf', request()->query()) }}" class="btn btn-secondary">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            Export PDF
        </a>
        <a href="{{ route('reports.export.excel', request()->query()) }}" class="btn btn-secondary">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            Export Excel
        </a>
    </div>
</div>

{{-- Filter --}}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-body" style="padding:.875rem 1.25rem;">
        <form method="GET" action="{{ route('reports.sales') }}">
            <div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="margin-bottom:.25rem;">Dari</label>
                    <input type="date" name="from" class="form-control" value="{{ $from }}" style="width:160px;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="margin-bottom:.25rem;">Sampai</label>
                    <input type="date" name="to" class="form-control" value="{{ $to }}" style="width:160px;">
                </div>
                @cannot('sales')
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="margin-bottom:.25rem;">Sales</label>
                    <select name="user_id" class="form-control" style="width:160px;">
                        <option value="">Semua Sales</option>
                        @foreach($users as $u)
                        <option value="{{ $u->id }}" {{ request('user_id') === $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
                @endcannot
                <div style="align-self:flex-end;">
                    <button type="submit" class="btn btn-primary">Filter</button>
                </div>
                <div style="align-self:flex-end;">
                    <a href="{{ route('reports.sales') }}" class="btn btn-ghost btn-sm">Reset</a>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Summary --}}
<div class="stats-grid" style="grid-template-columns:repeat(5,1fr);margin-bottom:1rem;">
    <div class="stat-card">
        <div><div class="stat-value">{{ $summary['total_deals'] }}</div><div class="stat-label">Total Deal</div></div>
    </div>
    <div class="stat-card">
        <div><div class="stat-value">Rp {{ number_format($summary['total_value']/1000000,1) }}jt</div><div class="stat-label">Total Nilai</div></div>
    </div>
    <div class="stat-card">
        <div><div class="stat-value" style="color:var(--success);">{{ $summary['won_deals'] }}</div><div class="stat-label">Deal Won</div></div>
    </div>
    <div class="stat-card">
        <div><div class="stat-value" style="color:var(--success);">Rp {{ number_format($summary['won_value']/1000000,1) }}jt</div><div class="stat-label">Nilai Won</div></div>
    </div>
    <div class="stat-card">
        <div><div class="stat-value">{{ $summary['new_contacts'] }}</div><div class="stat-label">Kontak Baru</div></div>
    </div>
</div>

{{-- By Stage --}}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-header"><span class="card-title">Deal per Stage</span></div>
    <div class="card-body">
        <div style="display:flex;gap:1rem;flex-wrap:wrap;">
            @foreach($byStage as $stage)
            <div style="flex:1;min-width:120px;background:var(--gray-50);border-radius:var(--radius);padding:.875rem;text-align:center;border-top:3px solid {{ $stage->color }};">
                <div style="font-size:1.25rem;font-weight:700;color:var(--gray-900);">{{ $stage->count }}</div>
                <div style="font-size:.75rem;color:var(--gray-500);margin:.25rem 0 .5rem;">{{ $stage->name }}</div>
                <div style="font-size:.8125rem;font-weight:500;color:var(--gray-700);">Rp {{ number_format(($stage->total ?? 0)/1000000,1) }}jt</div>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Deal Table --}}
<div class="card">
    <div class="card-header"><span class="card-title">Daftar Deal ({{ $deals->count() }})</span></div>
    <div class="table-wrapper">
        @if($deals->isEmpty())
        <div class="empty-state"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
        <p class="empty-state-text">Tidak ada deal di periode ini</p></div>
        @else
        <table>
            <thead>
                <tr><th>Deal</th><th>Kontak</th><th>Stage</th><th>Nilai</th><th>Sales</th><th>Tanggal</th></tr>
            </thead>
            <tbody>
                @foreach($deals as $deal)
                <tr>
                    <td><a href="{{ route('deals.show', $deal) }}" style="font-weight:500;color:var(--gray-900);text-decoration:none;">{{ $deal->title }}</a></td>
                    <td class="text-small">{{ $deal->contact?->name ?? '—' }}</td>
                    <td>
                        <div style="display:flex;align-items:center;gap:.375rem;">
                            <div style="width:7px;height:7px;border-radius:50%;background:{{ $deal->stage->color }};"></div>
                            <span class="text-small">{{ $deal->stage->name }}</span>
                        </div>
                    </td>
                    <td class="fw-600">{{ $deal->formatted_value }}</td>
                    <td class="text-small text-muted">{{ $deal->user->name }}</td>
                    <td class="text-small text-muted">{{ $deal->created_at->locale('id')->isoFormat('D MMM YYYY') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>

@endsection