@extends('template.app') 

@section('meta')
@endsection

@section('title')
Obf View
@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;
    }*/

    .uploaded_images{
                border:1px solid white;
                border-style: dashed;
                margin-bottom: 20px;
                border-radius: 5px;
            }
    .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);
    }
    
    .modal {
        position: fixed!important;
        z-index: 1!important;
        padding-top: 100px!important;
        left: 0!important;
        top: 0!important;
        width: 100%!important;
        height: 100%!important;
        overflow: auto!important;
        background-color: #00000091!important;
    }
   
   .modal-content {
        position: relative!important;
        background-color: #fefefe!important;
        margin: auto!important;
        padding: 0!important;
        width: 1300px!important;
        max-width: 1300px!important;
        margin-left: -50px!important;
    }
    
    .btn-outline-primary {
        color: #ffffff!important;
        border-color: #ffffff!important;
    } 
    
    #makeDealModal table {
        color: black;
    }
    
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield; /* For Firefox */
    }
    
    .right-align{
        text-align:right!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">OBF View</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">View</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
                <button class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" onclick="openMakeDealModal('this')">Make Deal Details</button>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="stepwizard col-md-offset-3">
                        <div class="stepwizard-row setup-panel">
                            <div class="stepwizard-step">
                                <a href="#step-1" type="button" class="btn btn-primary btn-circle text-white">1</a>
                                <p>Personal Details</p>
                            </div>
                            <div class="stepwizard-step">
                                <a href="#step-2" type="button" class="btn btn-default btn-circle text-white" disabled="disabled">2</a>
                                <p>Car Details</p>
                            </div>
                             @canany(['Process FastTag'])
                             <div class="stepwizard-step">
                                <a href="#step-3" id="thrid_new" type="button" class="btn btn-default btn-circle text-white" disabled="disabled">3</a>
                                <p>FastTag Details</p>
                            </div>
                            @endcanany  
                        </div>
                    </div>
                    <form method="POST" action="{{ route('obf.processfasttagdms') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" value="{{ $data->id }}" >
                        <div class="row setup-content" id="step-1">
                            <div class="col-lg-12 ">
                                <div class="col-md-12">
                                    <h3> Personal Details</h3>
                                    <div class="row">
                                        
                                        <div class="form-group col-md-3">
                                            <label class="control-label">Booking Date</label>
                                            <input type="date" id="booking_date" class="form-control" value="{{ $data->booking_date ?? '' }}" disabled>
                                            <span class="kt-form__help error booking_date"></span>
                                        </div>
                                        
                                        <div class="form-group col-md-3">
                                            <label class="control-label">Customer Name</label>
                                            <input type="text"  id="customer_name" class="form-control" placeholder="Enter Customer Name" value="{{ $data->customer_name ?? '' }}" disabled>
                                            <span class="kt-form__help error customer_name"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Branch</label>
                                            <select 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>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">RTO Type</label>
                                            <select  name="customer_type" id="customer_type" class="form-control" placeholder="Enter RTO Type" disabled>
                                                <option value="regular_rto" @if($data->rto_type == 'regular_rto') selected @endif>Regular RTO</option>
                                                <option value="handicap" @if($data->rto_type == 'handicap') selected @endif>Handicap</option>
                                                <option value="taxi" @if($data->rto_type == 'taxi') selected @endif>M-Drive(Taxi)</option>
                                                <option value="electric" @if($data->rto_type == 'electric') selected @endif>Electric</option>
                                                <option value="crtem" @if($data->rto_type == 'crtem') selected @endif>Crtem</option>
                                                <option value="bh_parsing" @if($data->rto_type == 'bh_parsing') selected @endif>BH Parsing</option>
                                            </select>
                                            <span class="kt-form__help error customer_type"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Customer Type</label>
                                            <select id="customer_type_new" class="form-control" disabled>
                                             <option value="">Please Customer Type</option>
                                                @if(isset($CustomerTypeMaster) && $CustomerTypeMaster->isNotEmpty())
                                                    @foreach($CustomerTypeMaster AS $row)
                                                        <option value="{{ $row->id }}" @if($data->customer_type_new == $row->id) selected @endif>{{ $row->name ??'' }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            <span class="kt-form__help error customer_type_new"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Company Name</label>
                                            <input type="text"  id="company_name" class="form-control" placeholder="Enter Company Name" value="{{ $data->company_name ?? '' }}" disabled>
                                            <span class="kt-form__help error company_name"></span>
                                        </div>
                                       
                                        <div class="form-group col-md-3">
                                            <!-- <label class="control-label">EInvoicing Applicable</label> -->
                                            <label class="control-label">e-Invoice Applicable</label>
                                            <select id="einvoapp" class="form-control" disabled>
                                                 <option value="{{ $data->einvoicing_applicable }}">{{ $data->einvoicing_applicable ?? '' }}</option>
                                            </select>
                                            <span class="kt-form__help error einvoapp"></span>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label class="control-label">GST</label>
                                            <input type="text"  id="gst" class="form-control" placeholder="Enter GSTIN" value="{{ $data->gst ?? '' }}" disabled>
                                            <span class="kt-form__help error gst"></span>
                                        </div>
                                        
                                        <div class="form-group col-md-3">
                                            <label class="control-label mt-3">Address Correspondence</label>
                                            <textarea  id="address_1" class="form-control" placeholder="Enter Address Correspondence" disabled>{{ $data->address ?? '' }}</textarea>
                                            <span class="kt-form__help error address_1"></span>
                                        </div>
                                        
                                        <div class="form-group col-md-3">
                                            <label class="control-label">Registration Correspondence</label>
                                            <span class="btn btn-outline-secondary ml-5 mb-2">&nbsp;&nbsp;&nbsp;<input id="chek_address" type="checkbox" class="form-check-input mr-0" value=""><b>Same AS Above</b></span>
                                            <textarea  id="address_2" class="form-control" placeholder="Enter Registration Correspondence" disabled>{{ $data->registration ?? '' }}</textarea>
                                            <span class="kt-form__help error address_2"></span>
                                        </div>

                                        

                                        <div class="form-group col-md-3">
                                            <!-- <label class="control-label">Email</label> -->
                                            <label class="control-label">e-Mail</label>
                                            <input type="email"  id="email" class="form-control" placeholder="Enter Email Address" value="{{ $data->email ?? '' }}" disabled>
                                            <span class="kt-form__help error email"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Mobile Number</label>
                                            <input type="number"  id="contact_number" class="form-control" placeholder="Enter Mobile Number" value="{{ $data->contact_number ?? '' }}" disabled>
                                            <span class="kt-form__help error contact_number"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">PAN No.</label>
                                            <input type="pannumber"  id="pan_number" class="form-control" placeholder="Enter PAN Number" value="{{ $data->pan_number ?? '' }}" disabled>
                                            <span class="kt-form__help error pan_number"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Aadhar No.</label>
                                            <input type="number"  id="aadhar_number" class="form-control" placeholder="Enter Aadhar Number" value="{{ $data->adhar_number ?? '' }}" disabled>
                                            <span class="kt-form__help error aadhar_number"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">License No.</label>
                                            <input type="text"  id="license_number" class="form-control" placeholder="Enter License Number" value="{{ $data->licance_number ?? '' }}" disabled>
                                            <span class="kt-form__help error license_number"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Date of Birth</label>
                                            <input type="date"  id="dob" class="form-control" value="{{ $data->dob ?? '' }}" disabled>
                                            <span class="kt-form__help error dob"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Nominee Name</label>
                                            <input type="text"  id="nominee_name" class="form-control" placeholder="Enter Nominee Name" value="{{ $data->nominee_name ?? '' }}" disabled>
                                            <span class="kt-form__help error nominee_name"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Nominee Relation</label>
                                            <input type="text"  id="nominee_relation" class="form-control" placeholder="Enter Nominee Relation" value="{{ $data->nominee_reletion ?? ''}}" disabled>
                                            <span class="kt-form__help error nominee_relation"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Nominee Age</label>
                                            <input type="number"  id="nominee_age" class="form-control" placeholder="Enter Nominee Age" value="{{ $data->nominee_age ?? '' }}" disabled>
                                            <span class="kt-form__help error nominee_age"></span>
                                        </div>

                                        <div class="form-group col-md-3">
                                            <label class="control-label">Occupation</label>
                                            <input type="text"  id="occupation" class="form-control" placeholder="Enter Occupation" value="{{ $data->occupation ?? '' }}" disabled>
                                            <span class="kt-form__help error occupation"></span>
                                        </div>
                                        
                                        <div class="form-group col-md-3">
                                            <div class="row">
                                                <div class="form-group col-md-12">
                                                     <p>Upload PAN</p>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <div id="pan_image_multi">
                                                                                                        </div>
                                                </div>
                                            </div>                                           
                                        </div>
                                        
                                        <div id="myModal" class="modal">
                                          <span class="close cursor" onclick="closeModal()">&times;</span>
                                          <div class="modal-content">
                                             <img class="image_set" src="" style="width:100%;height:470px;">
                                          </div>
                                        </div>    
                                        
                                        <div class="form-group col-md-3">
                                            <div class="row">
                                                <div class="form-group col-md-12">
                                                     <p>Upload Aadhar</p>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <div id="adhar_image_multi">
                                                                                                        </div>
                                                </div>
                                            </div>                                           
                                        </div>

                                        <div class="form-group col-md-3">
                                            <div class="row">
                                                <div class="form-group col-md-12">
                                                     <p>Upload Voter ID</p>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <div id="licance_image_multi">
                                                                                                        </div>
                                                </div>
                                            </div>                                           
                                        </div>

                                        <div class="form-group col-md-3">
                                            <div class="row">
                                                <div class="form-group col-md-12">
                                                     <p>Upload Other Documents</p>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <div id="galeria">
                                                                                                        </div>
                                                </div>
                                            </div>                                           
                                        </div>
                                    </div>
                                    <a href="{{ route('obf') }}"><button class="btn btn-outline-secondary btn-lg pull-right" type="button">Back</button></a>
                                    <button class=" btn waves-effect waves-light btn-rounded btn-outline-primary nextBtn btn-lg pull-right" type="button">Next</button>
                                </div>
                            </div>
                        </div>
                        <div class="row setup-content" id="step-2">
                            <div class="col-lg-12 ">
                                <div class="col-md-12">
                                    <h3> Car Details</h3>
                                    <div class="row">
                                        <div class="form-group col-md-3">
                                            <label class="control-label">Sales Person Name</label>
                                            <select id="sales_person_name" class="form-control" disabled>