@extends('Web/layout')
@section('title','Vist Choose Visit Information')
@section('content')
<div class="pt-3">
    <div class="page-title d-flex">
        <div class="align-self-center">
            <a href="#" data-back-button class="me-3 ms-0 icon icon-xxs bg-theme rounded-s shadow-m">
            <i class="bi bi-chevron-left color-theme font-14"></i>
            </a>
        </div>
        <div class="align-self-center me-auto">
            <h1 class="color-theme mb-0 font-18">Visit Input <span class="color-highlight font-14"> (Add Client Information)</span></h1>
        </div>
        <div class="align-self-center ms-auto">
        
        </div>
    </div>
</div>
<div class="content">
    <p class="font-18 font-800 mt-4 mb-4" style="margin-bottom:0px;">Scheme Name: <span class="color-highlight" id="schemname_display" onclick="gotoScheme()"></span></p>
    
    
    <span class="font-16 font-800 text-danger" style="margin-bottom:10px;" id="errorMessage"></span>
    <form action="#" method="post" class="demo-animation needs-validation m-0" novalidate="">

        <div class="form-label mb-3" style="display:none;">
            <select id="scheme_name_select" class="js-states form-control">
                <option value="">Select Scheme Name</option>
                @if($scheme_list)
                    @foreach($scheme_list as $key => $value)
                        <option value="{{$value->id}}">{{$value->name}}</option>
                    @endforeach
                @endif
            </select>
        </div>
        <div class="form-custom form-label form-icon mb-3">
            <i class="bi bi-person-circle font-14"></i>
            <input type="text" class="form-control rounded-xs" id="client_full_name" placeholder="Client Full Name" pattern="[A-Za-z ]{1,32}" >
            <label for="c1" class="color-theme">Client Full Name</label>
        </div>
        <!-- <div class="form-custom form-label form-icon mb-3">
            <i class="bi bi-person-circle font-14"></i>
            <input type="text" class="form-control rounded-xs" id="client_last_name" placeholder="Client Last Name" pattern="[A-Za-z ]{1,32}" >
            <label for="c1" class="color-theme">Client Last Name</label>
        </div> -->
        <div class="form-custom form-label form-icon mb-3">
            <i class="bi bi-person-circle font-14"></i>
            <input type="text" class="form-control rounded-xs" id="father_name" placeholder="Father/Spouse Name" pattern="[A-Za-z ]{1,32}" >
            <label for="c1" class="color-theme">Father/Spouse Name</label>
        </div>
        <div class="form-custom form-label form-icon mb-3">
        <i class="bi bi-at font-16"></i>
        <input type="email" class="form-control rounded-xs" id="email_address" placeholder="Email Address" pattern="[A-Za-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" >
        <label for="c2" class="color-theme">Email Address</label>
        </div>
    
        <div class="form-custom form-label form-icon mb-3">
        <i class="bi bi-telephone-fill font-12"></i>
        <input type="tel" class="form-control rounded-xs" id="mobile_number" oninput='digitValidate(this)' placeholder="Phone Number" maxlength="10" pattern="[+ 0-9]{10,15}" >
        <label for="c3" class="color-theme">Phone Number</label>
        </div>
    
        <button class="btn btn-full bg-blue-dark rounded-xs text-uppercase font-700 w-100 btn-s mt-4" type="buttom" id="addVisitInformation">Next</button>
    </form>
</div>
<style>
.select2-container .select2-selection--single {
    height: 40px!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 40px!important;
}
</style>
 <!-- Select2 CSS -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
 <!-- jQuery -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <!-- Select2 -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

 <script>
    //   $("#scheme_name_select").select2({
    //       placeholder: "Select Scheme Name ",
    //       allowClear: true,
         
    //   });
 </script>
 <script>
     var visitInputInsertData = JSON.parse(localStorage.getItem('visitInputInsertData')); 
        if(visitInputInsertData == null){
            window.location.href = site_url;
        }else{
            $("#schemname_display").html(visitInputInsertData.scheme_name);
            $("#scheme_name_select").val(visitInputInsertData.scheme_id).change();
        }

        function changeSchemeName(sel)
        {
            
            var scheme_name = $( "#scheme_name_select option:selected" ).text();
            var visitInputInsertData = JSON.parse(localStorage.getItem('visitInputInsertData')); 
            visitInputInsertData.scheme_id = sel.value;
            visitInputInsertData.scheme_name = scheme_name;
            $("#schemname_display").html(scheme_name);
            localStorage.setItem('visitInputInsertData',JSON.stringify(visitInputInsertData));
        }

 </script>
@endsection