@extends('user.layouts.app')

@section('body_class', 'apply_membership_card')

@push('styles')
<style>
    .apply-membership-checkboxes,
    .billing-preference-checkboxes {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .apply_membership_card .box-focus .apply-membership-checkboxes .custom-checkbox,
    .apply_membership_card .box-focus .billing-preference-checkboxes .custom-checkbox {
        position: static !important;
        pointer-events: auto !important;
        display: inline-flex;
        align-items: center;
        font-size: 16px !important;
        cursor: pointer;
    }

    .apply_membership_card .box-focus .apply-membership-checkboxes .custom-checkbox .checkmark,
    .apply_membership_card .box-focus .billing-preference-checkboxes .custom-checkbox .checkmark {
        position: relative;
        top: auto;
        left: auto;
        flex-shrink: 0;
    }

    .apply_membership_card .box-focus .apply-membership-checkboxes .custom-checkbox input,
    .apply_membership_card .box-focus .billing-preference-checkboxes .custom-checkbox input {
        display: none;
    }
</style>
@endpush

@section('content')
<section class="banner-slider">
    @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}"></div>
    @endforeach
</section>

<div class="banner-inner-content">
    <div class="container">
    <ul class="bread-come">
        <li>
        <a href="/">Home</a>
        </li>
        <li>Apply For Membership Card</li>
    </ul>
    </div>
</div>

<section class="affiliated-clubs">
    <div class="container">
    <div class="page-title">
        <h4 data-aos="fade-up">Apply For Membership Card</h4>
    </div>                
    </div>
</section>

