@extends('layouts.app')

@section('title', 'Orders Management')

@section('content')
<div class="orders-container">
    <div class="page-header">
        <h1 class="page-title">Orders Management</h1>
        @can('create orders')
        <a href="{{ route('orders.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Create New Order
        </a>
        @endcan
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <!-- Filtros y Búsqueda -->
    <div class="filters-section">
        <div class="filters-grid">
            <div class="filter-group">
                <label for="statusFilter" class="filter-label">Status</label>
                <select id="statusFilter" class="filter-select" onchange="filterOrders()">
                    <option value="">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="in_progress">In Progress</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
            <div class="filter-group">
                <label for="searchFilter" class="filter-label">Search</label>
                <input type="text" id="searchFilter" class="filter-input" placeholder="Search orders..." onkeyup="filterOrders()">
            </div>
        </div>
    </div>

    <div class="orders-grid">
        @foreach($orders as $order)
        <div class="order-card" data-status="{{ $order->status }}" data-search="{{ strtolower($order->order_number . ' ' . $order->customer_name . ' ' . $order->brand . ' ' . $order->car_model) }}">
            <div class="order-header">
                <div class="order-number">{{ $order->order_number }}</div>
                <div class="order-status status-{{ $order->status }}">
                    {{ ucfirst(str_replace('_', ' ', $order->status)) }}
                </div>
            </div>

            <div class="order-customer">
                <h3 class="customer-name">{{ $order->customer_name }}</h3>
                <div class="customer-contact">
                    @if($order->customer_email)
                    <span class="contact-item">
                        <i class="fas fa-envelope"></i> {{ $order->customer_email }}
                    </span>
                    @endif
                    @if($order->customer_phone)
                    <span class="contact-item">
                        <i class="fas fa-phone"></i> {{ $order->customer_phone }}
                    </span>
                    @endif
                </div>
            </div>

            <div class="order-vehicle">
                <div class="vehicle-info">
                    <i class="fas fa-car"></i>
                    <span>{{ $order->brand }} {{ $order->car_model }}</span>
                </div>
                <div class="shield-model">
                    <i class="fas fa-palette"></i>
                    <span>{{ $order->shield_model }}</span>
                </div>
            </div>

            <div class="order-details">
                <div class="detail-item">
                    <label>Total:</label>
                    <span class="order-total">${{ number_format($order->total, 2) }}</span>
                </div>
                <div class="detail-item">
                    <label>Delivery:</label>
                    <span class="delivery-date">
                        @if($order->delivery_date)
                            {{ $order->delivery_date->format('M d, Y') }}
                        @else
                            Not set
                        @endif
                    </span>
                </div>
                <div class="detail-item">
                    <label>Created by:</label>
                    <span class="created-by">{{ $order->user->name }}</span>
                </div>
                @if(Auth::user()->isSuperAdmin())
                <div class="detail-item">
                    <label>Company:</label>
                    <span class="company-name">{{ $order->company->name }}</span>
                </div>
                @endif
            </div>

            @if($order->description)
            <div class="order-description">
                <p>{{ Str::limit($order->description, 100) }}</p>
            </div>
            @endif

            <div class="order-actions">
                <a href="{{ route('orders.show', $order) }}" class="btn btn-sm btn-outline" title="View Details">
                    <i class="fas fa-eye"></i>
                </a>
                @can('edit orders')
                <a href="{{ route('orders.edit', $order) }}" class="btn btn-sm btn-primary" title="Edit Order">
                    <i class="fas fa-edit"></i>
                </a>
                @endcan
                @can('delete orders')
                <form action="{{ route('orders.destroy', $order) }}" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-danger"
                            onclick="return confirm('Are you sure you want to delete this order?')"
                            title="Delete Order">
                        <i class="fas fa-trash"></i>
                    </button>
                </form>
                @endcan

                <!-- Quick Status Update -->
                @can('edit orders')
                <div class="status-dropdown">
                    <select class="status-select" onchange="updateOrderStatus({{ $order->id }}, this.value)">
                        <option value="">Quick Status</option>
                        <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="in_progress" {{ $order->status == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                        <option value="completed" {{ $order->status == 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </div>
                @endcan
            </div>
        </div>
        @endforeach
    </div>

    @if($orders->isEmpty())
    <div class="empty-state">
        <i class="fas fa-clipboard-list empty-icon"></i>
        <h3>No Orders Found</h3>
        <p>Get started by creating your first order.</p>
        @can('create orders')
        <a href="{{ route('orders.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Create Order
        </a>
        @endcan
    </div>
    @endif
</div>

<script>
function filterOrders() {
    const statusFilter = document.getElementById('statusFilter').value;
    const searchFilter = document.getElementById('searchFilter').value.toLowerCase();
    const orderCards = document.querySelectorAll('.order-card');

    orderCards.forEach(card => {
        const status = card.getAttribute('data-status');
        const searchText = card.getAttribute('data-search');

        const statusMatch = !statusFilter || status === statusFilter;
        const searchMatch = !searchFilter || searchText.includes(searchFilter);

        if (statusMatch && searchMatch) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}

function updateOrderStatus(orderId, newStatus) {
    if (!newStatus) return;

    fetch(`/orders/${orderId}/status`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ status: newStatus })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error updating status');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error updating status');
    });
}
</script>

<style>
.orders-container {
    max-width: 1400px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-light);
}

.filters-section {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.filter-select, .filter-input {
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: 0.9rem;
}

.filter-select:focus, .filter-input:focus {
    outline: none;
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(46, 204, 204, 0.1);
}

.orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.order-card {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-light);
}

.order-number {
    font-weight: 600;
    color: var(--text-light);
    font-size: 1.1rem;
}

.order-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: capitalize;
}

