@extends('Web/layout')
@section('title','Daily Availability')
@section('content')
    <div class="pt-3">
        <div class="page-title d-flex">
            <div class="align-self-center">
            <!-- data-back-button -->
                <a href="{{route('visitnote.home')}}"  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">Daily Availability
                    
                </h1>
            </div>
            <div class="align-self-center ms-auto">
                <a href="{{route('visitnote.dailyAvailabilityPlotWiseData')}}" class="text-primary">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-nintendo-switch" viewBox="0 0 16 16">
                            <path d="M9.34 8.005c0-4.38.01-7.972.023-7.982C9.373.01 10.036 0 10.831 0c1.153 0 1.51.01 1.743.05 1.73.298 3.045 1.6 3.373 3.326.046.242.053.809.053 4.61 0 4.06.005 4.537-.123 4.976-.022.076-.048.15-.08.242a4.14 4.14 0 0 1-3.426 2.767c-.317.033-2.889.046-2.978.013-.05-.02-.053-.752-.053-7.979m4.675.269a1.62 1.62 0 0 0-1.113-1.034 1.61 1.61 0 0 0-1.938 1.073 1.9 1.9 0 0 0-.014.935 1.63 1.63 0 0 0 1.952 1.107c.51-.136.908-.504 1.11-1.028.11-.285.113-.742.003-1.053M3.71 3.317c-.208.04-.526.199-.695.348-.348.301-.52.729-.494 1.232.013.262.03.332.136.544.155.321.39.556.712.715.222.11.278.123.567.133.261.01.354 0 .53-.06.719-.242 1.153-.94 1.03-1.656-.142-.852-.95-1.422-1.786-1.256"/>
                            <path d="M3.425.053a4.14 4.14 0 0 0-3.28 3.015C0 3.628-.01 3.956.005 8.3c.01 3.99.014 4.082.08 4.39.368 1.66 1.548 2.844 3.224 3.235.22.05.497.06 2.29.07 1.856.012 2.048.009 2.097-.04.05-.05.053-.69.053-7.94 0-5.374-.01-7.906-.033-7.952-.033-.06-.09-.063-2.03-.06-1.578.004-2.052.014-2.26.05Zm3 14.665-1.35-.016c-1.242-.013-1.375-.02-1.623-.083a2.81 2.81 0 0 1-2.08-2.167c-.074-.335-.074-8.579-.004-8.907a2.85 2.85 0 0 1 1.716-2.05c.438-.176.64-.196 2.058-.2l1.282-.003v13.426Z"/>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
    </div>
    <div class="content">
            <h3 class="font-16 mb-2">Scheme Name</h3>
            <div class="form-label mb-3">
                <select id="scheme_name_select" class="js-states form-control js-choice" onchange="changeSchemeName(this);">
                    <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-search font-14"></i>
            <input type="text" class="form-control rounded-xs" id="c1" placeholder="Search Plot Name" onkeyup="searchDailyAvailabilityPlotByName(this)" >
            <label for="c1" class="color-theme">Search by Plot Name</label>
            </div>

            <div class="" style="overflow-x: auto;display: flex;">
                <div class="col-3">
                    <span class="badge border border-yellow-dark color-yellow-dark rounded-s btn-full font-14 All vs" onclick="statusPlotFilter('All')" style="width: 5rem ;padding-top: 5px;padding-bottom: 5px;">All</span>
                </div>
                <div class="col-3">
                    <span class="badge border border-blue-dark color-blue-dark rounded-s btn-full font-14 Available vs" onclick="statusPlotFilter('Available')" style="width: 5rem ;padding-top: 5px;padding-bottom: 5px;">Available</span>
                </div>
                <div class="col-3">
                    <span class="badge border border-pink-dark color-pink-dark rounded-s btn-full font-14 On Hold vs" onclick="statusPlotFilter('On Hold')" style="width: 5rem ;padding-top: 5px;padding-bottom: 5px;">On Hold</span>
                </div>
                <div class="col-3">
                    <span class="badge border border-green-dark color-green-dark rounded-s btn-full font-14 Booked vs" onclick="statusPlotFilter('Booked')" style="width: 5rem ;padding-top: 5px;padding-bottom: 5px;">Booked</span>
                </div>
                <div class="col-3">
                    <span class="badge border border-red-dark color-red-dark rounded-s btn-full font-14 Booked vs" onclick="statusPlotFilter('Sold')" style="width: 5rem ;padding-top: 5px;padding-bottom: 5px;">Sold</span>
                </div>
            </div>
        
    </div>
 
    
    <div class="content1 mb-0 mt-2" id="plotlist">
       
    </div>

    <div class="row text-center" id="plotlistdesign">
       
    </div>
    <div class="row card card-body" id="scheme_details">
                

                </div>
    <div id="menu-request" class="offcanvas offcanvas-bottom offcanvas-detached rounded-m"  aria-hidden="true">
        <div class="menu-size" style="height:460px;">
            <div class="d-flex mx-3 mt-3 py-1">
                <div class="align-self-center">
                    <h1 class="mb-0">Plot Booking</h1>
                </div>
                <div class="align-self-center ms-auto">
                    <a href="#" class="ps-4 shadow-0 me-n2" data-bs-dismiss="offcanvas">
                    <i class="bi bi-x color-red-dark font-26 line-height-xl"></i>
                    </a>
                </div>
                
            </div>
            
            <div class="divider divider-margins mt-1" style="margin-bottom: 10px;"></div>
            <div class="content mt-0">
                <p id="errorMessage" class="color-red-dark" style="margin-bottom: 10px;"></p>
                <div class="form-custom form-label form-icon">
                    <i class="bi bi-person-circle font-14"></i>
                    <input type="email" class="form-control rounded-xs" id="plot_client_name" placeholder="Client Name">
                    <label for="c32" class="form-label-always-active color-highlight font-11">Client Name</label>
                    <span class="font-10">(required)</span>
                </div>
                <div class="pb-3"></div>
                <div class="form-custom form-label form-icon">
                    <i class="bi bi-person-circle font-14"></i>
                    <input type="email" class="form-control rounded-xs" id="plot_client_email_address" placeholder="Client Email Address" pattern="[A-Za-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
                    <label for="c32" class="form-label-always-active color-highlight font-11">Client Email Address</label>
                    
                </div>
                <span class="badge bg-green-dark rounded-xl" onClick="appendemailsuffix('@gmail.com')">@gmail.com</span>
                <span class="badge bg-green-dark rounded-xl" onClick="appendemailsuffix('@yahoo.com')">@yahoo.com</span>
                <div class="pb-3"></div>
                <div class="form-custom form-label form-icon">
                    <i class="bi bi-person-circle font-14"></i>
                    <input type="email" class="form-control rounded-xs" id="plot_client_phone_number" placeholder="Client Phone Number" oninput='digitValidate(this)' placeholder="Phone Number" maxlength="10" pattern="[+ 0-9]{10,15}">
                    <label for="c32" class="form-label-always-active color-highlight font-11">Client Phone Number</label>
                
                </div>
                <div class="pb-2"></div>
                <input type="hidden" id="plot_name" />
                <input type="hidden" id="type" />
            </div>
            <a href="#" id="plotsubmitbtn" class="mx-3 btn btn-full gradient-blue shadow-bg shadow-bg-s" onClick="MakePlotHoldOrBookOrAvailable()">Submit</a>
        </div>
    </div>

    <div id="menu-transfer-pending" style="width: 320px; display: block; visibility: hidden;" class="offcanvas offcanvas-modal offcanvas-detached rounded-m" aria-hidden="true">
        <div class="content text-center">
            <i style="font-size:65px;" class="scale-box bi bi-question-circle-fill color-blue-dark shadow-s rounded-circle p-0 mt-3 mb-3 d-inline-block"></i>
            <h1 class="pt-3 font-34">Cancel Your <span id="current_plot_status"></span> </h1>
            <p class="font-20 mt-4"> Are you sure you want to cancel? This action can't be undone. </p>
             <div class="row">
                    <div class="col-6">
                    <a href="#" data-bs-toggle="offcanvas" onClick="MakePlotHoldOrBookOrAvailableTocancel()" class="btn btn-full gradient-green shadow-bg shadow-bg-xs w-100">Yes</a>
                    </div>
                    <div class="col-6">
                    <a href="#" data-bs-toggle="offcanvas" class="btn btn-full gradient-red shadow-bg shadow-bg-xs w-100">No</a>
                    </div>
             </div>
            
           
        </div>
    </div>
<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,
         
    //   });
      $("#footer-bar").hide();
 </script>
  <script>
     var DailyAvailabilityInsertData = JSON.parse(localStorage.getItem('DailyAvailabilityInsertData')); 
        if(DailyAvailabilityInsertData == null){
            window.location.href = site_url;
        }else{
            $("#schemname_display").html(DailyAvailabilityInsertData.scheme_name);
            $("#scheme_name_select").val(DailyAvailabilityInsertData.scheme_id);
        }

        function appendemailsuffix(data){
            
            var plot_client_email_address_data = $("#plot_client_email_address").val();
            plot_client_email_address_data = plot_client_email_address_data.split('@')[0];
            plot_client_email_address_data = plot_client_email_address_data+""+data;
            $("#plot_client_email_address").val(plot_client_email_address_data);
        }

       
 </script>
@endsection