{{--<section class="update-profile-outer">
    <div class="container">
    <div class="update-profile">  
        <div class="section-description">    
            <div class="inner-form login-show-box">              
            <form>
            <div class="highlight_sec">
            <div class="highlight_tag">All * fields are mandatory</div>
            <div class="section-description">
                <ul>
                <li>This request is only for those members who do not possess a Member Access Card for Club Use</li>
                <li>Please ensure that applicant’s photograph is attached before submit the request.</li>
                </ul>
            </div>
            </div>
            <ul class="inner-form-ul">
                <li class="wide">
                    <div class="form-row box-focus">
                        <div class="labelHead">Apply For</div>
                        <div class="checkboxLabel">
                        <input type="checkbox" id="Spouse" name="Spouse" class="radio" />
                        <label for="Spouse">Spouse</label>
                        </div>   
                        <div class="checkboxLabel">
                        <input type="checkbox" name="Dependent1" id="Dependent1" class="radio" />
                        <label for="Dependent1">Dependent 1</label>
                        </div>    
                        <div class="checkboxLabel">
                        <input type="checkbox" name="Dependent2" id="Dependent2" class="radio" />
                        <label for="Dependent2">Dependent 2</label>
                        </div>  
                        <div class="checkboxLabel">
                        <input type="checkbox" name="Dependent3" id="Dependent3" class="radio" />
                        <label for="Dependent3">Dependent 3</label>
                        </div>  
                        <div class="checkboxLabel">
                        <input type="checkbox" name="Dependent4" id="Dependent4" class="radio" />
                        <label for="Dependent4">Dependent 4</label>
                        </div>                
                    </div>
                </li>
                <li>
                <div class="form-row box-focus">
                    <div class="labelHead">Membership No.</div>
                    <div class="outer-box">
                    <label for="DateFunction">Membership No.</label>
                    <input id="DateFunction" type="tel" class="form-control" placeholder="" required />
                    </div>
                </div> 
                </li>
                <li>
                <div class="form-row box-focus">
                    <div class="labelHead">Membership Category</div>
                    <select class="custom-selectpicker" data-placeholder="Membership Category">
                    <option value="" disabled selected>Membership Category</option>
                    <option value="Consulate Member">Consulate Member</option>
                    <option value="Corporate Nominee">Corporate Nominee</option>
                    <option value="Gymkhana Absentee Members">Gymkhana Absentee Members</option>
                    <option value="Gymkhana Resident Members">Gymkhana Resident Members</option>
                    <option value="Gymkhana Outstation Members">Gymkhana Outstation Members</option>
                    <option value="Honorary Life Members">Honorary Life Members</option>
                    <option value="Honorary Members">Honorary Members</option>
                    <option value="Permanent Life Members">Permanent Life Members</option>
                    <option value="Non Residential Member">Non Residential Member</option>
                    <option value="Permanent Absentee Members">Permanent Absentee Members</option>
                    <option value="Permanent Absentee Reduced">Permanent Absentee Reduced</option>
                    <option value="Permanent Long List Members">Permanent Long List Members</option>
                    <option value="Permanent Outstation Reduced">Permanent Outstation Reduced</option>
                    <option value="Permanent Outstation Members">Permanent Outstation Members</option>
                    <option value="Permanent Resident Reduced">Permanent Resident Reduced</option>
                    <option value="Permanent Resident Members">Permanent Resident Members</option>
                    <option value="Permanent Short List Members">Permanent Short List Members</option>
                    <option value="Reciprocal Bengal Members">Reciprocal Bengal Members</option>
                    <option value="Reciprocal Royal Members">Reciprocal Royal Members</option>
                    <option value="Service Members">Service Members</option>
                    <option value="Single Lady Absentee Members">Single Lady Absentee Members</option>
                    <option value="Single Lady Outstation Members">Single Lady Outstation Members</option>
                    <option value="Temporary Long Term Members">Temporary Long Term Members</option>
                    <option value="Associate Members">Associate Members</option>
                    <option value="Temporary Members">Temporary Members</option>
                    <option value="Single Lady Resident Reduced">Single Lady Resident Reduced</option>
                    <option value="Single Lady Outstation Reduced">Single Lady Outstation Reduced</option>
                    <option value="Single Lady Absentee Reduced">Single Lady Absentee Reduced</option>
                    <option value="Reciprocal Bengal Members">Reciprocal Bengal Members</option>
                    </select>
                </div>
                </li>
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">Surname</div> -->
                    <div class="outer-box">
                    <label for="Surname">Surname</label>
                    <input id="Surname" type="text" class="form-control" placeholder="" required />
                    </div>
                </div> 
                </li>
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">First Name</div> -->
                    <div class="outer-box">
                    <label for="FirstName">First Name</label>
                    <input id="FirstName" type="text" class="form-control" placeholder="" required />
                    </div>
                </div> 
                </li>
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">Middle Name</div> -->
                    <div class="outer-box">
                    <label for="MiddleName">Middle Name</label>
                    <input id="MiddleName" type="text" class="form-control" placeholder="" required />
                    </div>
                </div> 
                </li>
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">Date of Birth</div> -->
                    <div class="outer-box">
                    <label for="dob">Date of Birth</label>
                    <input id="dob" type="text" class="form-control" placeholder="" required />
                    </div>
                </div> 
                </li>
                <li>
                <div class="form-row box-focus">
                    <div class="labelHead">Sex</div>
                    <select class="custom-selectpicker" data-placeholder="Select Sex">
                    <option value="" disabled selected>Select Sex</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    </select>
                </div>
                </li>
                <li>
                    <div class="form-row box-focus">
                        <div class="labelHead">Status</div>
                        <select class="custom-selectpicker" data-placeholder="Select Martial Status">
                        <option value="" disabled selected>Select Martial Status</option>
                        <option value="Single">Single</option>
                        <option value="Married">Married</option>
                        </select>
                    </div>
                </li>                  
                <li>
                    <div class="form-row box-focus">
                        <div class="labelHead">Billing Preference</div>
                        <div class="checkboxLabel">
                        <input type="checkbox" id="HardCopy" name="HardCopy" class="radio" />
                        <label for="HardCopy">Hard Copy</label>
                        </div>   
                        <div class="checkboxLabel">
                        <input type="checkbox" name="email" id="email" class="radio" />
                        <label for="email">E-Mail</label>
                        </div>                  
                    </div>
                </li>
                <li>
                    <div class="form-row box-focus">
                        <!-- <div class="labelHead">Phone</div> -->
                        <div class="outer-box">
                        <label for="Phone">Phone</label>
                        <input id="Phone" type="text" class="form-control" placeholder="" required />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="form-row box-focus">
                        <!-- <div class="labelHead">Cell</div> -->
                        <div class="outer-box">
                        <label for="Cell">Cell</label>
                        <input id="Cell" type="text" class="form-control" placeholder="" required />
                        </div>                      
                    </div>
                </li>
                <li>
                    <div class="form-row box-focus">
                        <!-- <div class="labelHead">E-Mail</div> -->
                        <div class="outer-box">
                        <label for="E-Mail">E-Mail</label>
                        <input id="E-Mail" type="email" class="form-control" placeholder="" required />
                        </div>                      
                    </div>
                </li>
                <li class="wide">
                    <div class="form-row box-focus">
                        <!-- <div class="labelHead">Billing Address</div> -->
                        <div class="outer-box">
                        <label for="BillingAddress">Billing Address</label>
                        <textarea id="BillingAddress" class="form-control"></textarea>
                        </div>                            
                    </div>
                </li>                   
            </ul>
            <div class="title">
                <h5>CONTACT INFORMATION</h5>
            </div>
            <ul class="inner-form-ul">
                <li class="wide">
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">Residence Address</div> -->
                    <div class="outer-box">
                    <label for="ResidenceAddress">Residence Address</label>
                    <textarea id="ResidenceAddress" class="form-control"></textarea>
                    </div>                            
                </div>
                </li> 
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">Phone (R)</div> -->
                    <div class="outer-box">
                    <label for="PhoneR">Phone (R)</label>
                    <input id="PhoneR" type="text" class="form-control" placeholder="" required />
                    </div>                      
                </div>
                </li>
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">Cell</div> -->
                    <div class="outer-box">
                    <label for="Cell2">Cell</label>
                    <input id="Cell2" type="text" class="form-control" placeholder="" required />
                    </div>                      
                </div>
                </li>
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">E-Mail</div> -->
                    <div class="outer-box">
                    <label for="EMail">E-Mail</label>
                    <input id="EMail" type="email" class="form-control" placeholder="" required />
                    </div>                      
                </div>
                </li>
                <li class="wide">
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">Office Name & Address</div> -->
                    <div class="outer-box">
                    <label for="OfficeAddress">Office Name & Address</label>
                    <textarea id="OfficeAddress" class="form-control"></textarea>
                    </div>                            
                </div>
                </li> 
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">Phone (O)</div> -->
                    <div class="outer-box">
                    <label for="PhoneO">Phone (O)</label>
                    <input id="PhoneO" type="number" class="form-control" placeholder="" required />
                    </div>                      
                </div>
                </li>
                <li>
                    <div class="form-row box-focus">
                        <!-- <div class="labelHead">Cell</div> -->
                        <div class="outer-box">
                        <label for="Cell3">Cell</label>
                        <input id="Cell3" type="number" class="form-control" placeholder="" required />
                        </div>                      
                    </div>
                </li>
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">Fax</div> -->
                    <div class="outer-box">
                    <label for="Fax">Fax</label>
                    <input id="Fax" type="number" class="form-control" placeholder="" required />
                    </div>                      
                </div>
                </li>
                <li>
                <div class="form-row box-focus">
                    <!-- <div class="labelHead">E-Mail</div> -->
                    <div class="outer-box">
                    <label for="E_Mail">E-Mail</label>
                    <input id="E_Mail" type="email" class="form-control" placeholder="" required />
                    </div>                      
                </div>
                </li>                  
                <li class="wide">
                <div class="login-btn-outer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>    
                </li>
            </ul>    
            </form>
        </div>
        </div>
    </div>
    </div>
</section>--}}

