@extends('layouts/layoutMaster')

@section('title', 'View Operational Note')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss', 'resources/assets/vendor/libs/select2/select2.scss', 'resources/assets/vendor/libs/@form-validation/form-validation.scss', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'])
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/moment/moment.js', 'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js', 'resources/assets/vendor/libs/select2/select2.js', 'resources/assets/vendor/libs/@form-validation/popular.js', 'resources/assets/vendor/libs/@form-validation/bootstrap5.js', 'resources/assets/vendor/libs/@form-validation/auto-focus.js', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.js', 'resources/assets/vendor/libs/cleavejs/cleave.js', 'resources/assets/vendor/libs/cleavejs/cleave-phone.js'])
@endsection

@section('page-script')
    @vite('resources/assets/js/app-user-list.js')
    @vite('resources/assets/js/operational-notes-list.js')
@endsection
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }

    img {
        width: 100%;
        display: block;
    }

    .container {
        width: 100%;
        margin: 0 auto;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px;
    }

    .h4 {
        margin: 10px 0;
        font-size: 18px;
        line-height: 1.2;
    }

    .col-md-6,
    .col-md-4,
    .col-md-12,
    .col-md-3,
    .col-md-2 {
        padding: 0 10px;
        box-sizing: border-box;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-2 {
        flex: 0 0 16.666%;
        max-width: 16.666%;
    }

    p {
        margin: 0;
        padding-right: 15px;
        font-size: 14px;
        line-height: 1.5;
    }

    hr {
        margin: 10px 0;
        border: 1px solid #ccc;
    }

    .mb-3 {
        margin-bottom: 10px;
    }

    .img-fluid {
        max-width: 100%;
        height: auto;
    }

    .btn {
        display: inline-block;
        padding: 10px 20px;
        margin: 10px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        color: #fff;
        background-color: #007bff;
        text-decoration: none;
    }

    .btn:hover {
        background-color: #0056b3;
    }
</style>

@section('content')

    <!-- Discharge Plan List Table -->
    <div class="card">

        <!-- Display success message -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <!-- Display error message -->
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="card-header border-bottom">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h5 class="mb-0"> <i class="menu-icon tf-icons ti ti-notes"> </i>
                        <b> Operational Note</b>
                    </h5>
                </div>
                <div class="col-md-6 d-flex justify-content-end">
                    <button type="button" id="print-btn" class="btn btn-primary m-2">Print</button>
                    <button type="button" id="download-pdf-btn" class="btn btn-primary m-2">Download</button>

                </div>
            </div>
        </div>
        <!-- Header Image -->
        <div class="text-center mb-2">
            <img src="{{ asset('assets/img/tmh-icons/Header.png') }}" alt="Header Image" class=" my-3"
                style="max-width: 100%; height: auto;">
        </div>
        <div class="container my-2 px-4">
            <!-- Patient Information -->
            <div class="ps-2">
                <h2 class="h4"><b>Patient Information</b></h2>
                <div class="row">
                    <div class="col-md-4">
                        <p><strong>MRN:</strong> {{ $note->patient->mrn }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>Patient's Name:</strong> {{ $note->patient->name }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>Procedure Name:</strong> {{ $note->procedure_name }}</p>
                    </div>
                    {{-- <div class="col-md-4">
                        <p><strong>Patient's weight:</strong> {{ $note->$surgeon->name  }}</p>
                    </div> --}}
                    {{-- <div class="col-md-4">
                        <p><strong>Patient's pulse:</strong> {{  $note->$assistant->name }}</p>
                    </div> --}}
                    <div class="col-md-4">
                        <p><strong>Indication Of Surgery:</strong> {{ $note->indication_of_surgery }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>Operative Findings:</strong> {!! $note->operative_findings !!}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>Post Operation Orders:</strong> {!! $note->post_operation_orders !!}</p>
                    </div>
                    @if ($note->special_instruction)
                        <div class="col-4">
                            <p><strong>Special Instructions:</strong> {!! $note->special_instruction !!}</p>
                        </div>
                    @endif

                    <hr>

                    @php
                        $hasMedication =
                            $note->medicine->contains(function ($medication) {
                                return $medication->medicine_name !== 'None';
                            }) ||
                            $note->othermedicine->contains(function ($medication) {
                                return $medication->medicine_name !== 'None';
                            });
                    @endphp

                    @if ($hasMedication)
                        {{-- <div>
                            <h2 class="h4 mb-2"><b>Medication</b></h2>
                            <br>
                            <div class="row g-4 ms-2">
                                @foreach ($note->medicine as $index => $medication)
                                    @if ($medication->medicine_name !== 'None')
                                        <div class="row align-items-center" style="margin-bottom: 2px;">
                                            <div class="col-md-4">
                                                <p><strong>Name:</strong> {{ $medication->medicine_name ?? 'n/a' }}</p>
                                            </div>
                                            <div class="col-md-2">
                                                <p><strong>Dose:</strong> {{ $medication->dose ?? 'n/a' }}</p>
                                            </div>
                                            <div class="col-md-3">
                                                <p><strong>Frequency:</strong> {{ $medication->frequency ?? 'n/a' }}</p>
                                            </div>
                                            <div class="col-md-3">
                                                <p><strong>Duration (days):</strong> {{ $medication->duration ?? 'n/a' }}</p>

                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <br>
                            <div class="row g-4 ms-2">
                                @foreach ($note->othermedicine as $index => $medication)
                                    @if ($medication->medicine_name !== 'None')
                                        <div class="row align-items-center" style="margin-bottom: 2px;">
                                            <div class="col-md-4">
                                                <p><strong>Name:</strong> {{ $medication->medicine_name ?? 'n/a' }}</p>
                                            </div>
                                            <div class="col-md-2">
                                                <p><strong>Dose:</strong> {{ $medication->dose ?? 'n/a' }}</p>
                                            </div>
                                            <div class="col-md-3">
                                                <p><strong>Frequency:</strong> {{ $medication->frequency ?? 'n/a' }}</p>
                                            </div>
                                            <div class="col-md-3">
                                                <p><strong>Duration (days):</strong> {{ $medication->duration ?? 'n/a' }}</p>

                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div> --}}
                        <div>
                            <h2 class="h4 mb-0"><b>Medication</b></h2>
                            <br>
                            <div class="table-responsive ms-2">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Medicine Name</th>
                                            <th>Dose</th>
                                            <th>Frequency</th>
                                            <th>Duration (days)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ([$note->medicine, $note->othermedicine] as $medications)
                                            @foreach ($medications as $medication)
                                                @if ($medication->medicine_name !== 'None')
                                                    <tr>
                                                        <td>{{ $medication->medicine_name ?? '-' }}</td>
                                                        <td>{{ $medication->dose ?? '-' }}</td>
                                                        <td>{{ $medication->frequency ?? '-' }}</td>
                                                        <td>{{ $medication->duration ?? '-' }}</td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <!-- Footer Image -->
        <div class="text-center mt-4">
            <img src="{{ asset('assets/img/tmh-icons/Footer.png') }}" alt="Footer Image" class="img-fluid my-3"
                style="max-width: 100%; height: auto;">
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        var headerImagePath = "{{ asset('assets/img/tmh-icons/Header.png') }}";
        var footerImagePath = "{{ asset('assets/img/tmh-icons/Footer.png') }}";
        document.addEventListener('DOMContentLoaded', function() {
            function getHeaderAndFooter() {
                return {
                    headerImagePath,
                    footerImagePath
                };
            }
            // Function to handle Print button click
            document.getElementById('print-btn')?.addEventListener('click', function() {
                var modalContent = document.querySelector('.container').innerHTML;
                var images = getHeaderAndFooter();
                var headerImage = images.headerImagePath;
                var footerImage = images.footerImagePath;

                var printWindow = window.open('', '', 'height=600,width=800');

                // Preload header and footer images before printing
                var headerImg = new Image();
                var footerImg = new Image();

                headerImg.src = headerImage;
                footerImg.src = footerImage;

                Promise.all([
                    new Promise((resolve) => headerImg.onload = resolve),
                    new Promise((resolve) => footerImg.onload = resolve)
                ]).then(() => {
                    var content = `
                        <html>
                        <head>
                            <title>Operational_Note_{{ $note->patient->mrn }}</title>
                            <style>
                                body, html {
                                    height: 100%;
                                    margin: 0;
                                    padding: 0;
                                    font-family: Arial, sans-serif;
                                }
                                img {
                                    width: 100%;
                                    display: block;
                                }
                                .container {
                                    width: 90%;
                                    margin: 0 auto;
                                    flex: 1 0 auto; /* Ensure the container takes up the remaining space */
                                }
                                .footer {
                                    position: absolute;
                                    bottom: 0;
                                    width: 100%;
                                }
                                .wrapper {
                                    display: flex;
                                    flex-direction: column;
                                    min-height: 100vh;
                                }
                                .row {
                                    display: flex;
                                    flex-wrap: wrap;
                                    margin: -15px;
                                }
                                .col-md-6, .col-md-4, .col-md-12 {
                                    padding: 15px;
                                    box-sizing: border-box;
                                }
                                .col-md-6 {
                                    flex: 0 0 50%;
                                    max-width: 50%;
                                }
                                .col-md-4 {
                                    flex: 0 0 33.333%;
                                    max-width: 33.333%;
                                }
                                p {
                                    margin: 0;
                                }
                                hr {
                                    margin: 20px 0;
                                }
                                .mb-3 {
                                    margin-bottom: 20px;
                                }
                                .img-fluid {
                                    max-width: 100%;
                                    height: auto;
                                }
                                table {
                                    width: 100%;
                                    border-collapse: collapse;
                                }
                                th, td {
                                    padding: 8px;
                                    border: 1px solid #ddd;
                                    text-align: left;
                                }
                                .footer {
                                    margin-top: auto;
                                    width: 100%;
                                }
                            </style>
                        </head>
                        <body>
                            <div class="wrapper">
                                <img src="${headerImg.src}" alt="Header Image">
                                <div class="container">
                                    ${modalContent}
                                </div>
                                <br>
                                <br>
                                <br>
                                <div class="footer">
                                    <img src="${footerImg.src}" alt="Footer Image">
                                </div>
                            </div>
                        </body>
                        </html>
                    `;
                    printWindow.document.write(content);
                    printWindow.document.close();
                    printWindow.focus();
                    printWindow.print();
                    setTimeout(() => {
                        printWindow.close();
                    }, 100);
                });
            });

            document.getElementById('download-pdf-btn')?.addEventListener('click', function() {
                var modalContent = document.querySelector('.container');
                var images = getHeaderAndFooter();
                var headerImage = images.headerImagePath;
                var footerImage = images.footerImagePath;

                const originalWidth = 2048; // Original width of your image in pixels
                const originalHeight = 443; // Original height of your image in pixels
                const pdfWidth = 190; // Desired width in the PDF in millimeters

                // Calculate height based on the aspect ratio
                const aspectRatio = originalHeight / originalWidth;
                const pdfHeight = pdfWidth * aspectRatio;

                html2canvas(modalContent).then(function(canvas) {
                    var imgData = canvas.toDataURL('image/png');

                    const {
                        jsPDF
                    } = window.jspdf;
                    var pdf = new jsPDF('p', 'mm', 'a4');

                    var header = new Image();
                    header.src = headerImage;
                    header.onload = function() {
                        pdf.addImage(header, 'PNG', 10, 10, pdfWidth, pdfHeight);

                        pdf.addImage(imgData, 'PNG', 10, 60, 190, 0);

                        var footer = new Image();
                        footer.src = footerImage;
                        footer.onload = function() {
                            pdf.addImage(footer, 'PNG', 10, pdf.internal.pageSize.height -
                                30, 190, 20);

                            var mrn = "{{ $note->patient->mrn }}";
                            pdf.save(`Operational_Note_${mrn}.pdf`);

                        };
                    };
                });
            });
        });
        var baseUrl = "{{ url('/') }}";
        var csrfToken = "{{ csrf_token() }}";
        var headerImage = "{{ asset('assets/img/tmh-icons/Header.png') }}";
        var footerImage = "{{ asset('assets/img/tmh-icons/Footer.png') }}";
    </script>
@endsection