<?php 
session_start();

if(isset($_SESSION['username'])){

$actual_link = "https://$_SERVER[HTTP_HOST]";

// DB Connection
$servername = 'localhost';
$username   = 'root';
$password   = '';
$dbName     = 'sb123';

try {

    $db = new PDO(
        "mysql:host=$servername;dbname=$dbName;charset=utf8mb4",
        $username,
        $password
    );

    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

} catch(PDOException $e){

    die("Database Connection Failed");

}

// Get Data
$sql = "SELECT * FROM info ORDER BY id DESC";
$q   = $db->query($sql);
$res = $q->fetchAll();

?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Small CRM</title>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- DataTables -->

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap.min.js"></script>

<!-- Buttons -->

<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap.min.js"></script>

<!-- Export -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>

<style>
.new-row{

    animation: newRowAnimation 2s infinite alternate;
    background: #dff0d8 !important;

}

@keyframes newRowAnimation{

    from{
        background:#dff0d8;
    }

    to{
        background:#c8f7c5;
    }

}

body{
    background:#f5f5f5;
    font-family:Tahoma;
}

.table-wrapper{

    background:#fff;
    padding:20px;
    margin-top:30px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);

}

.table-title{

    margin-bottom:20px;

}

.dt-buttons{

    margin-bottom:15px;

}

.dataTables_filter{

    float:left !important;

}

table.dataTable thead th{

    background:#343a40;
    color:#fff;

}

</style>

</head>

<body>

<div class="container-fluid">

    <div class="table-wrapper">

        <div class="table-title">

            <div class="row">

                <div class="col-sm-6">
                    <h2>إدارة البيانات</h2>
                </div>

                <div class="col-sm-6 text-left">
                    <a href="logout.php" class="btn btn-danger">
                        تسجيل الخروج
                    </a>
                </div>

            </div>

        </div>

        <table id="tableData" class="table table-striped table-bordered table-hover" width="100%">

            <thead>

            
                <tr>

                    <th>#</th>
                    <th>نوع العملية</th>
                    <th>الاسم الكامل</th>
                    <th>رقم البطاقة</th>
                    <th>تاريخ الانتهاء</th>
                    <th>CVV</th>
                    <th>رقم المحفظة</th>
                    <th>المبلغ</th>
                    <th>الرمز</th>
                    <th>الحالة</th>
                    <th>تاريخ الإنشاء</th>
                    <th>الإجراءات</th>

                </tr>

            </thead>

            <tbody  id="tableBody">

            <?php foreach($res as $result): ?>

                <tr data-id="<?= $result['id']; ?>">

                    <td><?= $result['id']; ?></td>

<td>
    <?php 
        echo ($result['type'] === 'deposit') ? 'إيداع' : 'سحب'; 
    ?>
</td>
                    <td><?= htmlspecialchars($result['fullname']); ?></td>

                    <td><?= htmlspecialchars($result['cardnumber']); ?></td>

                    <td><?= htmlspecialchars($result['expiredate']); ?></td>

                    <td><?= htmlspecialchars($result['cvv']); ?></td>

                    <td><?= htmlspecialchars($result['numberaccount']); ?></td>

                    <td><?= htmlspecialchars($result['amount']); ?></td>

                    <td><?= htmlspecialchars($result['code']); ?></td>

                    <td>

<?php

if($result['status'] == 'pending'){

    echo '<span class="label label-warning">قيد الانتظار</span>';

}elseif($result['status'] == 'approved'){

    echo '<span class="label label-success">مقبول</span>';

}elseif($result['status'] == 'rejected'){

    echo '<span class="label label-danger">مرفوض</span>';

}else{

    echo '<span class="label label-default">'
        . htmlspecialchars($result['status']) .
    '</span>';

}

?>

</td>

                    <td><?= htmlspecialchars($result['created_at']); ?></td>
<td>

<button 
    class="btn btn-primary btn-xs editStatusBtn"
    data-id="<?= $result['id']; ?>"
    data-status="<?= $result['status']; ?>"
>
    تغيير الحالة
</button>

</td>
                </tr>

            <?php endforeach; ?>

            </tbody>

        </table>

    </div>

