<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Parent Apporval Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('assets/libs/sweetalert2/sweetalert2.min.css') }}">
    <style>
        :root {
            --vz-primary: #19297C;
            --vz-secondary: #000000;
            --vz-success: #000000;
            --vz-white: #ffffff;
            --vz-info: #299cdb;
            --vz-warning: #f7b84b;
            --vz-danger: #f06548;
            --vz-light: #f3f6f9;
            --vz-dark: #000200;
            --vz-primary-rgb: 0,0,0;
            --vz-secondary-rgb: 53,119,241;
            --vz-success-rgb: 10,179,156;
            --vz-info-rgb: 41,156,219;
            --vz-warning-rgb: 247,184,75;
            --vz-danger-rgb: 240,101,72;
            --vz-light-rgb: 243,246,249;
            --vz-dark-rgb: 33,37,41;
            --vz-border-radius: 5px;
            --vz-primary-light: #19297C;
            --vz-topbar-search-bg: #19297C;
        }
        body {
            background-position: center;
            background-image: url({{ asset('assets/images/bg_img.jpg') }});
            background-size: cover;
            background-repeat: no-repeat;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .text-primary {
            color: #19297C !important;
        }
        .btn-primary {
            background: #19297C !important;
            border-color: #19297C !important;
        }
         
        .swal2-popup.small-alert {

        width: 400px !important; /* Adjust width for small alerts */

        font-size: 14px !important; /* Adjust font size for smaller content */

        }



        div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {

        background-color: #000000;

        }

        .swal2-cancel:hover{

        background-color: #FCCE0B ;

        }


        #previewModal #modal-content img{

        max-width: 200px !important;

        /* max-width: 500px !important; */

        /* height: 500px !important; */

        width: 100%;

        /* object-fit: cover; */

        object-fit: cover;

        /* aspect-ratio: 3 / 2;

        }

        .swal2-icon{

        border: 0 !important;

        }


        div:where(.swal2-container).swal2-center>.swal2-popup{

        max-width: 320px;

        border-radius: 0.65rem;

        padding-bottom: 15px;

        /* height: 400px; */

        }

        div:where(.swal2-container).swal2-center>.swal2-popup{

        max-width: 340px;

        border-radius: 0.65rem;

        padding-bottom: 15px;

        }

        .swal2-icon{

        margin-top: -20px;

        height: auto;

        line-height: normal;

        font-size: inherit;

        border: 0 !important;

        }

        .swal2-icon-content img{

        width: 40px;

        height: 40px;

        }

        div:where(.swal2-container) div:where(.swal2-actions){

        margin-top: 5px !important;

        }

        div:where(.swal2-container) .swal2-html-container, .swal2-html-container{

        font-size: 1em;

        margin-top: 0;

        }


        .swal2-cancel.custom-cancel-button-class {

        background-color: #F7BFB4; /* Red background */

        color: #000;           /* White text */

        border-color: #F7BFB4;

        border: 0;

        border-radius:0.65rem;

        padding: 0.5rem 0.9rem;

        font-size: 0.8125rem;

        box-shadow: none !important;

        outline: 0 !important;

        }

        /* Add hover styles */

        .swal2-cancel.custom-cancel-button-class:hover {

        background-color: #000;

        color: #fff;

        }

        div.dt-container .dt-input{

        background-color: var(--vz-input-bg-custom) !important;

        background-clip: padding-box;

        border: var(--vz-border-width) solid var(--vz-input-border-custom) !important;

        border-radius: 10px !important;

        margin-right: 10px;

        padding-right: 10px !important;

        padding-left: 5px !important;

        outline: 0 !important;

        height: 37.5px !important;

        }

        .swal2-timer-progress-bar {

        background-color: #FCCE0B;

        }

        .swal2-confirm.custom-ok-button-class, div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm { 
            background-color: #19297C !important;
            color: #fff;
            border-color: #19297C !important;
            border: 0;
            border-radius: 0.65rem;
            padding: 0.5rem 0.9rem;
            font-size: 0.8125rem;
            box-shadow: none !important;
            outline: 0 !important;
            min-width: 95px !important;
        }
        body.swal2-height-auto {
            min-height: 100vh !important;
        }

    </style>
