@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" />
<style>
    /* Typography & Layout Reset */
    body {
        color: #495057;
        font-size: 14px;
    }

    .accordion-button:not(.collapsed) {
        background-color: #f8f9fa;
        color: #405189;
    }

    /* Simple Profile Styling */
    .profile-card {
        background: transparent;
        padding: 1rem;
        height: 100%;
    }

    .info-label {
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 700;
        color: #9599ad;
        margin-bottom: 2px;
        display: block;
    }

    .info-value {
        font-size: 16px;
        color: #212529;
        font-weight: 600;
        margin-bottom: 20px;
        display: block;
    }

    /* Membership Stats */
    .membership-stat-item {
        padding: 15px;
        text-align: center;
    }

    .stat-label {
        font-size: 12px;
        font-weight: 700;
        color: #9599ad;
        text-transform: uppercase;
        display: block;
        margin-bottom: 10px;
    }

    .stat-badge-large {
        font-size: 16px;
        font-weight: 700;
        padding: 8px 16px;
        border-radius: 4px;
        display: inline-block;
        min-width: 100px;
    }

    /* Table Styling */
    .table-address-custom {
        width: 100% !important;
        table-layout: auto;
    }

    .table-address-custom th,
    .table-address-custom td {
        color: #212529 !important;
        font-size: 14px;
        vertical-align: top;
        white-space: normal !important;   /* ✅ KEY FIX */
        word-break: break-word;           /* ✅ prevents cut-off */
        overflow-wrap: anywhere;          /* extra safety */
    }

    .edit-badge {
        font-size: 11px;
        cursor: pointer;
        margin-left: 8px;
        vertical-align: middle;
        text-decoration: underline;
    }
</style>
@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

