@extends('Admin/layout')
@section('title','Plot Allotment Sale')
@section('content')
@if(has_permission('Plot','Plot Allotment Sale'))
<div class="container-fluid">
    <div class="row">
        <div class="col-xxl-8">
            <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Make Plot Allotment Sale</h4>
            </div>
            <!-- end card header -->
            <div class="card-body">
                <div class="live-preview">
                    <form method="POST" class="needs-validation" novalidate >
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Scheme Name <span class="text-danger">*</span></label>
                                    <select class="form-control single-select" name="scheme_name" id="scheme_name" onchange="getPlot(this);" required>
                                            <option value="">Choose Scheme Name</option>
                                            @if($tblschemes)
                                                @foreach($tblschemes as $key => $value)
                                                <option value="{{$value->id}}">{{$value->name}}</option>
                                                @endforeach
                                            @endif
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6" id="plot_name_display" style="display:none;">
                                <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Plot Name <span class="text-danger">*</span></label>
                                    <select class="form-control single-select" name="plot_name" id="plot_id" onchange="getPlotDetails(this);" required>
                                           
                                           
                                    </select>
                                </div>
                            </div>
                           
                           
                            <div class="col-md-4 plot_details" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Current Plot Status <span class="text-danger">*</span></label>
                                            <select class="single-select form-control" name="current_plot_status" id="current_plot_status"  onchange="checkPlotStatus(this);" disabled readonly >
                                                    <option value="">Select Status</option>
                                                    <option value="On Hold">On Hold</option>
                                                    <option value="Booked">Booked</option>
                                                    <option value="Available">Available</option>
                                                    <option value="Sold">Sold(Booking Confirm)</option>
                                                    <option value="Not For Sale">Not For Sale</option>
                                                    <option value="ReSale">ReSale</option>
                                                    
                                            </select>
                                </div>
                            </div>
                            <div class="col-md-4 plot_details" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">New Plot Status <span class="text-danger">*</span></label>
                                            <select class="single-select form-control" name="new_plot_status" id="new_plot_status" onchange="checkNewPlotStatus(this);" readonly>
                                                    <option value="">Select New Plot Status</option>
                                                    <option value="Sold">Sold(Booking Confirm)</option>
                                                    @if(has_permission('Plot','Plot Available After Sold'))
                                                    <option value="Available">Available</option>
                                                    @endif
                                                    
                                            </select>
                                </div>
                            </div>
                            @if(has_permission('Plot','Plot Associate Change'))
                            <div class="col-md-4 plot_details_status" style="display:none;">
                                <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Associate Name <span class="text-danger">*</span></label>
                                    <select class="form-control single-select "name="associate_name" id="associate_name" onchange="checkAssociateChange(this);" required>
                                            <option value="">Choose Associate Name</option>
                                            @if($tbl_associates)
                                                @foreach($tbl_associates as $key => $value)
                                                <option value="{{$value->id}}" >{{$value->name}}, {{$value->phone_1}}, {{$value->rera_no}}</option>
                                                @endforeach
                                            @endif
                                    </select>
                                </div>
                            </div>
                            @else
                            <div class="col-md-4 plot_details_status" style="display:none;">
                                <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Associate Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="associate_name_value" id="associate_name_value" placeholder="Associate Name" readonly disabled required>
                                </div>
                            </div>
                            @endif
                           
                            <div class="col-md-4 plot_details_status" style="display:none;">
                                <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Party Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="party_name" id="party_name" placeholder="Party Name" required>
                                    <input type="hidden" class="form-control" name="user_id" id="user_id" value="{{$user_id}}" required>
                                </div>
                            </div>
                            <div class="col-md-4 plot_details_status" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Party Email Address</label>
                                    <input type="text" class="form-control" name="party_email_address" id="party_email_address" placeholder="Party Email Address">
                                </div>
                            </div>
                            <div class="col-md-4 plot_details_status" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Party Phone Number</label>
                                    <input type="text" class="form-control" name="party_phone_number" oninput="digitValidate(this)" id="party_phone_number" placeholder="Party Phone Number" maxlength="10">
                                </div>
                            </div>
                            <div class="col-md-4 plot_details_status" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Sold/Booking Confirm Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" name="sold_date" id="sold_date" value="{{$date}}" placeholder="Sold Date" onchange="handler(event);">
                                </div>
                                <p id="ansshow" style="display:none;">Difference in days: <span id="ans"></span></p>
                            </div>
                            <div class="col-md-4 plot_details_status" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Allotment/Patta Date </label>
                                    <input type="date" class="form-control" name="allotment_date" id="allotment_date" value="{{$date}}" placeholder="Allotment/Patta Date " onchange="handler(event);">
                                </div>
                            </div>
                           
                            <div class="col-md-4 plot_details_status" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Apf Date </label>
                                    <input type="date" class="form-control" name="apf_date" id="apf_date" value="{{$date}}" placeholder="Apf Date" onchange="handler(event);">
                                </div>
                            </div>
                            <div class="col-md-12 plot_details" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Comments </label>
                                    <input type="text" class="form-control" name="comments" id="comments" placeholder="Comments" value="">
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-end">
                            <button type="button" onclick="changeAvailabilityStatus()" class="btn btn-primary actionbtn" style="display:none;">Update Status</button>
                        </div>
                    </form>
                </div>
            
            </div>
            </div>
        </div>
        <div class="col-xxl-4">
            <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Plot Details</h4>
            </div>
            <!-- end card header -->
            <div class="card-body">
                <div class="live-preview">
                            <div class="col-md-12 plot_details" style="display:none;">
                                    <label>Plot Shape: </label> <span  name="plot_shape" id="plot_shape"></span>
                            </div>
                            <div class="col-md-12 plot_details" style="display:none;">
                              
                                    <label >Plot Facing : </label>
                                    <span  name="plot_facing" id="plot_facing" >
                               
                            </div>
                            <div class="col-md-12 plot_details" style="display:none;">
                                    <label for="Nameinput" class="form-label">Plot Size (Sq. Mtr.) : </label>
                                    <span name="plot_size_sq_mtr" id="plot_size_sq_mtr" ></span>
                                
                            </div>
                            <div class="col-md-12 plot_details" style="display:none;">
                                
                                    <label class="form-label">Plot Size (Sq. Yard.) : </label>
                                            <span  name="plot_size_sq_yard" id="plot_size_sq_yard" ></span>
                                
                            </div>
                            <div class="col-md-12 plot_details" style="display:none;">
                                
                                    <label class="form-label">Brokergeable Size (SQ YD) : </label>
                                            <span name="brokergeable_size" id="brokergeable_size"> </span>
                               
                            </div>
                            <div class="col-md-12 plot_details" style="display:none;">
                              
                                    <label class="form-label"> Road Size 60 & Above 60 : </label>
                                            <span  name="road_size" id="road_size"></span>
                                
                            </div>

                </div>
            
            </div>
            </div>
        </div>

        <!-- end col -->
    </div>

