@extends('layouts.layout')

@section('content')
    <style>
        .impact-card {
            border: 0;
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .impact-card .card-body {
            padding: 22px;
        }

        .impact-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 18px;
        }

        .impact-value {
            font-size: 25px;
            font-weight: 700;
            color: #1e2746;
            margin-bottom: 4px;
        }

        .impact-label {
            font-size: 13px;
            color: #777;
        }

        .impact-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 14px;
            margin-top: 14px;
            border-top: 1px solid #eee;
        }

        .impact-row span:first-child {
            color: #777;
            font-size: 13px;
        }

        .impact-row span:last-child {
            font-weight: 600;
            color: #333;
        }

        .impact-icon {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f8;
            color: #1e2746;
            font-size: 18px;
            margin-bottom: 15px;
        }

        .impact-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            background: #f3f4f8;
            color: #1e2746;
            font-size: 12px;
            font-weight: 600;
        }

        .impact-amount {
            font-weight: 600;
            color: #198754;
        }

        .orders-table th {
            white-space: nowrap;
        }

        .orders-table td {
            vertical-align: middle;
        }

        .pagination-wrapper {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }

        .pagination-wrapper .pagination {
            margin-bottom: 0;
        }

        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #777;
        }

        .filter-form {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .filter-form .form-group {
            margin-bottom: 0;
        }

        .filter-form select {
            min-width: 150px;
        }

        .total-impact-card {
            background: #1e2746;
        }

        .total-impact-card .impact-title,
        .total-impact-card .impact-value,
        .total-impact-card .impact-label,
        .total-impact-card .impact-row span {
            color: #fff !important;
        }

        .total-impact-card .impact-row {
            border-color: rgba(255, 255, 255, 0.2);
        }
    </style>

    <div class="page-body">
        <div class="container-fluid">

            <!-- Page Header -->
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="page-header-left">
                            <h3>
                                Impact Overview
                                <small>Diamond Admin Panel</small>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters -->
            <div class="card mb-4">
                <div class="card-header">
                    <div class="row align-items-center">

                        <div class="col-md-5">
                            <h5 class="mb-0">
                                Impact Donations
                            </h5>

                            <small class="text-muted">
                                View orders and donation amounts by impact
                            </small>
                        </div>

                        <div class="col-md-7">
                            <form
                                method="GET"
                                action="{{ route('sale.orders.impact.overview') }}"
                                class="filter-form"
                            >

                                <!-- Duration -->
                                <div class="form-group">
                                    <select
                                        name="period"
                                        class="form-control"
                                        onchange="this.form.submit()"
                                    >
                                        @foreach($periods as $key => $periodOption)
                                            <option
                                                value="{{ $key }}"
                                                {{ $period === $key ? 'selected' : '' }}
                                            >
                                                {{ $periodOption['label'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Environment -->
                                <div class="form-group">
                                    <select
                                        name="environment"
                                        class="form-control"
                                        onchange="this.form.submit()"
                                    >
                                        <option
                                            value="production"
                                            {{ $environment === 'production' ? 'selected' : '' }}
                                        >
                                            Production Orders
                                        </option>

                                        <option
                                            value="dev"
                                            {{ $environment === 'dev' ? 'selected' : '' }}
                                        >
                                            Dev Orders
                                        </option>
                                    </select>
                                </div>

                                <noscript>
                                    <button type="submit" class="btn btn-primary">
                                        Apply
                                    </button>
                                </noscript>

                            </form>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Impact Summary -->
            <div class="row mb-4">

                @forelse($summary as $impact)

                    <div class="col-xl-3 col-lg-4 col-md-6 mb-3">
                        <div class="card impact-card">

                            <div class="card-body">

                                <div class="impact-icon">
                                    <i class="fa fa-heart-o"></i>
                                </div>

                                <div class="impact-title">
                                    {{ $impact['label'] }}
                                </div>

                                <div class="impact-value">
                                    ${{ number_format($impact['impact_amount'], 2) }}
                                </div>

                                <div class="impact-label">
                                    1% Donation
                                </div>

                                <div class="impact-row">
                                    <span>Orders</span>

                                    <span>
                                        {{ number_format($impact['order_count']) }}
                                    </span>
                                </div>

                                <div class="impact-row">
                                    <span>Order Value</span>

                                    <span>
                                        ${{ number_format($impact['total_order_value'], 2) }}
                                    </span>
                                </div>

                            </div>

                        </div>
                    </div>

                @empty

                    <div class="col-12">
                        <div class="card">
                            <div class="card-body empty-state">
                                <i class="fa fa-heart-o fa-2x mb-3"></i>

                                <h5>No Impact Orders Found</h5>

                                <p class="mb-0">
                                    No {{ $environment }} orders with an impact selection
                                    were found for the selected period.
                                </p>
                            </div>
                        </div>
                    </div>

                @endforelse

            </div>

            <!-- Orders Table -->
            <div class="card">

                <div class="card-header">
                    <div class="row align-items-center">

                        <div class="col-md-6">
                            <h5 class="mb-0">
                                Impact Orders
                            </h5>

                            <small class="text-muted">
                                {{ $periods[$period]['label'] }}
                                ·
                                {{ ucfirst($environment) }}
                            </small>
                        </div>

                        <div class="col-md-6 text-md-end mt-2 mt-md-0">

                            <span class="text-muted">
                                Showing
                                {{ $orders->firstItem() ?? 0 }}
                                -
                                {{ $orders->lastItem() ?? 0 }}
                                of
                                {{ number_format($orders->total()) }}
                                orders
                            </span>

                        </div>

                    </div>
                </div>

                <div class="card-body">

                    <div class="table-responsive">

                        <table class="table table-hover orders-table">

                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Order ID</th>
                                    <th>Impact</th>
                                    <th>Final Order Value</th>
                                    <th>1% Donation</th>
                                    <th>Order Date</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                            <tbody>

                                @forelse($orders as $order)

                                    <tr>

                                        <td>
                                            {{ $loop->iteration + (($orders->currentPage() - 1) * $orders->perPage()) }}
                                        </td>

                                        <td>
                                            <a href="{{ route('sale.orders.detail', $order->id) }}">
                                                <strong>
                                                    {{ $order->order_id }}
                                                </strong>
                                            </a>
                                        </td>

                                        <td>
                                            <span class="impact-badge">
                                                {{ ucwords(str_replace('_', ' ', $order->choose_your_impact)) }}
                                            </span>
                                        </td>

                                        <td>
                                            ${{ number_format((float) $order->final_amount, 2) }}
                                        </td>

                                        <td class="impact-amount">
                                            ${{ number_format((float) $order->final_amount * 0.01, 2) }}
                                        </td>

                                        <td>
                                            {{ $order->created_at?->format('M d, Y') }}
                                        </td>

                                        <td>

                                            @if($order->status)
                                                <span class="badge badge-success">
                                                    {{ $order->status }}
                                                </span>
                                            @else
                                                <span class="badge badge-secondary">
                                                    N/A
                                                </span>
                                            @endif

                                        </td>

                                    </tr>

                                @empty

                                    <tr>
                                        <td colspan="7">

                                            <div class="empty-state">

                                                <div class="mb-3">
                                                    <i class="fa fa-heart-o fa-2x"></i>
                                                </div>

                                                <h5>No Orders Found</h5>

                                                <p class="mb-0">
                                                    No orders match the selected filters.
                                                </p>

                                            </div>

                                        </td>
                                    </tr>

                                @endforelse

                            </tbody>

                        </table>

                    </div>

                    <!-- Pagination -->
                    @if($orders->hasPages())
                        <div class="pagination-wrapper">
                            {{ $orders->links() }}
                        </div>
                    @endif

                </div>
            </div>

        </div>
    </div>
@endsection