.status-pending {
    background: #fff3cd;
    color: #856404;
}

.status-in_progress {
    background: #cce7ff;
    color: #004085;
}

.status-completed {
    background: #d4edda;
    color: #155724;
}

.status-cancelled {
    background: #f8d7da;
    color: #721c24;
}

.order-customer {
    margin-bottom: 15px;
}

.customer-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 8px;
}

.customer-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-item {
    font-size: 0.9rem;
    color: var(--text-light);
    opacity: 0.8;
}

.contact-item i {
    width: 16px;
    margin-right: 8px;
}

.order-vehicle {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.vehicle-info, .shield-model {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-light);
}

.order-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-item label {
    font-size: 0.8rem;
    color: var(--text-light);
    opacity: 0.7;
    font-weight: 500;
}

.detail-item span {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 500;
}

.order-total {
    color: #27ae60 !important;
    font-weight: 600 !important;
}

.order-description {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 15px;
}

.order-description p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-light);
    opacity: 0.8;
    line-height: 1.4;
}

.order-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.status-dropdown {
    margin-left: auto;
}

.status-select {
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-light);
    color: var(--text-light);
    font-size: 0.8rem;
    cursor: pointer;
}

.status-select:focus {
    outline: none;
    border-color: var(--accent-teal);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-teal-dark) 0%, var(--accent-teal) 100%);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-light);
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-sm {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    font-size: 4rem;
    color: var(--border-light);
    margin-bottom: 20px;
}

.d-inline {
    display: inline;
}

/* Dark theme adjustments */
[data-theme="dark"] .order-card,
[data-theme="dark"] .filters-section {
    background: var(--bg-dark);
    border-color: var(--border-dark);
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] .filter-input,
[data-theme="dark"] .status-select {
    background: var(--bg-dark);
    border-color: var(--border-dark);
    color: var(--text-dark);
}

[data-theme="dark"] .order-vehicle,
[data-theme="dark"] .order-description {
    background: #2d3038;
}

[data-theme="dark"] .btn-outline {
    border-color: var(--border-dark);
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .orders-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .filters-grid {
        grid-template-columns: 1fr;
    }

    .order-details {
        grid-template-columns: 1fr;
    }

    .order-actions {
        flex-direction: column;
    }

    .status-dropdown {
        margin-left: 0;
        width: 100%;
    }

    .status-select {
        width: 100%;
    }
}
</style>
@endsection