@extends('template.app')

@section('meta')
@endsection

@section('title')
    Dealer 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: 154px;
        }
        .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;
        }
        .signature-row {
            display: flex !important;
            justify-content: space-between !important;
            margin-top: 40px !important;
            text-align: center !important;
        }
        
        .signature-row > div {
            flex: 1 !important;
            padding: 0 10px !important;
        }
        
        .signature-row > div div {
            border-top: 1px solid #fff !important;
            height: 2px !important;
            margin-bottom: 5px !important;
            width: 100%;
        }
        
        .signature-row label {
            display: block !important;
            font-size: 14px !important;
            color: #fff !important;
        }
        
        .customer-name-section {
            margin-bottom: 25px !important;
        }


    </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">Dealer 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">Dealer 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 = 'mahindra1.jpg'; 
                                $logo_2 = 'ib.png'; 
                            @endphp
                            <div>
                                <img class="gp_logo" src="{{ asset('uploads/global_configuration/gatepass_logo_one/' . $logo_1) }}" alt="Mahindra 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;">Dealer 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="row mt-2">
                        <div class="col-sm-12">
                            <div class="section">
                                
                            </div>
                        </div>
                    </div>
                
                    <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>
                
                    <div class="section mt-5 d-flex justify-content-start w-100 text-left">
                    <div class="d-flex align-items-center mr-5">
                        <label class="mr-2">Original Invoice:</label>
                        <label>________________</label>
                        <span class="ml-2">YES/NO</span>
                    </div>
                    <div class="d-flex align-items-center">
                        <label class="mr-2">Insurance Copy No:</label>
                        <label>________________</label>
                        <span class="ml-2">YES/NO</span>
                    </div>
                </div>


                    
                    <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"> First-Aid 
                        <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="row mt-5 signature-line text-left">
                        <div class="col-sm-6">
                            <label>Customer Signature:_________________________</label>
                        </div>
                        <div class="col-sm-6 text-left">
                            <label>Delivered By:_____________________</label>
                        </div>
                    </div>

                    <div class="row mt-5 signature-line text-left customer-name-section">
                        <div class="col-sm-6">
                            <label>Customer Name :_________________________</label>
                        </div>
                    </div>

                    
                    <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 signature-row text-left">
                        <div>
                            <div></div>
                            <label>Signature SM / GM</label>
                        </div>
                        <div>
                            <div></div>
                            <label>Signature Account</label>
                        </div>
                        <div>
                            <div></div>
                            <label>Authorised Signatory</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();

        renderMe($('<div/>').append($(elem).clone()).html());

         // Show the button after printing
        setTimeout(function () {
            $('.print-btn').show();
        }, 1000);
    }

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

    var watermarkURL = "{{ asset('uploads/global_configuration/gatepass_logo_one/' . ($images->gatepass_logo1 ?? '')) }}";

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

                    .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;
                    }
                    
                    .signature-row {
                        display: flex !important;
                        justify-content: space-between !important;
                        margin-top: 40px !important;
                        text-align: center !important;
                    }
                    
                    .signature-row > div {
                        flex: 1 !important;
                        padding: 0 10px !important;
                    }
                    
                    .signature-row > div div {
                        border-top: 1px solid #000 !important;
                        height: 2px !important;
                        margin-bottom: 5px !important;
                        width: 100%;
                    }
                    
                    .signature-row label {
                        display: block !important;
                        font-size: 14px !important;
                        color: #000000 !important;
                    }

                    .customer-name-section {
                        margin-bottom: 25px !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;
                    }

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

                    .section label {
                        font-weight: bold !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;
                    }

                    /* Watermark image style - slanted pattern */
                    .watermark {
                        position: fixed;
                        width: 220px; /* Increased size */
                        opacity: 0.06;
                        z-index: 0;
                        pointer-events: none;
                    }

                    .wm1 { top: 15%; left: 5%; }  
                    .wm2 { top: 30%; left: 25%; }
                    .wm3 { top: 50%; left: 45%; }
                    .wm4 { top: 70%; left: 65%; }

                    @media print {
                        * {
                            -webkit-print-color-adjust: exact !important;
                            print-color-adjust: exact !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;
                        }

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

                        .watermark {
                            display: block !important;
                        }
                    }
                </style>
            </head>
            <body>
                <!-- Slanted watermark images -->
                <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>
    `);

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



</script>
@endsection