@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">Gantian 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">Gantian Kad</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="m-4 text-center">
                        <h4 class="text-muted">Fi Gantian Kad setiap Murid</h4>
                        <p class="fs-2 text-success"><strong>RM {{ $fees->amount }}</strong></p>
                    </div>
                    <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($student->logo_path)
                                        <img src="{{ asset($student->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> {{ $student->student_id }}</p>
                                        <p class="card-text"><strong>Nama Murid:</strong> {{ $student->student_name }}</p>
                                        <p class="card-text"><strong>Sekolah:</strong> {{ $student->nama_pusat }}</p>
                                        @if ($student->upload_photo == 0)
                                        <p class="card-text"><strong>Gambar:</strong> Tiada</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                    <br>

                    @if ($student->count()>0)
                    <form  id="regform" action="{{ route('card.reppayment') }}" method="POST" enctype="multipart/form-data" data-parsley-validate>
                        @csrf
                        <div class="mb-3 row">
                            <div class="col-md-6">
                                <label for="total_amount" class="form-label">Jumlah (Termasuk Kos Penghantaran) (RM)</label>
                                <input type="number" step="0.01" class="form-control" name="total_amount" id="total_amount" 
                                       value="{{ number_format($fees->amount , 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</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</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,2) }}</span>
                                <input type="hidden" name="nilai_bayaran" id="nilai_bayaran" 
                                value="{{ $payamount+$shipping }}"
                                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>
                        <input type="hidden" name="student_id" id="student_id" value="{{ $student->student_id }}" required>
                        <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>
                    
                    
                    @endif
                </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 }};

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

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

    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();
}
            </script>
@endsection