</head>
  <body>
    <!-- <h1>Hello, world!</h1> -->
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6 col-xl-5">
                    <div class="card mt-4 card-bg-fill">
                        <div class="card-body p-4" style="border: 0.5px solid #F7BFB4; border-radius: 5px;">
                            
                            @if($parent->status == 0)
                            <div class="text-center mt-2">
                                <img src="{{ asset('assets/images/black-logo.svg') }}" class="mb-4" alt="" height="120">
                                <h5 class="text-primary">Welcome to Luqia <br>مرحبًا بكم في لقيا</h5>
                                <p class="text-muted">Please verify and confirm the details below. <br>يرجى التحقق من وتأكيد التفاصيل أدناه</p>
                            </div>
                            <div class="p-0 mt-0">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <th scope="row">Full Name<br> الاسم الكامل</th>
                                            <td>{{$parent->user->name??'N/A'}}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">User ID<br> معرّف المستخدم</th>
                                            <td>{{$parent->user->nick_name??'N/A'}}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Email Address<br>البريد الإلكتروني</th>
                                            <td>{{$parent->user->email??'N/A'}}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">Mobile Number <br>رقم الهاتف </th>
                                            <td>{{$parent->user->dial_code??'N/A'}} {{$parent->user->phone??'N/A'}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="d-flex">
                                <button type="button" id="reject" style="width: 150px;" class="btn btn-danger me-3"> رفض</button>
                                <button type="button" id="approve" class="btn btn-primary w-100"> موافقة</button>
                            </div>
                            @elseif($parent->status == 1)
                            <div class="p-0 mt-0 text-center">
                                <div class="text-center mt-2">
                                    <img src="{{ asset('assets/images/black-logo.svg') }}" class="mb-4" alt="" height="120">
                                   <h2 class="text-primary">Success ! <br> تم بنجاح!</h2>
                                <p class="text-muted mb-0">This profile has already been reviewed and approved. No further action is needed. <br>تمت مراجعة هذا الملف الشخصي والموافقة عليه مسبقًا.
                            لا يلزم اتخاذ أي إجراء إضافي.</p></div>
                                <!--<div class="alert alert-success" role="alert">-->
                                    <!--<strong>Success!</strong> -->
                                <!--</div>-->
                            </div>
                            @elseif($parent->status == 2)
                            <div class="p-0 mt-0 text-center">
                                <div class="text-center mt-2">
                                    <img src="{{ asset('assets/images/black-logo.svg') }}" class="mb-4" alt="" height="120">
                                    <h2 class="text-danger">Rejected ! <br>رفض</h2>
                                    <p class="text-muted mb-0">This profile has already been reviewed and rejected. No further action is required at this time.
                                        <br>
                                        تمت مراجعة هذا الملف الشخصي ورفضه مسبقًا. لا يلزم اتخاذ أي إجراء إضافي.
                                    </p></div>
                                <!--<div class="alert alert-danger" role="alert">-->
                                    <!--<strong>Rejected!</strong> This profile has already been reviewed and rejected. No further action is required at this time.-->
                                <!--</div>-->
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script src="{{ asset('assets/js/jquery-3.7.1.js') }}"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
    <script>
        function handleApproval(status) {
            $.ajax({
            url: '{{ route("parent.approval.update", $parent->id) }}',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: JSON.stringify({ status: status }),
            contentType: 'application/json',
            success: function (response) {
                    Swal.fire({
                        iconHtml: `<img src="{{ asset('assets/images/success-circle.svg') }}" class="img-fluid">`,
                               // title: "Success!",
                                text: response.message,
                                confirmButtonText: "ok حسنًا",
                        // title: response.status === 'success' ? 'Success!' : 'Error!',
                        // text: response.message,
                        // icon: response.status === 'success' ? 'success' : 'error',
                        // confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            console.log(result);
                            if (response.status === 'success') {
                                window.location.href = '{{ route("parent.approval.success") }}';
                            } else {
                                window.location.href = '{{ route("parent.approval.failed") }}';
                            }
                        }
                    });
                },
                error: function (xhr) {
                    Swal.fire({
                        text: "Something went wrong. Please try later",
                                    iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                                    confirmButtonText: "OK", // Optional: Change the text of the button
                        // title: 'Error!',
                        // text: 'An error occurred while updating the status.',
                        // icon: 'error',
                        // confirmButtonText: 'OK'
                    });
                }
            });
        }

        $('#approve').on('click', function () {
            handleApproval('approved');
        });

        $('#reject').on('click', function () {
            handleApproval('rejected');
        });
    </script>
  </body>
</html>