@extends('template.app')

@section('title', 'Liquidation Refund Form')

@php
    $logo_1 = ltrim($images->gatepass_logo1 ?? '', '/');
    $date = \Carbon\Carbon::now()->format('d/m/y'); 
@endphp

@section('styles')
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 40px;
        font-size: 16px; 
        color: #000 !important; 
    }

        @media print {
        * {
            color: #000 !important;
            background: #fff !important;
            box-shadow: none !important;
            border-color: #000 !important;
        }
    
        body, #content-to-print {
            font-size: 16px !important;
        }
    
        img {
            filter: none !important;
            background: transparent !important;
        }
    
        .page-breadcrumb,
        .customize-input,
        button,
        nav,
        .breadcrumb {
            display: none !important;
        }
    }


    .section-title {
        text-align: center;
        font-weight: bold;
        text-decoration: underline;
        margin-bottom: 20px;
    }
    .underline-label {
        text-decoration: underline;
    }
    .info-block {
        margin-right: 30px;
        display: inline-block;
    }
    .underline {
        border-bottom: 1px solid #000;
        display: inline-block;
        padding: 0 40px;
    }

    .full-line {
        border-bottom: 1px solid #000;
        display: inline-block;
        width: 100%;
    }

    .signature-box {
        width: 23%;
        text-align: center;
    }

    .signatures {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
    }

    .logo-top {
        text-align: right;
    }
