@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;
            max-width: 150px;
            object-fit: contain;
            background: #f8f8f8;
            border-radius: 12px;
            padding: 5px;
        }

        .h3-stock {
            color: #000;
            font-size: 22px;
            text-transform: uppercase;
        }

        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: #000000;
            font-size: 18px;
        }

        .customer-info-value {
            font-size: 18px;
            font-weight: bold;
            color: #000000;
            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;
        }

        .underline-data {
            text-decoration: underline;
        }
    </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">Common 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 align-items-center">

                            @php
                                $logo_1 = $images->gatepass_logo2 ?? '';
                                $logo_2 = $images->gatepass_logo1 ?? '';
                            @endphp

                            <!-- Left Logo -->
                            <div class="col-sm-3" style="text-align:left;">
                                <img class="gp_logo"
                                    src="{{ asset('uploads/global_configuration/gatepass_logo_one/' . $logo_1) }}"
                                    alt="Mahindra Logo">
                            </div>

                            <!-- Center Title -->
                            <div class="col-sm-6" style="text-align:center;">
                                <h3 class="h3-stock">
                                    Common Gate Pass{{ !empty($gate_pass_title) ? ' - ' . $gate_pass_title : '' }}
                                </h3>
                            </div>

                            <!-- Right Logo -->
                            <div class="col-sm-3" style="text-align:right;">
                                <img class="gp_logo"
                                    src="{{ asset('uploads/global_configuration/gatepass_logo_two/' . $logo_2) }}"
                                    alt="IB Logo">
                            </div>

                        </div>

                        <!-- DATE & TIME -->
                        @php
                            $currentDate = date('d-m-Y');
                            $currentTime = date('h:i A');
                        @endphp

                        <div class="row mt-2" style="text-align:center;">
                            <div class="col-sm-12 text-end">
                                <strong>Date:</strong> {{ $currentDate }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <strong>Time:</strong> {{ $currentTime }}
                            </div>
                        </div>

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

                        <br>
                        <div class="row mt-1">
                            <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="document-info-row">
                            <div class="document-info-column">
                                <label class="document-label">Vehicle No.: <span
                                        class="underline-data">{{ $obf_rto_data->vehicle_number ?? '' }}</span></label>
                            </div>
                            <div class="document-info-column">
                                <label class="document-label">Insurance Policy No.: <span
                                        class="underline-data">{{ $obf_insurance_data->policy_number ?? '' }}</span></label>
                            </div>
                        </div>
                        <br>

                        <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">Driver Signature: _________________________</label>
                            <label class="signature-label">Delivered By: _____________________</label>
                        </div>
                        <br>

                        <!--<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: #000000;
                        font-size: 18px;
                    }

                    .customer-info-value {
                        font-size: 18px;
                        font-weight: normal;
                        color: #000000;
                        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