@extends('layouts.master')
@section('title')
Edit Customer
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')

@if (session('success'))
        <div class="alert alert-success alert-solid" role="alert" id="success-alert">
                <strong>{{ session('success') }} </strong>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
@endif

@if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert" id="error-alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
@endif

<script>
        setTimeout(() => {
                const successAlert = document.getElementById('success-alert');
                const errorAlert = document.getElementById('error-alert');
                if (successAlert) successAlert.style.display = 'none';
                if (errorAlert) errorAlert.style.display = 'none';
        }, 3000);
</script>

<div class="row">
    <div class="col-lg-12">
        <div class="card" id="customerList">
            <div class="card-header border-bottom-dashed">

                <div class="row g-4 align-items-center">
                    <div class="col-sm">
                        <div class="d-flex">
                            <a href="/customers"><i class="ri-arrow-left-s-line align-bottom me-1" style="font-size: 21px; position: relative; top: -6px;"></i></a>
                            <h5 class="card-title mb-0">
                                {{ $customer['AcCustomerName'] }} 
                                <label class="badge bg-info-subtle text-info">{{ $customer['AcCustomerID'] }}</label>
                                @if ($customer['IsActive'] == 'Y')
                                <span class="badge bg-success-subtle text-success text-uppercase">Active</span>
                                @else
                                <span class="badge bg-danger-subtle text-success text-uppercase">Inactive</span>
                                @endif
                        </h5>
                        </div>
                    </div>
                    <div class="col-sm-auto">
                        <div class="d-flex flex-wrap align-items-start gap-2">
                            <!-- <button type="button" class="btn btn-primary add-btn"><i class="ri-add-circle-fill align-bottom me-1"></i>
                                Create Product</button> -->
                            <!-- <button type="button" class="btn btn-soft-success"><i class="ri-file-download-line align-bottom me-1"></i>
                                Sync</button> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body border-bottom-dashed border-bottom">
                <div class="live-preview">
                    <div class="row gy-4">

                                <div class="col-lg-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title mb-0">Customer Detail</h5>
                                        </div>
                                        <div class="card-body">

                                                <div class="mb-3">
                                                        <label for="AcCusGroupID" class="form-label">Customer Type</label>
                                                        <input type="text" class="form-control" id="AcCusGroupID" name="AcCusGroupID" value="{{ $customer['AcCusGroupID'] }}" readonly>
                                                </div>

                                                <div class="mb-3">
                                                        <label for="AcTermID" class="form-label">Term ID</label>
                                                        <input type="text" class="form-control" id="AcTermID" name="AcTermID" value="{{ $customer['AcTermID'] }}" readonly>
                                                </div>

                                                {{-- Name --}}
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <label class="form-label mb-0">Name</label>
                                                        {{-- <button type="button" onclick="toggleInlineEdit('name')" style="border:0" class="badge badge-pill bg-primary">Edit</button> --}}
                                                    </div>
                                                    <div id="name-view" class="mt-1">
                                                        <input type="text" class="form-control" value="{{ $customer['AcCustomerName'] }}" readonly>
                                                    </div>
                                                    <div id="name-edit" class="mt-1" style="display:none">
                                                        <form action="{{ route('customers.updateCustomerProfile') }}" method="POST">
                                                            @csrf
                                                            <input type="hidden" name="MemberNo" value="{{ $customer['MemberNo'] }}">
                                                            <input type="hidden" name="Request" value="CustomerName">
                                                            <input type="text" class="form-control mb-1 text-uppercase" name="Name" value="{{ $customer['AcCustomerName'] }}" required>
                                                            <div class="d-flex gap-1">
                                                                <button type="submit" class="btn btn-sm btn-primary">Save</button>
                                                                <button type="button" onclick="toggleInlineEdit('name')" class="btn btn-sm btn-secondary">Cancel</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>

                                                {{-- Contact No --}}
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <label class="form-label mb-0">Contact No</label>
                                                        {{-- <button type="button" onclick="toggleInlineEdit('mobile')" style="border:0" class="badge badge-pill bg-primary">Edit</button> --}}
                                                    </div>
                                                    <div id="mobile-view" class="mt-1">
                                                        <input type="text" class="form-control" value="{{ $customer['MobileNo'] }}" readonly>
                                                    </div>
                                                    <div id="mobile-edit" class="mt-1" style="display:none">
                                                        <form action="{{ route('customers.updateCustomerProfile') }}" method="POST">
                                                            @csrf
                                                            <input type="hidden" name="MemberNo" value="{{ $customer['MemberNo'] }}">
                                                            <input type="hidden" name="Request" value="MobileNo">
                                                            <input type="text" class="form-control mb-1" name="MobileNo" value="{{ $customer['MobileNo'] }}" required>
                                                            <div class="d-flex gap-1">
                                                                <button type="submit" class="btn btn-sm btn-primary">Save</button>
                                                                <button type="button" onclick="toggleInlineEdit('mobile')" class="btn btn-sm btn-secondary">Cancel</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>

                                                {{-- Email --}}
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <label class="form-label mb-0">Email</label>
                                                        {{-- <button type="button" onclick="toggleInlineEdit('email')" style="border:0" class="badge badge-pill bg-primary">Edit</button> --}}
                                                    </div>
                                                    <div id="email-view" class="mt-1">
                                                        <input type="text" class="form-control" value="{{ $customer['BillingEmail'] }}" readonly>
                                                    </div>
                                                    <div id="email-edit" class="mt-1" style="display:none">
                                                        <form action="{{ route('customers.updateCustomerProfile') }}" method="POST">
                                                            @csrf
                                                            <input type="hidden" name="MemberNo" value="{{ $customer['MemberNo'] }}">
                                                            <input type="hidden" name="Request" value="Email">
                                                            <input type="email" class="form-control mb-1" name="Email" value="{{ $customer['BillingEmail'] }}" required>
                                                            <div class="d-flex gap-1">
                                                                <button type="submit" class="btn btn-sm btn-primary">Save</button>
                                                                <button type="button" onclick="toggleInlineEdit('email')" class="btn btn-sm btn-secondary">Cancel</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>

                                                {{-- Date Of Birth --}}
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <label class="form-label mb-0">Date Of Birth</label>
                                                        {{-- <button type="button" onclick="toggleInlineEdit('dob')" style="border:0" class="badge badge-pill bg-primary">Edit</button> --}}
                                                    </div>
                                                    <div id="dob-view" class="mt-1">
                                                        <input type="text" class="form-control" value="{{ $customer['DateOfBirth'] ? \Carbon\Carbon::parse($customer['DateOfBirth'])->format('Y-m-d') : '' }}" readonly>
                                                    </div>
                                                    <div id="dob-edit" class="mt-1" style="display:none">
                                                        <form action="{{ route('customers.updateCustomerProfile') }}" method="POST">
                                                            @csrf
                                                            <input type="hidden" name="MemberNo" value="{{ $customer['MemberNo'] }}">
                                                            <input type="hidden" name="Request" value="DateOfBirth">
                                                            <input type="date" class="form-control mb-1" name="DateOfBirth" value="{{ $customer['DateOfBirth'] ? \Carbon\Carbon::parse($customer['DateOfBirth'])->format('Y-m-d') : '' }}">
                                                            <div class="d-flex gap-1">
                                                                <button type="submit" class="btn btn-sm btn-primary">Save</button>
                                                                <button type="button" onclick="toggleInlineEdit('dob')" class="btn btn-sm btn-secondary">Cancel</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                        <label for="Gender" class="form-label">Gender</label>
                                                        <input type="text" class="form-control" id="Gender" name="Gender" value="{{ $customer['Gender'] }}" readonly>
                                                </div>

                                                <div class="mb-3">
                                                        <label for="AcMemberEthnicID" class="form-label">Ethnic</label>
                                                        <input type="text" class="form-control" id="AcMemberEthnicID" name="AcMemberEthnicID" value="{{ $customer['AcMemberEthnicID'] }}" readonly>
                                                </div>

                                                <div class="mb-3">
                                                        <label for="MemberNo" class="form-label">Member No</label>
                                                        <input type="text" class="form-control" id="MemberNo" name="MemberNo" value="{{ $customer['MemberNo'] }}" readonly>
                                                </div>

                                                {{-- <div class="mb-3">
                                                        <label for="MemberPointBalance" class="form-label">Point</label>
                                                        <input type="text" class="form-control" id="MemberPointBalance" name="MemberPointBalance" value="{{ $customer['MemberPointBalance'] }}" readonly>
                                                </div> --}}

                                                <div class="mb-3">
                                                        <label for="MemberJoinDate" class="form-label">Member Join Date</label>
                                                        <input type="text" class="form-control" id="MemberJoinDate" name="MemberJoinDate" value="{{ $customer['MemberJoinDate'] ? \Carbon\Carbon::parse($customer['MemberJoinDate'])->format('Y-m-d') : '' }}" readonly>
                                                </div>

                                                <!--<div>
                                                        <div class="mb-3">
                                                                <label for="IsMember" class="form-label">IsMember</label>
                                                                <input type="text" class="form-control" id="IsMember" name="IsMember" value="{{ $customer['IsMember'] }}">
                                                        </div>

                                                        <div class="mb-3">
                                                                <label for="IdentityNo" class="form-label">Identity No</label>
                                                                <input type="text" class="form-control" id="IdentityNo" name="IdentityNo" value="{{ $customer['IdentityNo'] }}">
                                                        </div>

                                                        <div class="mb-3">
                                                                <label for="MemberExpireDate" class="form-label">Member Expire Date</label>
                                                                <input type="text" class="form-control" id="MemberExpireDate" name="MemberExpireDate" value="{{ $customer['MemberExpireDate'] }}">
                                                        </div>

                                                        <div class="mb-3">
                                                                <label for="MemberMarriageDate" class="form-label">Member Marriage Date</label>
                                                                <input type="text" class="form-control" id="MemberMarriageDate" name="MemberMarriageDate" value="{{ $customer['MemberMarriageDate'] }}">
                                                        </div>

                                                        <div class="mb-3">
                                                                <label for="AcMemberIncomeID" class="form-label">AcMember Income ID</label>
                                                                <input type="text" class="form-control" id="AcMemberIncomeID" name="AcMemberIncomeID" value="{{ $customer['AcMemberIncomeID'] }}">
                                                        </div>

                                                        <div class="mb-3">
                                                                <label for="AcMemberOccupationID" class="form-label">AcMember Occupation ID</label>
                                                                <input type="text" class="form-control" id="AcMemberOccupationID" name="AcMemberOccupationID" value="{{ $customer['AcMemberOccupationID'] }}">
                                                        </div>

                                                        <div class="mb-3">
                                                                <label for="MemberPointAccumulated" class="form-label">Member Point Accumulated</label>
                                                                <input type="text" class="form-control" id="MemberPointAccumulated" name="MemberPointAccumulated" value="{{ $customer['MemberPointAccumulated'] }}">
                                                        </div>
                                                </div> -->
                                                
                                                 {{-- Membership Detail --}}
                                                <hr>
                                                <h6 class="fw-semibold mb-3">Membership Detail</h6>
                                                <div id="membership-detail-loading" class="text-center py-2">
                                                        <div class="spinner-border spinner-border-sm text-primary" role="status">
                                                                <span class="visually-hidden">Loading...</span>
                                                        </div>
                                                        <span class="ms-2 text-muted" style="font-size:13px">Fetching membership info...</span>
                                                </div>
                                                <div id="membership-detail-content" style="display:none">
                                                        <div class="mb-3">
                                                                <label class="form-label">Card No</label>
                                                                <input type="text" class="form-control" id="md_card_no" readonly>
                                                        </div>
                                                        <div class="mb-3">
                                                                <label class="form-label">Package / Tier</label>
                                                                <input type="text" class="form-control" id="md_package" readonly>
                                                        </div>
                                                        <div class="mb-3">
                                                                <label class="form-label">Points Balance</label>
                                                                <input type="text" class="form-control" id="md_balance" readonly>
                                                        </div>
                                                        <div class="mb-3">
                                                                <label class="form-label">Expiry Date</label>
                                                                <input type="text" class="form-control" id="md_expiry" readonly>
                                                        </div>
                                                        <div class="mb-3">
                                                                <label class="form-label">Vouchers Available</label>
                                                                <input type="text" class="form-control" id="md_voucher_count" readonly>
                                                        </div>
                                                </div>
                                                <div id="membership-detail-error" style="display:none">
                                                        <p class="text-muted mb-0" style="font-size:13px"><i class="ri-error-warning-line me-1"></i>No membership data found.</p>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-lg-4">
                                    <div class="card">
                                        <div class="card-header" style="display:flex; justify-content: space-between">
                                             <h5 class="card-title mb-0">Billing Detail</h5>
                                            {{-- <i class="ri-edit-2-line align-bottom me-1" style="font-size: 21px; position: relative; top: -6px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#editBillingAddressModal"></i> --}}
                                            <button type="button" data-bs-toggle="modal" data-bs-target="#editBillingAddressModal" style="border:0" class="badge badge-pill bg-primary">
                                                Modify
                                            </button>
                                        </div>
                                        <div class="card-body">
                                                <div class="mb-3">
                                                        <label for="BillingContact1" class="form-label">Billing Attention</label>
                                                        <input readonly type="text" class="form-control text-uppercase" name="BillingContact1" value="{{ $shipping_address['Attention'] }}">
                                                </div>
                                                <div class="mb-3">
                                                        <label for="BillingContact1" class="form-label">Billing Tel 1</label>
                                                        <input readonly type="text" class="form-control" name="Tel1" value="{{ $shipping_address['Tel1'] }}">
                                                </div>
                                                <div class="mb-3">
                                                        <label for="BillingContact1" class="form-label">Billing Tel 2</label>
                                                        <input readonly type="text" class="form-control" name="Tel2" value="{{ $shipping_address['Tel2'] }}">
                                                </div>
                                                <div class="mb-3">
                                                        <label for="email" class="form-label">Billing Email</label>
                                                        <input readonly type="text" class="form-control" name="email" value="{{ $shipping_address['Email'] }}">
                                                </div>
                                                <div class="mb-3">
                                                        <label for="BillingAddress1" class="form-label">Billing Address 1</label>
                                                        <input readonly type="text" class="form-control text-uppercase" name="Address1" value="{{ $shipping_address['Address1'] }}">
                                                </div>

                                                <div class="mb-3">
                                                        <label for="BillingAddress2" class="form-label">Billing Address 2</label>
                                                        <input readonly type="text" class="form-control text-uppercase" name="Address2" value="{{ $shipping_address['Address2'] }}">
                                                </div>

                                                <div class="mb-3">
                                                        <div class="row">
                                                                <div class="col-md-6">
                                                                        <label for="City" class="form-label">City</label>
                                                                        <input type="text" readonly class="form-control  text-uppercase" id="City" name="City" value="{{ $shipping_address['City'] }}">
                                                                </div>
                                                                <div class="col-md-6">
                                                                        <label for="PostCode" class="form-label">PostCode</label>
                                                                        <input type="text" readonly class="form-control  text-uppercase" id="PostCode" name="PostCode" value="{{ $shipping_address['PostCode'] }}">
                                                                </div>
                                                        </div>
                                                </div>
                                                <div class="mb-3">
                                                        <div class="row">
                                                                <div class="col-md-6">
                                                                        <label for="State" class="form-label">State</label>
                                                                        <input type="text" readonly class="form-control  text-uppercase" id="State" name="State" value="{{ $shipping_address['State'] }}">
                                                                </div>
                                                                <div class="col-md-6">
                                                                        <label for="Country" class="form-label">Country</label>
                                                                        <input type="text" readonly class="form-control  text-uppercase" id="Country" name="Country" value="{{ $shipping_address['Country'] }}">
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4">
                                    <div class="card">
                                        <div class="card-header" style="display:flex; justify-content: space-between">
                                            <h5 class="card-title mb-0">Shipping Detail </h5>
                                            <!-- <span class="badge bg-success" style="position:relative; top: -2px">Default</span> -->
                                            {{-- <i class="ri-edit-2-line align-bottom me-1" style="border:0 cursor: pointer;" data-bs-toggle="modal" data-bs-target="#editShippingAddressModal"></i> --}}
                                                <div>
                                                        <button type="button" data-bs-toggle="modal" data-bs-target="#editShippingAddressModal" style="border:0" class="badge badge-pill bg-primary">Modify</button>
                                                        <button type="button" data-bs-toggle="modal" data-bs-target="#addShippingAddressModal"  style="border:0" class="badge badge-pill bg-success">Add</button>
                                                </div>
                                        </div>
                                        
                                        <div class="card-body">
                                                <!-- NEW API WILL BE PROVIDED TO DISPLAY -->
                                                <div class="mb-3">
                                                        <label for="BillingContact1" class="form-label">Ship To Attention</label>
                                                        <input readonly type="text" class="form-control text-uppercase" id="" name="" value="{{ $shipping_address_list[0]['Attention'] ?? '' }}">
                                                </div>
                                                
                                                <div class="mb-3">
                                                        <label for="BillingTel1" class="form-label">Shipping Tel 1</label>
                                                        <input readonly type="text" class="form-control" id="" name="" value="{{$shipping_address_list[0]['Tel1'] ?? ''}}">
                                                </div>

                                                <div class="mb-3">
                                                        <label for="BillingTel1" class="form-label">Shipping Tel 2</label>
                                                        <input readonly type="text" class="form-control" id="" name="" value="{{$shipping_address_list[0]['Tel2'] ?? ''}}">
                                                </div>
                                                <div class="mb-3">
                                                        <label for="email" class="form-label">Shipping Email</label>
                                                        <input readonly type="text" class="form-control" name="email" value="{{$shipping_address_list[0]['Email'] ?? ''}}">
                                                </div>
                                                <div class="mb-3">
                                                        <label for="BillingAddress1" class="form-label">Shipping Address 1</label>
                                                        <input readonly type="text" class="form-control  text-uppercase" id="" name="" value="{{$shipping_address_list[0]['Address1'] ?? ''}}">
                                                </div>

                                                <div class="mb-3">
                                                        <label for="BillingAddress2" class="form-label">Shipping Address 2</label>
                                                        <input readonly type="text" class="form-control  text-uppercase" id="" name="" value="{{$shipping_address_list[0]['Address2'] ?? ''}}">
                                                </div>
                                                <div class="mb-3">
                                                        <div class="row">
                                                                <div class="col-md-6">
                                                                        <label for="City" class="form-label">City</label>
                                                                        <input readonly type="text" class="form-control  text-uppercase" id="City" name="City" value="{{$shipping_address_list[0]['City'] ?? ''}}">
                                                                </div>
                                                                <div class="col-md-6">
                                                                        <label for="PostCode" class="form-label">PostCode</label>
                                                                        <input readonly type="text" class="form-control  text-uppercase" id="PostCode" name="PostCode" value="{{$shipping_address_list[0]['PostCode'] ?? ''}}">
                                                                </div>
                                                        </div>
                                                </div>
                                                <div class="mb-3">
                                                        <div class="row">
                                                                <div class="col-md-6">
                                                                        <label for="State" class="form-label">State</label>
                                                                        <input readonly type="text" class="form-control  text-uppercase" id="State" name="State" value="{{$shipping_address_list[0]['State'] ?? ''}}">
                                                                </div>
                                                                <div class="col-md-6">
                                                                        <label for="Country" class="form-label">Country</label>
                                                                        <input readonly type="text" class="form-control  text-uppercase" id="Country" name="Country" value="{{$shipping_address_list[0]['Country'] ?? ''}}">
                                                                </div>
                                                        </div>
                                                </div> 
                                            
                                        </div>
                                    </div>
                                </div>
                                
                    </div>
             </div>
        </div>


        </div>
    </div>
