@extends('dashlayouts.app')
@section('content')
<style>
    /* Overlay */
    .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none; /* Hidden by default */
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    /* Popup content */
    .popup-content {
        position: relative;
        background: #fff;
        border-radius: 10px;
        text-align: center;
        padding: 20px;
        width: 90%; /* Responsive width */
        max-width: 400px; /* Maximum width for larger screens */
        height: auto; /* Automatically adjusts height */
    }

    /* Popup image */
    .popup-content img {
        width: 100%; /* Responsive width for image */
        max-width: 100%; /* Prevents overflow */
        height: auto; /* Maintains aspect ratio */
        border-radius: 10px;
    }

    /* Close button */
    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: red;
        color: white;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        cursor: pointer;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        
    }
</style>
<script src="{{ asset('js/parsley.min.js') }}"></script>
<div>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Utama</a></li>
            <li class="breadcrumb-item active">Pembayaran Kad</li>
        </ol>
    </nav>
    <div class="col md-6">
        <div class="card shadow-sm border-0 rounded">
            <div class="card-body">
                <h5 class="card-title">Student & Card Registration</h5>
                <p class="text-muted" style="margin-bottom: 20px;">Buat pembayaran untuk murid yang di daftarkan.</p>

                <div class="mb-4">
                    @include('errors')

                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show col-md-8" role="alert">
                            {{ session('success') }}
                            <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 col-md-8" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        Kad Murid akan dihantar pada sesi sekolah pertama tahun 2025.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    
                    
                    <div class="m-4 text-center">
                        <h4 class="text-muted">Fi Pengaktifan Kad setiap Murid</h4>
                        <p class="fs-2 text-success"><strong>RM {{ $fees->amount }}</strong></p>
                    </div>
                    {{-- <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="text-align: left;">ID Murid</th>
                                    <th style="text-align: left;">Nama Murid</th>
                                    <th style="text-align: left;">Sekolah</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($childs as $child)
                                    <tr>
                                        <td style="text-align: left;">{{ $child->student_id }}</td>
                                        <td style="text-align: left;">{{ $child->student_name }}</td>
                                        <td style="text-align: left;">{{ $child->nama_pusat }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div> --}}
                    @foreach ($childs as $child)

                    <div class="container d-flex justify-content-center align-items-center" style="min-height: 20;">
                        <div class="card mb-3" style="max-width: 30rem;">
                            <div class="row no-gutters">
                                <div class="col-md-4">
                                    @if($child->logo_path)
                                        <img src="{{ asset($child->logo_path) }}" alt="Student Image" class="img-fluid rounded-start" style="border: 1px solid #dee2e6;">
                                    @else
                                        {{-- <p class="text-center my-auto">No image available</p> --}}
                                        <img src="{{ asset('img/defaultphoto.png') }}" alt="Student Image" class="img-fluid rounded-start">
                                    @endif
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <h5 class="card-title">Maklumat Murid</h5>
                                        <p class="card-text"><strong>ID Murid:</strong> {{ $child->student_id }}</p>
                                        <p class="card-text"><strong>Nama Murid:</strong> {{ $child->student_name }}</p>
                                        <p class="card-text"><strong>Sekolah:</strong> {{ $child->nama_pusat }}</p>
                                        @if ($child->upload_photo == 0)
                                        <p class="card-text"><strong>Gambar:</strong> Tiada</p>
                                        @endif
                                        <a href="{{ route('card.edit', $child) }}" class="btn btn-primary btn-sm mt-3">Kemaskini</a>
                                        <a href="{{ route('card.delete', $child->student_id) }}" class="btn btn-primary btn-sm mt-3">Batal</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                   
                    <br>

                    @if ($childs->count()>0)
                    <form  id="regform" action="{{ route('card.submit') }}" method="POST" enctype="multipart/form-data" data-parsley-validate>
                        @csrf
                        <div class="mb-3 row">
                            <div class="col-md-6">
                                <label for="dependent" class="form-label">Jumlah Murid</label>
                                <input type="number" step="0.01" class="form-control" name="dependent" id="dependent" 
                                       value="{{ $child_count }}" data-parsley-min='1' required readonly>
                            </div>
                            <div class="col-md-6">
                                <label for="total_amount" class="form-label">Jumlah (RM)</label>
                                <input type="number" step="0.01" class="form-control" name="total_amount" id="total_amount" 
                                       value="{{ number_format($payamount, 2) }}" data-parsley-min='1' required readonly>
                            </div>
                        </div>
                        <br>
                        <div class="mb-3 row">
                            <div class="col-12 col-md">
                                <label class="required"><strong>Pilih Alamat Penghantaran:</strong></label><br />
                                <div class="form-check">
                                    <input class="form-check-input" id="same_add1" type="radio"
                                        name="same_add" value="1" onchange="chck('1')"
                                        {{ $same_add == 1 ? 'checked' : '' }} />
                                    <label class="form-check-label" for="same_add1">Alamat Sekolah (Kos Penghantaran RM 0.00)</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" id="same_add2" type="radio"
                                        name="same_add" value="0"
                                        data-parsley-error-message="Please Choose One" required
                                        onchange="chck('0')"
                                        {{ $same_add == 0 ? 'checked' : '' }} />
                                    <label class="form-check-label" for="same_add2">Alamat Rumah (Kos Penghantaran RM 7.00)</label>
                                </div>
                            </div>
                        </div>
                        <div id="principal-div" class=""
                        style="display: {{ $user->add1 ? 'show' : 'none' }};">
                        <div class="mb-3">
                            <div class="row">
                                <div class="col">
                                    <label for="p_add1">Alamat 1</label>
                                    <input type="text" name="p_add1" id="p_add1"
                                        class="form-control" placeholder=""
                                        data-parsley-trigger="change" data-parsley-maxlength="200"
                                        data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
                                        value="{{ $user->add1 ?? '' }}"
                                        style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()">
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col">
                                    <label for="p_add2">Alamat 2</label>
                                    <input type="text" name="p_add2" id="p_add2"
                                        class="form-control" placeholder=""
                                        data-parsley-trigger="change" data-parsley-maxlength="200"
                                        data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
                                        value="{{ $user->add2 ?? '' }}"
                                        style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()">
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-12 col-md-6">
                                    <label for="p_city"> City</label>
                                    <input type="text" name="p_city" id="p_city"
                                        class="form-control" placeholder=""
                                        data-parsley-trigger="change" data-parsley-maxlength="50"
                                        data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
                                        value="{{ $user->city ?? '' }}"
                                        style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()">
                                </div>
                                <div class="col-12 col-md-2 mt-4 mt-md-0">
                                    <label for="p_postcode"> Postcode</label>
                                    <input type="number" name="p_postcode" id="p_postcode"
                                        class="form-control" placeholder=""
                                        data-parsley-trigger="change" data-parsley-type="digits"
                                        data-parsley-length="[5, 5]"
                                        value="{{ $user->postcode ?? '' }}">
                                </div>
                                <div class="col-12 col-md-4 mt-4 mt-md-0">
                                    <label for="p_state_id"> State</label>
                                    <select type="text" name="p_state_id" id="p_state_id"
                                        class="form-control">
                                        <option {{ old('p_state_id') !== null ? '' : 'selected' }}
                                            disabled>Please Choose</option>
                                        @foreach ($states as $s)
                                            <option
                                                {{ Str::is($user->state, $s->shortname) ? 'selected' : '' }}
                                                value="{{ $s->shortname }}">{{ $s->shortname }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-12 col-md-3">
                                    <label for="p_mobile"> Phone No <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="p_mobile" id="p_mobile"
                                        class="form-control" placeholder="" data-parsley-trigger="change"
                                        value="{{ $user->mobile_no ?? '' }}"
                                        data-parsley-trigger="change" data-parsley-length="[8, 13]"
                                        data-parsley-pattern="^(6?0)[0|1|2|3|4|6|7|8|9]{1,2}[0-9]{7,8}$"
                                        required>
    
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <br>
                   
                    <div class="mb-3">
                        <div class="row mt-4">
                            <div class="col-sm-4">
                                <label for="nilai_bayaran" class="form-label"><strong>Jumlah Pembayaran (RM) </strong><span style="color: red">*</span></label>
                              </div>
                              <div class="col-sm-8">
                                <span id="nilai-txt">{{ number_format($payamount+$shipping->amount,2) }}</span>
                                <input type="hidden" name="nilai_bayaran" id="nilai_bayaran" 
                                value="{{ $payamount+$shipping->amount }}"
                                data-parsley-min='1'
                                required>
                        </div>    
                    </div>
                        <div class="mb-3">
                            <div class="row mt-4">
                                <div class="col-sm-4">
                                    <label for="payment_mode" class="form-label"><strong>Cara Pembayaran </strong><span style="color: red">*</span></label>
                                  </div>
                                  <div class="col-sm-8">
                                    <select class="form-select" id="payment_mode" name="payment_mode" required>
                                        <option value="" disabled selected>Pilih Cara Pembayaran</option>
                                        <option value="FPX">FPX</option>
                                    </select>
                            </div>    
                        </div>
<br>
                        <div class="text-center">
                            <button type="submit" class="btn btn-success" value="submit" name="submit">Bayar </button>
                        
                        </div>
                    </form>
                    @else
                    <div class="text-center">
                    
                        <p class="text">Tiada Murid di daftarkan. Sila daftar Murid di menu
                        <a href="{{ route('card.registration') }}">Pendaftaran Murid</a> sebelum membuat pembayaran</p>
                    </div>
                    
                    {{-- <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-triangle me-2"></i> 
                        Tiada Murid di daftarkan. Sila daftar kan Murid di menu
                        <a href="{{ route('card.registration') }}" class="alert-link">Pendaftaran Murid</a> sebelum membuat pembayaran
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div> --}}
                    @endif
                    {{-- <form  id="regform" action="{{ route('card.submit') }}" method="POST" enctype="multipart/form-data" data-parsley-validate>
                        @csrf
                        <div class="mb-3 row">
                            <div class="col-md-6">
                                <label for="dependent" class="form-label">Jumlah Murid</label>
                                <input type="number" step="0.01" class="form-control" name="dependent" id="dependent" 
                                       value="{{ $child_count }}" data-parsley-min='1' required readonly>
                            </div>
                            <div class="col-md-6">
                                <label for="total_amount" class="form-label">Jumlah (RM)</label>
                                <input type="number" step="0.01" class="form-control" name="total_amount" id="total_amount" 
                                       value="{{ number_format($payamount, 2) }}" data-parsley-min='1' required readonly>
                            </div>
                        </div>
                        <br>
                        <div class="mb-3 row">
                            <div class="col-12 col-md">
                                <label class="required"><strong>Pilih Alamat Penghantaran:</strong></label><br />
                                <div class="form-check">
                                    <input class="form-check-input" id="same_add1" type="radio"
                                        name="same_add" value="1" onchange="chck('1')"
                                        {{ $same_add == 1 ? 'checked' : '' }} />
                                    <label class="form-check-label" for="same_add1">Alamat Sekolah (Kos Penghantaran RM 0.00)</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" id="same_add2" type="radio"
                                        name="same_add" value="0"
                                        data-parsley-error-message="Please Choose One" required
                                        onchange="chck('0')"
                                        {{ $same_add == 0 ? 'checked' : '' }} />
                                    <label class="form-check-label" for="same_add2">Alamat Rumah (Kos Penghantaran RM 7.00)</label>
                                </div>
                            </div>
                        </div>
                        <div id="principal-div" class=""
                        style="display: {{ $user->add1 ? 'show' : 'none' }};">
                        <div class="mb-3">
                            <div class="row">
                                <div class="col">
                                    <label for="p_add1">Alamat 1</label>
                                    <input type="text" name="p_add1" id="p_add1"
                                        class="form-control" placeholder=""
                                        data-parsley-trigger="change" data-parsley-maxlength="200"
                                        data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
                                        value="{{ $user->add1 ?? '' }}"
                                        style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()">
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col">
                                    <label for="p_add2">Alamat 2</label>
                                    <input type="text" name="p_add2" id="p_add2"
                                        class="form-control" placeholder=""
                                        data-parsley-trigger="change" data-parsley-maxlength="200"
                                        data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
                                        value="{{ $user->add2 ?? '' }}"
                                        style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()">
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-12 col-md-6">
                                    <label for="p_city"> City</label>
                                    <input type="text" name="p_city" id="p_city"
                                        class="form-control" placeholder=""
                                        data-parsley-trigger="change" data-parsley-maxlength="50"
                                        data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
                                        value="{{ $user->city ?? '' }}"
                                        style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()">
                                </div>
                                <div class="col-12 col-md-2 mt-4 mt-md-0">
                                    <label for="p_postcode"> Postcode</label>
                                    <input type="number" name="p_postcode" id="p_postcode"
                                        class="form-control" placeholder=""
                                        data-parsley-trigger="change" data-parsley-type="digits"
                                        data-parsley-length="[5, 5]"
                                        value="{{ $user->postcode ?? '' }}">
                                </div>
                                <div class="col-12 col-md-4 mt-4 mt-md-0">
                                    <label for="p_state_id"> State</label>
                                    <select type="text" name="p_state_id" id="p_state_id"
                                        class="form-control">
                                        <option {{ old('p_state_id') !== null ? '' : 'selected' }}
                                            disabled>Please Choose</option>
                                        @foreach ($states as $s)
                                            <option
                                                {{ Str::is($user->state, $s->shortname) ? 'selected' : '' }}
                                                value="{{ $s->shortname }}">{{ $s->shortname }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-12 col-md-3">
                                    <label for="p_mobile"> Phone No <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="p_mobile" id="p_mobile"
                                        class="form-control" placeholder="" data-parsley-trigger="change"
                                        value="{{ $user->mobile_no ?? '' }}"
                                        data-parsley-trigger="change" data-parsley-length="[8, 13]"
                                        data-parsley-pattern="^(6?0)[0|1|2|3|4|6|7|8|9]{1,2}[0-9]{7,8}$"
                                        required>
    
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <br>
                   
                    <div class="mb-3">
                        <div class="row mt-4">
                            <div class="col-sm-4">
                                <label for="nilai_bayaran" class="form-label"><strong>Jumlah Pembayaran (RM) </strong><span style="color: red">*</span></label>
                              </div>
                              <div class="col-sm-8">
                                <span id="nilai-txt">{{ number_format($payamount+$shipping->amount,2) }}</span>
                                <input type="hidden" name="nilai_bayaran" id="nilai_bayaran" 
                                value="{{ $payamount+$shipping->amount }}"
                                data-parsley-min='1'
                                required>
                        </div>    
                    </div>
                        <div class="mb-3">
                            <div class="row mt-4">
                                <div class="col-sm-4">
                                    <label for="payment_mode" class="form-label"><strong>Cara Pembayaran </strong><span style="color: red">*</span></label>
                                  </div>
                                  <div class="col-sm-8">
                                    <select class="form-select" id="payment_mode" name="payment_mode" required>
                                        <option value="" disabled selected>Pilih Cara Pembayaran</option>
                                        <option value="FPX">FPX</option>
                                    </select>
                            </div>    
                        </div>
<br>
                        <div class="text-center">
                            <button type="submit" class="btn btn-success" value="submit" name="submit">Bayar </button>
                        
                        </div>
                    </form> --}}
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/parsley.min.js') }}"></script>
<script src="{{ asset('js/ms.js') }}"></script>
        <script>
            $('#regform').parsley();
        </script>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                // Show the popup when the page loads
                document.getElementById("popup").style.display = "flex";
            });
        
            function closePopup() {
                // Close the popup
                document.getElementById("popup").style.display = "none";
            }
        </script>
        <script>
    $(document).ready(function() {
    // Initialize tooltips
    $('[data-toggle="tooltip"]').tooltip();
    $('#regform').parsley();

    // Define constants and variables
    const initialValue = $('input[name="same_add"]:checked').val();
    const originalAmount = {{ $payamount }};
    const shippingCost = {{ $shipping->amount }};

    // Set initial values based on checked radio
    updateFormState(initialValue);
});

function updateFormState(val) {
    const originalAmount = {{ $payamount }};
    const shippingCost = {{ $shipping->amount }};

    if (val == '0') {        
        $("#principal-div").show();
        const totalAmount = originalAmount + shippingCost;
        $('#nilai-txt').text(totalAmount.toFixed(2));
        $('#nilai_bayaran').val(totalAmount);
        setAddressFields(true);
    } else {
        $("#principal-div").hide();
        $('#nilai-txt').text(originalAmount.toFixed(2));
        $('#nilai_bayaran').val(originalAmount);
        setAddressFields(false);
        // Destroy Parsley validation for hidden fields
        $('#principal-div input, #principal-div select').each(function() {
            $(this).parsley().reset();
        });
    }
}

function setAddressFields(populate) {
    const fields = {
        'p_add1': "{{ $user->add1 ?? '' }}",
        'p_add2': "{{ $user->add2 ?? '' }}",
        'p_city': "{{ $user->city ?? '' }}",
        'p_postcode': "{{ $user->postcode ?? '' }}",
        'p_mobile': "{{ $user->mobile_no ?? '' }}"
    };
    
    Object.entries(fields).forEach(([fieldName, value]) => {
        const $field = $(`input[name=${fieldName}]`);
        if (populate) {
            $field.val(value);
            $field.prop('required', true);
            $field.attr('data-parsley-required', 'true');
        } else {
            $field.val('');
            $field.prop('required', false);
            $field.removeAttr('data-parsley-required');
        }
    });

    // Handle state field separately since it's a select
    if (populate) {

        $('select[name=p_state_id]').val("{{ $user->state ?? '' }}");
        $('select[name=p_state_id]').prop('required', true);
        $('select[name=p_state_id]').attr('data-parsley-required', 'true');
    } else {
        $('select[name=p_state_id]').val('');
        $('select[name=p_state_id]').prop('required', false);
        $('select[name=p_state_id]').removeAttr('data-parsley-required');
    }
}

function chck(val) {
    updateFormState(val);
    // Reset Parsley validation
    $('#regform').parsley().reset();
}
//             $(document).ready(function() {
//     // Initialize tooltips
//     $('[data-toggle="tooltip"]').tooltip();

//     // Define constants and variables
//     const initialValue = $('input[name="same_add"]:checked').val();
//     const originalAmount = {{ $payamount }};
//     const shippingCost = {{ $shipping->amount }};
//     let originalAdd1 = "{{ $user->add1 ?? '' }}";
//     let originalAdd2 = "{{ $user->add2 ?? '' }}";
//     let originalCity = "{{ $user->city ?? '' }}";
//     let originalPostcode = "{{ $user->postcode ?? '' }}";
//     let originalState = "{{ $user->state ?? '' }}";
//     let originalMobile = "{{ $user->mobile_no ?? '' }}";

//     // Set initial values based on checked radio
//     if(initialValue == '0') {
//         const totalAmount = originalAmount + shippingCost;
//         $('#nilai-txt').text(totalAmount.toFixed(2));
//         $('#nilai_bayaran').val(totalAmount);
//         $("#principal-div").show();
//         setAddressFields(true);
//     } else {
//         $('#nilai-txt').text(originalAmount.toFixed(2));
//         $('#nilai_bayaran').val(originalAmount);
//         $("#principal-div").hide();
//         clearAddressFields();
//     }
// });

// function setAddressFields(populate) {
//     const fields = {
//         'p_add1': "{{ $user->add1 ?? '' }}",
//         'p_add2': "{{ $user->add2 ?? '' }}",
//         'p_city': "{{ $user->city ?? '' }}",
//         'p_postcode': "{{ $user->postcode ?? '' }}",
//         'p_mobile': "{{ $user->mobile_no ?? '' }}"
//     };

//     Object.entries(fields).forEach(([fieldName, value]) => {
//         const $field = $(`input[name=${fieldName}]`);
//         if (populate) {
//             $field.val(value);
//             $field.attr('data-parsley-required', 'true');
//         } else {
//             $field.val('');
//             $field.removeAttr('data-parsley-required');
//         }
//     });

//     // Handle state field separately since it's a select
//     if (populate) {
//         $('select[name=p_state_id]').val("{{ $user->state ?? '' }}");
//         $('select[name=p_state_id]').attr('data-parsley-required', 'true');

//         $('select[name=p_add1]').val("{{ $user->add1 ?? '' }}");
//         $('select[name=p_add1]').attr('data-parsley-required', 'true');

//         $('select[name=p_add2]').val("{{ $user->add2 ?? '' }}");
//         $('select[name=p_add2]').attr('data-parsley-required', 'true');

//         $('select[name=p_city]').val("{{ $user->city ?? '' }}");
//         $('select[name=p_city]').attr('data-parsley-required', 'true');

//         $('select[name=p_postcode]').val("{{ $user->postcode ?? '' }}");
//         $('select[name=p_postcode]').attr('data-parsley-required', 'true');

//         $('select[name=p_mobile]').val("{{ $user->mobile_no ?? '' }}");
//         $('select[name=p_mobile]').attr('data-parsley-required', 'true');
//     } else {
//         $('select[name=p_state_id]').val('');
//         $('select[name=p_state_id]').removeAttr('data-parsley-required');

//         $('select[name=p_add1]').val('');
//         $('select[name=p_add1]').removeAttr('data-parsley-required');

//         $('select[name=p_add2]').val('');
//         $('select[name=p_add2]').removeAttr('data-parsley-required');

//         $('select[name=p_city]').val('');
//         $('select[name=p_city]').removeAttr('data-parsley-required');

//         $('select[name=p_postcode]').val('');
//         $('select[name=p_postcode]').removeAttr('data-parsley-required');

//         $('select[name=p_mobile]').val('');
//         $('select[name=p_mobile]').removeAttr('data-parsley-required');
//     }
// }

// function chck(val) {
//     const originalAmount = {{ $payamount }};
//     const shippingCost = {{ $shipping->amount }};

//     if (val == '0') {        
//         $("#principal-div").show();
//         const totalAmount = originalAmount + shippingCost;
//         $('#nilai-txt').text(totalAmount.toFixed(2));
//         $('#nilai_bayaran').val(totalAmount);
//         setAddressFields(true);
//     } else {
//         $("#principal-div").hide();
//         $('#nilai-txt').text(originalAmount.toFixed(2));
//         $('#nilai_bayaran').val(originalAmount);
//         setAddressFields(false);
//     }
// }
            // $(document).ready(function() {
            //     // Initialize tooltips
            //     $('[data-toggle="tooltip"]').tooltip();
            
            //     // Define constants and variables
            //     const initialValue = $('input[name="same_add"]:checked').val();
            //     const originalAmount = {{ $payamount }};
            //     const shippingCost = {{ $shipping->amount }};
            //     let originalAdd1 = "{{ $user->add1 ?? '' }}";
            //     let originalAdd2 = "{{ $user->add2 ?? '' }}";
            //     let originalCity = "{{ $user->city ?? '' }}";
            //     let originalPostcode = "{{ $user->postcode ?? '' }}";
            //     let originalState = "{{ $user->state ?? '' }}";
            //     let originalMobile = "{{ $user->mobile_no ?? '' }}";
            
            //     // Set initial values based on checked radio
            //     if(initialValue == '0') {
            //         const totalAmount = originalAmount + shippingCost;
            //         $('#nilai-txt').text(totalAmount.toFixed(2));
            //         $('#nilai_bayaran').val(totalAmount);
            //         $("#principal-div").show();
            //         $('input[name=p_add1]').val(originalAdd1);
            //         $('input[name=p_add2]').val(originalAdd2);
            //         $('input[name=p_city]').val(originalCity);
            //         $('input[name=p_postcode]').val(originalPostcode);
            //         $('input[name=p_mobile]').val(originalMobile);
            //         $('select[name=p_state_id]').val(originalState);
            //     } else {
            //         $('#nilai-txt').text(originalAmount.toFixed(2));
            //         $('#nilai_bayaran').val(originalAmount);
            //         $("#principal-div").hide();
                        
            //     }
            // });
            
            // function chck(val) {
            //     const originalAmount = {{ $payamount }};
            //     const shippingCost = {{ $shipping->amount }};
            //     let originalAdd1 = "{{ $user->add1 ?? '' }}";
            //     let originalAdd2 = "{{ $user->add2 ?? '' }}";
            //     let originalCity = "{{ $user->city ?? '' }}";
            //     let originalPostcode = "{{ $user->postcode ?? '' }}";
            //     let originalState = "{{ $user->state ?? '' }}";
            //     let originalMobile = "{{ $user->mobile_no ?? '' }}";
            
            //     if (val == '0') {        
            //         $("#principal-div").show();
            //         const totalAmount = originalAmount + shippingCost;
            
            //         // Update displayed amount and hidden input
            //         $('#nilai-txt').text(totalAmount.toFixed(2));
            //         $('#nilai_bayaran').val(totalAmount);
            //         $('input[name=p_add1]').val(originalAdd1);
            //         $('input[name=p_add2]').val(originalAdd2);
            //         $('input[name=p_city]').val(originalCity);
            //         $('input[name=p_postcode]').val(originalPostcode);
            //         $('input[name=p_mobile]').val(originalMobile);
            //         $('select[name=p_state_id]').val(originalState);
            //         $('input[name=p_add1]').attr('data-parsley-required', 'true');
            //         $('input[name=p_add2]').attr('data-parsley-required', 'true');
            //         $('input[name=p_city]').attr('data-parsley-required', 'true');
            //         $('input[name=p_postcode]').attr('data-parsley-required', 'true');
            //         $('input[name=p_mobile]').attr('data-parsley-required', 'true');
            //         $('input[name=p_state_id]').attr('data-parsley-required', 'true');
            //     } 
            //     else {
            //         $("#principal-div").hide();
            //         $('#nilai-txt').text(originalAmount.toFixed(2));
            //         $('#nilai_bayaran').val(originalAmount);
                   
            //         $('input[name=p_add1]').val('');
            //         $('input[name=p_add2]').val('');
            //         $('input[name=p_city]').val('');
            //         $('input[name=p_postcode]').val('');
            //         $('input[name=p_mobile]').val('');
            //         $('select[name=p_state_id]').val('');
            //         $('input[name=p_add1]').attr('data-parsley-required', 'false');
            //         $('input[name=p_add2]').attr('data-parsley-required', 'false');
            //         $('input[name=p_city]').attr('data-parsley-required', 'false');
            //         $('input[name=p_postcode]').attr('data-parsley-required', 'false');
            //         $('input[name=p_mobile]').attr('data-parsley-required', 'false');
            //         $('input[name=p_state_id]').attr('data-parsley-required', 'false');
            //     }
            // }
            </script>
@endsection