<section class="update-profile-outer">
    <div class="container">
        <div class="section-inner">
        <div class="update-profile">  
            <div class="section-description">    
                <div class="inner-form login-show-box">              
                    
                    <form id="apply_membership_card_frm" method="POST" action="{{ route('user.apply_membership_card.submit', $user->id) }}">
                        @csrf
                        <div class="highlight_sec">
                            <div class="highlight_tag">Apply For * field is mandatory</div>
                            <div class="section-description">
                                <ul>
                                <li>This request is only for those members who do not possess a Member Access Card for Club Use</li>
                                <!-- <li>Please ensure that applicant’s photograph is attached before submit the request.</li> -->
                                </ul>
                            </div>
                        </div>

                        <ul class="inner-form-ul">
                            <li class="wide">
                                <div class="form-row box-focus">
                                    <div class="labelHead mb-2">Apply For <span class="text-danger">*</span></div>
                                @php
                                    $applyFor = ['Self'];
                                    if ($user->has_spouse) $applyFor[] = 'Spouse';
                                    if ($user->has_dependent1) $applyFor[] = 'Dependent 1';
                                    if ($user->has_dependent2) $applyFor[] = 'Dependent 2';
                                    if ($user->has_dependent3) $applyFor[] = 'Dependent 3';
                                    if ($user->has_dependent4) $applyFor[] = 'Dependent 4';
                                @endphp
                                <div class="checkbox-group apply-membership-checkboxes">
                                    @foreach(['Self', 'Spouse', 'Dependent 1', 'Dependent 2', 'Dependent 3', 'Dependent 4'] as $item)
                                        @php
                                            $itemId = str_replace(' ', '', $item);
                                            $isChecked = in_array($item, old('apply_for', $applyFor));
                                        @endphp
                                        <label class="custom-checkbox" for="{{ $itemId }}">
                                            <input type="checkbox" id="{{ $itemId }}" name="apply_for[]" value="{{ $item }}" {{ $isChecked ? 'checked' : '' }} />
                                            <span class="checkmark"></span>
                                            {{ $item }}
                                        </label>
                                    @endforeach
                                </div>
                            </li>

                            <li>
                                <div class="form-row box-focus">
                                    <div class="outer-box">
                                        <label for="DateFunction">Membership No.</label>
                                        <input id="DateFunction" name="member_id" type="text" class="form-control green" value="{{ old('member_id', $user->member_id ?? '') }}" readonly />
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="form-row box-focus">
                                    <div class="outer-box">
                                        <label for="MembershipCategoryDisplay">Membership Category</label>
                                        <input type="hidden" name="membership_category_id" value="{{ old('membership_category_id', $user->membership_category_id ?? '') }}" />
                                        <input id="MembershipCategoryDisplay" type="text" class="form-control green" value="{{ old('membership_category_name', $user->membership_category->name ?? '') }}" readonly />
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="form-row box-focus">
                                    <div class="outer-box">
                                        <label for="FirstName">First Name</label>
                                        <input id="FirstName" name="first_name" type="text" class="form-control green" value="{{ old('first_name', $user->first_name ?? '') }}" readonly />
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="form-row box-focus">
                                    <div class="outer-box">
                                        <label for="MiddleName">Middle Name</label>
                                        <input id="MiddleName" name="middle_name" type="text" class="form-control green" value="{{ old('middle_name', $user->middle_name ?? '') }}" readonly />
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="form-row box-focus">
                                    <div class="outer-box">
                                        <label for="Surname">Last Name</label>
                                        <input id="Surname" name="surname" type="text" class="form-control green" value="{{ old('surname', $user->last_name ?? '') }}" readonly />
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="form-row box-focus">
                                    <div class="outer-box">
                                        <label for="Phone">Mobile</label>
                                        <input id="Phone" name="phone" type="tel" class="form-control green" value="{{ aes_decrypt(old('phone', $user->phone ?? '')) }}" readonly />
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="form-row box-focus">
                                    <div class="outer-box">
                                        <label for="E-Mail">Email</label>
                                        <input id="E-Mail" name="email" type="email" class="form-control green" value="{{ aes_decrypt(old('email', $user->email ?? '')) }}" readonly />
                                    </div>
                                </div>
                            </li>

                            <li class="wide">
                                <div class="form-row box-focus">
                                    <div class="outer-box">
                                        <label for="BillingAddress">Correspondence Address</label>
                                        <textarea id="BillingAddress" name="address" class="form-control green" readonly>{{ old('address', $user->address ?? '') }}</textarea>
                                        <p class="mt-2 mb-0">**If any of the above details are incorrect, please contact the Club Office during office hours or email at <strong>members@tollygungeclub.org</strong></p>
                                    </div>
                                </div>
                            </li>

                            <li class="wide">
                                <div class="login-btn-outer">
                                    <button type="submit" class="btn btn-primary"><span>Submit</span></button>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
        </div>
    </div>
