@extends('layouts.admin.index')
@section('content')
<style>
button:focus {
    outline: none !important;
}

.nav-link {
    background-color: transparent !important;
    padding: 10px 15px !important;
}

.nav-link.active {
    background-color: #036328 !important;
    color: #fff !important;
}

#suggestions {
    border: 1px solid #ccc;
    display: none;
    position: absolute;
    background-color: white;
    z-index: 1000;
    width: 200px;
    max-height: 200px;
    /* Adjust the max-height as needed */
    overflow-y: auto;
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}
</style>
<div class="row">
    <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
        <div class="card border custom-card">
            <div class="card-header custom-card-header">
                <h5 class="main-content-label mb-0">
                    @isset($customer)
                    {{ trans('cruds.update_customer') }}
                    @else
                    {{ trans('cruds.create_customer') }}
                    @endisset
                </h5>
                <div class="card-options">
                    <a href="javascript:;" class="card-options-collapse py-0" data-bs-toggle="card-collapse"><i
                            class="fe fe-chevron-up"></i></a>
                    <a href="javascript:;" class="card-options-fullscreen py-0" data-bs-toggle="card-fullscreen"><i
                            class="fe fe-maximize"></i></a>
                    <a href="javascript:;" class="card-options-remove py-0" data-bs-toggle="card-remove"><i
                            class="fe fe-x"></i></a>
                </div>
            </div>
            <div class="card-body">
                <div class="row" style="margin-bottom: 30px;">
                    <div class="col-md-12 col-lg-12 col-12">
                        <nav>
                            <div class="nav nav-tabs justify-content-around" id="nav-tab" role="tablist">
                                <a class="nav-link active" id="nav-home-tab" data-toggle="tab"
                                    data-model="applicant_information" data-target="#applicant_information"
                                    href="#applicant_information" type="button" role="tab" aria-controls="nav-home"
                                    aria-selected="true">
                                    Applicant’s Information
                                </a>
                                {{-- <a class="nav-link" id="nav-profile-tab" data-toggle="tab" data-model="nominee_information" data-target="#nominee_information" href="#nominee_information"
                                type="button" role="tab" aria-controls="nav-profile"
                                aria-selected="false">Nominee’s Information</a> --}}
                                <a class="nav-link" id="nav-contact-tab" data-toggle="tab"
                                    data-model="joint_applicant_information" data-target="#joint_applicant_information"
                                    href="#joint_applicant_information" type="button" role="tab"
                                    aria-controls="nav-contact" aria-selected="false">Joint Applicant Info</a>
                            </div>
                            <input type="hidden" id="user_id" value="{{ isset($customer)?$customer->user_id:0 }}">
                        </nav>
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="applicant_information">
                                {!! $applicant_information !!}
                            </div>
                            <div class="tab-pane fade" id="nominee_information">
                                Profile Content
                            </div>
                            <div class="tab-pane fade" id="joint_applicant_information">
                                Contact Content
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <form id="customerForm" action='{{ route("admin.customer.store") }}' method="POST"
                enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div>rakib</div>
                    <div class="col-md-6">
                        <label class="form-label">{{__('cruds.customer_code')}}
                        </label>
                        <input type="text"
                            class="form-control unique_code  {{ $errors->has('customer_code') ? 'is-invalid' : '' }}"
                            name="customer_code" id="customer_code" placeholder="{{__('cruds.customer_code')}}"
                            value="{{ isset($customer)?$customer->customer_code:'' }}" data-model="Customer"
                            data-prefix="CUS" data-update_id="{{ isset($customer) ? $customer->id : 0 }}">
                        @if($errors->has('customer_code'))
                        <em class="invalid-feedback">
                            {{ $errors->first('customer_code') }}
                        </em>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('cruds.firstname') }} (<span class="required">*</span>)
                        </label>
                        <input type="text" class="form-control  {{ $errors->has('firstname') ? 'is-invalid' : '' }}"
                            name="firstname" id="firstname" placeholder="{{ __('cruds.firstname') }}"
                            value="{{ isset($customer) ? $customer->firstname : '' }}" required>
                        @if ($errors->has('firstname'))
                        <em class="invalid-feedback">
                            {{ $errors->first('firstname') }}
                        </em>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('cruds.lastname') }} (<span class="required">*</span>)
                        </label>
                        <input type="text" class="form-control  {{ $errors->has('lastname') ? 'is-invalid' : '' }}"
                            name="lastname" id="lastname" placeholder="{{ __('cruds.lastname') }}"
                            value="{{ isset($customer) ? $customer->lastname : '' }}" required>
                        @if ($errors->has('lastname'))
                        <em class="invalid-feedback">
                            {{ $errors->first('lastname') }}
                        </em>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">{{__('cruds.email_address')}}
                        </label>
                        <input type="email" class="form-control  {{ $errors->has('email') ? 'is-invalid' : '' }}"
                            name="email" id="email" placeholder="{{__('cruds.email')}}"
                            value="{{ isset($customer)?$customer->email:'' }}">
                        @if($errors->has('email'))
                        <em class="invalid-feedback">
                            {{ $errors->first('email') }}
                        </em>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{__('cruds.mobile_no')}}
                        </label>
                        <input type="text" class="form-control  {{ $errors->has('mobile_no') ? 'is-invalid' : '' }}"
                            name="mobile_no" id="mobile_no" placeholder="{{__('cruds.mobile_no')}}"
                            value="{{ isset($customer)?$customer->mobile_no:'' }}">
                        @if($errors->has('mobile_no'))
                        <em class="invalid-feedback">
                            {{ $errors->first('mobile_no') }}
                        </em>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">{{__('cruds.password')}}
                        </label>
                        <input type="password" class="form-control  {{ $errors->has('password') ? 'is-invalid' : '' }}"
                            name="password" id="password" placeholder="{{__('cruds.password')}}"
                            value="{{ isset($customer)?$customer->human_password:'' }}">
                        @if($errors->has('password'))
                        <em class="invalid-feedback">
                            {{ $errors->first('password') }}
                        </em>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{__('cruds.profile_photo')}}
                        </label>
                        {!!
                        uploadedFile(isset($customer)?$customer:'',isset($customer)?$customer->profile_photo:'','create','','profile_photo')
                        !!}
                        @if($errors->has('profile_photo'))
                        <em class="invalid-feedback">
                            {{ $errors->first('profile_photo') }}
                        </em>
                        @endif
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <input type="hidden" name="update_id" id="update_id"
                            value="{{ isset($customer)?$customer->id:0 }}">
                        <button class="btn ripple btn-warning update" type="submit">{{__('cruds.submit')}}</button>
                    </div>
                </div>
                </form> --}}
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
// validateSummernote('customerForm');
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function(e) {
    e.preventDefault();
    var model = $(e.target).attr("data-model");
    // console.log(model);
    reCallTab(model);
});

