@extends('front.layouts.print')
@section('css')
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css"
    rel="stylesheet">
<style>
        body {
            font-family: DejaVu Sans, sans-serif;
            font-size: 12px;
            color: #333;
            margin: 20px;
            line-height: 1.5;
        }

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

        .logo {
            margin-bottom: 10px;
        }

        h2 {
            margin: 0;
            color: #222;
        }

        .section-title {
            background: #f07c36;
            color: #000;
            padding: 8px;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 10px;
        }

        table th,
        table td {
            border: 1px solid #ddd;
            padding: 8px;
            vertical-align: top;
        }

        table th {
            background: #f7f7f7;
            width: 35%;
            font-weight: bold;
            text-align: left;
        }

        .footer {
            margin-top: 25px;
            text-align: center;
            font-size: 11px;
            color: #666;
        }

        @media print {
            /* Step 1: Remove browser default headers/footers */
            @page {
                margin: 0;
                size: auto;
            }

            /* Step 2: Setup body spacing to prevent content from overlapping header/footer */
            body {
                margin: 0;
                padding-top: 100px;    /* Height of your header + spacing */
                padding-bottom: 80px;  /* Height of your footer + spacing */
                padding-left: 1.5cm;
                padding-right: 1.5cm;
            }

            /* Step 3: Fixed Header (repeats on every page) */
            .print-header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 60px;
                padding: 20px 1.5cm 0 1.5cm;
                border-bottom: 2px solid #333;
                background-color: #ffffff;
            }

            /* Step 4: Fixed Footer (repeats on every page) */
            .print-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 50px;
                padding: 10px 1.5cm 0 1.5cm;
                border-top: 1px solid #ccc;
                background-color: #ffffff;
                font-size: 12px;
                text-align: center;
            }
        }

        /* Hide print header/footer on normal screen viewing */
        @media screen {
            .print-header,
            .print-footer {
                display: none;
            }
        }
    
</style>
@endsection

@section('content')
    <div class="header">
        {{-- Use public_path() for PDF image --}}
        @if(!empty($logo))
            <img src="data:image/png;base64,{{ $logo }}" alt="Modern Hospital" width="150">
        @endif
        <h2>Appointment Details</h2>
    </div>

    <div class="section-title">Appointment Information</div>
    <table>
        <tr>
            <th>Appointment Number</th>
            <td>{{ $data->appointment_number }}</td>
        </tr>
        <tr>
            <th>Appointment Date</th>
            <td>{{ dateFormat($data->appointment_date, DISPLAY_DATE) }}</td>
        </tr>
        <tr>
            <th>Appointment Time</th>
            <td>({{ ucfirst($data->slot_type) }}) {{ $data->slot_timing }}</td>
        </tr>
        <tr>
            <th>Appointment Status</th>
            <td>
                {{bookingStatusText($data->status)}}
            </td>
        </tr>
        {{-- <tr>
            <th>Status</th>
            <td>{{ $data->payment_status == 1 ? 'Confirmed' : 'Payment Failed' }}</td>
        </tr> --}}
{{--         
        <tr>
            <th>Slot Type</th>
            <td>{{ ucfirst($data->slot_type) }}</td>
        </tr> --}}
    </table> 

    <div class="section-title">Doctor Information</div>
    <table>
        <tr>
            <th>Doctor Name</th>
            <td>{{ $getDoctorDetail->name }}</td>
        </tr>
        <tr>
            <th>Qualification</th>
            <td>{{ $getDoctorDetail->designations ?? '' }}</td>
        </tr>
        <tr>
            <th>Specialization</th>
            <td>{{ $getDoctorDetail->services ?? '' }}</td>
        </tr>
        <tr>
            <th>Gender</th>
            <td>{{ ucfirst($getDoctorDetail['gender'] ?? '') }}</td>
        </tr>
       
    </table>

    <div class="section-title">Patient Information</div>
    <table>
        <tr>
            <th>Patient Name</th>
            <td>{{ $data->full_name }}</td>
        </tr>
        <tr>
            <th>Email</th>
            <td>{{ $data->email_id }}</td>
        </tr>
        <tr>
            <th>Phone</th>
            <td>{{ $data->phone_number }}</td>
        </tr>
        <tr>
            <th>Message</th>
            <td>{{ $data->message }}</td>
        </tr>
    </table>

    <div class="section-title">Payment Information</div>
    <table>
        @if (isset($data->payment_id))
            <tr>
                <th>Transaction ID</th>
                <td>{{ $data->payment_id }}</td>
            </tr>
        @endif
        <tr>
            <th>Payment Method</th>
            <td>{{ $data->payment_id != '' ? 'Online' : 'Cash' }} </td>
        </tr>

       {{--  <tr>
            <th>Payment Status</th>
            <td>{{ $data->payment_status == 1 ? 'Paid' : 'Not Paid' }}</td>
        </tr> --}}
        <tr>
            <th>Consultation Fee</th>

            <td>{{ $data->doctor_fee }}</td>
        </tr>
        {{-- <tr>
            <th>Tax</th>
            <td>₹ 0.00</td>
        </tr>
        <tr>
            <th>Total Amount</th>
            <td>{{ $data->doctor_fee  }}</td>
        </tr> --}}
    </table>
{{-- 
    <div class="section-title">Billing Summary</div>
    <table>
        <tr>
            <th>Consultation Fee</th>
            <td>{{ $data->doctor_fee }}</td>
        </tr>
        <tr>
            <th>Tax</th>
            <td>₹ 0.00</td>
        </tr>
        <tr>
            <th>Discount</th>
            <td>₹ 0.00</td>
        </tr>
        <tr>
            <th>Total Amount</th>
            <td>{{ $data->doctor_fee  }}</td>
        </tr>
    </table> --}}

    <div class="footer">
        Please reach 30 minutes prior appointment time.
        <br>
        Thank you for choosing Modern Hospital.
    </div>

</body>

</html>
@endsection
@section('bottom_script')
<script>
window.print();
</script>
@endsection