@extends('layouts.app')
@section('content')
@inject('DBEscrowCompaniesHelper','\App\Helpers\DBHelpers\DBEscrowCompaniesHelper' )
@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">

@endsection

<main>
    {{-- @dd($buyers) --}}
    <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 class="active">
                                    <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>

                        <div class="offerForm-width mt-lg-5 mt-md-4 mt-3">
                            <form method="post" action="{{ url('/step-two-store') }}" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="offerId" value="{{ Request::segment(2) }}">
                                <div class="propertyForm mt-lg-5 mt-md-4 mt-3">
                                    <h3 class="formTitle">Contract Terms:</h3>
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            <div class="form-group">
                                                <label>Purchase Price (Amount)</label>
                                                <input type="text" maxlength="10" onkeyup="javascript: this.value = this.value.replace(/[^0-9]/g,'')" name="purchacePrice" class="form-control offer-input" placeholder="Purchase Price">
                                            </div>

                                            <div class="form-group">
                                                <label>Will Owner Occupy?</label>
                                                <div class="custom-radioRow">
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="customRadio" name="ownerOccupy" value="YES">
                                                        <label class="custom-control-label" for="customRadio">Yes</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="customRadio2" name="ownerOccupy" value="NO">
                                                        <label class="custom-control-label" for="customRadio2">No</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
{{--                                        <div class="col-md-6 col-sm-6">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <label>Will Owner Occupy?</label>--}}
{{--                                                <div class="custom-radioRow">--}}
{{--                                                    <div class="custom-control custom-radio">--}}
{{--                                                        <input type="radio" class="custom-control-input" id="customRadio" name="ownerOccupy" value="YES">--}}
{{--                                                        <label class="custom-control-label" for="customRadio">Yes</label>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="custom-control custom-radio">--}}
{{--                                                        <input type="radio" class="custom-control-input" id="customRadio2" name="ownerOccupy" value="NO">--}}
{{--                                                        <label class="custom-control-label" for="customRadio2">No</label>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            <div class="form-group">
                                                <label>Earnest Money (Amount)</label>
                                                <input type="text" maxlength="10" onkeyup="javascript: this.value = this.value.replace(/[^0-9]/g,'')" name="earnestMoney" class="form-control offer-input" placeholder="Earnest Money">
                                            </div>

                                            <div class="form-group">
                                                <label>EMD Presented With Offer?</label>
                                                <div class="custom-radioRow">
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="customRadio3" name="EMDPresentedWithOffer" value="YES">
                                                        <label class="custom-control-label" for="customRadio3">Yes</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="customRadio4" name="EMDPresentedWithOffer" value="NO">
                                                        <label class="custom-control-label" for="customRadio4">No</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
{{--                                        <div class="col-md-6 col-sm-6">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <label>EMD Presented With Offer?</label>--}}
{{--                                                <div class="custom-radioRow">--}}
{{--                                                    <div class="custom-control custom-radio">--}}
{{--                                                        <input type="radio" class="custom-control-input" id="customRadio3" name="EMDPresentedWithOffer" value="YES">--}}
{{--                                                        <label class="custom-control-label" for="customRadio3">Yes</label>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="custom-control custom-radio">--}}
{{--                                                        <input type="radio" class="custom-control-input" id="customRadio4" name="EMDPresentedWithOffer" value="NO">--}}
{{--                                                        <label class="custom-control-label" for="customRadio4">No</label>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12">
                                            <div class="form-group">
                                                <label>EMD Options:</label>
                                                <select class="form-control offer-select" name="emdOption" required>
                                                    <option value="" selected disabled>Select EMD Option</option>
                                                    <option value="Wired">Wired</option>
                                                    <option value="Cash">Cash </option>
                                                    <option value="Cashier’s Check">Cashier’s Check</option>

                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label>Wired within:</label>
                                                <div class="form-inline">
                                                    <select class="form-control offer-select" name="wiredWithin" required>
                                                        <option value="1">1</option>
                                                        <option value="2" selected >2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                        <option value="5">5</option>
                                                        <option value="6">6</option>
                                                        <option value="7">7</option>
                                                        <option value="8">8</option>
                                                        <option value="9">9</option>
                                                        <option value="10">10</option>
                                                    </select>
                                                    <p class="inputText mb-0 ml-3">Business Days</p>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
{{--                                        <div class="col-md-6 col-sm-6">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <label>Wired within:</label>--}}
{{--                                                <div class="form-inline">--}}
{{--                                                    <select class="form-control offer-select" name="wiredWithin" required>--}}
{{--                                                        <option value="2" selected >2</option>--}}
{{--                                                        <option value="1">1</option>--}}
{{--                                                        <option value="2">2</option>--}}
{{--                                                        <option value="3">3</option>--}}
{{--                                                        <option value="4">4</option>--}}
{{--                                                        <option value="5">5</option>--}}
{{--                                                        <option value="6">6</option>--}}
{{--                                                        <option value="7">7</option>--}}
{{--                                                        <option value="8">8</option>--}}
{{--                                                        <option value="9">9</option>--}}
{{--                                                        <option value="10">10</option>--}}
{{--                                                    </select>--}}
{{--                                                    <p class="inputText mb-0 ml-3">Business Days</p>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6">
                                            <div class="form-group">
                                                <label>Wired to:</label>
                                                <select class="form-control offer-select" name="wiredTo">
                                                    <option selected disabled>Select Wired To</option>
                                                    <option value="Escrow Holder">Escrow Holder</option>
                                                    <option value="Buyer's Broker Trust Account">Buyer's Broker Trust Account</option>
                                                    <option value="Seller's Broker Trust Account">Seller's Broker Trust Account</option>
                                                </select>
                                            </div>
                                        </div>

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

                                <div class="propertyForm mt-lg-5 mt-md-4 mt-3">
                                    <h3 class="formTitle">Escrow Details:</h3>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6">
                                            <div class="form-group">
                                                <label>Escrow Company</label>
                                                <select class="form-control offer-select" name="escrowCompany" id="escrowCompany">
                                                    <option selected disabled>Select Company</option>
                                                    @foreach ($DBEscrowCompaniesHelper::getAuthEscrowCompaniesDropDown() as $key => $item)
                                                        <option data-id="{{ $key }}" value="{{ $key }}">{{ $item }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="form-group">
                                                <label>Escrow Officer</label>
                                                <select class="form-control offer-select" id="escrowOfficer" name="escrowOfficer">

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6">
                                            <div class="form-group">
                                                <label>Close of Escrow</label>

                                                <div class="input-group date datePicker-group" data-provide="datepicker">
                                                    <input type="date" name="closeOfEscrow"
                                                        class="form-control datepicker form-control offer-input"
                                                        placeholder="Date">

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

                                    </div>
                                    <div class="form-group text-center display-flex juctify-content-center mt-lg-5 mt-md-4 mt-3">


                                        <button type="submit" class="btn btnBlk mx-2">NEXT</a>
                                    </div>
                                </div>
                            </form>
                        </div><!-- offerForm-width -->

                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection
@section('script')

<script>
    $(document).on("change", "#escrowCompany", function(){

            $("#city_id").append("<option selected value=''>Loading officer ....!</option>");
            getOfficerAgainstCompanyId($(this).find(':selected').data("id"));
        })

        function getOfficerAgainstCompanyId(companyId){
            console.log(companyId);
            _ajax.post("{{ route('getOfficer') }}" , {id:companyId}, function(res){
                if(res.success){
                    $('#escrowOfficer').empty();
                    $("#escrowOfficer").append("<option  selected disabled value=''>Select Officer</option>");
                    for(var a = 0 ; a <res.data.length ; a++){
                        $("#escrowOfficer").append("<option data-id='"+res.data[a].id+"' value='"+res.data[a].id+"'>" + res.data[a].name +"</option>");
                    }
                }
            })
        }
</script>

@endsection