function reCallTab(model) {
    let formUrl, _token, formData, target, user_id;
    _token = "{{ csrf_token() }}";
    // var formUrl = ;
    target = '#' + model;
    user_id = $('#user_id').val();
    formData = {
        model: model,
        user_id: user_id
    };
    $.ajax({
        headers: {
            'x-csrf-token': _token
        },
        method: 'POST',
        data: formData,
        dataType: 'html',
        url: "{{ route('admin.customer.page_show') }}",
        // beforeSend: function() {
        //     $(target).html(window.rolling);
        // },
        error: function(err) {
            console.log(err);
        }
    }).done(function(response) {
        // console.log(response);
        $(target).html('');
        $(target).html(response);
    })

}

function activaTab(model) {
    let next_tab = $('a[data-model="' + model + '"]').next().attr('data-model');
    if (next_tab == undefined) {
        return false;
    }
    $('a[data-model="' + next_tab + '"]').tab('show');
    reCallTab(next_tab);

};
// #nominee_information_form,
$(document).on('submit', '#applicant_information_form, #joint_applicant_information_form', function(e) {
    e.preventDefault();
    var form = $(this);
    var formUrl = form.attr('action');
    var type = form.attr('method');
    var formData = new FormData($(this)[0]);
    var model = $(this).find('input[name=model]').val();
    var user_id = $(this).find('input[name=user_id]').val();
    var last_step = $(this).find('input[name=last_step]').val();
    $.ajax({
        method: 'POST',
        data: formData,
        dataType: 'json',
        url: formUrl,
        contentType: false,
        processData: false,
        success: function(response) {
            console.log(response);
            if (response.icon == 'error') {

            } else {
                if (model == 'joint_applicant_information' && (last_step == 'last' || response
                        .icon == 'skip')) {
                            
                    window.location.href = "{{ route('admin.booking.create') }}"  + "?customer_id=" + response.customer_id;
                }
                $('#user_id').val(response.user_id);
                activaTab(model);
            }

        },
    })
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    var suggestionsBox = $('#suggestions');

    $('#search').on('keyup', function() {
        var query = $(this).val();
        var _token = "{{ csrf_token() }}";

        if (query !== '') {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': _token
                },
                url: "{{ route('admin.search.suggetions') }}",
                type: "GET",
                data: {
                    'query': query
                },
                success: function(data) {
                    suggestionsBox.empty().show();
                    $.each(data, function(key, suggestion) {
                        suggestionsBox.append('<div class="suggestion-item">' +
                            suggestion.customer_code + '</div>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            suggestionsBox.hide();
        }
    });

    $('#search').on('blur', function() {
        setTimeout(function() {
            suggestionsBox.hide();
        }, 100);
    });

    $(document).on('click', '.suggestion-item', function() {
        $('#search').val($(this).text());
        suggestionsBox.hide();
    });

    $('#search').on('focus', function() {
        if (suggestionsBox.children().length > 0) {
            suggestionsBox.show();
        }
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const idTypeSelect = document.getElementById('id_type');
    const numberLabel = document.getElementById('number_label');

    const nidTypeSelect = document.getElementById('n_id_type');
    const nnumberLabel = document.getElementById('nnumber_label');

    const labelMap = {
        'National ID': 'National ID',
        'Birth Reg No': 'Birth Reg No',
        'Passport No': 'Passport No',
        // 'Driving License': 'Driving License',
    };

    function updateLabel() {
        const selectedValue = idTypeSelect.value;
        if (labelMap[selectedValue]) {
            numberLabel.textContent = labelMap[selectedValue];
        } else {
            numberLabel.textContent = "{{ __('cruds.id_number') }}";
        }
    }

    function nupdateLabel() {
        const nselectedValue = nidTypeSelect.value;
        if (labelMap[nselectedValue]) {
            nnumberLabel.textContent = labelMap[nselectedValue];
        } else {
            nnumberLabel.textContent = "{{ __('cruds.id_number') }}";
        }
    }

    idTypeSelect.addEventListener('change', updateLabel);
    nidTypeSelect.addEventListener('change', nupdateLabel);
    updateLabel();
    nupdateLabel();
});
</script>

<script>
$(document).ready(function () {
    // Add new nominee
    $(document).on('click', '#addNomineeBtn', function () {
        const template = document.getElementById('nomineeTemplate');
        const container = document.getElementById('nomineeContainer');

        if (template && container) {
            const clone = template.content.cloneNode(true);
            container.appendChild(clone);
            updateNomineeTitles(); // numbering update
        }
    });

    // Remove nominee
    $(document).on('click', '.removeNominee', function () {
        $(this).closest('.nominee-item').remove();
        updateNomineeTitles(); // numbering update after delete
    });

    // Function to update numbering properly
    function updateNomineeTitles() {
        $('#nomineeContainer .nominee-item').each(function (index) {
            $(this).find('.nominee-title').text(`Nominee Information ${index + 1}`);
        });
    }
});
</script>



<script>
$(document).ready(function () {
    let nomineeCount1 = 0;

    // Add new nominee
    $(document).on('click', '#addNomineeBtn', function () {
        const template = document.getElementById('nomineeTemplate1');
        const container = document.getElementById('nomineeContainer1');

        if (template && container) {
            nomineeCount1++;
            const clone = template.content.cloneNode(true);

            // Set header text dynamically
            const titleEl = clone.querySelector('.nominee-title1');
            if (titleEl) {
                titleEl.textContent = `Nominee Information ${nomineeCount1}`;
            }

            container.appendChild(clone);
        }
    });

    // Remove nominee
    $(document).on('click', '.removeNominee', function () {
        $(this).closest('.nominee-item1').remove();

        // Recalculate numbering
        nomineeCount1 = 0;
        $('#nomineeContainer1 .nominee-item1').each(function () {
            nomineeCount1++;
            $(this).find('.nominee-title1').text(`Nominee Information ${nomineeCount1}`);
        });
    });
});
</script>

@endsection