<?php

error_reporting(E_ALL);
ini_set('display_errors', 1);

session_start();

require_once 'includes/db.php';

$error = '';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    $mobile   = trim($_POST['mobile']);
    $password = trim($_POST['password']);

    $stmt = $conn->prepare("SELECT id,full_name,mobile,password,role,status FROM users WHERE mobile=? LIMIT 1");

    if ($stmt) {

        $stmt->bind_param("s", $mobile);
        $stmt->execute();
        $stmt->store_result();

        if ($stmt->num_rows > 0) {

            $stmt->bind_result(
                $id,
                $full_name,
                $mobile_db,
                $hashed_password,
                $role,
                $status
            );

            $stmt->fetch();

            if ($status == 1 && password_verify($password, $hashed_password)) {

                $_SESSION['user_id']   = $id;
                $_SESSION['full_name'] = $full_name;
                $_SESSION['role']      = $role;

                header("Location: dashboard.php");
                exit;
            }
        }

        $stmt->close();
    }

    $error = "رقم الجوال أو كلمة المرور غير صحيحة";
}

?>

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

<head>

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

<title>الباب السهل للخدمات اللوجستية</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">

<style>

body{
    background:#f8fafc;
    font-family:Tahoma,sans-serif;
}

.login-wrapper{
    min-height:100vh;
}

.login-card{
    border:none;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.brand{
    color:#0F4C81;
    font-weight:bold;
}

.form-control{
    height:52px;
    border-radius:12px;
}

.btn-login{
    background:#0F4C81;
    border:none;
    height:52px;
    border-radius:12px;
    font-weight:bold;
}

.btn-login:hover{
    background:#0c3d66;
}

.side-panel{
    background:linear-gradient(135deg,#0F4C81,#3B82F6);
    color:white;
    min-height:100vh;
}

.logo-circle{
    width:90px;
    height:90px;
    border-radius:50%;
    background:white;
    color:#0F4C81;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
}

@media(max-width:991px){

    .side-panel{
        display:none;
    }

}

</style>

</head>

<body>

<div class="container-fluid">

<div class="row login-wrapper">

<div class="col-lg-6 d-flex justify-content-center align-items-center">

<div class="card login-card p-4 w-100" style="max-width:450px;">

<div class="text-center mb-4">

<h2 class="brand">الباب السهل</h2>

<p class="text-muted">
نظام إدارة العمليات اللوجستية
</p>

</div>

<?php if(!empty($error)){ ?>

<div class="alert alert-danger">
<?php echo $error; ?>
</div>

<?php } ?>

<form method="post">

<div class="mb-3">

<label class="mb-2">رقم الجوال</label>

<input
type="text"
name="mobile"
class="form-control"
required>

</div>

<div class="mb-4">

<label class="mb-2">كلمة المرور</label>

<input
type="password"
name="password"
class="form-control"
required>

</div>

<button type="submit" class="btn btn-login text-white w-100">

<i class="fa-solid fa-right-to-bracket"></i>

تسجيل الدخول

</button>

</form>

</div>

</div>

<div class="col-lg-6 side-panel d-flex flex-column justify-content-center align-items-center">

<div class="logo-circle">
<i class="fa-solid fa-truck-fast"></i>
</div>

<h1 class="mt-4 fw-bold">
الباب السهل
</h1>

<h5>
Easy Gate Logistics
</h5>

<p class="text-center mt-3 px-5">
منصة احترافية لإدارة العملاء والناقلين والرحلات
ومتابعة حركة الشاحنات لحظة بلحظة.
</p>

</div>

</div>

</div>

</body>
</html>