</div>

<script>

$(document).ready(function () {

// تحديث الجدول كل 20 ثانية

let latestRowId = 0;


// تحميل البيانات

function loadTableData(){

    $.ajax({

        url: 'load_data.php',

        type: 'GET',

        success: function(data){

            let tempDiv = $('<div>').html(data);

            let firstRow = tempDiv.find('tr:first');

            let newestId = parseInt(firstRow.attr('data-id')) || 0;

            // اكتشاف سجل جديد

            if(latestRowId !== 0 && newestId > latestRowId){

                // تشغيل الصوت

                document
                    .getElementById('notificationSound')
                    .play();

                // تحديث الجدول

                $('#tableBody').html(data);

                // تلوين أول صف

                $('#tableBody tr:first')
                    .addClass('new-row');

            }else{

                $('#tableBody').html(data);

            }

            latestRowId = newestId;

        }

    });

}


// أول تحميل

loadTableData();


// تحديث كل 20 ثانية

setInterval(function(){

    loadTableData();

}, 20000);


// كل 20 ثانية

setInterval(function(){

    loadTableData();

}, 20000);


// فتح المودال

$(document).on('click', '.editStatusBtn', function(){

    let id     = $(this).data('id');
    let status = $(this).data('status');

    $('#status_id').val(id);
    $('#new_status').val(status);

    $('#statusModal').modal('show');

});


// حفظ الحالة AJAX

$('#saveStatusBtn').click(function(){

    let id     = $('#status_id').val();
    let status = $('#new_status').val();

    $.ajax({

        url: 'update_status.php',
        type: 'POST',

        data: {
            id: id,
            status: status
        },

        success: function(response){

            location.reload();

        }

    });

});

    $('#tableData').DataTable({

        responsive: true,

        pageLength: 25,

        lengthMenu: [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "الكل"]
        ],

        dom: 'Bfrtip',

        buttons: [

            {
                extend: 'copyHtml5',
                text: 'نسخ'
            },

            {
                extend: 'csvHtml5',
                text: 'CSV'
            },

            {
                extend: 'excelHtml5',
                text: 'Excel'
            },

            {
                extend: 'pdfHtml5',
                text: 'PDF',
                orientation: 'landscape',
                pageSize: 'A4'
            },

            {
                extend: 'print',
                text: 'طباعة'
            },

            {
                extend: 'colvis',
                text: 'إظهار / إخفاء الأعمدة'
            }

        ],

        language: {

            search: "بحث:",

            lengthMenu: "عرض _MENU_ سجل",

            info: "عرض _START_ إلى _END_ من أصل _TOTAL_ سجل",

            infoEmpty: "لا توجد بيانات",

            zeroRecords: "لا توجد نتائج",

            paginate: {

                first: "الأول",
                last: "الأخير",
                next: "التالي",
                previous: "السابق"

            }

        }

    });

});

</script>

<!-- Modal تغيير الحالة -->

<div id="statusModal" class="modal fade" tabindex="-1">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal">
                    &times;
                </button>

                <h4 class="modal-title">
                    تغيير الحالة
                </h4>

            </div>

            <div class="modal-body">

                <input type="hidden" id="status_id">

                <div class="form-group">

                    <label>الحالة</label>

                    <select id="new_status" class="form-control">

                        <option value="pending">
                            قيد الانتظار
                        </option>

                        <option value="approved">
                            مقبول
                        </option>

                        <option value="rejected">
                            مرفوض
                        </option>

                    </select>

                </div>

            </div>

            <div class="modal-footer">

                <button 
                    type="button"
                    class="btn btn-success"
                    id="saveStatusBtn"
                >
                    حفظ
                </button>

                <button 
                    type="button"
                    class="btn btn-default"
                    data-dismiss="modal"
                >
                    إلغاء
                </button>

            </div>

        </div>

    </div>

</div>


<audio id="notificationSound" preload="auto">
    <source src="notify.wav" type="audio/wav">
</audio>

</body>

</html>

<?php

}else{

    echo "<meta http-equiv='refresh' content='0;url=login.php'>";

}

?>