</div>
<div class="modal fade" id="editBillingAddressModal" tabindex="-1" aria-labelledby="editBillingAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editBillingAddressModalLabel">Edit Billing Address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('customers.updateBillingAddress') }}" method="POST">
                @csrf
                <div class="modal-body">
                        <input name="AcCusShipToAddressID" type="hidden" value="{{ $shipping_address['AcCusShipToAddressID'] }}">
                        <input name="AcCustomerID" type="hidden" value="{{ $customer['AcCustomerID'] }}">
                        <input name="AcCustomerName" type="hidden" value="{{ $customer['AcCustomerName'] }}">
                        <div class="mb-3">
                                <label class="form-label">Customer Name <span style="color:red">*</span></label>
                                <input type="text" class="form-control text-uppercase" name="Attention" value="{{ $shipping_address['Attention'] }}" required>
                        </div>
                        <div class="mb-3">
                                <label class="form-label">Billing Tel 1 <span style="color:red">*</span></label>
                                <input type="text" class="form-control" name="Tel1" value="{{ $shipping_address['Tel1'] }}" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                        </div>
                        <div class="mb-3">
                                <label class="form-label">Billing Tel 2</label>
                                <input type="text" class="form-control" name="Tel2" value="{{ $shipping_address['Tel2'] }}" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                        </div>
                        <div class="mb-3">
                                <label class="form-label">Billing Email <span style="color:red">*</span></label>
                                <input type="text" class="form-control" name="Email" value="{{ $shipping_address['Email'] }}" required>
                        </div>
                        <div class="mb-3">
                                <label for="BillingAddress1" class="form-label">Billing Address 1 <span style="color:red">*</span></label>
                                <input type="text" class="form-control text-uppercase" name="Address1" value="{{ $shipping_address['Address1'] }}" required>
                        </div>
                        <div class="mb-3">
                                <label for="BillingAddress2" class="form-label">Billing Address 2</label>
                                <input type="text" class="form-control text-uppercase" name="Address2" value="{{ $shipping_address['Address2'] }}">
                        </div>
                        <div class="mb-3">
                                <div class="row">
                                        <div class="col-md-6">
                                                <label for="City" class="form-label">City <span style="color:red">*</span></label>
                                                <input type="text" class="form-control text-uppercase" id="City" name="City" value="{{ $shipping_address['City'] }}" required>
                                        </div>
                                        <div class="col-md-6">
                                                <label for="PostCode" class="form-label">PostCode <span style="color:red">*</span></label>
                                                <input type="text" class="form-control" id="PostCode" name="PostCode" value="{{ is_numeric($shipping_address['PostCode']) ? $shipping_address['PostCode'] : '' }}" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                                        </div>
                                </div>
                        </div>
                        <div class="mb-3">
                                <div class="row">
                                        <div class="col-md-6">
                                                <label for="State" class="form-label">State <span style="color:red">*</span></label>
                                                <select class="form-control text-uppercase" id="State" name="State" required>
                                                        @if (!in_array($shipping_address['State'], ['JOHOR', 'KEDAH', 'KELANTAN', 'MALACCA', 'NEGERI SEMBILAN', 'PAHANG', 'PENANG', 'PERAK', 'PERLIS', 'SABAH', 'SARAWAK', 'SELANGOR', 'TERENGGANU', 'KUALA LUMPUR', 'LABUAN', 'PUTRAJAYA']))
                                                        <option value="" selected>SELECT STATE</option>
                                                        @else
                                                        <option value="">SELECT STATE</option>
                                                        @endif
                                                        <option value="JOHOR" {{ $shipping_address['State'] == 'JOHOR' ? 'selected' : '' }}>JOHOR</option>
                                                        <option value="KEDAH" {{ $shipping_address['State'] == 'KEDAH' ? 'selected' : '' }}>KEDAH</option>
                                                        <option value="KELANTAN" {{ $shipping_address['State'] == 'KELANTAN' ? 'selected' : '' }}>KELANTAN</option>
                                                        <option value="MALACCA" {{ $shipping_address['State'] == 'MALACCA' ? 'selected' : '' }}>MALACCA</option>
                                                        <option value="NEGERI SEMBILAN" {{ $shipping_address['State'] == 'NEGERI SEMBILAN' ? 'selected' : '' }}>NEGERI SEMBILAN</option>
                                                        <option value="PAHANG" {{ $shipping_address['State'] == 'PAHANG' ? 'selected' : '' }}>PAHANG</option>
                                                        <option value="PENANG" {{ $shipping_address['State'] == 'PENANG' ? 'selected' : '' }}>PENANG</option>
                                                        <option value="PERAK" {{ $shipping_address['State'] == 'PERAK' ? 'selected' : '' }}>PERAK</option>
                                                        <option value="PERLIS" {{ $shipping_address['State'] == 'PERLIS' ? 'selected' : '' }}>PERLIS</option>
                                                        <option value="SABAH" {{ $shipping_address['State'] == 'SABAH' ? 'selected' : '' }}>SABAH</option>
                                                        <option value="SARAWAK" {{ $shipping_address['State'] == 'SARAWAK' ? 'selected' : '' }}>SARAWAK</option>
                                                        <option value="SELANGOR" {{ $shipping_address['State'] == 'SELANGOR' ? 'selected' : '' }}>SELANGOR</option>
                                                        <option value="TERENGGANU" {{ $shipping_address['State'] == 'TERENGGANU' ? 'selected' : '' }}>TERENGGANU</option>
                                                        <option value="KUALA LUMPUR" {{ $shipping_address['State'] == 'KUALA LUMPUR' ? 'selected' : '' }}>KUALA LUMPUR</option>
                                                        <option value="LABUAN" {{ $shipping_address['State'] == 'LABUAN' ? 'selected' : '' }}>LABUAN</option>
                                                        <option value="PUTRAJAYA" {{ $shipping_address['State'] == 'PUTRAJAYA' ? 'selected' : '' }}>PUTRAJAYA</option>                                                        
                                                        <option value="OTHER" {{ $shipping_address['State'] == 'OTHER' ? 'selected' : '' }}>OTHER</option>
                                                </select>
                                        </div>
                                        <div class="col-md-6">
                                                <label for="Country" class="form-label">Country <span style="color:red">*</span></label>
                                                <select class="form-control text-uppercase" id="Country" name="Country" required>
                                                        <option value="MALAYSIA" {{ $shipping_address['Country'] == 'MALAYSIA' ? 'selected' : '' }}>MALAYSIA</option>
                                                        <option value="SINGAPORE" {{ $shipping_address['Country'] == 'SG' ? 'selected' : '' }}>SINGAPORE</option>
                                                </select>
                                        </div>
                                </div>
                        </div> 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="editShippingAddressModal" tabindex="-1" aria-labelledby="editShippingAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editShippingAddressModalLabel">Edit Shipping Addresses</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Loop through multiple shipping addresses -->
                @foreach ($shipping_address_list as $index => $shipping_address)
       
                <div class="card mb-3">
                   <div class="card-header" style="display:flex; justify-content: space-between">
                        @if(($index + 1) == 1)
                                <h5 class="card-title mb-0">Shipping Address 1</h5>
                        @else
                                <h5 class="card-title mb-0">Shipping Address {{ $index + 1 }}</h5>
                        @endif
                        {{-- <button type="button" id="editShippingButton-{{ $index }}" class="btn btn-warning">Edit</button> --}}
                        <div>
                                <button type="button" id="editShippingButton-{{ $index }}" style="border:0" class="badge badge-pill bg-primary">
                                        Edit
                                </button>
                                <button type="button" id="backToCardButton-{{ $index }}" class="badge badge-pill bg-success" style="border:0; display: none;">Cancel</button>
                                <button type="submit" form="shippingEditForm-{{ $index }}" class="badge badge-pill bg-primary" style="border:0; display: none;" id="saveShippingButton-{{ $index }}">Save Changes</button>
                                <button type="button"style="border:0"class="badge badge-pill bg-danger"onclick="confirmDeleteShipping({{ $index }})">Remove</button>
                        </div>


                    </div>
                    <div class="card-body">
                        <!-- Display Shipping Information -->
                        <div id="shippingInfo-{{ $index }}" class="mb-3">
                                <table class="table table-borderless mb-0">
                                        <tbody>
                                                <tr>
                                                        <th scope="row" style="width: 40%;">Shipping Name</th>
                                                        <td>{{ $shipping_address['Attention'] }}</td>
                                                </tr>
                                                <tr>
                                                        <th scope="row">Shipping Tel 1</th>
                                                        <td>{{ $shipping_address['Tel1'] }}</td>
                                                </tr>
                                                <tr>
                                                        <th scope="row">Shipping Tel 2</th>
                                                        <td>{{ $shipping_address['Tel2'] ?? '-' }}</td>
                                                </tr>
                                                <tr>
                                                        <th scope="row">Shipping Email</th>
                                                        <td>{{ $shipping_address['Email'] ?? '-' }}</td>
                                                </tr>
                                                <tr>
                                                        <th scope="row">Shipping Address 1</th>
                                                        <td>{{ $shipping_address['Address1'] }}</td>
                                                </tr>
                                                <tr>
                                                        <th scope="row">Shipping Address 2</th>
                                                        <td>{{ $shipping_address['Address2'] }}</td>
                                                </tr>
                                                <tr>
                                                        <th scope="row">City</th>
                                                        <td>{{ $shipping_address['City'] }}</td>
                                                </tr>
                                                <tr>
                                                        <th scope="row">PostCode</th>
                                                        <td>{{ $shipping_address['PostCode'] }}</td>
                                                </tr>
                                                <tr>
                                                        <th scope="row">State</th>
                                                        <td>{{ $shipping_address['State'] }}</td>
                                                </tr>
                                                <tr>
                                                        <th scope="row">Country</th>
                                                        <td>{{ $shipping_address['Country'] }}</td>
                                                </tr>
                                        </tbody>
                                </table>
                        </div>

                        <!-- Edit Form (Initially Hidden) -->
                        <form id="shippingEditForm-{{ $index }}" action="{{ route('customers.updateShippingAddress') }}" method="POST" style="display: none;">
                            @csrf
                            <input name="AcCusShipToAddressID" type="hidden" value="{{ $shipping_address['AcCusShipToAddressID'] }}">
                            <input name="AcCustomerID" type="hidden" value="{{ $customer['AcCustomerID'] }}">
                            <div class="mb-3">
                                <label for="ShippingName-{{ $index }}" class="form-label">Shipping Name <span style="color:red">*</span></label>
                                <input type="text" class="form-control text-uppercase" id="ShippingName-{{ $index }}" name="Attention" value="{{ $shipping_address['Attention'] }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="ShippingContact1-{{ $index }}" class="form-label">Shipping Tel 1 <span style="color:red">*</span></label>
                                <input type="text" class="form-control" id="ShippingContact1-{{ $index }}" name="Tel1" value="{{ $shipping_address['Tel1'] }}" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                            </div>
                            <div class="mb-3">
                                <label for="ShippingContact2-{{ $index }}" class="form-label">Shipping Tel 2</label>
                                <input type="text" class="form-control" id="ShippingContact2-{{ $index }}" name="Tel2" value="{{ $shipping_address['Tel2'] }}" oninput="this.value = this.value.replace(/[^0-9]/g, '')" >
                            </div>
                            <div class="mb-3">
                                <label for="ShippingEmail-{{ $index }}" class="form-label">Shipping Email <span style="color:red">*</span></label>
                                <input type="text" class="form-control" id="ShippingEmail-{{ $index }}" name="Email" value="{{ $shipping_address['Email'] }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="ShippingAddress1-{{ $index }}" class="form-label">Shipping Address 1 <span style="color:red">*</span></label>
                                <input type="text" class="form-control text-uppercase" id="ShippingAddress1-{{ $index }}" name="Address1" value="{{ $shipping_address['Address1'] }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="ShippingAddress2-{{ $index }}" class="form-label">Shipping Address 2</label>
                                <input type="text" class="form-control text-uppercase" id="ShippingAddress2-{{ $index }}" name="Address2" value="{{ $shipping_address['Address2'] }}">
                            </div>
                        <div class="row mb-3">
                                <div class="col-md-6">
                                        <label for="ShippingCity-{{ $index }}" class="form-label">City <span style="color:red">*</span></label>
                                        <input type="text" class="form-control text-uppercase" id="ShippingCity-{{ $index }}" name="City" value="{{ $shipping_address['City'] ?? '' }}" required>
                                </div>
                                <div class="col-md-6">
                                        <label for="ShippingPostCode-{{ $index }}" class="form-label">PostCode <span style="color:red">*</span></label>
                                        <input type="text" class="form-control" id="ShippingPostCode-{{ $index }}" name="PostCode" value="{{ is_numeric($shipping_address['PostCode'] ?? '') ? $shipping_address['PostCode'] : '' }}" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                                </div>
                        </div>
                        <div class="row mb-3">
                                <div class="col-md-6">
                                                <label for="ShippingState-{{ $index }}" class="form-label">State <span style="color:red">*</span></label>
                                                <select class="form-control text-uppercase" id="ShippingState-{{ $index }}" name="State" required>
                                                                @if (!in_array($shipping_address['State'], ['JOHOR', 'KEDAH', 'KELANTAN', 'MALACCA', 'NEGERI SEMBILAN', 'PAHANG', 'PENANG', 'PERAK', 'PERLIS', 'SABAH', 'SARAWAK', 'SELANGOR', 'TERENGGANU', 'KUALA LUMPUR', 'LABUAN', 'PUTRAJAYA']))
                                                                <option value="" selected>SELECT STATE</option>
                                                                @else
                                                                <option value="">SELECT STATE</option>
                                                                @endif
                                                                <option value="JOHOR" {{ $shipping_address['State'] == 'JOHOR' ? 'selected' : '' }}>JOHOR</option>
                                                                <option value="KEDAH" {{ $shipping_address['State'] == 'KEDAH' ? 'selected' : '' }}>KEDAH</option>
                                                                <option value="KELANTAN" {{ $shipping_address['State'] == 'KELANTAN' ? 'selected' : '' }}>KELANTAN</option>
                                                                <option value="MALACCA" {{ $shipping_address['State'] == 'MALACCA' ? 'selected' : '' }}>MALACCA</option>
                                                                <option value="NEGERI SEMBILAN" {{ $shipping_address['State'] == 'NEGERI SEMBILAN' ? 'selected' : '' }}>NEGERI SEMBILAN</option>
                                                                <option value="PAHANG" {{ $shipping_address['State'] == 'PAHANG' ? 'selected' : '' }}>PAHANG</option>
                                                                <option value="PENANG" {{ $shipping_address['State'] == 'PENANG' ? 'selected' : '' }}>PENANG</option>
                                                                <option value="PERAK" {{ $shipping_address['State'] == 'PERAK' ? 'selected' : '' }}>PERAK</option>
                                                                <option value="PERLIS" {{ $shipping_address['State'] == 'PERLIS' ? 'selected' : '' }}>PERLIS</option>
                                                                <option value="SABAH" {{ $shipping_address['State'] == 'SABAH' ? 'selected' : '' }}>SABAH</option>
                                                                <option value="SARAWAK" {{ $shipping_address['State'] == 'SARAWAK' ? 'selected' : '' }}>SARAWAK</option>
                                                                <option value="SELANGOR" {{ $shipping_address['State'] == 'SELANGOR' ? 'selected' : '' }}>SELANGOR</option>
                                                                <option value="TERENGGANU" {{ $shipping_address['State'] == 'TERENGGANU' ? 'selected' : '' }}>TERENGGANU</option>
                                                                <option value="KUALA LUMPUR" {{ $shipping_address['State'] == 'KUALA LUMPUR' ? 'selected' : '' }}>KUALA LUMPUR</option>
                                                                <option value="LABUAN" {{ $shipping_address['State'] == 'LABUAN' ? 'selected' : '' }}>LABUAN</option>
                                                                <option value="PUTRAJAYA" {{ $shipping_address['State'] == 'PUTRAJAYA' ? 'selected' : '' }}>PUTRAJAYA</option>
                                                                <option value="OTHER" {{ $shipping_address['State'] == 'OTHER' ? 'selected' : '' }}>OTHER</option>
                                                        </select>
                                </div>
                                <div class="col-md-6">
                                        <label for="ShippingCountry-{{ $index }}" class="form-label">Country <span style="color:red">*</span></label>
                                        <select class="form-control text-uppercase" id="ShippingCountry-{{ $index }}" name="Country" required>
                                                <option value="MALAYSIA" {{ $shipping_address['Country'] == 'MALAYSIA' ? 'selected' : '' }}>MALAYSIA</option>
                                                <option value="SINGAPORE" {{ $shipping_address['Country'] == 'SG' ? 'selected' : '' }}>SINGAPORE</option>
                                        </select>
                                </div>
                        </div>
                        
                        </form>
                    </div>
                    {{-- <div class="card-footer">
                        <button type="button" id="backToCardButton-{{ $index }}" class="btn btn-secondary" style="display: none;">Back</button>
                        <button type="submit" form="shippingEditForm-{{ $index }}" class="btn btn-primary" style="display: none;" id="saveShippingButton-{{ $index }}">Save Changes</button>
                    </div> --}}
                </div>

                <form id="deleteShippingForm-{{ $index }}"
                        action="{{ route('customers.deleteShippingAddress') }}"
                        method="POST"
                        style="display:none;">

                        @csrf

                        <input type="hidden"
                                name="AcCusShipToAddressID"
                                value="{{ $shipping_address['AcCusShipToAddressID'] }}">

                </form>
                
                @endforeach
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

    
</div>


