@extends('garage.layouts.app')

@section('title', 'Job Cards')

@push('styles')
<style>
    .jc-shell {
        gap: 1rem;
    }
    .jc-toolbar {
        border: 1px solid #e9edf5;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(16, 24, 40, 0.06);
    }
    .jc-toolbar .form-control,
    .jc-toolbar .form-select {
        border-radius: 10px;
    }
    .jc-stat-card {
        border: 1px solid #e8ecf4;
        border-radius: 12px;
        background: #ffffff;
    }
    .jc-stat-label {
        font-size: 0.78rem;
        color: #667085;
    }
    .jc-stat-value {
        font-size: 1.1rem;
        font-weight: 700;
        color: #101828;
    }
    .jc-table-wrap {
        border: 1px solid #e9edf5;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
    }
    .jc-table-wrap table thead th {
        font-size: 0.78rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #475467;
        border-bottom: 1px solid #e9edf5;
    }
    .jc-table-wrap table tbody tr:hover {
        background: #f8faff;
    }
    .jc-number-badge {
        border-radius: 999px;
        font-weight: 600;
        padding: 0.42rem 0.72rem;
    }
</style>
@endpush

@section('content')
@php
    $totalCards = (int) $workOrders->total();
    $completedCards = (int) $workOrders->getCollection()->where('status', 'completed')->count();
    $inProgressCards = (int) $workOrders->getCollection()->where('status', 'in_progress')->count();
    $draftCards = (int) $workOrders->getCollection()->where('status', 'draft')->count();
@endphp
<div class="d-flex flex-column h-100 jc-shell">
    <!-- Top Section - Filters and Actions -->
    <div class="bg-white p-3 jc-toolbar">
        <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
            <!-- Filters -->
            <form method="GET" action="{{ route('garage.work-orders.index') }}" class="d-flex align-items-center gap-2 flex-wrap flex-grow-1">
                <!-- Status Filter -->
                <select name="status" class="form-select form-select-sm" style="width: auto;">
                    <option value="">All Status</option>
                    <option value="draft" {{ $status === 'draft' ? 'selected' : '' }}>Draft</option>
                    <option value="in_progress" {{ $status === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="on_hold" {{ $status === 'on_hold' ? 'selected' : '' }}>On Hold</option>
                    <option value="completed" {{ $status === 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="cancelled" {{ $status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>

                <!-- Date Range -->
                <input type="date" name="from_date" class="form-control form-control-sm" style="width: auto;" value="{{ $fromDate }}" placeholder="From Date">
                <input type="date" name="to_date" class="form-control form-control-sm" style="width: auto;" value="{{ $toDate }}" placeholder="To Date">

                <!-- Search -->
                <div class="position-relative" style="width: 200px;">
                    <i class="bi bi-search position-absolute" style="left: 12px; top: 50%; transform: translateY(-50%); color: #6b7280;"></i>
                    <input type="text" class="form-control form-control-sm ps-5" name="search" placeholder="Search..." value="{{ $search }}">
                </div>

                <button type="submit" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-search"></i> Filter
                </button>

                @if($status || $fromDate || $toDate || $search)
                <a href="{{ route('garage.work-orders.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-x-lg"></i> Clear
                </a>
                @endif
            </form>

            <!-- Action Buttons -->
            <div class="d-flex align-items-center gap-2">
                <a href="{{ route('garage.work-orders.queue') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-kanban me-1"></i>Queue
                </a>
                <a href="{{ route('garage.work-orders.create') }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-lg me-1"></i>Create Job Card
                </a>
            </div>
        </div>
    </div>

    <div class="row g-2">
        <div class="col-md-3">
            <div class="card jc-stat-card">
                <div class="card-body py-2">
                    <div class="jc-stat-label">All Job Cards</div>
                    <div class="jc-stat-value">{{ $totalCards }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card jc-stat-card">
                <div class="card-body py-2">
                    <div class="jc-stat-label">In Progress (This Page)</div>
                    <div class="jc-stat-value text-info">{{ $inProgressCards }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card jc-stat-card">
                <div class="card-body py-2">
                    <div class="jc-stat-label">Completed (This Page)</div>
                    <div class="jc-stat-value text-success">{{ $completedCards }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card jc-stat-card">
                <div class="card-body py-2">
                    <div class="jc-stat-label">Draft (This Page)</div>
                    <div class="jc-stat-value text-secondary">{{ $draftCards }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Job Cards Table -->
    <div class="bg-white flex-grow-1 jc-table-wrap">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width: 120px;">Job Card No</th>
                        <th style="width: 100px;">Date</th>
                        <th style="width: 140px;">Source</th>
                        <th>Customer</th>
                        <th>Vehicle</th>
                        <th style="width: 100px;">Priority</th>
                        <th style="width: 120px;" class="text-end">Amount</th>
                        <th style="width: 100px;">Status</th>
                        <th style="width: 150px;" class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($workOrders as $workOrder)
                    <tr>
                        <td>
                            <span class="badge bg-secondary jc-number-badge">{{ $workOrder->work_order_number }}</span>
                        </td>
                        <td>{{ \Carbon\Carbon::parse($workOrder->work_order_date)->format('M d, Y') }}</td>
                        <td>
                            @if(!empty($workOrder->repair_order_number))
                                <span class="badge bg-light text-dark border">{{ $glOrder ?? 'Order' }}: {{ $workOrder->repair_order_number }}</span>
                            @elseif(!empty($workOrder->estimate_number))
                                <span class="badge bg-light text-dark border">EST: {{ $workOrder->estimate_number }}</span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            <div class="fw-semibold">{{ $workOrder->customer_name ?? '-' }}</div>
                        </td>
                        <td>
                            {{ $workOrder->vehicle_registration ?? '-' }}
                        </td>
                        <td>
                            @php
                                $priorityColors = [
                                    0 => 'secondary',
                                    1 => 'warning',
                                    2 => 'danger'
                                ];
                                $priorityLabels = [
                                    0 => 'Normal',
                                    1 => 'High',
                                    2 => 'Urgent'
                                ];
                                $priorityColor = $priorityColors[$workOrder->priority] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $priorityColor }}">{{ $priorityLabels[$workOrder->priority] ?? 'Normal' }}</span>
                        </td>
                        <td class="text-end">
                            <span class="fw-semibold">PKR {{ number_format($workOrder->total_amount, 2) }}</span>
                        </td>
                        <td>
                            @php
                                $statusColors = [
                                    'draft' => 'secondary',
                                    'in_progress' => 'info',
                                    'on_hold' => 'warning',
                                    'completed' => 'success',
                                    'cancelled' => 'danger'
                                ];
                                $statusColor = $statusColors[$workOrder->status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $statusColor }}">{{ ucfirst(str_replace('_', ' ', $workOrder->status)) }}</span>
                        </td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('garage.work-orders.show', $workOrder->id) }}" class="btn btn-outline-primary" title="View">
                                    <i class="bi bi-eye"></i>
                                </a>
                                @if($workOrder->status !== 'completed')
                                <a href="{{ route('garage.work-orders.edit', $workOrder->id) }}" class="btn btn-outline-secondary" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @endif
                                @if($workOrder->status !== 'completed')
                                <form action="{{ route('garage.work-orders.destroy', $workOrder->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this job card?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger" title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-4 text-muted">
                            <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                            No job cards found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($workOrders->hasPages())
        <div class="p-3 border-top">
            {{ $workOrders->links() }}
        </div>
        @endif
    </div>
</div>
@endsection