<div class="row">
    <div class="col-lg-12">
        <div class="card shadow-none">
            <div class="card-header border-bottom-dashed">
                <div class="row g-4 align-items-center">
                    <div class="col-sm">
                        <div class="d-flex align-items-center">
                            <a href="/customers" class="text-dark"><i class="ri-arrow-left-s-line align-bottom me-1" style="font-size: 21px;"></i></a>
                            <h5 class="card-title mb-0" style="font-size: 18px;">
                                {{ $customer['AcCustomerName'] }}
                                <span class="badge bg-light text-muted ms-2">{{ $customer['AcCustomerID'] }}</span>
                                <!-- <span class="badge {{ $customer['IsActive'] == 'Y' ? 'bg-success' : 'bg-danger' }} text-uppercase ms-1">
                                    {{ $customer['IsActive'] == 'Y' ? 'Active' : 'Inactive' }}
                                </span> -->
                            </h5>
                        </div>
                    </div>
                    <div class="col-sm-auto">
                        <button type="button" class="btn btn-light btn-sm" onclick="expandAll()">Expand All</button>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="accordion accordion-flush" id="customerAccordion">
                    
                    <!-- Section 1: Profile & Membership -->
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header" id="headingDetail">
                                    <button class="accordion-button fw-bold border-0 shadow-none py-3"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#collapseDetail">

                                    <i class="ri-user-3-line me-2 text-primary"></i>
                                    CUSTOMER PROFILE & MEMBERSHIP
                                    </button>
                            </h2>

                            <div id="collapseDetail"
                                    class="accordion-collapse collapse show"
                                    data-bs-parent="#customerAccordion">

                                    <div class="accordion-body pt-3 px-0">

                                    <div class="card border-0 shadow-sm overflow-hidden">
                                            <div class="card-body p-3">

                                            <div class="row g-3 align-items-stretch">

                                                    <!-- PROFILE -->
                                                    <div class="col-xl-7">

                                                    <div class="d-flex align-items-start">

                                                            <!-- Avatar -->
                                                            <div class="flex-shrink-0">
                                                            <div class="avatar-md">
                                                                    <span class="avatar-title rounded-circle bg-light text-secondary border">
                                                                    <i class="ri-user-3-fill fs-3"></i>
                                                                    </span>
                                                            </div>
                                                            </div>

                                                            <!-- Info -->
                                                            <div class="flex-grow-1 ms-3">

                                                            <!-- Name -->
                                                            <div id="name-view">

                                                                    <div class="d-flex flex-wrap align-items-center gap-2 mb-1">

                                                                    <h5 class="mb-0 fw-bold text-dark">
                                                                            {{ $customer['AcCustomerName'] }}
                                                                    </h5>

                                                                    <span style="font-size:13px !important" class="badge bg-success-subtle text-success fs-12 px-3 py-2">
                                                                            {{ $customer['AcCustomerID'] }}
                                                                    </span>

                                                                    <span style="font-size:13px !important" class="fs-12 px-3 py-2 badge {{ $customer['IsActive'] == 'Y' ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }}">
                                                                            {{ $customer['IsActive'] == 'Y' ? 'Active' : 'Inactive' }}
                                                                    </span>

                                                                    </div>

                                                                    <div class="d-flex align-items-center gap-3 mb-3">

                                                                    <small class="text-muted">
                                                                            {{ $customer['AcCusGroupID'] }}
                                                                    </small>

                                                                    <!-- <span class="text-primary small fw-semibold"
                                                                            style="cursor:pointer"
                                                                            onclick="toggleInlineEdit('name')">
                                                                            Edit
                                                                    </span> -->

                                                                    </div>

                                                            </div>

                                                            <!-- Name Edit -->
                                                            <div id="name-edit" style="display:none" class="mb-3">

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

                                                                    <div class="d-flex gap-2">
                                                                            <input type="hidden" name="MemberNo" value="{{ $customer['MemberNo'] }}">
                                                                            <input type="hidden" name="Request" value="CustomerName">

                                                                            <input type="text"
                                                                            class="form-control form-control-sm text-uppercase"
                                                                            name="Name"
                                                                            value="{{ $customer['AcCustomerName'] }}"
                                                                            required>

                                                                            <button type="submit" class="btn btn-sm btn-primary">
                                                                            Save
                                                                            </button>
                                                                    </div>

                                                                    </form>

                                                            </div>

                                                            <!-- Compact Info Grid -->
                                                            <div class="row g-2">

                                                                    <!-- Gender -->
                                                                    <div class="col-md-6">
                                                                    <div class="border rounded-3 p-2 h-100">
                                                                            <div class="fs-13 text-muted text-uppercase fw-semibold">
                                                                            Gender
                                                                            </div>
                                                                            <div class="fs-13 fw-semibold text-dark mt-1">
                                                                            {{ $customer['Gender'] ?? '-' }}
                                                                            </div>
                                                                    </div>
                                                                    </div>

                                                                    <!-- Mobile -->
                                                                    <div class="col-md-6">
                                                                    <div class="border rounded-3 p-2 h-100">

                                                                            <div class="d-flex justify-content-between align-items-center">
                                                                            <div class="fs-13 text-muted text-uppercase fw-semibold">
                                                                                    Mobile
                                                                            </div>

                                                                            <!-- <span class="text-primary"
                                                                                    style="font-size:11px;cursor:pointer"
                                                                                    onclick="toggleInlineEdit('mobile')">
                                                                                    Edit
                                                                            </span> -->
                                                                            </div>

                                                                            <div id="mobile-view" class="mt-1">
                                                                            <div class="fs-13 fw-semibold text-dark">
                                                                                    {{ $customer['MobileNo'] ?? '-' }}
                                                                            </div>
                                                                            </div>

                                                                            <div id="mobile-edit" style="display:none" class="mt-2">
                                                                            <form action="{{ route('customers.updateCustomerProfile') }}" method="POST">
                                                                                    @csrf

                                                                                    <div class="d-flex gap-1">
                                                                                    <input type="hidden" name="MemberNo" value="{{ $customer['MemberNo'] }}">
                                                                                    <input type="hidden" name="Request" value="MobileNo">

                                                                                    <input type="text"
                                                                                            class="form-control form-control-sm"
                                                                                            name="MobileNo"
                                                                                            value="{{ $customer['MobileNo'] }}"
                                                                                            required>

                                                                                    <button type="submit" class="btn btn-sm btn-primary">
                                                                                            ✓
                                                                                    </button>
                                                                                    </div>

                                                                            </form>
                                                                            </div>

                                                                    </div>
                                                                    </div>

                                                                    <!-- DOB -->
                                                                    <div class="col-md-6">
                                                                    <div class="border rounded-3 p-2 h-100">

                                                                            <div class="d-flex justify-content-between align-items-center">
                                                                            <div class="fs-13 text-muted text-uppercase fw-semibold">
                                                                                    DOB
                                                                            </div>

                                                                            <!-- <span class="text-primary"
                                                                                    style="font-size:11px;cursor:pointer"
                                                                                    onclick="toggleInlineEdit('dob')">
                                                                                    Edit
                                                                            </span> -->
                                                                            </div>

                                                                            <div id="dob-view" class="mt-1">
                                                                            <div class="fs-13 fw-semibold text-dark">
                                                                                    {{ $customer['DateOfBirth'] ? \Carbon\Carbon::parse($customer['DateOfBirth'])->format('d M Y') : '-' }}
                                                                            </div>
                                                                            </div>

                                                                            <div id="dob-edit" style="display:none" class="mt-2">
                                                                            <form action="{{ route('customers.updateCustomerProfile') }}" method="POST">
                                                                                    @csrf

                                                                                    <div class="d-flex gap-1">
                                                                                    <input type="hidden" name="MemberNo" value="{{ $customer['MemberNo'] }}">
                                                                                    <input type="hidden" name="Request" value="DateOfBirth">

                                                                                    <input type="date"
                                                                                            class="form-control form-control-sm"
                                                                                            name="DateOfBirth"
                                                                                            value="{{ $customer['DateOfBirth'] ? \Carbon\Carbon::parse($customer['DateOfBirth'])->format('Y-m-d') : '' }}">

                                                                                    <button type="submit" class="btn btn-sm btn-primary">
                                                                                            ✓
                                                                                    </button>
                                                                                    </div>

                                                                            </form>
                                                                            </div>

                                                                    </div>
                                                                    </div>

                                                                    <!-- Email -->
                                                                    <div class="col-md-6">
                                                                    <div class="border rounded-3 p-2 h-100">

                                                                            <div class="d-flex justify-content-between align-items-center">
                                                                            <div class="fs-13 text-muted text-uppercase fw-semibold">
                                                                                    Email
                                                                            </div>

                                                                            <!-- <span class="text-primary"
                                                                                    style="font-size:11px;cursor:pointer"
                                                                                    onclick="toggleInlineEdit('email')">
                                                                                    Edit
                                                                            </span> -->
                                                                            </div>

                                                                            <div id="email-view" class="mt-1">
                                                                            <div class="fs-13 fw-semibold text-dark text-break">
                                                                                    {{ $customer['BillingEmail'] ?? '-' }}
                                                                            </div>
                                                                            </div>

                                                                            <div id="email-edit" style="display:none" class="mt-2">
                                                                            <form action="{{ route('customers.updateCustomerProfile') }}" method="POST">
                                                                                    @csrf

                                                                                    <div class="d-flex gap-1">
                                                                                    <input type="hidden" name="MemberNo" value="{{ $customer['MemberNo'] }}">
                                                                                    <input type="hidden" name="Request" value="Email">

                                                                                    <input type="email"
                                                                                            class="form-control form-control-sm"
                                                                                            name="Email"
                                                                                            value="{{ $customer['BillingEmail'] }}"
                                                                                            required>

                                                                                    <button type="submit" class="btn btn-sm btn-primary">
                                                                                            ✓
                                                                                    </button>
                                                                                    </div>

                                                                            </form>
                                                                            </div>

                                                                    </div>
                                                                    </div>

                                                            </div>

                                                            </div>

                                                    </div>

                                                    </div>

                                                    <!-- MEMBERSHIP -->
                                                    <div class="col-xl-5">

                                                    <div class="border rounded-4 h-100 p-3 bg-light-subtle">

                                                            <div class="mb-3">
                                                            <div class="fw-bold text-dark">Membership Info</div>
                                                            <small class="text-muted">Tier, points & vouchers</small>
                                                            </div>

                                                            <!-- Loading -->
                                                            <div id="membership-detail-loading" class="text-center py-4">
                                                            <div class="spinner-border spinner-border-sm text-primary"></div>
                                                            </div>

                                                            <!-- Membership Content -->
                                                            <div id="membership-detail-content" style="display:none">

                                                            <div class="row g-2">

                                                                    <!-- Tier -->
                                                                    <div class="col-md-6">
                                                                    <div class="bg-white border rounded-3 px-3 py-2 h-100">
                                                                            <div class="fs-13 text-muted text-uppercase fw-semibold mb-1"
                                                                            style="letter-spacing:.5px;">
                                                                            Member Tier
                                                                            </div>

                                                                            <span class="badge bg-success-subtle text-success fs-13 px-3 py-2" style="font-size:13px !important" 
                                                                            id="md_package_text">
                                                                            -
                                                                            </span>
                                                                    </div>
                                                                    </div>

                                                                    <!-- Points -->
                                                                    <div class="col-md-6">
                                                                    <div class="bg-white border rounded-3 px-3 py-2 h-100">
                                                                            <div class="fs-13 text-muted text-uppercase fw-semibold mb-1"
                                                                            style="letter-spacing:.5px;">
                                                                            Points Balance
                                                                            </div>

                                                                            <span class="badge bg-primary-subtle text-primary fs-13 px-3 py-2" style="font-size:13px !important" 
                                                                            id="md_balance_text">
                                                                            0
                                                                            </span>
                                                                    </div>
                                                                    </div>

                                                                    <!-- Voucher -->
                                                                    <div class="col-md-6">
                                                                    <div class="bg-white border rounded-3 px-3 py-2 h-100">
                                                                            <div class="fs-13 text-muted text-uppercase fw-semibold mb-1"
                                                                            style="letter-spacing:.5px;">
                                                                            Voucher
                                                                            </div>

                                                                            <span class="badge bg-info-subtle text-info fs-13 px-3 py-2" style="font-size:13px !important" 
                                                                            id="md_voucher_text">
                                                                            0
                                                                            </span>
                                                                    </div>
                                                                    </div>

                                                                    <!-- Card Number -->
                                                                    <div class="col-md-6">
                                                                    <div class="bg-white border rounded-3 px-3 py-2 h-100">
                                                                            <div class="fs-13 text-muted text-uppercase fw-semibold mb-1"
                                                                            style="letter-spacing:.5px;">
                                                                            Card Number
                                                                            </div>

                                                                            <span class="badge bg-info-subtle text-info fs-13 px-3 py-2" style="font-size:13px !important" 
                                                                            id="md_card_no_text">
                                                                            -
                                                                            </span>
                                                                    </div>
                                                                    </div>

                                                            </div>

                                                            </div>

                                                            <!-- Error -->
                                                            <div id="membership-detail-error" style="display:none">
                                                            <div class="text-center py-3 text-muted small">
                                                                    Unable to load membership details.
                                                            </div>
                                                            </div>

                                                    </div>

                                                    </div>

                                            </div>

                                            </div>
                                    </div>

                                    </div>

                            </div>
                        </div>

                    <!-- Section 2: Billing Address Detail -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingBilling">
                            <button class="accordion-button collapsed fw-bold"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapseBilling">

                                <i class="ri-map-pin-line me-2 text-muted"></i>
                                BILLING ADDRESS DETAIL
                            </button>
                        </h2>

                        <div id="collapseBilling"
                            class="accordion-collapse collapse"
                            data-bs-parent="#customerAccordion">

                            <div class="accordion-body pt-3">

                                <!-- Left aligned compact card -->
                                <div class="card border-0 shadow-sm rounded-3"
                                    style="max-width: 480px;">

                                    <div class="card-body p-4" style="background: #f7f7f7">

                                        <!-- Header -->
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="me-3">
                                                <div class="flex-shrink-0">
                                                    <div class="avatar-md">
                                                        <span class="avatar-title rounded-circle bg-light text-secondary border">
                                                            <i class="ri-map-pin-user-line fs-3"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>

                                            <div>
                                                <h5 class="fw-bold text-dark mb-0 text-uppercase">
                                                    {{ $shipping_address['Attention'] }}
                                                </h5>
                                                <small class="text-muted">Billing Contact</small>
                                            </div>
                                        </div>

                                        <hr class="my-3">

                                        <!-- Contact -->
                                        <div class="mb-3">
                                            <div class="text-muted small">Contact</div>
                                            <div class="fw-semibold text-dark">
                                                {{ $shipping_address['Tel1'] }}
                                                @if($shipping_address['Tel2'])
                                                    , {{ $shipping_address['Tel2'] }}
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Address -->
                                        <div class="mb-3">
                                            <div class="text-muted small">Address</div>
                                            <div class="fw-semibold text-dark">
                                                {{ $shipping_address['Address1'] }},
                                                {{ $shipping_address['Address2'] }},
                                                {{ $shipping_address['PostCode'] }}
                                                {{ $shipping_address['City'] }},
                                                {{ $shipping_address['State'] }}
                                            </div>
                                        </div>

                                        <!-- Location -->
                                        <!-- <div class="mb-4">
                                            <div class="text-muted small">Location</div>
                                            <div class="fw-semibold text-dark">
                                                
                                            </div>
                                        </div> -->

                                        <!-- Action Button (Bottom Right) -->
                                        <div class="d-flex justify-content-end">
                                            <button type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#editBillingAddressModal"
                                                class="btn btn-sm btn-success px-3">
                                                Modify Billing
                                            </button>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- Section 3: Shipping Addresses -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingShipping">
                            <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseShipping">
                                <i class="ri-truck-line me-2 text-muted"></i> SHIPPING ADDRESSES
                            </button>
                        </h2>

                        <div id="collapseShipping" class="accordion-collapse collapse" data-bs-parent="#customerAccordion">
                            <div class="accordion-body pt-3">

                                <!-- Action Buttons -->
                                <div class="d-flex gap-2 mb-3">
                                    <button type="button"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editShippingAddressModal"
                                        class="btn btn-sm btn-info">
                                        Manage all addresses
                                    </button>

                                    <button type="button"
                                        data-bs-toggle="modal"
                                        data-bs-target="#addShippingAddressModal"
                                        class="btn btn-sm btn-success">
                                        Add New
                                    </button>
                                </div>

                                <!-- SHIPPING CARDS -->
                                <div class="row g-3">

                                    @foreach($shipping_address_list as $index => $ship)
                                    <div class="col-md-6 col-lg-4">

                                        <div class="card border-0 shadow-sm rounded-3 h-100">

                                            <div class="card-body p-4" style="background: #f7f7f7">

                                                <!-- Header -->
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="me-3">
                                                        <div class="avatar-md">
                                                            <span class="avatar-title rounded-circle bg-light text-secondary border">
                                                                <i class="ri-truck-line fs-3"></i>
                                                            </span>
                                                        </div>
                                                    </div>

                                                    <div class="flex-grow-1">
                                                        <h5 class="fw-bold text-dark mb-0 text-uppercase">
                                                            {{ $ship['Attention'] }}
                                                        </h5>
                                                        <small class="text-muted">Shipping Address {{ $index + 1 }}</small>
                                                    </div>
                                                </div>

                                                <hr class="my-3">

                                                <!-- CONTACT -->
                                                <div class="mb-3">
                                                    <div class="text-muted small">Contact</div>
                                                    <div class="fw-semibold text-dark">
                                                        {{ $ship['Tel1'] }}, 
                                                        @if(!empty($ship['Tel2']))
                                                            {{ $ship['Tel2'] }}
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <div class="text-muted small">Email</div>
                                                    <div class="fw-semibold text-dark">
                                                    @if(!empty($ship['Email']))
                                                        {{ $ship['Email'] }}
                                                    @endif
                                                    </div>
                                                </div>

                                                <!-- ADDRESS -->
                                                <div class="mb-3">
                                                    <div class="text-muted small">Address</div>
                                                    <div class="fw-semibold text-dark text-uppercase">
                                                        {{ $ship['Address1'] }},
                                                         @if(!empty($ship['Address2']))
                                                            {{ $ship['Address2'] }}
                                                        @endif,
                                                        {{ $ship['PostCode'] }}
                                                        {{ $ship['City'] }} {{ $ship['State'] }}
                                                    </div>
                                                </div>

                                                <!-- LOCATION -->
                                                <!-- <div class="mb-3">
                                                    <div class="text-muted small">Location</div>
                                                    <div class="fw-semibold text-dark text-uppercase">
                                                        {{ $ship['PostCode'] }}<br>
                                                        {{ $ship['City'] }}, {{ $ship['State'] }}
                                                    </div>
                                                </div> -->

                                                <!-- ACTIONS -->
                                                <!-- <div class="d-flex justify-content-end gap-2 mt-3">

                                                    <button type="button"
                                                        class="btn btn-sm btn-outline-primary"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#editShippingAddressModal">
                                                        Edit
                                                    </button>

                                                    <button type="button"
                                                        class="btn btn-sm btn-danger px-3"
                                                        onclick="confirmDeleteShipping({{ $index }})">
                                                        Delete
                                                    </button>

                                                </div> -->

                                            </div>
                                        </div>

                                    </div>

                                    <!-- Hidden delete form -->
                                    <form id="deleteShippingForm-{{ $index }}"
                                        action="{{ route('customers.deleteShippingAddress') }}"
                                        method="POST"
                                        style="display:none;">
                                        @csrf
                                        <input type="hidden" name="AcCusShipToAddressID" value="{{ $ship['AcCusShipToAddressID'] }}">
                                    </form>

                                    @endforeach

                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- Section 4: Einvoice Detail -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingEinvoice">
                            <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEinvoice">
                                <i class="ri-book-line me-2 text-muted"></i> EINVOICE DETAIL
                            </button>
                        </h2>

                        <div id="collapseEinvoice" class="accordion-collapse collapse" data-bs-parent="#customerAccordion">
                            <div class="accordion-body pt-3">

                               

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODALS --}}
<!-- Edit Billing Modal -->
<div class="modal fade" id="editBillingAddressModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Edit Billing Address</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></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">Attention <span class="text-danger">*</span></label><input type="text" class="form-control text-uppercase" name="Attention" value="{{ $shipping_address['Attention'] }}" required></div>
                    <div class="row">
                        <div class="col-6 mb-3"><label class="form-label">Tel 1 <span class="text-danger">*</span></label><input type="text" class="form-control" name="Tel1" value="{{ $shipping_address['Tel1'] }}" required></div>
                        <div class="col-6 mb-3"><label class="form-label">Tel 2</label><input type="text" class="form-control" name="Tel2" value="{{ $shipping_address['Tel2'] }}"></div>
                    </div>
                    <div class="mb-3"><label class="form-label">Billing Email <span class="text-danger">*</span></label><input type="email" class="form-control" name="Email" value="{{ $shipping_address['Email'] }}" required></div>
                    <div class="mb-3"><label class="form-label">Address 1 <span class="text-danger">*</span></label><input type="text" class="form-control text-uppercase" name="Address1" value="{{ $shipping_address['Address1'] }}" required></div>
                    <div class="mb-3"><label class="form-label">Address 2</label><input type="text" class="form-control text-uppercase" name="Address2" value="{{ $shipping_address['Address2'] }}"></div>
                    <div class="row">
                        <div class="col-6 mb-3"><label class="form-label">City <span class="text-danger">*</span></label><input type="text" class="form-control text-uppercase" name="City" value="{{ $shipping_address['City'] }}" required></div>
                        <div class="col-6 mb-3"><label class="form-label">PostCode <span class="text-danger">*</span></label><input type="text" class="form-control" name="PostCode" value="{{ $shipping_address['PostCode'] }}" required></div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3"><label class="form-label">State <span class="text-danger">*</span></label>
                            <select class="form-control text-uppercase" name="State" required>
                                @foreach(['JOHOR', 'KEDAH', 'KELANTAN', 'MALACCA', 'NEGERI SEMBILAN', 'PAHANG', 'PENANG', 'PERAK', 'PERLIS', 'SABAH', 'SARAWAK', 'SELANGOR', 'TERENGGANU', 'KUALA LUMPUR', 'LABUAN', 'PUTRAJAYA', 'OTHER'] as $st)
                                    <option value="{{ $st }}" {{ $shipping_address['State'] == $st ? 'selected' : '' }}>{{ $st }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6 mb-3"><label class="form-label">Country <span class="text-danger">*</span></label>
                            <select class="form-control text-uppercase" 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 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>

<!-- Edit Shipping Address Modal -->
<div class="modal fade" id="editShippingAddressModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Manage Shipping Addresses</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                @foreach ($shipping_address_list as $index => $ship)
                <div class="card border mb-3 shadow-none">
                    <div class="card-header d-flex justify-content-between align-items-center bg-light">
                        <h6 class="mb-0 text-uppercase fw-bold" style="font-size: 12px;">Address {{ $index + 1 }}</h6>
                        <button type="button" class="btn btn-sm btn-danger" onclick="confirmDeleteShipping({{ $index }})">Remove</button>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('customers.updateShippingAddress') }}" method="POST">
                            @csrf
                            <input name="AcCusShipToAddressID" type="hidden" value="{{ $ship['AcCusShipToAddressID'] }}">
                            <input name="AcCustomerID" type="hidden" value="{{ $customer['AcCustomerID'] }}">
                            <div class="row g-2">
                                <div class="col-md-6 mb-2"><label class="small fw-bold text-muted">NAME <span class="text-danger">*</span></label><input type="text" class="form-control form-control-sm text-uppercase" name="Attention" value="{{ $ship['Attention'] }}" required></div>
                                <div class="col-md-3 mb-2"><label class="small fw-bold text-muted">TEL 1 <span class="text-danger">*</span></label><input type="text" class="form-control form-control-sm" name="Tel1" value="{{ $ship['Tel1'] }}" required></div>
                                <div class="col-md-3 mb-2"><label class="small fw-bold text-muted">TEL 2</label><input type="text" class="form-control form-control-sm" name="Tel2" value="{{ $ship['Tel2'] }}"></div>
                                <div class="col-12 mb-2"><label class="small fw-bold text-muted">EMAIL <span class="text-danger">*</span></label><input type="email" class="form-control form-control-sm" name="Email" value="{{ $ship['Email'] }}" required></div>
                                <div class="col-12 mb-2"><label class="small fw-bold text-muted">ADDRESS 1 <span class="text-danger">*</span></label><input type="text" class="form-control form-control-sm text-uppercase" name="Address1" value="{{ $ship['Address1'] }}" required></div>
                                <div class="col-md-4 mb-2"><label class="small fw-bold text-muted">CITY <span class="text-danger">*</span></label><input type="text" class="form-control form-control-sm text-uppercase" name="City" value="{{ $ship['City'] }}" required></div>
                                <div class="col-md-4 mb-2"><label class="small fw-bold text-muted">POSTCODE <span class="text-danger">*</span></label><input type="text" class="form-control form-control-sm" name="PostCode" value="{{ $ship['PostCode'] }}" required></div>
                                <div class="col-md-4 mb-2">
                                    <label class="small fw-bold text-muted">STATE <span class="text-danger">*</span></label>
                                    <select class="form-control form-control-sm text-uppercase" name="State" required>
                                        @foreach(['JOHOR', 'KEDAH', 'KELANTAN', 'MALACCA', 'NEGERI SEMBILAN', 'PAHANG', 'PENANG', 'PERAK', 'PERLIS', 'SABAH', 'SARAWAK', 'SELANGOR', 'TERENGGANU', 'KUALA LUMPUR', 'LABUAN', 'PUTRAJAYA', 'OTHER'] as $st)
                                            <option value="{{ $st }}" {{ $ship['State'] == $st ? 'selected' : '' }}>{{ $st }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 text-end mt-2"><button type="submit" class="btn btn-sm btn-primary px-3">Update Address</button></div>
                            </div>
                        </form>
                    </div>
                </div>
                <form id="deleteShippingForm-{{ $index }}" action="{{ route('customers.deleteShippingAddress') }}" method="POST" style="display:none;">@csrf <input type="hidden" name="AcCusShipToAddressID" value="{{ $ship['AcCusShipToAddressID'] }}"></form>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Add Shipping Modal -->
<div class="modal fade" id="addShippingAddressModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">Add New 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">Attention Name <span class="text-danger">*</span></label><input type="text" class="form-control text-uppercase" name="Attention" placeholder="e.g. HOME / OFFICE" required></div>
                    <div class="row">
                        <div class="col-6 mb-3"><label class="form-label">Tel 1 <span class="text-danger">*</span></label><input type="text" class="form-control" name="Tel1" required></div>
                        <div class="col-6 mb-3"><label class="form-label">Tel 2</label><input type="text" class="form-control" name="Tel2"></div>
                    </div>
                    <div class="mb-3"><label class="form-label">Email <span class="text-danger">*</span></label><input type="email" class="form-control" name="Email" required></div>
                    <div class="mb-3"><label class="form-label">Address 1 <span class="text-danger">*</span></label><input type="text" class="form-control text-uppercase" name="Address1" required></div>
                    <div class="mb-3"><label class="form-label">Address 2</label><input type="text" class="form-control text-uppercase" name="Address2"></div>
                    <div class="row">
                        <div class="col-6 mb-3"><label class="form-label">City <span class="text-danger">*</span></label><input type="text" class="form-control text-uppercase" name="City" required></div>
                        <div class="col-6 mb-3"><label class="form-label">PostCode <span class="text-danger">*</span></label><input type="text" class="form-control" name="PostCode" required></div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">State <span class="text-danger">*</span></label>
                            <select class="form-control text-uppercase" name="State" required>
                                <option value="">SELECT STATE</option>
                                @foreach(['JOHOR', 'KEDAH', 'KELANTAN', 'MALACCA', 'NEGERI SEMBILAN', 'PAHANG', 'PENANG', 'PERAK', 'PERLIS', 'SABAH', 'SARAWAK', 'SELANGOR', 'TERENGGANU', 'KUALA LUMPUR', 'LABUAN', 'PUTRAJAYA', 'OTHER'] as $st)
                                    <option value="{{ $st }}">{{ $st }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Country <span class="text-danger">*</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 type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Add Address</button></div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
    function toggleInlineEdit(field) {
        const viewEl = document.getElementById(field + '-view');
        const editEl = document.getElementById(field + '-edit');
        if (viewEl && editEl) {
            const isEditing = editEl.style.display !== 'none';
            viewEl.style.display = isEditing ? 'block' : 'none';
            editEl.style.display = isEditing ? 'none' : 'block';
        }
    }
    function expandAll() { $('.accordion-collapse').collapse('show'); $('.accordion-button').removeClass('collapsed'); }
    function confirmDeleteShipping(index) {
        Swal.fire({ title: 'Delete Address?', text: 'This action cannot be undone.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#f06548', confirmButtonText: 'Yes, delete!' })
        .then((result) => { if (result.isConfirmed) document.getElementById('deleteShippingForm-' + index).submit(); });
    }
    $(document).ready(function() {
        var cardNo = "{{ $customer['MemberNo'] }}";
        if (cardNo) {
            $.ajax({
                type: 'POST', url: "{{ route('services.incard.card-details') }}", data: { cardNo: cardNo, _token: "{{ csrf_token() }}" },
                success: function (data) {
                    $('#membership-detail-loading').hide();
                    if (data) {
                        $('#md_card_no_text').text(data.CardNo ?? cardNo);
                        $('#md_package_text').text(data.PackageName ?? data.Package ?? '-');
                        $('#md_balance_text').text(data.Balance ?? '0');
                        $('#md_voucher_text').text(data.Voucher ? data.Voucher.count : '0');
                        $('#membership-detail-content').show();
                    } else { $('#membership-detail-error').show(); }
                },
                error: function () { $('#membership-detail-loading').hide(); $('#membership-detail-error').show(); }
            });
        } else { $('#membership-detail-loading').hide(); $('#membership-detail-error').show(); }
    });
</script>
@endsection