<!-- Add Shipping Address Modal -->
<div class="modal fade" id="addShippingAddressModal" tabindex="-1" aria-labelledby="addShippingAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Add Shipping Address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form action="{{ route('customers.addShippingAddress')}}" method="POST">
                @csrf

                <div class="modal-body">

                    <input name="AcCustomerID" type="hidden" value="{{ $customer['AcCustomerID'] }}">

                    <div class="mb-3">
                        <label class="form-label">Shipping Name <span style="color:red">*</span></label>
                        <input type="text" class="form-control text-uppercase" name="Attention" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Shipping Tel 1 <span style="color:red">*</span></label>
                        <input type="text" class="form-control" name="Tel1"
                            oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Shipping Tel 2</label>
                        <input type="text" class="form-control" name="Tel2"
                            oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Shipping Email <span style="color:red">*</span></label>
                        <input type="text" class="form-control" name="Email" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Shipping Address 1 <span style="color:red">*</span></label>
                        <input type="text" class="form-control text-uppercase" name="Address1" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Shipping Address 2</label>
                        <input type="text" class="form-control text-uppercase" name="Address2">
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">City <span style="color:red">*</span></label>
                            <input type="text" class="form-control text-uppercase" name="City" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">PostCode <span style="color:red">*</span></label>
                            <input type="text" class="form-control" name="PostCode"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-6">
                                        <label class="form-label">State <span style="color:red">*</span></label>
                                        <select class="form-control text-uppercase" name="State" required>
                                                        <option value="">SELECT STATE</option>
                                                        <option value="JOHOR">JOHOR</option>
                                                        <option value="KEDAH">KEDAH</option>
                                                        <option value="KELANTAN">KELANTAN</option>
                                                        <option value="MALACCA">MALACCA</option>
                                                        <option value="NEGERI SEMBILAN">NEGERI SEMBILAN</option>
                                                        <option value="PAHANG">PAHANG</option>
                                                        <option value="PENANG">PENANG</option>
                                                        <option value="PERAK">PERAK</option>
                                                        <option value="PERLIS">PERLIS</option>
                                                        <option value="SABAH">SABAH</option>
                                                        <option value="SARAWAK">SARAWAK</option>
                                                        <option value="SELANGOR">SELANGOR</option>
                                                        <option value="TERENGGANU">TERENGGANU</option>
                                                        <option value="KUALA LUMPUR">KUALA LUMPUR</option>
                                                        <option value="LABUAN">LABUAN</option>
                                                        <option value="PUTRAJAYA">PUTRAJAYA</option>
                                                        <option value="OTHER">OTHER</option>
                                        </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Country <span style="color:red">*</span></label>
                        <select class="form-control text-uppercase" name="Country" required>
                                <option value="MALAYSIA" selected>MALAYSIA</option>
                                <option value="SINGAPORE">SINGAPORE</option>
                        </select>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">
                        Cancel
                    </button>

                    <button class="btn btn-primary" type="submit">
                        Add Shipping Address
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>
@endsection
@section('script')
{{-- <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script> --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/sweetAlert.js') }}"></script>
<script>
    function toggleInlineEdit(field) {
        const viewEl = document.getElementById(field + '-view');
        const editEl = document.getElementById(field + '-edit');
        const isEditing = editEl.style.display !== 'none';
        viewEl.style.display = isEditing ? 'block' : 'none';
        editEl.style.display = isEditing ? 'none' : 'block';
    }


        function confirmDeleteShipping(index) {

                Swal.fire({
                        title: 'Are you sure?',
                        text: "This shipping address will be permanently deleted.",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'Cancel'
                }).then((result) => {

                        if (result.isConfirmed) {

                        callLoaddingScreen('Deleting Shipping Address...');

                        document.getElementById('deleteShippingForm-' + index).submit();
                        }

                });

        }


    // JavaScript to toggle between view and edit mode for each shipping address
    @foreach ($shipping_address_list as $index => $shipping_address)
    
        document.getElementById('editShippingButton-{{ $index }}').addEventListener('click', function () {
                document.getElementById('shippingInfo-{{ $index }}').style.display = 'none';
                document.getElementById('shippingEditForm-{{ $index }}').style.display = 'block';
                this.style.display = 'none';
                document.getElementById('backToCardButton-{{ $index }}').style.display = 'inline-block';
                document.getElementById('saveShippingButton-{{ $index }}').style.display = 'inline-block';
        });
        document.getElementById('backToCardButton-{{ $index }}').addEventListener('click', function () {
                document.getElementById('shippingInfo-{{ $index }}').style.display = 'block';
                document.getElementById('shippingEditForm-{{ $index }}').style.display = 'none';
                this.style.display = 'none';
                document.getElementById('editShippingButton-{{ $index }}').style.display = 'inline-block';
                document.getElementById('saveShippingButton-{{ $index }}').style.display = 'none';
        });
    
    @endforeach

    // Load membership details on page load
    (function loadMembershipDetails() {
        var cardNo = "{{ $customer['MemberNo'] }}";
        if (!cardNo) {
            document.getElementById('membership-detail-loading').style.display = 'none';
            document.getElementById('membership-detail-error').style.display = 'block';
            return;
        }

        $.ajax({
            type: 'POST',
            url: "{{ route('services.incard.card-details') }}",
            data: {
                cardNo: cardNo,
                _token: "{{ csrf_token() }}"
            },
            success: function (data) {
                document.getElementById('membership-detail-loading').style.display = 'none';
                if (data) {
                    document.getElementById('md_card_no').value        = data.CardNo      ?? cardNo;
                    document.getElementById('md_package').value        = data.PackageName ?? data.Package ?? '-';
                    document.getElementById('md_balance').value        = data.Balance      ?? '-';
                    document.getElementById('md_expiry').value         = data.Expiry       ?? '-';
                    document.getElementById('md_voucher_count').value  = (data.Voucher && data.Voucher.count != null) ? data.Voucher.count : '-';
                    document.getElementById('membership-detail-content').style.display = 'block';
                } else {
                    document.getElementById('membership-detail-error').style.display = 'block';
                }
            },
            error: function () {
                document.getElementById('membership-detail-loading').style.display = 'none';
                document.getElementById('membership-detail-error').style.display = 'block';
            }
        });
    })();
</script>
@endsection