@extends('Admin/layout')
@section('title','Plot Add')
@section('content')
@if(has_permission('Plot','Plot Hold Book Cancel'))
<div class="container-fluid">
    <div class="row">
        <div class="col-xxl-12">
            <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Make Book /Hold/Cancel</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 for="Nameinput" class="form-label">Plot Shape <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="plot_shape" id="plot_shape" placeholder="Plot Shape" readonly disabled required>
                                </div>
                            </div>
                            <div class="col-md-4 plot_details" style="display:none;">
                                <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Plot Facing <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="plot_facing" id="plot_facing" placeholder="Plot Facing" readonly disabled required>
                                </div>
                            </div>
                            <div class="col-md-4 plot_details" style="display:none;">
                                <div class="mb-3">
                                    <label for="Nameinput" class="form-label">Plot Size (Sq. Mtr.) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" name="plot_size_sq_mtr" id="plot_size_sq_mtr" placeholder="Plot Size (Sq. Mtr.) " readonly disabled required>
                                </div>
                            </div>
                            <div class="col-md-4 plot_details" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Plot Size (Sq. Yard.) <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control" name="plot_size_sq_yard" id="plot_size_sq_yard" placeholder="Plot Size (Sq. Yard.) " readonly disabled required>
                                </div>
                            </div>
                            <div class="col-md-4 plot_details" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Brokergeable Size (SQ YD) </label>
                                            <input type="number" class="form-control" name="brokergeable_size" id="brokergeable_size" placeholder="Brokergeable Size (SQ YD)" disabled readonly required>
                                </div>
                            </div>
                            <div class="col-md-4 plot_details" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label"> Road Size 60 & Above 60</label>
                                            <input type="number" class="form-control" name="road_size" id="road_size" readonly disabled placeholder="Road Size">
                                </div>
                            </div>

                            <div class="col-md-4 plot_details" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Plot Status <span class="text-danger">*</span></label>
                                            <select class="single-select form-control" name="plot_status" id="status" onchange="checkPlotStatus(this);" 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="Sale">Sale</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_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" 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>
                            <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="client_name" id="client_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="client_email_address" id="client_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="client_phone_number" oninput="digitValidate(this)" id="client_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">Hold/Book Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" name="date" id="date" value="{{$date}}" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-4 plot_details_status" style="display:none;">
                                <div class="mb-3">
                                    <label class="form-label">Hold/Book Time <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" name="time" id="time" placeholder="" value="{{$time}}">
                                </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>
        <!-- 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 Hold/Book</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="savePlotAvailabilityStatusMakeCancel('plot-change-AvailabilityStatus-for-cancel')">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 Hold/Book</h4>
                    <p class="mb-4"> Are you sure want to Hold/Book?</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="savePlotAvailabilityStatusMakeHoldBook('plot-change-AvailabilityStatus')">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;
        $('#date').attr('max',today);
</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_yard").val("");
            $("#brokergeable_size").val("");
            $("#road_size").val("");
            // $("#status").val("");
            $("#associate_name").val("");
            $("#client_name").val("");
            $("#client_email_address").val("");
            $("#client_phone_number").val("");
            // $("#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("");
            $("#client_name").val("");
            $("#client_email_address").val("");
            $("#client_phone_number").val("");
            // $("#date").val("");
            // $("#time").val("");
               
            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)
                    { 
                        if(result.data.plot_status == "Sold"){
                            Toastify({
                                text: "Plot "+result.data.plot_name+" Already "+result.data.plot_status,
                                className: "danger",
                                style: {
                                    background: "linear-gradient(to right, #f06548, #f06548)",
                                }
                            }).showToast(); 
                            return ;   
                        }
                        $(".plot_details").show();     
                        $("#plot_shape").val(result.data.plot_shape_name);
                        $("#plot_facing").val(result.data.plot_facing_name);
                        $("#plot_size_sq_mtr").val(result.data.plot_size_sq_mtr);
                        $("#plot_size_sq_yard").val(result.data.plot_size_sq_yard);
                        $("#brokergeable_size").val(result.data.brokergeable_size);
                        $("#road_size").val(result.data.road_size);
                        $("#status").val(result.data.plot_status).change();
                        $("#associate_name").val(result.data.last_hold_book_by_associate).change();
                        $("#client_name").val(result.data.party_name);
                        $("#client_email_address").val(result.data.party_email);
                        $("#client_phone_number").val(result.data.party_phone);
                        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();
                // $("#client_name").val("");
                // $("#client_email_address").val("");
                // $("#client_phone_number").val("");
                // $("#date").val("");
                // $("#time").val("");
                $(".plot_details_status").hide();
            }else{
                // $("#associate_name").val("").change();
                // $("#client_name").val("");
                // $("#client_email_address").val("");
                // $("#client_phone_number").val("");
                // $("#date").val("");
                // $("#time").val("");
                $(".plot_details_status").show();
            }
        }

        function changeAvailabilityStatus(){
            var plot_status = $("#status").val();
            if(plot_status == "Available"){
                $("#cancelmodal").modal('show');
            }else{
                $("#successmodal").modal('show');
            }
        }
</script>
@endif
@endsection