@extends('Admin.layout')


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--
<style>
    body {
        font-family: Arial, sans-serif;
    }

    .yellow-gradient {
        background: linear-gradient(135deg, #ffeb3b 0%, #fbc02d 50%, #f57f17 100%);
        border-radius: 8px;
        padding: 15px;
    }

    .receipt-title {
        font-family: 'Great Vibes', cursive;
        font-size: 28px;
        font-weight: 700;
    }

    .company-block p {
        margin: 0;
        font-size: 13px;
    }

    .amount-box {
        border: 2px dashed #000;
        padding: 6px 12px;
        font-weight: bold;
        text-align: center;
        min-width: 120px;
    }

    .payer-info {
        border: 1px solid #000;
        padding: 10px;
        min-height: 70px;
    }

    .signature {
        border-top: 1px solid #000;
        text-align: center;
        font-weight: 600;
        padding-top: 3px;
        min-width: 80px;
    }

    @media print {
        body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
    }
</style> -->
<style>
    @page {
        size: A6 landscape;
        margin: 8mm;
    }

    /* Base */
    body {
        font-family: Arial, sans-serif;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }

    /* Receipt wrapper */
    .receipt-wrapper {
        background: linear-gradient(135deg, #fffb9a 0%, #ffd700 100%);
        padding: 12px;
        padding-top: 0px !important;
        border-radius: 6px;
        color: black !important;
    }

    /* HEADER */
    .receipt-header {
        background: navy;
        color: #fff;
        padding: 12px;
        border-radius: 6px;
    }

    /* Company name */
    .company-name {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        margin: 0;
        text-align: center;
    }

    /* Address text */
    .corp-office {
        font-size: 12px;
        margin: 2px 0;
        text-align: center;
    }

    /* Title */
    .title {
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        color: navy;
        font-family: 'Great Vibes', cursive;
        margin: 10px 0;
    }

    /* Amount box */
    .amount-box {
        border: 2px dashed #000;
        padding: 6px 12px;
        font-weight: bold;
        min-width: 120px;
        text-align: center;
    }

    /* Payer box */
    .payer-info {
        border: 1px solid #000;
        padding: 10px;
        min-height: 70px;
    }

    /* Signatures */
    .signature {
        border-top: 1px solid #000;
        text-align: center;
        padding-top: 5px;
        width: 90px;
    }

    /* Phone footer */
    .phone-section {
        text-align: center;
        font-weight: bold;
        margin-top: 10px;
    }

    /* REG ID */
    .reg-id {
        font-weight: bold;
    }

    /* PRINT OPTIMIZATION */
    @media print {
        body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
    }
</style>
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2 waves-effect waves-light"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('investment_history') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M15 6l-6 6l6 6"></path>
                    </svg>
                </a>
            </button>Micro Receipt
        </h5>
    </div>
    <div>
        <button class="btn btn-primary" onclick="downloadmicroReceipt({{ $data->id }})">
            Print
        </button>
    </div>
</div>
<div class="container-fluid d-flex justify-content-center">
    <div class="col-12 col-md-10 col-lg-8">

        <div class="receipt-wrapper">

            {{-- HEADER --}}
            <div class="receipt-header row align-items-center text-center text-md-start">

                <div class="col-12 col-md-2 text-center">
                    <img src="{{ asset('assets/image/coin.png') }}" height="70">
                </div>

                <div class="col-12 col-md-8">
                    <h5 class="company-name">Madhura Gold International Pvt. Ltd.</h5>

                    <div class="corp-office">
                        <span class="text-warning fw-bold">Corporate Office:</span>
                        Opp. No. 28, Sub-Registrar Office Road, Bengaluru
                    </div>

                    <div class="corp-office">
                        Chairman Club, Sahakara Nagar, Bengaluru - 560092
                    </div>

                    <div class="corp-office">
                        <span class="text-warning fw-bold">Registered Office:</span>
                        Thiruvananthapuram - 695024
                    </div>
                </div>

                <div class="col-12 col-md-2"></div>
            </div>

            {{-- TITLE ROW --}}
            <div class="row mt-3 align-items-center text-center">

                <div class="col-12 col-md-4 reg-id text-md-start text-center">
                    No:{{ $data->id }}
                </div>

                <div class="col-12 col-md-4 title">
                    Receipt
                </div>

                <div class="col-12 col-md-4 reg-id text-md-end text-center">
                    Date: {{ \Carbon\Carbon::parse($data->created_at)->format('d/m/Y') }}
                </div>

            </div>

            {{-- AMOUNT --}}
            <div class="row mt-2 align-items-center">
                <div class="col-12 d-flex flex-wrap align-items-center gap-2">
                    <span>Received Rs.</span>

                    <div class="amount-box">
                        {{ number_format($data->amount) }}/-
                    </div>

                    <span>
                        ({{ ucwords(\NumberFormatter::create('en_IN', \NumberFormatter::SPELLOUT)->format($data->amount)) }}
                        Only)</span>
                </div>
            </div>

            {{-- PAYER --}}
            <div class="mt-3">
                <div class="fw-bold">from Pri/Imt.</div>

                <div class="payer-info mt-1">
                    <div>{{ $data->user->name }}</div>
                    <div>{{ $data->user->pincode }},{{ $data->user->address }}</div>
                    <div>{{ $data->user->state }}</div>
                </div>
            </div>

            {{-- REG + SIGN --}}
            <div class="row mt-3 align-items-end">

                <div class="col-12 col-md-6 reg-id">
                    Registration ID: {{ $data->user->user_id }}
                </div>

                <div class="col-12 col-md-6 d-flex justify-content-md-end gap-3 mt-3 mt-md-0">
                    <div class="signature">Cashier</div>
                    <div class="signature">Clerk</div>
                    <div class="signature">Manager</div>
                </div>
            </div>

            <hr>

            {{-- FOOTER --}}
            <div class="phone-section">
                Ph: +91 8042088341, +91 99010238, +91 953198983
            </div>

        </div>
    </div>
</div>
<iframe id="downloadFrame" style="display:none;"></iframe>
<script>
    function downloadmicroReceipt(id) {
        if (!id) {
            console.error('Receipt ID is missing');
            return;
        }

        let iframe = document.getElementById('downloadFrame');

        let url = "{{ route('micro_receipt_download', ':id') }}";
        url = url.replace(':id', id);

        iframe.src = url;

        iframe.onload = function() {
            setTimeout(() => {
                iframe.contentWindow.focus();
                iframe.contentWindow.print();
            }, 300);
        };
    }
</script>
@endsection