@php
    $application = $application ?? null;
    $payment_code = $payment_code ?? null;
    $countries = $countries ?? \App\Models\Country::all();
@endphp
<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="card card-bordered h-100">
            <div class="card-inner">

                <div id="nav-tab-row">
                    <ul class="nav nav-tabs justify-content-center">
                        @if(!$showBillForm)
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab"
                                   href="javascript:void(0)">Enter Customer Details</a>
                            </li>
                        @else
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab"
                                   href="javascript:void(0)">Enter Bill Details</a>
                            </li>
                        @endif
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane @if(!$showBillForm) active @endif" id="customer-details-tab" role="tabpanel">
                        <div class="card no-bdr">
                            <div class="card-inner">
                                <form method="POST"
                                      action="{{ route('applicant.register', ['service' => $service->id, 'application' => $application, 'payment_code' => $payment_code]) }}"
                                      id="applicant-registration-form">
                                    @csrf

                                    <div class="form-group">
                                        <label class="form-label" for="applicant-country">Country</label>
                                        <div class="form-control-wrap">
                                            <select data-search="on" class="form-select form-control" name="country"
                                                    id="applicant-country">
                                                @foreach($countries as $c)
                                                    <option @if($c->code === old('country', 'NG')) selected
                                                            @endif data-phone-prefix="{{ $c->phone_prefix }}"
                                                            value="{{ $c->code }}"
                                                            style="width: fit-content">{{ $c->name }} ::
                                                        +{{ $c->phone_prefix }}</option>
                                                @endforeach

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

                                    <div class="form-group">
                                        <label class="form-label" for="applicant-phone">Phone Number</label>
                                        <div class="row p-2">
                                            <input type="text" class="form-control form-control-lg w-70" name="phone"
                                                   id="applicant-phone"
                                                   value="{{ old('phone') }}"
                                                   required data-rule-validphone
                                                   onkeypress="return BaseHelper.allowOnlyPhoneCharacters(event);"
                                                   placeholder="Enter Customer's phone number">
                                            <button type="button" class="btn btn-primary w-30" id="verifyPhoneNumber">Verify</button>
                                            <span id="applicant-phone-error" class="invalid"></span>
                                        </div>
                                    </div>
                                    <div id="applicantDetails" class="mb-1 @if(empty(old())) hidden @endif">
                                        <div class="form-group">
                                            <label class="form-label" for="applicant-name">First Name</label>
                                            <input type="text" autofocus class="form-control form-control-lg"
                                                   name="firstname"
                                                   id="applicant-firstname" value="{{ old('firstname') }}" required
                                                   placeholder="Enter Customer's First Name">
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label" for="applicant-name">Last Name</label>
                                            <input type="text" autofocus class="form-control form-control-lg"
                                                   name="lastname"
                                                   id="applicant-lastname" value="{{ old('lastname') }}" required
                                                   placeholder="Enter Customer's Last Name">
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label" for="applicant-email">Email</label>
                                            <input type="email" class="form-control form-control-lg" name="email"
                                                   id="applicant-email"
                                                   value="{{ old('email') }}" required
                                                   placeholder="Enter Customer's Email">
                                        </div>

                                        <div class="form-group">
                                            <label class="form-label" for="applicant-email">Address</label>
                                            <textarea type="address" class="form-control form-control-lg" name="address"
                                                      id="applicant-address" required
                                                      placeholder="Enter Customer Address">{{ old('address') }}</textarea>
                                        </div>
                                    </div>
                                    <input type="hidden" name="applicant_id">
                                    <input type="hidden" id="redirect_route" value="{{ $redirectRoute }}"
                                           name="redirect_route">
                                    <input type="hidden" id="service" value="{{ $service->id }}" name="service">

                                    <div class="form-group">
                                        <button type="button" id="applicantFormSubmissionBtn" class="btn btn-lg btn-block bg-custom-green text-white">
                                            Submit
                                        </button>
                                    </div>
                                </form>

                            </div>

                        </div>
                    </div>
                    <div class="tab-pane @if($showBillForm) active @endif" id="bill-details-tab" role="tabpanel">
                        <div class="card no-bdr">
                            <div class="card-inner">
                                <form method="POST"
                                      @if($showBillForm && $applicant) action="{{ route('service.invoice.save-bill-details', compact('service', 'applicant')) }}"
                                      @endif
                                      id="applicant-registration-form">
                                    @csrf
                                    @if($showBillForm && $applicant)
                                        <div class="form-group">
                                            <p>
                                                <strong>Customer Name </strong>: {{ $applicant->FullName }} <br>
                                                <strong>Customer Email </strong>: {{ $applicant->email }} <br>
                                                <strong>Customer Phone </strong>: {{ $applicant->phone }} <br>
                                                <strong>Billing Address </strong>: {{ $applicant->address }}
                                            </p>
                                        </div>
                                    @endif
                                    @if($authUser->can('generate_bills_for_staff'))
                                        <div class="form-group">
                                            <label class="form-label" for="applicant-phone">
                                                <p
                                                        class="text-blue font-weight-bold"
                                                        style="font-size: larger;">Fill the
                                                    detail below if you are generating this bill on behalf of a
                                                    staff <br>
                                                    <small>(You can skip and proceed)</small>
                                                </p>
                                                <p>Enter the staff's name or email to search</p>
                                            </label>
                                            @if(isset($offices) && !empty($offices))
                                                <div class="form-group">
                                                    <label class="form-label" for="staff_office_id">Office <span
                                                                class="text-danger">(optional)</span></label>
                                                    <div class="form-control-wrap">
                                                        <select id="staff_office_id"
                                                                class="form-select show-placeholder"
                                                                name="staff_office_id"
                                                                data-placeholder="Select Office">
                                                            <option></option>
                                                            @foreach($offices as $office)
                                                                <option value="{{$office->id}}">{{$office->display_name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    @if(old('staff_office_id'))
                                                        @error('staff_office_id')
                                                        <span class="text-danger" role="alert">
                                                            <small>{{ $message }}</small>
                                                        </span>
                                                        @enderror
                                                    @endif
                                                </div>
                                            @else
                                                <input type="hidden" name="staff_office_id">
                                            @endif
                                            <input type="text" class="form-control" id="users-autocomplete"
                                                   data-source-url="{{ route('user.search_active_users') }}">
                                            <input type="hidden" class="form-control" name="staff_id"
                                                   placeholder="Enter user's name or email to search" id="staff_id"
                                                   value="{{ old('staff_id') }}">
                                            <span class="text-warning" role="alert" id="staff_search_warning">
                                                <small></small>
                                            </span>
                                            @error('staff_id')
                                            <span class="text-danger" role="alert">
                                                <small>{{ $message }}</small>
                                            </span>
                                            @enderror
                                        </div>
                                    @endif

                                    <div class="form-group">
                                        <label class="form-label" for="applicant-phone">Additional Details about the
                                            bill to be
                                            generated</label>
                                        <textarea class="form-control form-control-lg" name="additional_details"
                                                  id="additional_details">{{ old('additional_details') }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="applicant-phone">Supporting Documents</label>
                                        <input type="file" multiple class="form-control form-control-lg"
                                               name="supporting_document"
                                               id="supporting_document">
                                    </div>

                                    <div class="form-group">
                                        <button type="submit" class="btn btn-lg btn-block bg-custom-green text-white">
                                            Submit
                                        </button>
                                    </div>
                                </form>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section('more-scripts')
    <script>
        (function ($) {
            $(document).ready(function () {
                const applicantFormID = '#applicantFormSubmissionBtn';
                const phoneField = document.querySelector('#applicant-phone');
                let applicantPhoneError = $('#applicant-phone-error');
                $('#applicantFormSubmissionBtn').click(function ({target}) {
                    if($('#applicantDetails').hasClass('hidden')) {
                        phoneField.setCustomValidity('Verify phone number to continue');
                        phoneField.reportValidity();
                    } else {
                        $('#applicant-registration-form').submit();
                    }
                });
                $('#verifyPhoneNumber').click(({target}) => {
                    if(!phoneField.checkValidity()){
                        console.log();
                        // displayNameField.setCustomValidity('The specified display name is already taken');
                        phoneField.reportValidity();
                    }
                    BaseHelper.verifyApplicant('{{ $formWrapper }}', 'applicant-registration-form', (requestResult) => {
                        if(!requestResult.status){
                            if(!$('#applicantDetails').hasClass('hidden')) {
                                $('#applicantDetails').addClass('hidden');
                            }
                            // phoneField.setCustomValidity(requestResult.message);
                            applicantPhoneError.html(requestResult.message);
                            // phoneField.reportValidity();
                            // phoneField.setCustomValidity('');
                        } else{
                            console.log({requestResult});
                            applicantPhoneError.html('');
                        }
                    });
                });


                $('#staff_search_warning').hide();
                @if(isCurrentRoute('service.invoice.enter_bill_details'))
                    const inputID = 'users-autocomplete';
                    let autocompleteSource = $(`#${inputID}`).data('source-url');

                    $('#staff_office_id').change(function (e) {
                        const officeVal = e.target.value;
                        const sourceURL = autocompleteSource.split("?")[0];
                        if (officeVal) {
                            autocompleteSource = sourceURL + '?office_id=' + officeVal;
                        } else {
                            autocompleteSource = sourceURL;
                        }
                        BaseHelper.autocompleteHelper(inputID, autocompleteSource,
                            (el, ui) => {
                                console.log(ui.item, el.target);
                                $(`#${inputID}`).val(ui.item.label);
                                $('#staff_id').val(ui.item.value);
                            },
                            (event, ui) => {
                                console.log('RESPONSE', {event, ui});
                                if (ui.content.length === 0) {
                                    $('#staff_search_warning small').html('NO RESULTS FOUND');
                                    $('#staff_search_warning').show();
                                } else {
                                    $('#staff_search_warning').hide();
                                }
                            }
                        );
                        console.log({autocompleteSource});
                    });

                    BaseHelper.autocompleteHelper(inputID, autocompleteSource, (e, ui) => {
                        console.log(ui.item, e.target);
                        $(`#${inputID}`).val(ui.item.label);
                        $('#staff_id').val(ui.item.value);
                    });
                @endif

                $(document).on('click', '.proceed-with-applicant', function (e) {
                    const applicantID = $(e.target).data('applicant-id');
                    $('#applicant-registration-form').append(`
                        <input type="hidden" name="applicant_id" value="${applicantID}">
                    `);
                    document.querySelector('#applicant-registration-form').submit();
                });

            })
        })(jQuery)
    </script>

@stop