@extends('layouts.rtl')
@section('title','Dashboard')

@section('content')
<div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold">📊 داشبورد</h1>
</div>

{{-- Filters --}}
<form class="mt-4 bg-white p-4 rounded border flex flex-wrap gap-3 items-end">
    <div>
        <label class="block text-sm mb-1">Board</label>
        <select name="board_id" class="border p-2 rounded w-64">
            <option value="">كل البوردات</option>
            @foreach($boards as $b)
                <option value="{{ $b->id }}" @selected((string)$boardId===(string)$b->id)>{{ $b->name }}</option>
            @endforeach
        </select>
    </div>

    <div>
        <label class="block text-sm mb-1">من</label>
        <input type="date" name="from" value="{{ $from }}" class="border p-2 rounded">
    </div>

    <div>
        <label class="block text-sm mb-1">إلى</label>
        <input type="date" name="to" value="{{ $to }}" class="border p-2 rounded">
    </div>

    <button class="px-4 py-2 bg-gray-900 text-white rounded">تطبيق</button>
</form>

{{-- KPI Cards --}}
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="bg-white border rounded p-4">
        <div class="text-sm text-gray-500">إجمالي الكروت</div>
        <div class="text-3xl font-bold mt-2">{{ $totalCards }}</div>
    </div>
    <div class="bg-white border rounded p-4">
        <div class="text-sm text-gray-500">Open</div>
        <div class="text-3xl font-bold mt-2">{{ $openCards }}</div>
    </div>
    <div class="bg-white border rounded p-4">
        <div class="text-sm text-gray-500">Closed</div>
        <div class="text-3xl font-bold mt-2">{{ $closedCards }}</div>
    </div>
</div>

{{-- Charts --}}
<div class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="bg-white border rounded p-4 lg:col-span-2">
        <div class="font-bold mb-3">Cards Created (14 days)</div>
        <canvas id="lineChart" height="120"></canvas>
    </div>
    <div class="bg-white border rounded p-4">
        <div class="font-bold mb-3">Open vs Closed</div>
        <canvas id="pieChart" height="220"></canvas>
    </div>
</div>

<script>
const days = @json($days);
const createdPerDay = @json($createdPerDay);
const pie = @json($pie);

new Chart(document.getElementById('lineChart'), {
  type: 'line',
  data: {
    labels: days,
    datasets: [{ label: 'Cards', data: createdPerDay, tension: 0.3 }]
  }
});

new Chart(document.getElementById('pieChart'), {
  type: 'pie',
  data: {
    labels: ['Open','Closed'],
    datasets: [{ data: pie }]
  }
});
</script>
@endsection