@props(['service' => new \App\Models\Service()])

<div class="container py-4">
    <h3 class="mb-5">Bill To</h3>
    <p class="text-muted mb-5">Kindly confirm your Bill To details below:</p>
    <div class="form-group mb-5">
        <div class="form-check form-check-custom form-check-xs form-check-success mb-4">
            <input type="checkbox" class="form-check-input" name="bill_to" id="bill_to_same" value="1"
                @checked(old('bill_to'))>
            <label class="form-check-label fw-semibold text-dark" for="bill_to_same">
                Confirm to use this Bill To details

            </label>

        </div>
        <p class="text-muted ms-8">
            {{ 'Company Name: ' . ($application->payment->company_name ?? ($contactPerson?->company->company_name . " ({$contactPerson?->company->registration_no})")) }}<br>
            {{ 'Contact Person: ' . ($application->payment->contact_person ?? $contactPerson?->name) }}<br>
            {{ 'Address: ' . ($application->payment->address ?? $contactPerson?->company->full_address) }} <br>
            {{ 'Email: ' . ($application->payment->email ?? $contactPerson?->email) }} <br>
            {{ 'Phone No: ' . ($application->payment->phone_no ?? $contactPerson?->phone_no) }}
        </p>
        <div class="form-check form-check-custom form-check-xs form-check-success mb-4">
            <input type="checkbox" class="form-check-input" name="bill_to" id="bill_to_new" value="0"
                @checked(old('bill_to'))>
            <label class="form-check-label fw-semibold text-dark" for="bill_to_new">
                Change Bill To third parties
            </label>
        </div>
        @error('bill_to')
            <span class="text-sm text-danger">
                {{ $message }}
            </span>
        @enderror
    </div>

    <div class="card" id="bill_to_new_form" style="display: none;">
        <div class="card-body">
            <h4>Bill To:</h4>
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="company_name" class="col-lg-3 col-form-label fw-semibold fs-6 required">Company Name</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8">
                    <input type="text" class="form-control form-control-sm" name="company_name" id="company_name">
                    @error('company_name')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="contact_person" class="col-lg-3 col-form-label fw-semibold fs-6 required">Contact Person</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8">
                    <input type="text" class="form-control form-control-sm" name="contact_person"
                        id="contact_person">
                    @error('contact_person')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="address" class="col-lg-3 col-form-label fw-semibold fs-6 required">Address</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8">
                    <input type="text" class="form-control form-control-sm" name="address" id="address">
                    @error('address')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="phone_no" class="col-lg-3 col-form-label fw-semibold fs-6 required">Phone Number</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8">
                    <input type="text" class="form-control form-control-sm" name="phone_no" id="phone_no">
                    @error('phone_no')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->
            <div class="row mb-3">
                <!--begin::Label-->
                <label for="email" class="col-lg-3 col-form-label fw-semibold fs-6 required">Email Address</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8">
                    <input type="text" class="form-control form-control-sm" name="email" id="email">
                    @error('email')
                        <span class="text-sm text-danger">
                            {{ $message }}
                        </span>
                    @enderror
                </div>
                <!--end::Col-->
            </div>
            <!--end::Row-->
        </div>
    </div>
</div>

@push('scripts')
    <script>
        $(function() {
            let contactPersonCheckboxes = $("input[name='bill_to']"); // Select checkboxes
            let actionButtons = $(".action-btn"); // Adjust the selector based on your actual buttons

            toggleContactPerson(contactPersonCheckboxes.filter(":checked"));

            actionButtons.on("click", function(e) {
                if ($(this).hasClass("disabled")) {
                    e.preventDefault(); // Prevent navigation
                }
            });

            contactPersonCheckboxes.on('click', function() {
                toggleContactPerson(this);
            });

            function toggleContactPerson(obj) {
                contactPersonCheckboxes.not('#' + $(obj).prop('id')).prop('checked', false);

                if ($(obj).prop('checked')) {

                    if ($(obj).val() == 1) {
                        $('#bill_to_new_form').hide();
                        $('#save-bill-btn').hide();
                        actionButtons.removeClass("disabled");
                    } else {
                        $('#bill_to_new_form').show();
                        $('#save-bill-btn').show();
                        actionButtons.addClass("disabled");
                    }
                } else {
                    $('#bill_to_new_form').hide();
                    $('#save-bill-btn').hide();
                    actionButtons.addClass("disabled");
                }
            }
        });
    </script>
@endpush