@extends('template.app') 

@section('meta')

@endsection

@section('title')

Obf Summary

@endsection

@section('styles')

<link href="{{ asset('assets/css/dropify.min.css') }}" rel="stylesheet">

<link href="{{ asset('assets/css/sweetalert2.bundle.css') }}" rel="stylesheet">

<link href="{{ asset('assets/css/select2.css') }}" rel="stylesheet">

<style type="text/css">

   /*#galeria{

   display: flex;

   }*/

   #galeria img{

   width: 85px;

   height: 85px;

   border-radius: 10px;

   box-shadow: 0 0 8px rgba(0,0,0,0.2);

   opacity: 85%;

   padding: 3px;

   }

   /* #pan_image_multi{

   display: flex;

   }*/

   #pan_image_multi img{

   width: 85px;

   height: 85px;

   border-radius: 10px;

   box-shadow: 0 0 8px rgba(0,0,0,0.2);

   opacity: 85%;

   padding: 3px;

   }

   /*#adhar_image_multi{

   display: flex;

   }*/

   #adhar_image_multi img{

   width: 85px;

   height: 85px;

   border-radius: 10px;

   box-shadow: 0 0 8px rgba(0,0,0,0.2);

   opacity: 85%;

   padding: 3px;

   }

   /*#documents_multi{

   display: flex;

   }*/

   #documents_multi img{

   width: 85px;

   height: 85px;

   border-radius: 10px;

   box-shadow: 0 0 8px rgba(0,0,0,0.2);

   opacity: 85%;

   padding: 3px;

   }

   /*#licance_image_multi{

   display: flex;

   }*/

   #licance_image_multi img{

   width: 85px;

   height: 85px;

   border-radius: 10px;

   box-shadow: 0 0 8px rgba(0,0,0,0.2);

   opacity: 85%;

   padding: 3px;

   }

   .row > .column {

   padding: 0 8px;

   }

   .row:after {

   content: "";

   display: table;

   clear: both;

   }

   /* Create four equal columns that floats next to eachother */

   .column {

   float: left;

   width: 25%;

   }

   /* The Modal (background) */

   .modal {

   display: none;

   position: fixed;

   z-index: 1;

   padding-top: 100px;

   left: 0;

   top: 0;

   width: 100%;

   height: 100%;

   overflow: auto;

   background-color: black;

   }

   /* Modal Content */

   .modal-content {

   position: relative;

   background-color: #fefefe;

   margin: auto;

   padding: 0;

   width: 100%;

   max-width: 700px;

   }

   /* The Close Button */

   .close {

   color: white;

   position: absolute;

   top: 10px;

   right: 25px;

   font-size: 35px;

   font-weight: bold;

   }

   .close:hover,

   .close:focus {

   color: #999;

   text-decoration: none;

   cursor: pointer;

   }

   /* Hide the slides by default */

   .mySlides {

   display: none;

   }

   /* Next & previous buttons */

   .prev,

   .next {

   cursor: pointer;

   position: absolute;

   top: 50%;

   width: auto;

   padding: 16px;

   margin-top: -50px;

   color: white;

   font-weight: bold;

   font-size: 20px;

   transition: 0.6s ease;

   border-radius: 0 3px 3px 0;

   user-select: none;

   -webkit-user-select: none;

   }

   /* Position the "next button" to the right */

   .next {

   right: 0;

   border-radius: 3px 0 0 3px;

   }

   /* On hover, add a black background color with a little bit see-through */

   .prev:hover,

   .next:hover {

   background-color: rgba(0, 0, 0, 0.8);

   }

   /* Number text (1/3 etc) */

   .numbertext {

   color: #f2f2f2;

   font-size: 12px;

   padding: 8px 12px;

   position: absolute;

   top: 0;

   }

   /* Caption text */

   .caption-container {

   text-align: center;

   background-color: black;

   padding: 2px 16px;

   color: white;

   }

   img.demo {

   opacity: 0.6;

   }

   .active,

   .demo:hover {

   opacity: 1;

   }

   /*img.hover-shadow {

   transition: 0.3s;

   height: 100px;

   width: 100px;

   }*/

   .hover-shadow:hover {

   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

   }

