{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')
 

    <div class="card card-custom">
    <div class="card-body">



<table class="table table-bordered table-hover display" id="propertyDatatable"  style="width:100%">
    <thead>
    <tr>     
        
        <!-- <th class="mw-110"></th> -->
        <th width="12%">Action</th>
        <th width="">Address</th>
        <th class="mw-90">Price</th>
        <th>List Date</th>
        <!-- <th>Estate Agents</th> -->
        <th>Type</th>
        <th class="mw-110">Platform</th>
       
    </tr>
    </thead>
    <tbody>
    
    </tbody>
</table>
</div>
    </div>

    


<!-- Add  comment modal  -->
<div class="modal fade" id="addAgentModal" tabindex="-1" role="dialog" aria-labelledby="addAgentModal" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
       
            
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Add Agent</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">  
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <input type="checkbox" checked name="exist_agent" id="exist_agent" ><label for="exist_agent">&nbsp;&nbsp;Select Existing Agent</label>
                            <!-- <textarea class="form-control" name="comment" placeholder="Comment" ></textarea>                             -->
                    </div>
                    <form id="agent_use_form" method="post">
                        <input type="hidden" value="{{csrf_token()}}" class="prop_id" name="property" id="property">  
                        <input type="hidden" value="{{csrf_token()}}" name="_token" id="_token">                
                        <div class="form-group row">                           
                            
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <select name="agent" id="agent" class="form-control">
                                    <option value="">Select Agent</option>  
                                </select>
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" id="updateFormSubmit" class="btn btn-primary">Save changes</button>
                    </form>

                    <form id="agent_add_form" method="post" >
                        <input type="hidden" value="{{csrf_token()}}" name="_token" id="_token">
                        <input type="hidden" value="{{csrf_token()}}" class="prop_id" name="property" id="property">
                        <div class="form-group row" >  
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <label for="agent_name">Name</label>
                                <input type="text" class="form-control" name="agent_name" id="agent_name" >
                            </div>  
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <label for="agent_address">Address</label>
                                <textarea type="text" class="form-control" name="agent_address" id="agent_address" ></textarea>
                            </div>   
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <label for="agent_postcode">Postcode</label>
                                <input type="text" class="form-control" name="agent_postcode" id="agent_postcode" >
                            </div>  
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <label for="agent_house_number">House Number</label>
                                <input type="text" class="form-control" name="agent_house_number" id="agent_house_number" >
                            </div>                      
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <label for="agent_url">Agent Url</label>
                                <input type="text" class="form-control" name="agent_url" id="agent_url" >
                            </div>                      
                        </div>

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" id="addFormSubmit" class="btn btn-primary">Save changes</button>
                    </form>
                </div>
                <div class="modal-footer">
                    
                </div>
            </div>
        </form>
    </div>
</div>
<!-- comment modal  -->
@endsection

{{-- Styles Section --}}
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="{{asset('css/pages/bootstrap-datepicker.css')}}">
    <link rel="stylesheet" href="{{asset('css/pages/style.css')}}">
@endsection


{{-- Scripts Section --}}
@section('scripts')
    {{-- vendors --}}
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>

    {{-- page scripts --}}
    <!-- <script src="{{ asset('js/pages/crud/datatables/basic/basic.js') }}" type="text/javascript"></script> -->
	<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
	<script src="{{ asset('js/developer/property.js') }}" type="text/javascript"></script>
	<!-- <script src="{{ asset('js/developer/formValidation.js') }}" type="text/javascript"></script> -->
    <script src="{{ asset('js/pages/crud/forms/widgets/bootstrap-datepicker.js')}}"></script>

    <script src="{{ asset('js/pages/crud/forms/widgets/select2.js')}}"></script>

    <script type="text/javascript">

    
    $(document).on('click', '.add_agent', function() {
        var property = $(this).attr('data-id');
        $(".prop_id").val(property);
        $("#addAgentModal").modal('show');
       
        $('#agent_add_form')[0].reset(); 
        $("#agent_use_form").show();
        $('#agent_add_form').hide();
        $("#exist_agent").prop('checked',true)
        $('#agent_use_form')[0].reset();
        getAgent(property);
    });

    function getAgent(property){
        $.ajax({
            url: "{{route('DEOGetAgent')}}",
            type: "POST",
            data: {
                property: property,
                _token: token,
            },
            success: function(result) { 
                var option = "<option value=''>Select agent</option>";
                $.each( result, function( key, value ) {
                    option+="<option value="+value.id+">"+value.name+"</option>";
                });

                $("#agent").empty().append(option);

            },error:function(xhr, status, error,response){
                showMessage("Something went wrong.",'error');

            }
        })
    }
    var o="";
    o = FormValidation.formValidation(
	    document.getElementById('agent_add_form'),
        {
            fields: {
                agent_name: {
                    validators: {
                        notEmpty: {
                            message: 'Please enter name'
                        },
                        stringLength: {
                            min:5,
                            max:50,
                            message: 'Please enter name within length range 5 and 50'
                        }
                    }
                },
                agent_house_number: {
                    validators: {
                        notEmpty: {
                            message: 'Please enter house number'
                        },
                    }
                },
                agent_address: {
                    validators: {
                        notEmpty: {
                            message: 'Please enter address'
                        },
                        stringLength: {
                            min:10,
                            max:191,
                            message: 'Please enter address within length range 10 and 191'
                        }
                    }
                },
                agent_postcode: {
                    validators: {
                        notEmpty: {
                            message: 'Please enter postcode'
                        },
                        stringLength: {
                            min:4,
                            max:7,
                            message: 'Please enter postcode within length range 4 and 7'
                        }
                    }
                },
                agent_url: {
                    validators: {
                        notEmpty: {
                            message: 'Please enter agent url'
                        }, 
                    }
                },
            },

            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                // Bootstrap Framework Integration
                bootstrap: new FormValidation.plugins.Bootstrap(),
                // Validate fields when clicking the Submit button
                submitButton: new FormValidation.plugins.SubmitButton(),
                // Submit the form when all fields are valid
                // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
            }
    }),$("#addFormSubmit").on("click", (function (t) {
                                                 
        t.preventDefault(), o.validate().then((function (t) {
            
            if(t=='Valid'){
                $.ajax({                                   
                    type: 'POST',                    
                    url: "{{route('addPropertyAgent')}}",
                    data:  $("#agent_add_form").serialize(),                  
                    success: function(result) {    
                        showMessage(result.data,result.status);   
                        if(result.status=='success'){  
                            
                            table.ajax.reload( null, false );
                            $("#addAgentModal").modal('hide');
                        }
                    },error:function(xhr, status, error,result){
                        console.log(xhr);
                        showMessage("Something went wrong...!",'error');          
                    }                    
                });
            }  
        }))
                                     
                
    }));

    $("#updateFormSubmit").on("click", function (o) {
        o.preventDefault(); 
        var agent = $("#agent").val();
        if(agent){
            $.ajax({                                   
                type: 'POST',                    
                url: "{{route('propertyAgentExist')}}",
                data:  $("#agent_use_form").serialize(),                  
                success: function(result) {    
                    showMessage(result.data,result.status);   
                    if(result.status=='success'){  
                        $("#addAgentModal").modal('hide');
                        table.ajax.reload( null, false );
                    }
                },error:function(xhr, status, error,result){
                    console.log(xhr);
                    showMessage("Something went wrong...!",'error');          
                }                    
            });
        }else{
            showMessage("Please select a agent",'error');  
        }
    });

   

    $('#exist_agent').on('click', function(e) {
        if($("#exist_agent").is(':checked')){
            $("#agent_add_form").hide();
            $("#agent_use_form").show();
        }else{
            $("#agent_use_form").hide();
            $("#agent_add_form").show();
        }
    });


    $( document ).ready(function() {      

        $('.w2').addClass('active');

         $('.date_from').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight:true,
         });
          $('.date_to').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight:true,
         });

         

     });
  
    </script>
    <script>
        var data_url = '