@if(empty($pdf))
    @extends('layouts.contentNavbarLayout')
@endif
@section('content')
<div class="container">
    @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif
    <div class="card p-4">
       
        <p class="text-center"><img src="{{ asset('images/zillion-logo-invoice.png') }}" style="width:150px;"></p>
        <h6 class="text-center mb-3"><strong>Service Invoice</strong></h6>
        <h6 class="text-center mb-4">Zillion IT Solutions. S1, 2nd Floor, Kairali Complex<br><br>
            Thondayad, Calicut -17 Kerala, India</h6>

        <div class="mb-3">
            <strong>Invoice No:</strong> {{ $invoice->invoice_number }}<br>
            <strong>Invoice Date:</strong> {{ \Carbon\Carbon::parse($invoice->date)->format('d-m-Y') }}
        </div>

        <div class="mb-4">
            <h5>To:</h5>
            <p>
                <strong>Client Name:</strong> M/s {{ $invoice->client->name }}<br>
                <strong>Address:</strong> {{ $invoice->client->address ?? '' }}
            </p>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width: 5%;">SL.NO.</th>
                    <th>Particulars Of Services HSN/SAC</th>
                    <th style="width: 20%;">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->items as $index => $item)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $item->description }}</td>
                    <td>{{ number_format($item->amount, 2) }}</td>
                </tr>
                @endforeach
                 <tr>
                    {{-- <td colspan="3" class="text-start"><strong>Resources Involved</strong></td> --}}
                    <th style="width: 5%;"></th>
                    <th>Resources Involved</th>
                    <th></th>

                   
                </tr>
                @foreach($invoice->designations as $index => $designation)
                <tr>
                    <td></td>
                    <td>{{ $designation->name }} - {{ $designation->pivot->count }}</td>
                    <td></td>
                 
                </tr>
                @endforeach

                @php
                $selectedTechnologies = old('technologies', json_decode($invoice->technologies ?? '[]', true));
                if (!is_array($selectedTechnologies)) {
                $selectedTechnologies = [];
                }
                @endphp
                <tr>
                {{-- <td colspan="3" class="text-start"><strong>Resources Involved</strong></td> --}}
                <th style="width: 5%;"></th>
                <th>Project Technology Stack</th>
                <th></th>


                </tr>
                @foreach ($technologies as $technology)
                @if(in_array($technology->id, $selectedTechnologies))
                <tr>
                <td></td>
                <td>{{ $technology->technology }}</td>
                <td></td>
                </tr>
                @endif
                @endforeach
                
                <tr>
                    <td colspan="2" class="text-end"><strong>Service Total</strong></td>
                    <td><strong>₹{{ number_format($invoice->total_amount, 2) }}</strong></td>
                </tr>
                <tr>
                    <td colspan="2" class="text-end"><strong>Received Amount</strong></td>
                    <td><strong>{{ $invoice->received_amount ? '₹' . number_format($invoice->received_amount, 2) : 'NIL' }}</strong></td>
                </tr>
                <tr>
                    <td colspan="2" class="text-end"><strong>Balance</strong></td>
                    <td><strong>₹{{ number_format($invoice->total_amount - ($invoice->received_amount ?? 0), 2) }}</strong></td>
                </tr>
                <tr>
                    <td colspan="2" class="text-end"><strong>Grand Total</strong></td>
                    <td><strong>₹{{ number_format($invoice->total_amount, 2) }}</strong></td>
                </tr>
                <tr>
                    <td colspan="3" class="text-start">Total Invoice Amount In Words: {{ $amountInWords }} only</td>
                  
                </tr>
            </tbody>
        </table>
        <!-- Footer Section with Bank Details -->
        <table class="table table-bordered mt-4" style="width: 100%;">
            <tr>
                <td style="width: 50%; vertical-align: top;">
                    <h6 class="mb-2"><strong>Bank Details:</strong></h6>

                    <h6 style="font-size: 14px;
                    line-height: 25px;">Beneficiary: <strong>Zillion IT Solutions</strong><br>
                    Bank Name: <strong>State Bank Of India</strong></br>
                      Branch: PBB Branch, Pottammal</br>
                          Bank Account Number: <strong>38456815606</strong></br>
                             Bank Branch IFSC: SBIN0070758
                            </p>

                    <p style="font-size: 13px;">Amount of Tax Subject to Reverse Charge.</p>
                </td>
                <td style="width: 50%; vertical-align: top; text-align: center;">
                    <p>Certified that the particulars given above are true and correct.</p><br>
                    <h6>For Zillion IT Solutions</h6><br>
                    ____________________________<br><br>
                    <h6>Authorised Signatory</h6>
                </td>
            </tr>
        </table>
        <small class="mt-4">*Note: 
          {{ $invoice->remarks }}
        </small>
        <div class="text-end mt-4 no-print">
            <a href="{{ route('service-invoices.index') }}" class="btn btn-secondary me-2"><span class="mdi mdi-skip-backward"></span></a>
            <a href="{{ route('service-invoices.download', $invoice->id) }}" class="btn btn-outline-success me-2"><span class="mdi mdi-file-pdf-box"></span></a>   
            <button onclick="window.print()" class="btn btn-outline-primary"><span class="mdi mdi-printer-outline"></span></button>
            <form action="{{ route('service-invoices.sendEmail', $invoice->id) }}" method="POST">
                @csrf
             
                <button type="submit" class="btn btn-success mt-4">Send Email</button>
            </form>
            @if(session('message'))
    <div class="alert alert-success">
        {{ session('message') }}
    </div>
@endif
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="sendInvoiceModal" tabindex="-1" aria-labelledby="sendInvoiceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sendInvoiceModalLabel">Confirm Invoice Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6>Invoice Details:</h6>
                <p><strong>Invoice Number:</strong> {{ $invoice->invoice_number }}</p>
                <p><strong>Invoice Date:</strong> {{ \Carbon\Carbon::parse($invoice->date)->format('d M, Y') }}</p>
                <p><strong>Client Name:</strong> M/s {{ $invoice->client->name }}</p>
                <p><strong>Subject:</strong> <span id="emailSubject">{{ $invoice->subject ?? '' }}</span></p>
                <p><strong>Message:</strong></p>
                <p id="emailMessage">{{ $invoice->message ?? '' }}</p>
                
                <form id="sendInvoiceForm" action="{{ route('service-invoices.sendEmail', $invoice->id) }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-primary">Confirm Send</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    function prepareModalData() {
        // Get the subject and message from the form fields
        var subject = document.getElementById('subject').value;
        var message = document.getElementById('message').value;

        // Update the modal with the data
        document.getElementById('emailSubject').innerText = subject;
        document.getElementById('emailMessage').innerText = message;
    }
</script>
<style>
    @media print {
        /* Hide layout elements */
        nav.navbar,
        .layout-navbar,
        .layout-menu,
        .btn,
        .text-end.mt-4,
        footer {
            display: none !important;
            
        }
        /* Full-width print page */
        @page {
            size: A4;
            margin: 0; /* remove browser default margins */
        }

        html, body {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }
        .container,
        .card {
            margin: 0 !important;
            padding: 20px !important; /* optional, for some breathing space */
            width: 100% !important;
            max-width: 100% !important;
            box-shadow: none !important;
            border: none !important;
        }
        .table {
            width: 100% !important;
        }
    }
</style>
@endsection