</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">OBF Summary</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('obf') }}" class="text-muted">OBF</a></li>

                  <li class="breadcrumb-item text-muted active" aria-current="page">Summary</li>

               </ol>
                 <button onclick="printDiv('content-to-print')">Print Content</button>
            </nav>

         </div>

      </div>

      <div class="col-5 align-self-center">

         <div class="customize-input float-right">

         </div>

      </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">

            <div class="col-md-offset-3">

               <form role="form"  enctype="multipart/form-data">

                  <input type="hidden" name="id" value="{{ $data->id }}" >

                  <div class="row">

                     <div class="col-lg-12 ">

                        <div class="col-md-12">

                           <h3> Car Receipt Details</h3>

                           <hr style="border:1px solid grey;">

                           <!--<div class="row">-->

                           <table style="width:100%;">

                              <tbody>

                                 <tr>

                                    <td> 

                                       <label class="control-label"><b>Booking Date</b></label>

                                    </td>

                                    <td> : </td>

                                    <td> 

                                       <span class="form-label">{{ $data->booking_date ?? 'N/A' }}</span>

                                    </td>

                                    <div class="vl"></div>

                                    <td> 

                                       <label class="control-label"><b>Customer Name</b></label>

                                    </td>

                                    <td> : </td>

                                    <td>

                                       <span class="form-label">{{ $data->customer_name ?? 'N/A' }}</span>

                                    </td>

                                    <!-- <input type="text"  name="customer_name" id="customer_name" class="form-control" placeholder="Enter Customer Name" value="{{ $data->customer_name ?? '' }}" disabled>

                                       <span class="kt-form__help error customer_name"></span> -->

                                 </tr>

                                 <tr>

                                    <td>

                                       <label class="control-label"><b>Branch</b></label>

                                    </td>

                                    <td> : </td>

                                    <td>

                                       <span class="form-label">{{ $data->branch_name ?? 'N/A' }}</span>

                                       <!-- <select name="branch" id="branch" class="form-control" disabled>

                                          <option value="">Select Branch</option>

                                          @if(isset($branch) && $branch->isNotEmpty())

                                              @foreach($branch AS $branch)

                                                  <option value="{{ $branch->id }}" @if($data->branch_id == $branch->id) selected @endif >{{ $branch->name }}</option>

                                              @endforeach

                                          @endif

                                          </select>

                                          <span class="kt-form__help error branch"></span> -->

                                    </td>

                                    <td>

                                       <label class="control-label"><b>Team Leader </b></label>

                                    </td>

                                    <td> : </td>

                                    <td>

                                       <span class="form-label">{{ $data->sales_person_name ?? 'N/A' }}</span>

                                    </td>

                                 </tr>

                                 <tr>

                                    <td>

                                       <label class="control-label"><b>KEC Name</b></label>

                                    </td>

                                    <td> : </td>

                                    <td>

                                       <span class="form-label">{{ $data->kec_name ?? 'N/A' }}</span>

                                    </td>
                                    <td>

                                       <label class="control-label"><b>Model</b></label>

                                    </td>

                                    <td> : </td>

                                    <td>

                                       <span class="form-label">{{ $data->car_model_name ?? 'N/A' }}</span>

                                    </td>
                                 </tr>
                                 <tr>
                                    <td>

                                       <label for="veriant"><b>Car Variant</b></label>

                                    </td>

                                    <td> : </td>

                                    <td>

                                       <span class="form-label">{{ $data->car_varient_name ?? 'N/A' }}</span>

                                    </td>
                                    <td>

                                       <label for="exterior_color"><b>Exterior Color</b></label>

                                    </td>

                                    <td> : </td>

                                    <td>

                                       <span class="form-label">{{ $data->exteriorcolor_name ?? 'N/A' }}</span>

                                    </td>
                                 </tr>
                                <tr>
                                    <td>

                                       <label class="control-label"><b>On Road Price</b></label>

                                    </td>

                                    <td> : </td>

                                    <td>

                                       <span class="form-label">{{ $data->on_road_price ?? 'N/A' }}</span>

                                    </td>
                                    <td>

                                       <label class="control-label"><b>Booking Amount</b></label>

                                    </td>

                                    <td> : </td>

                                    <td>

                                       <span class="form-label">{{ $data->booking_amount ?? 'N/A' }}</span>

                                    </td>
                                </tr>
                              </tbody>

                           </table>

                           <!--</div>-->

                        </div>

                     </div>

                  </div>

                              </tbody>

                           </table>

                           <!--</div>-->

                        </div>

                     </div>

                  </div>



               </form>



            </div>

         </div>

      </div>

   </div>

</div>

</div>

<script>
    function printDiv(divId) 
    {
    // Get the content of the div
    var content = document.getElementById(divId).innerHTML;
// Open a new window
    var printWindow = window.open('', '', 'height=600,width=800');

    // Write the content to the new window
    printWindow.document.write('<html><head><title>Print Content</title>');
    // Add styles if needed
    printWindow.document.write('<style>body{font-family: Arial, sans-serif;} h1 { color: blue; }</style>');
    printWindow.document.write('</head><body>');
    printWindow.document.write(content);
    printWindow.document.write('</body></html>');

    // Close the document to ensure styles are applied
    printWindow.document.close();

    // Wait for the content to load before printing
    printWindow.onload = function() {
        printWindow.print();
        printWindow.close();
    };
    }
</script>

@endsection