@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('Membership') }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ __('Membership') }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Work Area -->
    <div class="section">
        <div class="container">
            <div class="card border-0 rscnMembershipCard">
                <div class="card-header pb-0 border-bottom-0 bg-transparent">
                    <div class="rscnMemberTit">{{ $title }}</div>
                </div>
                <form enctype="multipart/form-data" method="POST" action="{{ route('membershipForm.store') }}">
                    @csrf
                    <input type="hidden" id="type" name="type" value="{{ $type }}">
                    <div class="card-body pb-0">
                        @if ($type == 'individual')
                            @include('front.membership_new.from_fields.individual')
                        @elseif($type == 'employee')
                            @include('front.membership_new.from_fields.employee')
                        @elseif($type == 'family')
                            @include('front.membership_new.from_fields.family')
                        @elseif($type == 'corporate')
                            @include('front.membership_new.from_fields.corporate')
                        @elseif($type == 'honorary' && auth()->user() && auth()->user()->is_admin)
                            @include('front.membership_new.from_fields.honorary')
                        @endif
                    </div>
                    <div class="card-footer border-top-0 bg-transparent">
                        <button type="submit" class="btn rscnSaveBtn">{{ __('Save & Continue') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @include('sweetalert::alert')

@endsection
@push('post_script')
    <script src="{{ asset('admin/js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ asset('admin/js/popper.min.js') }}"></script>
    <script src="{{ asset('admin/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('admin/js/custom/password-show.js') }}"></script>
    <script src="{{ asset('admin/js/custom/multiselect-dropdown.js') }}"></script>
    <script type="text/javascript">
        $(function() {
            let value = "962";
            $("#txtPhone").text(value);
            $("#country").change(function() {
                let countryCode = $(this).find('option:selected').data('country-code');
                $("#txtPhone").text(countryCode);
            });
        })
    </script>
    <script type="text/javascript">
        $(function() {
            let value = "962";
            $("#honorary_txtPhone").text(value);
            $("#honorary_country").change(function() {
                let countryCode = $(this).find('option:selected').data('country-code');
                $("#honorary_txtPhone").text(countryCode);
            });
        })
    </script>
    <script type="text/javascript">
        $(document).on("change", ".countryList", function() {
            let countryCode = $(this).find('option:selected').data('country-code');
            $(this).parent().parent().find(".txtPhone1").text(countryCode);
        });
        $('.countryList').change();
    </script>
    <script>
        $('.add').click(function() {
            var ele = $('.block').clone(true);
            ele.find('.add-more-section').each(function(index) {
                ele.find('input,select').each(function() {
                    this.name = this.name.replace('[' + index + ']', '[' + (index + 1) + ']');
                });
            });
            $('.block:last').before(
                '<div class="block">' + ele[0].innerHTML +
                '<span class="remove rscnRemove">{{ __('Remove Option') }}</span><hr class="rscnFormDividorWith-my"></div>'
            );
            $('.countryList').change();
        });
        $('.optionBox').on('click', '.remove', function() {
            $(this).parent().remove();
        });

        $(document).ready(function() {
            var oldUserFamily = @json(old('user_families'));
            if (oldUserFamily && Object.keys(oldUserFamily).length > 0) {
                length = Object.keys(oldUserFamily).length
                for (let index = 0; index < length; index++) {
                    var ele = $('.block').clone(true);
                    ele.find('.add-more-section').each(function(index) {
                        ele.find('input,select').each(function() {
                            this.name = this.name.replace('[' + index + ']', '[' + (index + 1) +
                                ']');
                            $('[name="user_families[' + index + '][family_name]"]').val(
                                oldUserFamily[
                                    index]['family_name']);
                        });
                    });
                    if (index >= 1) {
                        $('.block:last').before(
                            '<div class="block">' + ele[0].innerHTML +
                            '<span class="remove rscnRemove">{{ __('Remove Option') }}</span><hr class="rscnFormDividorWith-my"></div>'
                        );
                    }
                    $('[name="user_families[' + index + '][relative_relation]"]').val(oldUserFamily[
                        index]['relative_relation']);
                    $('[name="user_families[' + index + '][family_name]"]').val(oldUserFamily[
                        index]['family_name']);
                    $('[name="user_families[' + index + '][dob]"]').val(oldUserFamily[
                        index]['dob']);
                    $('[name="user_families[' + index + '][gender]"]').val(oldUserFamily[
                        index]['gender']);
                }
            }
            var oldCorporetContact = @json(old('contact_person'));
            if (oldCorporetContact && Object.keys(oldCorporetContact).length > 0) {
                length = Object.keys(oldCorporetContact).length
                for (let index = 0; index < length; index++) {
                    var ele = $('.block').clone(true);
                    ele.find('.add-more-section').each(function(index) {
                        ele.find('input,select').each(function() {
                            this.name = this.name.replace('[' + index + ']', '[' + (index + 1) +
                                ']');
                        });
                    });
                    if (index >= 1) {
                        $('.block:last').before(
                            '<div class="block">' + ele[0].innerHTML +
                            '<span class="remove rscnRemove">{{ __('Remove Option') }}</span><hr class="rscnFormDividorWith-my"></div>'
                        );
                    }
                    $('[name="contact_person[' + index + '][name]"]').val(oldCorporetContact[
                        index]['name']);

                    $('[name="contact_person[' + index + '][mobile_country]"]').val(oldCorporetContact[
                        index]['mobile_country']);
                    $('[name="contact_person[' + index + '][mobile]"]').val(oldCorporetContact[
                        index]['mobile']);
                    $('.countryList').change();
                }
            }
        });
    </script>
@endpush