@extends('layouts.app')

@section('title', 'Create Close Property')

@section('content')
<x-content-body>
    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />
        <!-- Combined Form in One Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>Property Details</h5>
            </div>
            <div class="card-body">
                <form id="close-create-property">


                    <div class="row">
                      <div class="col-5">
                        <x-input-label for="Properties" required="true" :value="__('Properties')" />
                        <select class="form-control form-control-sm select2-hidden-accessible" name="property_id"
                            tabindex="-1" aria-hidden="true" id="property_list">
                            @forelse ($properties as $property)
                            <option value="{{ $property['id'] }}">
                                {{ $property['addresses'][0]['street'] }} {{ $property['addresses'][0]['city'] }}
                                {{ $property['addresses'][0]['state'] }} {{ $property['addresses'][0]['zip_code'] }}
                            </option>
                            @empty
                            <option>Property Not Found</option>
                            @endforelse
                        </select>
                      </div>
                    </div>

                    <div class="row mt-2">
                        <h6 class="text-primary">Available Funds</h6>
                        <div class="col-4">
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" name="make_fund" value="1">
                                <label class="form-check-label" for="makeFund">Make Funds Available if Cash</label>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"  name="lender"
                                    value="lender"  value="1">
                                <label class="form-check-label" for="lender">Lender Forwards The Funds</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <h6 class="text-primary">All Paperwork</h6>
                        <div class="col-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="sell"
                                    value="1">
                                <label class="form-check-label" for="sell">Sell Signs</label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="buyer"
                                    value="1">
                                <label class="form-check-label" for="buyer">Buyer Signs</label>
                            </div>

                        </div>
                        <div class="col-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="collect_check"
                                    value="1">
                                <label class="form-check-label" for="collectCheck">Collect check</label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="get_closing_document"
                                    value="1">
                                <label class="form-check-label" for="closingDocument">Closing Document
                                    Received</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <h6 class="text-primary">Forward To Managing Broker</h6>
                        <div class="col-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                    name="all_listing_documentation" value="1">
                                <label class="form-check-label" for="fundsForwarded">All Listing documentation</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                    name="office_required_documentation" value="1">
                                <label class="form-check-label" for="fundsForwarded">All Purchase Agreement
                                    Documentation</label>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                    name="all_purchase_agrement" value="1">
                                <label class="form-check-label" for="fundsForwarded">Office Required Documents</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                    name="funds_forwarded" value="1">
                                <label class="form-check-label" for="fundsForwarded">Funds Forwarded</label>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <h6 class="text-primary">Officially Close</h6>
                        <div class="col-4">
                            <div class="col-auto">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox"
                                        name="get_paid_officially" value="1">
                                    <label class="form-check-label" for="getPaid">Get paid</label>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox"
                                        name="pickup_lock_box" value="1">
                                    <label class="form-check-label" for="pickupLockBox">Pickup lock box</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="col-auto">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox"
                                        name="remove_signature" value="1">
                                    <label class="form-check-label" for="removeSign">Remove sign</label>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="markPropertySold"
                                        name="mark_property_sold" value="1">
                                    <label class="form-check-label" for="markPropertySold">Mark property sold on all
                                        listings</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col d-flex justify-content-end gap-2">
                            <button type="submit" class="btn btn-primary btn-sm mt-3 submit">Save & Exit </button>
                            <button type="" class="btn btn-primary btn-sm mt-3 ">Save </button> {{-- tpe will be aded later --}}
                            <button type="button" class="btn btn-primary btn-sm mt-3" id="close_property_exit">Exit </button> {{-- tpe will be aded later --}}


                        </div>
                    </div>
                </form>
            </div>
        </div>
</x-content-body>
@endsection




@push('js')

<script>
    $("#close_property_exit").click(function() {
        window.location.href = closePropertyCreateRoute;
    });
</script>


<script>
    closePropertyCreateRoute = @json(route('close-property.index'));
    </script>
    <script>
        $('#property_list').select2({
        tags: true,
    });
    </script>
    <script>
         var $form = $('form[id="close-create-property"]');
    var $submitButton = $form.find('button[type="submit"]');

    $form.validate({
        rules: {
            property_id: {
                required: true,
            }
        },
        messages: {
            property_id: {
                required: "Please select property",
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.after(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid').removeClass('is-valid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid').addClass('is-valid');
        },
        errorClass: 'text-danger',
        submitHandler: function (form) {

            handleAjaxRequest(form, "#close-create-property", @json(route('close-property.store')), null,  @json(route('close-property.index')), null, null);
        }
    });
    </script>

@endpush