</style>
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Refund Form</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb" class="d-flex justify-content-between align-items-center">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('liquidation') }}" class="text-muted">Liquidation</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Refund Form</li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
                <button onclick="printDiv('content-to-print')" style="background-color: green; color: white; margin-left: 30px; border: none; cursor: pointer; border-radius: 5px;">
                    <i class="fa fa-print"></i> Print Content
                </button>
            </div>
        </div>
    </div>

    <div class="container-fluid" id="content-to-print">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body" style="padding: 40px;">
                        <!-- Logo in top right -->
                        <div style="display: flex; justify-content: flex-end;">
                            <div style="display: flex; flex-direction: column; align-items: center;">
                                <img class="gp_logo" 
                                     src="{{ asset('uploads/global_configuration/gatepass_logo_one/' . $logo_1) }}" 
                                     alt="Right Logo" 
                                     style="height: 80px; width: 170px;">
                                <span style="font-size: 15px; font-weight: normal; margin-top: 5px;">
                                    Movement that inspires
                                </span>
                            </div>
                        </div>

                        <div class="section-title">BOOKING CANCELLATION / REFUND REQUEST</div>
                        
                        <div style="text-align: left; line-height: 1.8;">
                            <div><strong>Date:</strong> {{ $date }}</div>

                            <div style="margin-top: 10px;"><strong>To,</strong></div>
                            <div><strong>GM/SM:</strong> ________________</div>

                            <div style="margin-top: 10px;"><strong>Dealer Name:</strong> Shivam Kia</div>
                            <div><strong>Location:</strong> {{ $obf_data->branch_name ?? 'N/A' }}</div>

                            <div style="margin-top: 20px; text-align: center; font-weight: bold; text-decoration: underline;">
                                Subject: Refund Request regarding booking cancellation
                            </div>

                            <div style="margin-top: 20px;">
                                <strong>Dear Sir / Madam,</strong><br><br>
                                Based on the information provided above, I would like to request the cancellation of the booking associated with the vehicle details mentioned below:
                            </div>
                            
                            <ul style="margin-top: 20px; list-style: none; padding-left: 0;">
                                <li>Name:<strong class="underline-label">{{ $obf_data->customer_name ?? 'N/A' }}</strong> </li>
                                <li>Address:<strong class="underline-label">{{ $obf_data->address ?? 'N/A' }}</strong> </li>
                                <li>
                                     <span class="info-block">
                                        Model: <strong class="underline-label">{{ $obf_data->product ?? 'N/A' }}</strong>
                                    </span>
                                    <span class="info-block">
                                        Variant: <strong class="underline-label">{{ $obf_data->car_varient_name ?? 'N/A' }}</strong>
                                    </span>
                                    <span class="info-block">
                                        Colour:<strong class="underline-label">{{ $obf_data->exterior_color ?? 'N/A' }}</strong> 
                                    </span>
                                </li>
                                <li>
                                    <span class="info-block">
                                        Booking Date: <strong class="underline-label">{{ $obf_data->booking_date ?? 'N/A' }} </strong>&nbsp;
                                    </span>
                                    <span class="info-block">
                                        Booking Refund Amount: <strong class="underline-label">₹{{ number_format($obf_data->refund_amount ?? 0, 2) }}</strong>
                                    </span>
                                </li>
                                <li>Sales Executive: <strong class="underline-label">{{ $obf_data->sales_person_name ?? 'N/A' }}</strong></li>
                            </ul>


                            <div style="margin-top: 20px;">
                                <strong>Reason for cancellation:</strong><br>
                                {{ $obf_data->refund_remark ?? 'N/A' }}
                            </div>

                            <div style="margin-top: 20px;">
                                Therefore, please do the needful to cancel my booking and issue me a refund by cheque & settle my account.
                            </div>

                            
                            <div style="margin-top: 10px;">
                                <strong>Thanking You,</strong>
                            </div>

                            <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-top: 40px;">
                                <div style="text-align: center;">
                                   {{$obf_data->customer_name}}<br> _______________<br>
                                    <strong>( Name & signature of customer )</strong>
                                </div>
                                <div>
                                    <strong>Customer Mobile No:</strong> {{ $obf_data->contact_number ?? 'N/A' }}
                                </div>
                            </div>
                            <div class="signatures">
                                <div class="signature-box">                                     
                                    <strong>Requested By</strong> <br><br>                                     
                                    {{ $obf_data->requested_by ?? '' }}
                                
                                    @if(!empty($obf_data->requested_at))
                                        <br>( {{ $obf_data->requested_at }} )
                                    @endif
                                
                                    <br>____________<br>                                     
                                    <strong>( Sales Executive )</strong>                                 
                                </div>                                 
                                
                                <div class="signature-box">                                     
                                    <strong>Verified By</strong> <br><br> 
                                    {{ $obf_data->tl_accepted_by ?? '' }}
                                
                                    @if(!empty($obf_data->tl_accepted_at))
                                        <br>( {{ $obf_data->tl_accepted_at }} )
                                    @endif
                                
                                    <br>____________<br>
                                    <strong>( Team Leader )</strong>                                 
                                </div>                        
                                
                                <div class="signature-box">
                                    <strong>Approved By</strong> <br><br>
                                    {{ $obf_data->sm_accepted_by ?? '' }}
                                
                                    @if(!empty($obf_data->sm_accepted_at))
                                        <br>( {{ $obf_data->sm_accepted_at }} )
                                    @endif
                                
                                    <br>____________<br>
                                    <strong>( Sales Manager )</strong>
                                </div>
                                
                                <div class="signature-box">
                                    <strong>Authorized By</strong> <br><br>
                                    {{ $obf_data->gm_accepted_by ?? '' }}
                                
                                    @if(!empty($obf_data->gm_accepted_at))
                                        <br>( {{ $obf_data->gm_accepted_at }} )
                                    @endif
                                
                                    <br>____________<br>
                                    <strong>( GM / CEO / Director )</strong>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function printDiv(divName) {
    const content = document.getElementById(divName).innerHTML;

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

    const style = `
        <style>
            @page {
                size: A4 portrait;
                margin: 10mm;
            }

            html, body {
                margin: 0 !important;
                padding: 0 !important;
                width: 210mm !important;
                height: auto !important;
                background: #ffffff !important;
                color: #000000 !important;
                font-size: 14px !important;
                overflow: hidden !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            * {
                background: transparent !important;
                color: #000000 !important;
                box-shadow: none !important;
                border-color: #000000 !important;
            }

            img {
                max-width: 100% !important;
                height: auto !important;
                page-break-inside: avoid !important;
                display: block !important;
            }

            div, table, tr, td, th, p {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
                break-after: avoid !important;
            }

            body > * {
                page-break-before: avoid !important;
            }

            /* Ensure header stays centered */
            .section-title {
                text-align: center !important;
                font-weight: bold !important;
                text-decoration: underline !important;
                margin-bottom: 20px !important;
            }

            /* Underline labels should print correctly */
            .underline-label {
                text-decoration: underline !important;
            }

            .full-line {
                border-bottom: 1px solid #000 !important;
                display: inline-block !important;
                width: 100% !important;
            }

            .info-block {
                display: inline-block !important;
                margin-right: 30px !important;
            }

            /* Signatures: in one line */
            .signatures {
                display: flex !important;
                flex-direction: row !important;
                justify-content: space-between !important;
                align-items: flex-start !important;
                margin-top: 40px !important;
                gap: 10px;
            }

            .signature-box {
                width: 24% !important;
                text-align: center !important;
            }
        </style>
    `;

    printWindow.document.write('<html><head><title>Print</title>' + style + '</head><body>');
    printWindow.document.write('<div>' + content + '</div>');
    printWindow.document.write('</body></html>');

    printWindow.document.close();
    printWindow.focus();

    printWindow.onload = () => {
        printWindow.print();
        printWindow.close();
    };
}
</script>


@endsection