@extends('template.app')

@section('meta')
@endsection

@section('title')
    Gate Pass - Transfer
@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);
        }
        img {
            height: 70px;
            width: 197px;
            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;
        }
        .mt-5, .my-5 {
            margin-top: 1rem !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">Transfers</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('transfer') }}" class="text-muted">Transfers</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">
                            <div>
                                <img src="{{ asset('uploads/global_configuration/gatepass_logo_one/' . $images->gatepass_logo1) }}" alt="Kia Logo">
                                <img src="{{ asset('uploads/global_configuration/gatepass_logo_two/' . $images->gatepass_logo2) }}" 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;">Shivam KIA</h2>
                            <p>{!! $data->from_branch !!} <br> {!! $data->from_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;">Stock Transfer</h3>
                        </div>
                        <div class="col-sm-4"></div>
                        <div class="col-sm-4"></div>
                    </div>

                    <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>_______________________
                            </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>_______________________
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-sm-12">
                            <div class="section">
                                <label>Dealership Name:</label> <span>{!! $data->to_branch !!}</span>
                            </div>
                        </div>
                    </div>
                
                    <div class="row mt-2">
                        <div class="col-sm-12 paddings">
                            <div class="box">
                                <h3 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>{!! $data->cm_name !!}</td>
                                <td>{!! $data->ext_name !!}</td>
                                <td>{!! $data->cv_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>{!! $data->vin_number !!}</td>
                                <td>{!! $data->engine_number !!}</td>
                                <td>{!! $data->key_number !!}</td>
                            </tr>
                        </tbody>
                    </table>
                
                    <div class="section mt-5 text-left">
                        <label>Standard Kit:</label> 
                        <input type="checkbox" class="ml-5" {{ $data->toolkit == 1 ? 'checked' : '' }}> Tool Kit 
                        <input type="checkbox" class="ml-5" {{ $data->medikit == 1 ? 'checked' : '' }}> Health Kit 
                        <input type="checkbox" class="ml-5" {{ $data->spare_bulb == 1 ? 'checked' : '' }}> Spare Bulb 
                        <input type="checkbox" class="ml-5" {{ $data->hazard_trinagle == 1 ? 'checked' : '' }}> 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">
                        <div class="col-sm-6">
                            <label>Driver Signature:_________________________</label>
                        </div>
                        <div class="col-sm-6">
                            <label>Delivered By:_____________________</label>
                        </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>
                                <td>{!! $data->driver_name !!}</td>
                                <td>{!! $data->lic !!}</td>
                                <td>{!! $data->pan !!}</td>
                            </tr>
                        </tbody>
                    </table>
                
                    <div class="row mt-5 signature-line">
                        <div class="col-sm-6">
                            <label>Signature SM / GM:___________________</label>
                        </div>
                        <div class="col-sm-6">
                            <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('transfer') }}"><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('', '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;
                        }
                        .text-right-1 {
                            text-align: right !important; /* Align content to the right */
                        }
                        .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: 70px;
                            width: 197px;
                            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; /* Prevents breaking into new lines */
                            margin-top: 65px;
                        }
                        .mt-4, .my-4 {
                            margin-top: 1.5rem !important;
                        }

                        .signature-line label {
                            color: #000 !important;
                            font-size: 16px;
                        }
                        
                        .mt-5, .my-5 {
                            margin-top: 1rem !important;
                        }
                        .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: 35px;
                        }
                        
                        @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;
                            }
                        }

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

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


</script>
@endsection