@extends('template.app')

@section('meta')
@endsection

@section('title')
    Gate Pass
@endsection

@section('styles')
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 20px;
        }
        .card-body{
            border: 1px solid #f8f8f8;
        }
        .container {
            width: 100%;
            max-width: 700px;
            margin: 0 auto;
            background-color: #ffeb99;
            padding: 20px;
            border: 2px solid #000;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .gp_logo {
            height: 80px;
            margin-right: 10px;
            background-color: #f8f8f8;
            border-radius: 12px;
        }
        h2 {
            margin: 0;
            font-size: 20px;
            font-weight: bold;
            text-transform: uppercase;
            border-bottom: 1px solid #f8f8f8;
            text-align: left;
        }
        h3{
            text-align: center;
        }
        p{
            text-align: left;
        }
        .section {
            margin-bottom: 15px;
        }
        .section label {
            font-weight: bold;
            display: inline-block;
            width: 150px;
        }
        .table {
            width: 97%!important;
            margin-left: 13px;
            border-collapse: collapse;
            margin-bottom: 15px;
        }
        .table th, .table td {
            border: 1px solid #f8f8f8;
            padding: 8px;
            text-align: center;
            font-size: 14px;
            color: #f8f8f8;
        }
        .sign-section {
            margin-top: 20px;
        }
        .sign-section label {
            display: inline-block;
            width: 150px;
            font-weight: bold;
        }
        .mr-50{
            margin-right: -50px;
        }
        .box{
            border: 1px solid;
        }
        .paddings{
            padding: 0px 25px 0px 25px;
        }
        .blank_height{
            height: 35px!important;
        }
        .customer-info-row {
            margin-top: 8px; 
            display: flex;
            flex-direction: row;
        }
        
        .customer-info-text {
            margin: 0;
            margin-left: 10px;
        }
        
        .customer-info-label {
            margin-right: 10px;
            font-weight: bold;
            color: #fff;
            font-size: 18px;
        }
        
        .customer-info-value {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            text-align: right;
        }
        .document-info-row {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        
        .document-info-column {
            width: 48%;
            text-align: left;
        }
        
        .document-label {
            font-weight: bold;
            font-size: 16px;
            color: #fff;
        }
        
        .signature-row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 30px;
            gap: 20px;
        }
        
        .signature-label {
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            white-space: nowrap;
        }

    </style>
@endsection

@section('content')
<script>
    const watermarkImageURL = "{{ asset('uploads/global_configuration/gatepass_logo_one/' . ($images->gatepass_logo1 ?? '')) }}";
