@extends('layouts.cashier')

@section('content')
<div class="container mx-auto max-w-2xl">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <!-- Receipt Header -->
        <div class="text-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">Sharmila's feed & flour</h1>
            <p class="text-gray-600">Quality Feeds for Healthy flour</p>
            <p class="text-sm text-gray-500 mt-2">Receipt</p>
        </div>

        <!-- Sale Information -->
        <div class="border-b border-gray-200 pb-4 mb-4">
            <div class="flex justify-between text-sm">
                <span class="text-gray-600">Receipt #:</span>
                <span class="font-semibold">{{ $sale->sale_code }}</span>
            </div>
            <div class="flex justify-between text-sm mt-1">
                <span class="text-gray-600">Date:</span>
                <span>{{ $sale->created_at->format('M d, Y h:i A') }}</span>
            </div>
            <div class="flex justify-between text-sm mt-1">
                <span class="text-gray-600">Cashier:</span>

                <span>
                    @if($sale->cashier_id)
                        {{ $sale->cashier->name }}
                    @elseif($sale->admin_id)
                        {{ $sale->admin->name }}
                    @else
                        System
                    @endif
                </span>

            </div>
            @if($sale->customer)
            <div class="flex justify-between text-sm mt-1">
                <span class="text-gray-600">Customer:</span>
                <span>{{ $sale->customer->name }}</span>
            </div>
            @endif
        </div>

        <!-- Items -->
        <div class="mb-6">
            <h3 class="font-semibold text-gray-800 mb-3">Items Purchased</h3>
            <div class="space-y-3">
                @foreach($sale->items as $item)
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <p class="font-medium text-sm">{{ $item->product->product_name }}</p>
                        <p class="text-xs text-gray-600">
                            @if($item->product->product_type === 'Loose Weight' && $item->weight)
                                {{ number_format($item->weight, 2) }} kg × Rs.{{ number_format($item->unit_price, 2) }}
                            @else
                                {{ $item->quantity }} × Rs.{{ number_format($item->unit_price, 2) }}
                            @endif
                        </p>
                    </div>
                    <span class="font-semibold text-sm">Rs.{{ number_format($item->total_price, 2) }}</span>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Totals -->
        <div class="border-t border-gray-200 pt-4 space-y-2">
            <div class="flex justify-between text-sm">
                <span>Subtotal:</span>
                <span>Rs.{{ number_format($sale->subtotal, 2) }}</span>
            </div>
            @if($sale->discount > 0)
            <div class="flex justify-between text-sm">
                <span>Discount:</span>
                <span class="text-red-600">-Rs.{{ number_format($sale->discount, 2) }}</span>
            </div>
            @endif
            @if($sale->tax > 0)
            <div class="flex justify-between text-sm">
                <span>Tax:</span>
                <span>Rs.{{ number_format($sale->tax, 2) }}</span>
            </div>
            @endif
            <div class="flex justify-between text-lg font-bold border-t pt-2">
                <span>Total:</span>
                <span>Rs.{{ number_format($sale->total, 2) }}</span>
            </div>
            <div class="flex justify-between text-sm mt-2">
                <span>Payment Method:</span>
                <span class="capitalize">{{ $sale->payment_method }}</span>
            </div>
        </div>

        <!-- Footer -->
        <div class="text-center mt-8 pt-4 border-t border-gray-200">
            <p class="text-sm text-gray-600">Thank you for your business!</p>
            <p class="text-xs text-gray-500 mt-2">For returns, please present this receipt</p>

            <div class="mt-6 flex justify-center space-x-4">
                <button onclick="window.print()"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm">
                    <i class="fas fa-print mr-2"></i>Print Receipt
                </button>
                <a href="{{ route('cashier.pos.index') }}"
                   class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm">
                    <i class="fas fa-plus mr-2"></i>New Sale
                </a>
            </div>
        </div>
    </div>
</div>

<style>
@media print {
    .bg-white {
        background: white !important;
    }
    .shadow-lg {
        box-shadow: none !important;
    }
    .container {
        max-width: none !important;
    }
    button, a {
        display: none !important;
    }
}
</style>
@endsection