</div>

<div class="modal fade bs-example-modal-center" id="cancelmodal" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-5">
                <!-- <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
                </lord-icon> -->
                <div class="mt-4">
                    <h4 class="mb-3 text-danger">Cancel For Plot Allotment Sale(Booking Confirm)</h4>
                    <p class="mb-4"> Are you sure want to cancel? This action can't be undone.</p>
                    <div class="hstack gap-2 justify-content-center">
                        <button type="button" class="btn btn-light" style="width:90px;" data-bs-dismiss="modal">Close</button>
                        <a href="javascript:void(0);" class="btn btn-success" style="width:90px;" onclick="savePlotAvailabilityStatusMakeCancelAllotmentSale('plot-change-AvailabilityStatus-for-cancel-AllotmentSale')">Ok</a>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div class="modal fade bs-example-modal-center" id="successmodal" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-5">
                <!-- <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
                </lord-icon> -->
                <div class="mt-4">
                    <h4 class="mb-3 text-danger">Plot Allotment Sale(Booking Confirm)</h4>
                    <p class="mb-4"> Are you sure want to Plot Allotment Sale(Booking Confirm)?</p>
                    <div class="hstack gap-2 justify-content-center">
                        <button type="button" class="btn btn-light" style="width:90px;" data-bs-dismiss="modal">Close</button>
                        <a href="javascript:void(0);" class="btn btn-success" style="width:90px;" onclick="savePlotAvailabilityStatusMakeAllotmentSale('plot-change-AvailabilityStatus-AllotmentSale')">Ok</a>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script>
<script language="javascript">
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0');
        var yyyy = today.getFullYear();

        today = yyyy + '-' + mm + '-' + dd;
        $('#sold_date').attr('max',today);
        $('#allotment_date').attr('max',today);
        $('#apf_date').attr('max',today);