</script>
<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">Gate Pass</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <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('order') }}" class="text-muted">Order</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Gate Pass</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body" id="print">
                    <div class="row mt-1">
                        <div class="col-sm-6"> 
                            @php
                                $logo_1 = $images->gatepass_logo1 ?? '';
                                $logo_2 = $images->gatepass_logo2 ?? '';
                            @endphp
                            <div>
                                <img class="gp_logo" src="{{ asset('uploads/global_configuration/gatepass_logo_one/' . $logo_1) }}" alt="Kia Logo">
                                <img class="gp_logo" src="{{ asset('uploads/global_configuration/gatepass_logo_two/' . $logo_2) }}" alt="IB Logo">
                            </div>
                        </div>
                        <div class="col-sm-6">    
                            <h2 style="margin: 0;font-size: 20px;font-weight: bold;text-transform: uppercase;border-bottom: 1px solid #f8f8f8;text-align: left;">{!! $branch->name !!}</h2>
                            <p>{!! $branch->address !!}</p>
                        </div>
                    </div>

                    <div class="row mt-5">
                        <div class="col-sm-4">
                            <h3 class="h3-stock" style="display: inline-block; border-bottom: 2px solid #f8f8f8;">Gate Pass</h3>
                        </div>
                        <div class="col-sm-4"></div>
                        <div class="col-sm-4"></div>
                    </div>
                    
                    @php
                        $currentDate = date('d-m-Y');

                        $currentTime = date('h:i A')
                    @endphp

                    <div class="row mt-2">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-3"></div>
                        <div class="col-sm-6 text-right-1">
                            <div class="section">
                                <label class="mr-50">Date:</label><label style="border-bottom: 1px solid white!important;">{!! $currentDate !!}</label>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-3"></div>
                        <div class="col-sm-6 text-right-1">
                            <div class="section">
                                <label  class="mr-50">Time:</label><label style="border-bottom: 1px solid white!important;">{!! $currentTime !!}</label>
                            </div>
                        </div>
                    </div>

                    <div class="customer-info-row">
                        <p class="customer-info-text">
                            <strong class="customer-info-label">Name Of The Customer:</strong>
                            <span class="customer-info-value">{!! $obf_data->customer_name !!}</span>
                        </p>
                    </div>

                    <br>
                    <div class="row mt-2">
                        <div class="col-sm-12 paddings">
                            <div class="box custom_box_height">
                                <h3 class="print_css" style="margin-bottom: 0px!important">MODEL & OTHER DETAILS</h3>
                            </div>
                        </div>
                    </div>
                
                    <table class="table mt-3">
                        <thead>
                            <tr>
                                <th>MODEL</th>
                                <th>COLOUR</th>
                                <th>VARIANT</th>
                                <th>EMISSION NORMS</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{!! $product_data->car_name !!}</td>
                                <td>{!! $color_name !!}</td>
                                <td>{!! $product_data->varient_name !!}</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                
                    <table class="table ">
                        <thead>
                            <tr>
                                <th>CHASSIS NO.</th>
                                <th>ENGINE NO.</th>
                                <th>KEY NO.</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{!! $inventory->vin_number !!}</td>
                                <td>{!! $inventory->engine_number !!}</td>
                                <td>{!! $inventory->key_number !!}</td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <table class="table ">
                        <thead>
                            <tr>
                                <th>Team Leader</th>
                                <th>KEC</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{!! $salesPersonData->team_leader_name ?? null !!}</td>
                                <td>{!! $salesPersonData->sales_person_name ?? null !!}</td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="document-info-row">
                        <div class="document-info-column">
                            <label class="document-label">R.C. Book No: _______________________YES/NO</label>
                        </div>
                        <div class="document-info-column">
                            <label class="document-label">Insurance Copy No: _____________________YES/NO</label>
                        </div>
                    </div>
                    <br>
                    <div class="section mt-5 text-left">
                        <label>Standard Kit:</label> 
                        <input type="checkbox" class="ml-5"> Tool Kit 
                        <input type="checkbox" class="ml-5"> Health Kit 
                        <input type="checkbox" class="ml-5"> Spare Bulb 
                        <input type="checkbox" class="ml-5"> Hazard Triangle
                    </div>
                
                    <div class="row">
                        <div class="col-sm-6 text-left">
                            <label>Received Vehicle In Good Condition:</label>
                        </div>
                        <div class="col-sm-3"></div>
                        <div class="col-sm-3"></div>
                    </div>
                    
                    <div class="signature-row text-left">
                        <label class="signature-label">Customer Signature: _________________________</label>
                        <label class="signature-label">Delivered By (KEC): _____________________</label>
                    </div>
                    
                    <div class="signature-row text-left">
                        <label class="signature-label">Customer Name: _________________________</label>
                        <label class="signature-label">KEC Sign: _____________________</label>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-sm-6 text-left">
                            <label>Vehicle Permitted to Leave Dealership:</label>
                        </div>
                        <div class="col-sm-3"></div>
                        <div class="col-sm-3"></div>
                    </div>

                    <!--<table class="table mt-4">-->
                    <!--    <thead>-->
                    <!--        <tr>-->
                    <!--            <th colspan="3">DRIVER DETAILS</th>-->
                    <!--        </tr>-->
                    <!--        <tr>-->
                    <!--            <th>Name</th>-->
                    <!--            <th>Licence No.</th>-->
                    <!--            <th>Pan No.</th>-->
                    <!--        </tr>-->
                    <!--    </thead>-->
                    <!--    <tbody>-->
                    <!--        <tr class="blank_height">-->
                    <!--            <td></td>-->
                    <!--            <td></td>-->
                    <!--            <td></td>-->
                    <!--        </tr>-->
                    <!--    </tbody>-->
                    <!--</table>-->
                
                    <div class="row mt-5 signature-line">
                        <div class="col-sm-4 text-left">
                            <label>Signature SM / GM:__________________</label>
                        </div>
                        <div class="col-sm-4">
                            <label>Account Manager:__________________</label>
                        </div>
                        <div class="col-sm-4">
                            <label>Authorised Sign:________________</label>
                        </div>
                    </div>
                    <div class="form-group mt-5 print-btn">
                        <span onclick="printDiv('#print')" class="btn waves-effect waves-light btn-rounded btn-outline-primary">Print</span>
                        <a href="{{ route('order') }}"><button class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Back</button></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function printDiv(elem) {
    $('.print-btn').hide();

    const watermarkImageURL = "{{ asset('uploads/global_configuration/gatepass_logo_one/' . ($images->gatepass_logo1 ?? '')) }}";
    renderMe($('<div/>').append($(elem).clone()).html(), watermarkImageURL);

    setTimeout(() => {
        $('.print-btn').show();
    }, 1000);
}