</section>

@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection


@push('scripts')
<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>

<script>
    $("#apply_membership_card_frm").submit(function(event) {  
        event.preventDefault();

        var submitForm = $(this);
        var submitBtn = submitForm.find('button[type="submit"]');

        // --- Client-side validation ---
        let missingFields = [];
        
        // Check Apply For (Checkboxes)
        if (submitForm.find('input[name="apply_for[]"]:checked').length === 0) {
            missingFields.push("Apply For");
        }
        
        // Check Required Text/Select Fields
        const requiredFields = [
            { name: 'member_id', label: 'Membership No.' },
            { name: 'surname', label: 'Last Name' },
            { name: 'first_name', label: 'First Name' },
            { name: 'phone', label: 'Mobile' },
            { name: 'email', label: 'Email' },
            { name: 'address', label: 'Correspondence Address' }
        ];

        requiredFields.forEach(field => {
            let val = submitForm.find(`[name="${field.name}"]`).val();
            if (!val || val.trim() === "") {
                missingFields.push(field.label);
            }
        });

        if (missingFields.length > 0) {
            let listHtml = '<ul class="swal-list">';
            missingFields.forEach(f => {
                listHtml += `<li>${f} is required</li>`;
            });
            listHtml += '</ul>';

            Swal.fire({
                icon: 'warning',
                title: 'Required Fields',
                html: listHtml,
                confirmButtonColor: '#002B10'
            });
            return false;
        }
        // --- End Client-side validation ---

        $.ajax({
            url: submitForm.attr('action'),
            data: new FormData(submitForm[0]),
            type: 'POST',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                submitBtn.attr("disabled", true).find('span').text('Submitting...');
                submitForm.find('.text-danger').text(''); // Clear previous error messages
                submitForm.find('input, select, textarea').removeClass('is-invalid'); // Remove error styling
            },
            success: function(response) {
                submitBtn.attr("disabled", false).find('span').text('Submit');

                if (response.status == 200) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.msg,
                        confirmButtonColor: '#002B10'
                    }).then(() => {
                        window.location.reload();
                    });
                } else if (response.status == 422) {
                    // Handle validation errors from server
                    let errHtml = '<ul class="swal-list">';
                    $.each(response.errors, function(key, value) {
                        $('#' + key + 'Err').text(value[0]); // Display validation error
                        $('[name="' + key + '"]').addClass('is-invalid'); // Highlight the invalid field
                        $('[name="' + key + '[]"]').addClass('is-invalid');
                        errHtml += `<li>${value[0]}</li>`;
                    });
                    errHtml += '</ul>';

                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        html: errHtml,
                        confirmButtonColor: '#002B10'
                    });
                } else if (response.status == 500) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: response.msg,
                        confirmButtonColor: '#002B10'
                    });
                }
            },
            error: function(xhr) {
                submitBtn.attr("disabled", false).find('span').text('Submit');
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Something went wrong. Please try again later.',
                    confirmButtonColor: '#002B10'
                });
            }
        });
    });
</script>
@endpush