</script>
<script>
function handler(e){
  var sold_date = $('#sold_date').val();
  var allotment_date = $('#allotment_date').val();
  var apf_date = $('#apf_date').val();
  
    if(sold_date != "" && (allotment_date != "" || apf_date != "")){
        var smaller_date = allotment_date ? allotment_date : apf_date;
        if(allotment_date != "" && apf_date != ""){
            if(new Date(allotment_date) < new Date(apf_date)) 
            { 
                smaller_date = allotment_date;
            }else{
                smaller_date = apf_date;
            }
        }

        sold_date = new Date(sold_date);
        smaller_date = new Date(smaller_date);
        var milli_secs = sold_date.getTime() - smaller_date.getTime();
            
        // Convert the milli seconds to Days  
        var days = milli_secs / (1000 * 3600 * 24);
        $("#ansshow").show();
        document.getElementById("ans").innerHTML = 
        Math.round(Math.abs(days));
    }
   
}
</script>
<script>
    $(document).ready(function(){
        setDobValidation();
        
    });
    digitValidate = function(ele){
        ele.value = ele.value.replace(/[^0-9]/g,'');
    }
    var adminauthdata = JSON.parse(localStorage.getItem('adminauthdata'));    
    function getPlot(sel){
        $("#plot_size_sq_mtr").val("");
            $("#plot_size_sq_yard").val("");
            $("#brokergeable_size").val("");
            $("#road_size").val("");
            // $("#status").val("");
            $("#associate_name").val("");
            $("#party_name").val("");
            $("#party_email_address").val("");
            $("#party_phone_number").val("");
            $("#sold_date").val("");
            $("#allotment_date").val("");
            $("#apf_date").val("");
            $(".plot_details").hide();      
            $(".plot_details_status").hide();  
            $(".actionbtn").hide();
            if(sel.value){
            
                var scheme_id = sel.value;
                $("#plot_id").html("");
                $("#plot_name_display").show();        
                var searchModel= {scheme_id:scheme_id};
                $.ajax({
                    url: base_url+"/api/v1/getPlotByScheme",
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(searchModel),
                    dataType: "json",
                    headers: {"X-Auth-Token": adminauthdata.token,"uuid": adminauthdata.uuid},
                    success: function (result) {
                        if (result.status == 200)
                        { 
                            $("#plot_id").append('<option value="">Choose Plot Name</option>');
                            
                            for (i = 0; i < result.data.length; i++) {
                                $("#plot_id").append('<option value="'+result.data[i].id+'">'+result.data[i].plot_name+' ('+result.data[i].AvailabilityStatus+')</option>');
                            }
                        
                        }
                        else {
                            Toastify({
                                text: result.message,
                                className: "danger",
                                style: {
                                    background: "linear-gradient(to right, #f06548, #f06548)",
                                }
                            }).showToast();                 
                        }
                    },
                    error: function (errormessage) {
                                
                    }
                });
            }
        }

        function getPlotDetails(sel){
            var plot_id = sel.value;
            $("#plot_size_sq_mtr").val("");
            $("#plot_size_sq_yard").val("");
            $("#brokergeable_size").val("");
            $("#road_size").val("");
            // $("#status").val("");
            $("#associate_name").val("");
            $("#party_name").val("");
            $("#party_email_address").val("");
            $("#party_phone_number").val("");
            // $("#date").val("");
            // $("#time").val("");
            $(".plot_details").show();        
            var searchModel= {plot_id:plot_id};
            $.ajax({
                url: base_url+"/api/v1/getPlotById",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(searchModel),
                dataType: "json",
                headers: {"X-Auth-Token": adminauthdata.token,"uuid": adminauthdata.uuid},
                success: function (result) {
                    if (result.Status)
                    { 
                        $("#plot_shape").text(result.data.plot_shape_name);
                        $("#plot_facing").text(result.data.plot_facing_name);
                        $("#plot_size_sq_mtr").text(result.data.plot_size_sq_mtr);
                        $("#plot_size_sq_yard").text(result.data.plot_size_sq_yard);
                        $("#brokergeable_size").text(result.data.brokergeable_size);
                        $("#road_size").text(result.data.road_size);
                        $("#current_plot_status").val(result.data.plot_status).change();
                       
                        $("#associate_name").val(result.data.last_hold_book_by_associate).change();
                       
                        $("#associate_name_value").val((result.data.associate_name != null ? result.data.associate_name : '')+" "+(result.data.rera_no != null ? result.data.rera_no : ''));
                       

                        $("#party_name").val(result.data.party_name);
                        $("#party_email_address").val(result.data.party_email);
                        $("#party_phone_number").val(result.data.party_phone);
                        $("#sold_date").val(result.data.sold_date);
                        $("#allotment_date").val(result.data.allotment_date);
                        $("#apf_date").val(result.data.apf_date);
                        $("#comments").val(result.data.comments);
                        // if(result.data.plot_status == "On Hold"){
                        //     var datetime = result.data.last_hold_date.split(" ");
                        //     $("#date").val(datetime[0]);
                        //     $("#time").val(datetime[1]);
                        // }
                        // if(result.data.plot_status == "Booked"){
                        //     var datetime = result.data.last_book_date.split(" ");
                        //     $("#date").val(datetime[0]);
                        //     $("#time").val(datetime[1]);
                        // }
                        $(".actionbtn").show();
                     
                    }
                    else {
                                         
                    }
                },
                error: function (errormessage) {
                               
                }
            });
        }

        function checkPlotStatus(sel){
            
            if(sel.value == "Available"){
                // $("#associate_name").val("").change();
                // $("#party_name").val("");
                // $("#party_email_address").val("");
                // $("#party_phone_number").val("");
                // $("#date").val("");
                // $("#time").val("");
                $(".plot_details_status").hide();
            }else{
                // $("#associate_name").val("").change();
                // $("#party_name").val("");
                // $("#party_email_address").val("");
                // $("#party_phone_number").val("");
                // $("#date").val("");
                // $("#time").val("");
                $(".plot_details_status").show();
            }
        }

        function checkNewPlotStatus(sel){
            if(sel.value == "Available"){
               
                $(".plot_details_status").hide();
            }else{
               
                $(".plot_details_status").show();
            }
        }

        function changeAvailabilityStatus(){
            var plot_status = $("#new_plot_status").val();
            if(plot_status == "Available"){
                $("#cancelmodal").modal('show');
            }else{
                $("#successmodal").modal('show');
            }
        }

        function checkAssociateChange(sel){
           
        }
</script>
@endif
@endsection