function renderMe(data, watermarkURL) {
    const mywindow = window.open('', 'Gate Pass', 'height=1000,width=1000');

    mywindow.document.write(`
        <html>
        <head>
            <title>Gate Pass</title>
            <style>
                body {
                    font-family: Arial, sans-serif !important;
                    background-color: #ffffff !important;
                    margin: 0 !important;
                    padding: 20px !important;
                    color: black !important;
                }

                /* Watermark styles */
                .watermark {
                    position: fixed;
                    width: 250px; /* Increased watermark size */
                    opacity: 0.06;
                    z-index: 0;
                    pointer-events: none;
                }

                /* Adjusted the position for four watermarks */
                .wm1 { top: 15%; left: 5%; }  /* Moved down from 5% to 15% */
                .wm2 { top: 30%; left: 25%; }
                .wm3 { top: 50%; left: 45%; }
                .wm4 { top: 70%; left: 65%; }

                .text-right-1 { text-align: right !important; }

                .card-body {
                    border: 1px solid #000000 !important;
                    background-color: #ffffff !important;
                    padding: 30px !important;
                }

                .h3-stock {
                    display: inline-block;
                    border-bottom: 2px solid #000000;
                    text-align: center !important;
                }

                .container {
                    width: 100% !important;
                    max-width: 800px !important;
                    margin: 0 auto !important;
                    background-color: #ffffff !important;
                    padding: 20px !important;
                    border: 2px solid #000000 !important;
                }

                img {
                    height: 60px !important;
                    margin-right: 10px !important;
                    border-radius: 10px !important;
                    background-color: #ffffff !important;
                }

                h2 {
                    margin: 0;
                    font-size: 20px;
                    font-weight: bold;
                    text-transform: uppercase;
                    border-bottom: 1px solid #000000 !important;
                    text-align: right !important;
                }

                h3 {
                    text-align: center !important;
                    padding-bottom: 5px !important;
                    color: #000000 !important;
                }

                p {
                    text-align: right !important;
                    font-size: 14px !important;
                    color: #000000 !important;
                }

                .customer-info-row {
                    margin-top: 8px;
                    display: flex;
                    flex-direction: row;
                }

                .customer-info-text {
                    margin: 0;
                    margin-left: 10px;
                }

                .customer-info-label {
                    margin-right: 10px;
                    font-weight: normal;
                    color: #000;
                    font-size: 18px;
                }

                .customer-info-value {
                    font-size: 18px;
                    font-weight: normal;
                    color: #000;
                    text-align: right;
                }

                .document-info-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10px;
                    flex-wrap: nowrap;
                    gap: 20px;
                }

                .document-label {
                    font-weight: normal;
                    font-size: 16px;
                    color: #000;
                    white-space: nowrap;
                }

                .signature-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 30px;
                    gap: 20px;
                }

                .signature-label {
                    font-size: 16px;
                    font-weight: normal;
                    color: #000;
                    white-space: nowrap;
                }

                .section {
                    margin-bottom: 15px !important;
                }

                .section label {
                    font-weight: normal !important;
                    display: inline-block !important;
                    width: 150px !important;
                    color: #000000 !important;
                    margin-left: 15px;
                }

                .table {
                    width: 100% !important;
                    border-collapse: collapse !important;
                    margin-bottom: 15px !important;
                    background-color: transparent !important;
                }

                .table th, .table td {
                    border: 1px solid #000000 !important;
                    padding: 10px !important;
                    text-align: center !important;
                    font-size: 14px !important;
                    color: #000000 !important;
                }

                .sign-section {
                    margin-top: 20px !important;
                }

                .sign-section label {
                    display: inline-block !important;
                    width: 200px !important;
                    font-weight: bold !important;
                    color: #000000 !important;
                }

                .signature-line {
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    margin-top: 45px;
                }

                .mt-4, .my-4 {
                    margin-top: 1.5rem !important;
                }

                .signature-line label {
                    color: #000 !important;
                    font-size: 16px;
                }

                .box {
                    border: 1px solid #000000 !important;
                    padding: 10px !important;
                    text-align: center !important;
                    font-weight: bold !important;
                    color: #000000 !important;
                }

                input[type="checkbox"] {
                    accent-color: black !important;
                    width: 16px !important;
                    height: 16px !important;
                    vertical-align: middle !important;
                    margin-right: 5px !important;
                }

                .print-btn {
                    text-align: center !important;
                    margin-top: 20px !important;
                }

                .print-btn .btn {
                    padding: 8px 20px !important;
                    font-size: 16px !important;
                    font-weight: bold !important;
                    color: #000000 !important;
                    background-color: #ffffff !important;
                    border: 1px solid black !important;
                    border-radius: 5px !important;
                    cursor: pointer !important;
                }

                .paddings { margin-bottom: 15px; }
                .blank_height { height: 35px !important; }
                .custom_box_height { height: 15px !important; }
                .print_css { margin-top: -4px !important; }

                @media print {
                    * {
                        -webkit-print-color-adjust: exact !important;
                        print-color-adjust: exact !important;
                    }

                    .watermark {
                        display: block !important;
                    }

                    .print-btn {
                        display: none !important;
                    }

                    body, .container, .card-body {
                        background-color: #ffffff !important;
                        color: #000000 !important;
                    }

                    .table th, .table td {
                        border: 1px solid #000000 !important;
                        color: #000000 !important;
                        background-color: transparent !important;
                    }
                }
            </style>
        </head>
        <body>
            <img src="${watermarkURL}" class="watermark wm1">
            <img src="${watermarkURL}" class="watermark wm2">
            <img src="${watermarkURL}" class="watermark wm3">
            <img src="${watermarkURL}" class="watermark wm4">

            ${data}
        </body>
        </html>
    `);

    mywindow.document.close();
    mywindow.focus();

    setTimeout(() => {
        mywindow.print();
        mywindow.close();
    }, 500);
}

</script>

@endsection