@extends('layouts.master')

@section('css')
<style>
    /* Thermal Printer Specific Styling */
    @media print {
        body {
            width: 80mm; /* Standard thermal paper width; change to 58mm if needed */
            margin: 0;
            padding: 0;
            font-size: 12px;
            color: #000;
            background: #fff;
        }
        #print_Button, .breadcrumb-header, .main-parent > div:not(#print) {
            display: none !important;
        }
        #print {
            width: 100%;
            padding: 0;
            margin: 0;
        }
        .card-invoice {
            border: none !important;
            padding: 0 !important;
        }
    }

    /* General screen styling for thermal preview */
    .thermal-receipt {
        max-width: 350px;
        margin: 0 auto;
        background: #fff;
        padding: 10px;
        font-family: monospace;
    }
</style>
@endsection

@section('title')
{{ __('home.sales') }} - {{ __('report.budgetsheet') }}
@stop

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between parent-heading">
        <div class="my-auto">
            <div class="d-flex">
                <h5 style="color: white" class="mt-1">معاينة طباعة مبيعات الفاتورة (حراري)</h5>
            </div>
        </div>
    </div>
@endsection

@section('content')
<div class="row row-sm">
    <div class="col-md-12 col-xl-12">
        <div class="main-content-body-invoice" id="print">
            <div class="card card-invoice p-2">
                
                <!-- Print Button -->
                <div class="d-flex justify-content-center">
                    <button class="btn btn-danger print-style btn-sm mb-3" id="print_Button" onclick="printDiv()">
                        {{ __('home.print') }} <i class="mdi mdi-printer ml-1"></i>
                    </button>
                </div>

                <div class="card-body pt-2 thermal-receipt">
                    
                    <!-- Header Info (Company Name & Logo) -->
                    <div style="text-align: center; width: 100%;">
                        @php $logo = camplogo; @endphp
                        <img src="{{ asset('assets/img/brand').'/'.$logo }}" alt="logo" style="width: 70px; height: 50px;"><br>
                        <span style="font-size: 18px; font-weight: bold;">{{ Namear ?? Nameen }}</span>
                        <p style="margin: 2px 0; font-size: 11px;">{{ describtionar ?? '' }}</p>
                        <p style="margin: 2px 0; font-size: 11px;">{{ STar ?? '' }}</p>
                        <p style="margin: 2px 0; font-size: 11px;">{{ Taxar ?? '' }}</p>
                    </div>

                    <hr style="border-top: 1px dashed #000;">

                    <!-- Date & Branch Info -->
                    <div style="font-size: 11px; margin-bottom: 10px;">
                        <div><strong>{{ __('report.fromdate') }}:</strong> {{ $data['start_at'] }}</div>
                        <div><strong>{{ __('report.todate') }}:</strong> {{ $data['end_at'] }}</div>
                        <div><strong>{{ __('home.branch') }}:</strong> {{ $data['branch'] }}</div>
                        <div><strong>{{ __('home.exportTime') }}:</strong> {{ \Carbon\Carbon::now()->addHours(3)->format("Y-m-d H:i") }}</div>
                    </div>

                    <hr style="border-top: 1px dashed #000;">

                    <center>
                        <h6 style="color: black; font-size: 14px; font-weight: bold;">{{ __('home.sales') }}</h6>
                    </center>

                    <!-- Sales Data Table (Filtered strictly for Sales) -->
                    <div class="table-responsive">
                        <table class="table table-sm text-center" style="width: 100%; font-size: 11px; border-collapse: collapse;">
                            <thead>
                                <tr style="border-bottom: 1px solid #000;">
                                    <th style="text-align: left;">{{ __('report.cash') }} / Method</th>
                                    <th style="text-align: right;">{{ __('home.sales') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="text-align: left;">{{ __('report.cash') }}</td>
                                    <td style="text-align: right;">{{ $data['salescash'] }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align: left;">{{ __('report.shabka') }}</td>
                                    <td style="text-align: right;">{{ $data['salesshabka'] }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align: left;">{{ __('home.Bank_transfer') }}</td>
                                    <td style="text-align: right;">{{ $data['salesBankTransfer'] }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align: left;">{{ __('report.credit') }}</td>
                                    <td style="text-align: right;">{{ $data['salescredit'] }}</td>
                                </tr>

                                @php
                                    $totalSalesReturns = $data['returnsalescash'] + $data['returnSalespartial'] + $data['returnsalesshabka'] + $data['returnSalesBankTransfer'] + $data['returnsalescredit'];
                                    $totalSalesSum = $data['salescredit'] + $data['salesshabka'] + $data['salescash'] + $data['salesBankTransfer'];
                                    $netSales = $totalSalesSum - $totalSalesReturns;
                                @endphp

                                <tr style="border-top: 1px solid #000;">
                                    <td style="text-align: left;"><strong>{{ __('home.return') }}</strong></td>
                                    <td style="text-align: right;">{{ $totalSalesReturns }}</td>
                                </tr>
                                <tr style="border-top: 1px dashed #000; font-weight: bold;">
                                    <td style="text-align: left;">{{ __('home.total') }}</td>
                                    <td style="text-align: right;">{{ $netSales }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <hr style="border-top: 1px dashed #000;">
                    <div style="text-align: center; font-size: 10px; margin-top: 10px;">
                        <span>Thank you!</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script type="text/javascript">
    function printDiv() {
        var printContents = document.getElementById('print').innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
        location.reload();
    }
</script>
@endsection