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

@php
    $firstContactPerson = auth()->user()->company->company_pics->where('type', \App\Models\CompanyPic::CONTACT_1)->first();
    $secondContactPerson = auth()->user()->company->company_pics->where('type', \App\Models\CompanyPic::CONTACT_2)->first();
@endphp

<div class="card border-0 shadow-none">
    <div class="card-body">
        <h1>Contact Person</h1>
        <span class="text-muted">For this service, you are allowed to choose contact personnel to appear on the directory page once the product is approved.</span>

        <hr class="my-10">

        <p class="mb-1">Options:</p>

        <div class="form-group mb-5">
            <div class="form-check form-check-custom form-check-xs form-check-success mb-2">
                <input type="checkbox" class="form-check-input" name="contact_person" id="contact_person_same" value="1" @checked(old('contact_person', $service->contact_person ?? '') == 1)>
                <label class="form-check-label fw-semibold text-dark" for="contact_person_same">
                    Same personnels as registered in the Company Form.
                </label>
            </div>
            <div class="form-check form-check-custom form-check-xs form-check-success mb-2">
                <input type="checkbox" class="form-check-input" name="contact_person" id="contact_person_new" value="2" @checked(old('contact_person', $service->contact_person ?? '') == 2)>
                <label class="form-check-label fw-semibold text-dark" for="contact_person_new">
                    Register new personnels.
                </label>
            </div>
            @error('contact_person')
                <span class="text-sm text-danger">
                    {{ $message }}
                </span>
            @enderror
        </div>

        <div class="card" id="contact_person_same_form">
            <div class="card-body">
                <h4>Contact Person (Primary)</h4>
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Name</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        {{ $firstContactPerson?->name }}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Designation</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        {{ $firstContactPerson?->designation }}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Contact No.</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        {{ $firstContactPerson?->phone_no }}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Email Address</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        {{ $firstContactPerson?->email }}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->

                <hr class="mb-5">

                <h4>Contact Person (Secondary)</h4>
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Name</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        {{ $secondContactPerson?->name }}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Designation</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        {{ $secondContactPerson?->designation }}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Contact No.</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        {{ $secondContactPerson?->phone_no }}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Email Address</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        {{ $secondContactPerson?->email }}
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
        </div>

        <div class="card" id="contact_person_new_form">
            <div class="card-body">
                <h4>Contact Person (Primary)</h4>
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="contact_1_name" class="col-lg-3 col-form-label fw-semibold fs-6 required">Name</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="contact_1_name" id="contact_1_name" value="{{ old('contact_1_name', $service->contact_1_name ?? '') }}">
                        @error('contact_1_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_1_designation" class="col-lg-3 col-form-label fw-semibold fs-6 required">Designation</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="contact_1_designation" id="contact_1_designation"
                            value="{{ old('contact_1_designation', $service->contact_1_designation ?? '') }}">
                        @error('contact_1_designation')
                            <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_1_phone_no" class="col-lg-3 col-form-label fw-semibold fs-6 required">Contact No.</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="contact_1_phone_no" id="contact_1_phone_no"
                            value="{{ old('contact_1_phone_no', $service->contact_1_phone_no ?? '') }}">
                        @error('contact_1_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="contact_1_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="contact_1_email" id="contact_1_email" value="{{ old('contact_1_email', $service->contact_1_email ?? '') }}">
                        @error('contact_1_email')
                            <span class="text-sm text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->

                <hr class="mb-5">

                <h4>Contact Person (Secondary)</h4>
                <!--begin::Row-->
                <div class="row mb-3">
                    <!--begin::Label-->
                    <label for="contact_2_name" class="col-lg-3 col-form-label fw-semibold fs-6 required">Name</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="contact_2_name" id="contact_2_name" value="{{ old('contact_2_name', $service->contact_2_name ?? '') }}">
                        @error('contact_2_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_2_designation" class="col-lg-3 col-form-label fw-semibold fs-6 required">Designation</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="contact_2_designation" id="contact_2_designation"
                            value="{{ old('contact_2_designation', $service->contact_2_designation ?? '') }}">
                        @error('contact_2_designation')
                            <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_2_phone_no" class="col-lg-3 col-form-label fw-semibold fs-6 required">Contact No.</label>
                    <!--end::Label-->
                    <!--begin::Col-->
                    <div class="col-lg-8">
                        <input type="text" class="form-control form-control-sm" name="contact_2_phone_no" id="contact_2_phone_no"
                            value="{{ old('contact_2_phone_no', $service->contact_2_phone_no ?? '') }}">
                        @error('contact_2_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="contact_2_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="contact_2_email" id="contact_2_email"
                            value="{{ old('contact_2_email', $service->contact_2_email ?? '') }}">
                        @error('contact_2_email')
                            <span class="text-sm text-danger">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        var contactPersonCheckboxes = $("input[type=checkbox][name=contact_person]");
        var selectedContactPerson = contactPersonCheckboxes.filter(":checked");

        $(function() {
            toggleContactPerson(selectedContactPerson);
        });

        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) {
                    $('#contact_person_same_form').show();
                    $('#contact_person_new_form').hide();
                } else {
                    $('#contact_person_new_form').show();
                    $('#contact_person_same_form').hide();
                }
            } else {
                $('#contact_person_new_form').hide();
                $('#contact_person_same_form').hide();
            }
        }
    </script>
@endpush