@extends('layouts.app')
@section('content')
@section('style')
<link href="{{ asset('assets/css/custom.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('assets/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
<style>
    .select2-search__field{
    display: none !important;
}
.offer-sec .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.7);
    float: left;
    margin-left: -3px;
    margin-right: 6px;
}

</style>
@endsection

<main>

    <section class="offer-sec">

        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-10 offset-lg-1">
                    @if (count($errors) > 0)
                    <div class="row pt-2">
                        <div class="col-md-8 col-md-offset-1">
                            <div class="alert alert-danger alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4><i class="icon fa fa-ban"></i> Error!</h4>
                                @foreach($errors->all() as $error)
                                {{ $error }} <br>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="offerBox">
                        <h1 class="mainTitle text-center text-uppercase mb-lg-5 mb-md-4 mb-3">Offer Form</h1>
                        <div class="offerProcess">
                            <ul>
                                <li class="active">
                                    <h5>Details</h5>
                                    <div class="processNo">1</div>
                                </li>
                                <li>
                                    <h5>Terms</h5>
                                    <div class="processNo">2</div>
                                </li>
                                <li>
                                    <h5>Conditions</h5>
                                    <div class="processNo">3</div>
                                </li>
                                <li>
                                    <h5>Inspections</h5>
                                    <div class="processNo">4</div>
                                </li>
                                <li>
                                    <h5>Fees</h5>
                                    <div class="processNo">5</div>
                                </li>
                                <li>
                                    <h5>Review</h5>
                                    <div class="processNo">6</div>
                                </li>
                            </ul>
                        </div>
                        <form method="POST" action="{{ url('/step-one-store') }}" enctype="multipart/form-data" >
                            @csrf
                            <div class="offerForm-width mt-lg-5 mt-md-4 mt-3">
                                <div class="buyerForm">
                                    <div class="buyerTop ">
                                        <h3 class="formTitle">Buyer Details:</h3>
                                        <ul class="buyerList">
                                            <li class="active"><a href="#">Buyer 1</a></li>
                                            <li><a href="#">Buyer 2</a></li>
                                            <li><a href="#">Buyer 3</a></li>
                                            <li><a href="#">Buyer 4</a></li>
                                        </ul>

                                    </div>


                                    <div class="row">
                                        <div class="col-md-6 col-sm-6">
                                            <div class="form-group">
                                                <label for="">Select Buyers</label>
                                                <select name="buyers[]"  class="form-control select2  @error('buyers') invalid @enderror" multiple="multiple" id="buyers-select">
                                                    @foreach($buyers as $key => $buyer)

                                                    <option  value="{{ $buyer->id}}">{{ $buyer->name }}</option>
                                                    @endforeach
                                                </select>
                                                @if($errors->has('buyers'))
                                                <div class="help-block">
                                                    <ul role="alert">
                                                        <li>
                                                            {{$errors->first('buyers')}}
                                                        </li>
                                                    </ul>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="form-group">
                                                <label for="">Add Buyer</label>
                                                <button type="button" id="toggleModal" class="btn btnBlk plus btnWidth mx-2">+</button>


                                            </div>
                                        </div>
                                    </div>
                                </div><!-- buyerForm(End) -->

                                <div class="propertyForm mt-lg-5 mt-md-4 mt-3">
                                    <h3 class="formTitle">Property Search By:</h3>
                                    @if($errors->has('searchBy'))
                                    <div class="help-block">
                                        <ul role="alert">
                                            <li>
                                                {{$errors->first('searchBy')}}
                                            </li>
                                        </ul>
                                    </div>
                                    @endif
                                    <div class="row mt-3">
                                        <div class="col-md-3 col-sm-6">
                                            <div class="form-group">
                                                <label>MLS #</label>
                                                <div class="custom-radioRow">
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="toggleElement" name="searchBy" value="MLS" onchange="toggleStatus()">
                                                        <label class="custom-control-label" for="purchaseRadio"></label>
                                                    </div>


                                                </div>


                                            </div>

                                        </div>
{{--                                        <div class="col-md-3 col-sm-6">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <label>Address</label>--}}
{{--                                                <div class="custom-radioRow">--}}
{{--                                                    <div class="custom-control custom-radio">--}}
{{--                                                        <input type="radio" class="custom-control-input" id="toggleElementt" name="searchBy" value="Address" onchange="toggleStatus()">--}}
{{--                                                        <label class="custom-control-label" for="purchaseRadio"></label>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}

{{--                                            </div>--}}

{{--                                        </div>--}}
{{--                                        <div class="col-md-3 col-sm-6">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <label>Manual</label>--}}
{{--                                                <div class="custom-radioRow">--}}
{{--                                                    <div class="custom-control custom-radio">--}}
{{--                                                        <input type="radio" class="custom-control-input" id="toggleElements" name="searchBy" value="Manual" onchange="toggleStatus()">--}}
{{--                                                        <label class="custom-control-label" for="purchaseRadio"></label>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}

{{--                                            </div>--}}
{{--                                        </div>--}}
                                        <div class="col-md-6">
                                            @if($errors->has('MLSField'))
                                            <div class="help-block">
                                                <ul role="alert">
                                                    <li>
                                                        {{$errors->first('MLSField')}}
                                                    </li>
                                                </ul>
                                            </div>
                                            @endif
                                            @if($errors->has('AddressField'))
                                            <div class="help-block">
                                                <ul role="alert">
                                                    <li>
                                                        {{$errors->first('AddressField')}}
                                                    </li>
                                                </ul>
                                            </div>
                                            @endif
                                            @if($errors->has('AddressField'))
                                            <div class="help-block">
                                                <ul role="alert">
                                                    <li>
                                                        {{$errors->first('AddressField')}}
                                                    </li>
                                                </ul>
                                            </div>
                                            @endif

                                                <div class="row"id ="getData" style="padding-bottom: 15px; padding-bottom: 15px; display:none;">
                                                    <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Address</label>
                                                            <div id="addressFieldResult"></div>
                                                            <input type="text" id="address" name="address" class="form-control offer-input" placeholder="Enter Address">
                                                        </div>
                                                    </div>


                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label> Zip </label>
                                                            <input type="text" name="zip" class="form-control offer-input"
                                                                   placeholder="Property County">
                                                        </div>
                                                    </div>
                                                    </div>
                                                    <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label> State</label>
                                                            <input type="text" name="state" class="form-control offer-input"
                                                                   placeholder="Property State">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label> City</label>
                                                            <input type="text" name="city" class="form-control offer-input"placeholder="Property City">
                                                        </div>
                                                    </div>
                                                    </div>

                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label> County</label>
                                                            <input type="text" name="county" class="form-control offer-input"
                                                                   placeholder="Property County">
                                                        </div>
                                                    </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label> Parcel Number (MLS)</label>
{{--                                                        <input type="text" name="mlsNumber" class="form-control offer-input" placeholder="Enter MLS Number">--}}
                                                        <input type="number" oninput="this.value = this.value.slice(0, 7)" name="mlsNumber" class="form-control offer-input" placeholder="Property Parcel Number">

                                                        {{--                                                        <input type="text" id="searchByMls" name="MLSField" class="form-control  mb-3 offer-input" placeholder="Enter MLS Number">--}}
                                                    </div>
                                                </div>

                                                    <button  id="get-token-btn" class="btn btn-primary btn-block">Find MLS Number </button>
                                                    <div style="font-color:red;"id="mlsError"></div>
                                        </div>


{{--                                            <input type="text" id="searchByMls" name="MLSField" style="display: none" class="form-control  mb-3 offer-input" placeholder="Enter MLS Number">--}}
                                            <input type="text" id="searchByAddress" name="AddressField" style="display: none" class="form-control  mb-3 offer-input" placeholder="Enter Address">
                                        </div>

                                    </div>
                                    <div id="manual" style="display: none">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Address</label>
                                                    <div id="addressFieldResult"></div>
                                                    <input type="text" id="address" name="address" class="form-control offer-input" placeholder="Enter Address">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label> County</label>
                                                    <input type="text" name="county" class="form-control offer-input"
                                                        placeholder="Property County">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label> State</label>
                                                    <input type="text" name="state" class="form-control offer-input"
                                                        placeholder="Property State">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label> City</label>
                                                    <input type="text" name="city" class="form-control offer-input"placeholder="Property City">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label> County</label>
                                                    <input type="text" name="county" class="form-control offer-input"
                                                           placeholder="Property County">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label> Zip</label>
                                                    <input type="text" name="zip" class="form-control offer-input"placeholder="Zip">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label> Parcel Number (MLS)</label>
                                                    <input type="number" oninput="this.value = this.value.slice(0, 7)" name="mlsNumber" class="form-control offer-input" placeholder="Property Parcel Number">
                                                </div>

                                            </div>
                                            <div class="col-md-6">
                                                <label> Zip</label>
                                                <input type="text" name="zip" class="form-control offer-input"placeholder="Property Zip">
                                                {{-- <div class="form-group text-center  mt-md-4 ">
                                                    <input type="file" name="loanapprovalimg" class="btn btnWidth"
                                                        value="Loan pre-approval">
                                                </div> --}}
                                            </div>
                                        </div>


                                </div>
                                    <div class="form-group text-center">
                                        <button type="submit" class="btn btnBlk btnWidth mx-2">NEXT</button>
                                    </div>

                                </div><!-- property(End) -->
                            </div><!-- offerForm-width -->
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="offerBg"><img src="images/form-pic.png"></div>
    </section>
    <div class="modal fade" id="buyerModal" tabindex="-1" role="dialog" aria-labelledby="buyerModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="buyerModalLabel">Add Buyer</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="buyerForm" method="post" enctype="multipart/form-data" action="javascript:;">
            <div class="modal-body">

                    <div class="form-group">
                        <label for="buyerName" class="col-form-label">Name*</label>
                        <input type="text" class="form-control" placeholder="Name"  name="buyerName" id="buyerName" required>
                    </div>
                    <div class="form-group">
                        <label for="buyerEmail" class="col-form-label">Email*</label>
                        <input type="text" class="form-control" name="buyerEmail" placeholder="Email" id="buyerEmail" required>
                    </div>
                    <div class="form-group">
                        <label for="phone" class="col-form-label">Phone*</label>
                        <input type="text" class="form-control" name="phone" placeholder="phone" id="phone" required>
                    </div>

            </div>
            <div class="modal-footer">
                <div id="formResult"></div>
                <button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
            </div>
        </form>
        </div>
    </div>
</div>
</main>
@section('script')
<script type="text/javascript">
    $(document).ready(function(){


        $('#buyers-select').on('change', function() {
            // Get the number of selected options
            var selectedCount = $(this).find('option:selected').length;

            // Disable selection of new options when limit is reached
            if (selectedCount >= 4) {
                $(this).find('option:not(:selected)').prop('disabled', true);
            } else {
                $(this).find('option:not(:selected)').prop('disabled', false);
            }
        });


        handleStatusChanged();
        $('#buyerModal').on('hidden.bs.modal', function(e){
            $(this).find('form').trigger('reset');

        });

        $(".buyerForm").submit(function(){
            var fromResult =  $(this).find('#formResult');
                fromResult.removeClass("alert alert-success alert-danger").html('');
            var btn =  $(this).find('#btnSubmit');
                btn.hide();
            fromResult.html('<img src="/assets/images/loader.gif" alt="fetching details, Please Wait..." />');
            var formData = new FormData(this);
            var url = '{{ route("buyer.create") }}';
            _ajax.postFormData(url, formData, function(res){
                if(res.success){
                    fromResult.addClass("alert alert-success").html('<span>'+ res.message +' </span>');
                    btn.show();

                    setTimeout(function(){
                        location.reload();
                    }, 2000);
                }
                else{
                    fromResult.removeClass("alert alert-success alert-danger").html('');
                    fromResult.addClass("alert alert-danger").html('<span>'+ res.message +' </span>');
                if(res.message === "No Record Found"){

                }else{
                    btn.show();
                }

                }
            })
            });
    });

    function handleStatusChanged() {
        $('#toggleElement').on('change', function () {
            toggleStatus();
        });
        $('#toggleElements').on('change', function () {
            toggleStatus();
        });

    }

    function toggleStatus() {
        if ($('#toggleElement').is(':checked')) {
            $('#searchByMls').css("display", "block");
            $('#getData').css("display", "block");
        } else {
            $('#searchByMls').css("display", "none");
            $('#getData').css("display", "none");
        }
        if ($('#toggleElementt').is(':checked')) {
            $('#searchByAddress').css("display", "block");
        } else {
            $('#searchByAddress').css("display", "none");
        }
        if ($('#toggleElements').is(':checked')) {
            $('#manual :input').attr('disabled', false);
            $('#manual').css("display", "block");
        } else {
            $('#manual :input').attr('disabled', true);
            $('#manual').css("display", "none");
        }
    }

    $("#toggleModal").click(function(){
        $("#buyerModal").modal('toggle');
    });



    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#get-token-btn').click(function() {
            var mlsNumber = $('input[name="mlsNumber"]').val();
            $.ajax({
                url: "{{ route('get.access.token') }}",
                type: "POST",
                dataType: "json",
                data: {
                    mlsNumber: mlsNumber // Include the mlsNumber value in the AJAX call data
                },
                beforeSend: function() {
                    // Show a loading spinner or disable the button
                    $('#get-token-btn').prop('disabled', true);
                },
                success: function(response) {
                    if (response === 0) {
                        // Show "No MLS data found" message
                        $('#mlsError').text('No MLS data found');
                    }
                    else
                    {
                        // Handle the successful response from the server
                        $('input[name="address"]').val(response.address);
                        $('input[name="city"]').val(response.city);
                        $('input[name="state"]').val(response.state);
                        $('input[name="zip"]').val(response.postal_code);
                        $('input[name="county"]').val(response.county);
                    }

                },
                error: function(xhr, status, error) {
                    // Handle the error response from the server
                    console.log(xhr.responseText);
                },
                complete: function() {
                    // Hide the loading spinner or re-enable the button
                    $('#get-token-btn').prop('disabled', false);
                }
            });
        });
    });
</script>
@endsection
@endsection