@extends('layouts.app')

@section('content')
<div class="mx-auto w-[70%] p-4 bg-white shadow rounded print:shadow-none print:bg-transparent print:p-0">
   
    <div id="receipt-low">
    <!-- Header Section -->
 <div id="storeHeader" class="text-center mb-6">
    @if($printSetting->logo_path)
        <img id="headerLogo" src="{{ asset('storage/' . $printSetting->logo_path) }}" alt="Store Logo" class="mx-auto mb-4" style="max-width: 150px; height: auto;">
    @endif
    <h1 id="headerTitle" class="text-3xl font-bold">{{ $printSetting->title }}</h1>
    <p id="headerAddress" class="text-lg text-gray-800 font-bold">{{ $printSetting->address }}</p>
    <p id="headerPhone" class="text-lg text-gray-800 font-bold">Phone: {{ $printSetting->phone }}</p>
</div>

                                    <h1 class="text-3xl font-bold">Low Sale Product</h1>
<div class="overflow-x-auto">
            <table class="min-w-full border">
                <thead class="bg-gray-100 ">
                    <tr>
                        <th class="border px-4 py-2">#</th>
                        <th class="border px-4 py-2">Product Name</th>
                        <th class="border px-4 py-2">Categories</th>
                       
                        <th class="border px-4 py-2">Expiry Date</th>
                        <th class="border px-4 py-2">Quantity</th>
                       
                        <th class="border px-4 py-2">Prices</th>
                       
                    </tr>
                </thead>
                <tbody class="font-semibold ">
                    @foreach ($products as $index => $product)
                        <tr>
                            <td class="border px-4 py-2">{{ $index + 1 }}</td>
                            <td class="border px-4 py-2">{{ $product->name }}</td>
                            <td class="border px-4 py-2">
                                @foreach ($product->categories as $category)
                                    <span class="inline-block bg-gray-200 rounded px-2 py-1 mr-1 text-xs">
                                        {{ $category }}
                                    </span>
                                @endforeach
                            </td>
                            
                            <td class="border px-4 py-2">{{ $product->expiry_date }}</td>
                            <td class="border px-4 py-2">{{ $product->quantity }}</td>
                            
                            <td class="border px-4 py-2">
                                <div><strong>Purchase:</strong> {{ $product->purchase_price }}</div>
                                <div><strong>Retail:</strong> {{ $product->retail_price }}</div>
                                <div><strong>Local:</strong> {{ $product->local_price }}</div>
                                <div><strong>Doctor:</strong> {{ $product->doctor_price }}</div>
                                
                            </td>
                            
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
 <div class="mt-10 pt-4 border-t text-center text-sm text-gray-600 print:text-black">
                <p class="mb-1 font-bold">Software developed by <span class="font-bold text-gray-800">Next Steps Sols Pvt. Ltd.</span></p>
                <p class="mb-1 font-bold">🌐 <a href="https://www.nextstepsols.com" class=" hover:underline" target="_blank">www.nextstepsols.com</a></p>
                <p class='font-bold'>📞 Cell: 0332-0679987</p>
            </div>
   <!-- Buttons -->
</div>
<div class="mt-6 flex justify-center space-x-4 print:hidden">
    <button onclick="handlePrint()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">
    Print
</button>
<script>
function handlePrint() {
            window.print();
    }
</script>
<style>
     @media print {
            body {
                width: 100% !important;
                margin: 0 auto !important;
                padding: 0 !important;
            }
            body * {
                visibility: hidden;
            }
            #receipt-low, #receipt-low * {
                visibility: visible;
            }
            #receipt-low {
                width: 70% !important;
                margin: 0 auto !important;
                padding: 2mm !important;
                font-family: 'Courier New', monospace !important;
                font-size: 12px !important;
            }
            
            @page {
                size: 70%;
                margin: 0;
            }
        }
</style>
</div>
@endsection