@extends('backend.layouts.master')
@section('page-title', 'Invoice Print')
@push('css')
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');

        body {
            background-color: #f0f2f5;
        }

        .print-area {
            width: 80mm;
            background: white;
            padding: 20px 15px;
            margin: 20px auto;
            font-family: 'Courier Prime', monospace;
            color: #000;
            position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            width: 80%;
            opacity: 0.15;
            pointer-events: none;
            z-index: 0;
        }

        .watermark img {
            width: 100%;
            height: auto;
            filter: grayscale(100%);
        }

        .invoice-content {
            position: relative;
            z-index: 1;
        }

        .header {
            text-align: center;
            margin-bottom: 10px;
        }

        .header img {
            max-width: 200px;
            max-height: 80px;
            height: auto;
            margin-bottom: 10px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .header h2 {
            margin: 5px 0;
            font-size: 22px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .header p {
            margin: 2px 0;
            font-size: 12px;
            line-height: 1.4;
            color: #000;
        }

        .dot-separator {
            border-top: 1px dotted #000;
            margin: 12px 0;
            height: 0;
        }

        .dash-separator {
            border-top: 1px dashed #000;
            margin: 8px 0;
            height: 0;
        }

        .asterisk-separator {
            text-align: center;
            letter-spacing: 3px;
            margin: 15px 0;
            font-size: 14px;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
        }

        .info-section {
            font-size: 11px;
            margin-bottom: 20px;
        }

        .info-row {
            display: flex;
            margin-bottom: 5px;
            white-space: nowrap;
        }

        .info-label {
            width: 100px;
            flex-shrink: 0;
            font-weight: normal;
        }

        .info-value {
            flex-grow: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .item-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
            margin: 15px 0;
            table-layout: fixed;
        }

        .item-table thead th {
            text-align: left;
            padding: 10px 0;
            font-weight: bold;
            text-transform: uppercase;
            border-top: 1px dashed #000;
            border-bottom: 1px dashed #000;
        }

        .item-table tbody td {
            padding: 8px 0;
            vertical-align: top;
            word-wrap: break-word;
        }

        .text-right {
            text-align: right;
        }

        .text-center {
            text-align: center;
        }

        .totals-section {
            font-size: 14px;
            margin-top: 10px;
        }

        .total-row {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 5px;
            white-space: nowrap;
            align-items: center;
        }

        .total-label {
            flex: 1;
            text-align: right;
            padding-right: 18px;
        }

        .total-value {
            width: 80px;
            text-align: right;
            font-weight: bold;
        }

        .footer {
            text-align: center;
            margin-top: 25px;
            font-size: 14px;
            line-height: 1.5;
        }

        .barcode-container {
            text-align: center;
            margin: 20px 0;
        }

        .barcode-container svg {
            width: 100% !important;
            height: 60px !important;
        }

        .print-btn-container {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
            display: flex;
            gap: 10px;
        }

        .print-btn-container .btn {
            border-radius: 50px;
            padding: 12px 25px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        @media print {
            body * {
                visibility: hidden;
            }

            .print-area, .print-area * {
                visibility: visible;
            }

            .print-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 80mm !important;
                margin: 0 !important;
                padding: 5mm !important;
                background: white !important;
                box-shadow: none !important;
            }

            .print_hidden, .print-btn-container {
                display: none !important;
            }

            @page {
                size: 80mm auto;
                margin: 0;
            }
        }
    </style>
@endpush

@section('invoice')
    @php
        $logo = get_setting('system_logo');
        $logo_path = !empty($logo) ? asset('uploads/logo/' . $logo) : asset('backend/images/fastLogo.jpeg');
    @endphp

    <div class="print-area" id="print-area">
        <div class="watermark">
            <img src="{{ $logo_path }}" alt="Watermark">
        </div>
        
        <div class="invoice-content">
            <!-- Header Section -->
            @php
                $branch = App\Models\Branch::where('id', $invoice->branch_id)->first();
            @endphp
            <div class="header">
                @if($branch)
                    @if($branch->logo)
                        <img src="{{ asset('uploads/logo/' . $branch->logo) }}" alt="Logo" onerror="this.src='{{ $logo_path }}'">
                    @else
                        <img src="{{ $logo_path }}" alt="Logo" onerror="this.src='{{ asset('backend/images/fastLogo.jpeg') }}'">
                    @endif
                    <h2>{{ $branch->shop_name ?? $branch->name }}</h2>
                    <p>{{ $branch->address }}</p>
                    <p>+88 {{ $branch->phone }}</p>
                    <p>{{ $branch->email }}</p>
                @else
                    <img src="{{ $logo_path }}" alt="Logo" onerror="this.src='{{ asset('backend/images/fastLogo.jpeg') }}'">
                    
                    {{-- <h2>{{ empty(get_setting('com_name')) ? 'Bahroon' : get_setting('com_name') }}</h2> --}}
                    <p>{{ empty(get_setting('com_address')) ? 'Shop# 04/B (Level-4), Gulshan Pink City Shopping Complex, Gulshan-2, Dhaka, Bangladesh, 1212' : get_setting('com_address') }}</p>
                    <p>+88 {{ empty(get_setting('com_phone')) ? '1999-973506' : get_setting('com_phone') }}</p>
                    <p>{{ empty(get_setting('com_email')) ? 'hello@bahroon.com' : get_setting('com_email') }}</p>
                @endif
            </div>

            <div class="dot-separator"></div>

            <!-- Info Section -->
            <div class="info-section">
                <div class="info-row">
                    <span class="info-label">Invoice ID:</span>
                    <span class="info-value" style="font-weight: bold;">{{ $invoice->invoice_no }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Customer Name:</span>
                    <span class="info-value">{{ $invoice->customer?->name ?? 'Walking Customer' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Number:</span>
                    <span class="info-value">{{ $invoice->customer?->phone ?? '00000000000' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Purchase Date:</span>
                    <span class="info-value">{{ date('d-M-Y', strtotime($invoice->date)) }}</span>
                </div>
            </div>

            <!-- Item Table -->
            <table class="item-table">
                <thead>
                    <tr>
                        <th style="width: 15%">ITEM</th>
                        <th style="width: 15%; text-align: center;">QTY</th>
                        <th style="width: 45%">DESCRIPTION</th>
                        <th style="width: 25%" class="text-right">COST</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($invoice->invoiceItems as $item)
                        <tr>
                            <td style="font-size: 11px;">{{ $item->product?->barcode ?? $item->product_id }}</td>
                            <td class="text-center">{{ $item->main_qty }}</td>
                            <td>
                                {{ $item->product?->name }}
                                @if (env('APP_SC') == 'yes' && $item->product_variation_id != null)
                                    <br><small style="font-size: 10px;">({{ $item->product_variation?->size?->size ?? '' }}-{{ $item->product_variation?->color?->color ?? '' }})</small>
                                @endif
                            </td>
                            <td class="text-right">{{ number_format($item->subtotal, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="dash-separator"></div>

            <!-- Totals Section -->
            <div class="totals-section">
                <div class="total-row">
                    <span class="total-label">Sub Total :</span>
                    <span class="total-value">{{ number_format($invoice->estimated_amount, 2) }}</span>
                </div>
                <div class="total-row">
                    <span class="total-label">Tax :</span>
                    <span class="total-value">{{ number_format($invoice->tax ?? 0, 2) }}</span>
                </div>
                <div class="total-row" style="font-weight: bold; font-size: 16px;">
                    <span class="total-label">Order Total :</span>
                    <span class="total-value">{{ number_format($invoice->total_amount, 2) }}</span>
                </div>
            </div>

            <div class="asterisk-separator">*************************</div>

            <!-- Barcode Section -->
            <div class="barcode-container">
                @php
                    use Picqer\Barcode\BarcodeGeneratorSVG;
                    $generator = new BarcodeGeneratorSVG();
                    $barcode_val = $invoice->invoice_no;
                @endphp
                {!! $generator->getBarcode((string) $barcode_val, $generator::TYPE_CODE_128, 2, 50) !!}
                <div style="font-size: 11px; margin-top: 5px; font-weight: bold;">{{ $barcode_val }}</div>
            </div>

            <!-- Footer Section -->
            <div class="footer">
                <p>Thank you for Shopping at</p>
                <p style="font-weight: bold; font-size: 16px;">{{ empty(get_setting('com_name')) ? 'BAHROON' : strtoupper(get_setting('com_name')) }}</p>
            </div>
        </div>
    </div>

    <!-- Floating Print Buttons -->
    <div class="print-btn-container print_hidden">
        <button class="btn btn-primary shadow-lg" onclick="print_receipt()">
            <i class="fa fa-print"></i> PRINT INVOICE
        </button>
        <a href="{{ route('invoice.index') }}" class="btn btn-secondary shadow-lg">
            <i class="fa fa-arrow-left"></i> BACK
        </a>
    </div>
@endsection

@push('js')
    <script>
        function print_receipt() {
            window.print();
        }
    </script>
@endpush