<?php
session_start();
include "../config.php";

/* ADD COUNTRY */

if(isset($_POST['add_country'])){

$name = trim($_POST['country_name']);

if($name!=""){

$check = $conn->prepare("SELECT id FROM countries WHERE country_name=? LIMIT 1");
$check->bind_param("s",$name);
$check->execute();
$check->store_result();

if($check->num_rows>0){

$_SESSION['country_flash']="Country already exists";

}else{

$stmt=$conn->prepare("INSERT INTO countries(country_name) VALUES(?)");
$stmt->bind_param("s",$name);
$stmt->execute();
$stmt->close();

$_SESSION['country_flash']="Country added";

}

$check->close();
}

header("Location: ".$_SERVER['PHP_SELF']);
exit;

}

/* UPDATE */

if(isset($_POST['update_country'])){

$id=(int)$_POST['id'];
$name=trim($_POST['country_name']);

$stmt=$conn->prepare("UPDATE countries SET country_name=? WHERE id=?");
$stmt->bind_param("si",$name,$id);
$stmt->execute();
$stmt->close();

exit;

}

/* DELETE */

if(isset($_POST['delete_country'])){

$id=(int)$_POST['id'];

$stmt=$conn->prepare("DELETE FROM countries WHERE id=?");
$stmt->bind_param("i",$id);
$stmt->execute();
$stmt->close();

exit;

}

/* GET COUNTRIES */

$countries=[];
$res=$conn->query("SELECT * FROM countries ORDER BY id ASC");

while($row=$res->fetch_assoc()){
$countries[]=$row;
}
?>

<?php include "adminsidebar.php"; ?>
<?php include "../header.php"; ?>

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>Countries</title>

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

<style>
:root{
--bg:#eef3f9;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#e2e8f0;

--primary:#374155;
--primary-dark:#1f2937;
--primary-light:#eef2f7;

--success:#16a34a;
--danger:#dc2626;

--shadow:0 12px 30px rgba(15,23,42,.08);
--radius:18px;

/* ✅ FIX VARIABLES */
--sidebar-width:260px;
--header-height:70px;
}

/* ================= BODY ================= */
body{
font-family:Inter,Arial;
background:linear-gradient(135deg,#eef3f9,#f8fafc);
margin:0;
color:var(--text);
}

/* ================= MAIN LAYOUT FIX ================= */
#country-ui{
margin-left:var(--sidebar-width);
padding:calc(var(--header-height) + 20px) 30px 30px;
}

/* ================= CONTAINER ================= */
.container{
max-width:1000px;
}

/* ================= HEADER ================= */
header{
position:fixed;
top:0;
left:var(--sidebar-width);
right:0;
height:var(--header-height);
background:#fff;
z-index:999;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

/* ================= TITLE ================= */
.title{
font-size:28px;
font-weight:900;
display:flex;
align-items:center;
gap:12px;
margin-bottom:6px;
color:var(--primary);
}

.title::before{
content:"";
width:10px;
height:28px;
background:linear-gradient(180deg,#374155,#64748b);
border-radius:6px;
}

.subtitle{
color:var(--muted);
margin-bottom:20px;
font-size:14px;
}

/* ================= CARD ================= */
.card{
background:linear-gradient(180deg,#ffffff,#f8fafc);
border-radius:var(--radius);
padding:22px;
box-shadow:var(--shadow);
margin-bottom:20px;
border:1px solid var(--border);
transition:.3s;
}

.card:hover{
transform:translateY(-3px);
box-shadow:0 18px 40px rgba(0,0,0,.08);
}

/* ================= INPUT ================= */
.input{
width:100%;
padding:12px 14px;
border-radius:12px;
border:1px solid var(--border);
font-size:14px;
background:#fff;
transition:.25s;
}

.input:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(55,65,85,.1);
outline:none;
}

/* ================= BUTTON ================= */
.btn{
background:linear-gradient(135deg,#374155,#1f2937);
color:#fff;
border:none;
padding:12px 18px;
border-radius:30px;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:8px;
font-weight:700;
transition:.3s;
}

.btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

/* ================= TABLE HEADER ================= */
.table-header{
background:linear-gradient(135deg,#374155,#1f2937);
color:#fff;
padding:14px 18px;
border-radius:12px;
display:grid;
grid-template-columns:1fr 120px;
margin-top:20px;
font-weight:700;
}

/* ================= ROW ================= */
.row{
display:grid;
grid-template-columns:1fr 120px;
align-items:center;
padding:14px 18px;
border:1px solid var(--border);
border-radius:12px;
margin-top:10px;
background:#fff;
transition:.25s;
}

.row:hover{
background:#f1f5f9;
transform:translateX(3px);
}

/* ================= COUNTRY NAME ================= */
.country-name{
display:flex;
align-items:center;
gap:12px;
font-weight:700;
color:var(--primary);
}

/* ================= ACTION BUTTONS ================= */
.actions{
display:flex;
justify-content:flex-end;
gap:8px;
}

.icon-btn{
width:36px;
height:36px;
background:#f1f5f9;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border:none;
transition:.25s;
}

.icon-btn:hover{
background:#fee2e2;
color:#dc2626;
transform:scale(1.1);
}

/* ================= COUNTRY PICKER ================= */
.country-wrapper{
position:relative;
margin-top:6px;
}

.country-dropdown{
position:absolute;
top:110%;
left:0;
right:0;
background:#fff;
border:1px solid var(--border);
border-radius:14px;
box-shadow:0 20px 40px rgba(0,0,0,.1);
z-index:100;
display:none;
padding:12px;
}

/* ================= SEARCH ================= */
#countrySearch{
margin-bottom:10px;
}

/* ================= COUNTRY LIST ================= */
.country-list{
max-height:260px;
overflow:auto;
}

/* ================= ITEM ================= */
.country-item{
display:flex;
align-items:center;
gap:12px;
padding:10px;
cursor:pointer;
border-radius:10px;
transition:.2s;
}

.country-item:hover{
background:#eef2f7;
}

/* ================= FLAG ================= */
.country-flag{
width:28px;
height:20px;
object-fit:cover;
border-radius:4px;
box-shadow:0 2px 6px rgba(0,0,0,.1);
}

/* ================= PAGE HEADER ================= */
.page-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
padding:16px 18px;
background:linear-gradient(135deg,#ffffff,#f8fafc);
border-radius:16px;
border:1px solid #e2e8f0;
box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

.header-left{
display:flex;
align-items:center;
gap:14px;
}

.icon-box{
width:48px;
height:48px;
border-radius:14px;
background:linear-gradient(135deg,#374155,#1f2937);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:20px;
box-shadow:0 6px 15px rgba(55,65,85,0.25);
}

.page-header h1{
margin:0;
font-size:24px;
font-weight:900;
color:#374155;
}

.page-header p{
margin:2px 0 0;
font-size:13px;
color:#64748b;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

#country-ui{
margin-left:0;
padding:80px 12px;
}

header{
left:0;
}

.container{
max-width:100%;
}

.page-header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.card{
padding:14px;
}

.btn{
width:100%;
justify-content:center;
}

.table-header{
display:none;
}

.row{
display:block;
padding:12px;
}

.country-name{
margin-bottom:8px;
}
}
/* ✅ Hide hamburger on desktop */
.menu-toggle-btn,
.hamburger,
.toggle-btn {
    display: none;
}

/* ✅ Show only on mobile */
@media (max-width:768px){
    .menu-toggle-btn,
    .hamburger,
    .toggle-btn {
        display: flex !important;
    }
}
/* 🔥 FORCE HIDE HAMBURGER (DESKTOP) */
header .fa-bars,
.sidebar .fa-bars,
button .fa-bars {
    display: none !important;
}

/* ✅ MOBILE me wapas show */
@media (max-width:768px){
    header .fa-bars,
    .sidebar .fa-bars,
    button .fa-bars {
        display: inline-block !important;
    }
}
/* hide full button */
header button{
    display:none !important;
}

/* mobile me show */
@media (max-width:768px){
    header button{
        display:flex !important;
    }
}
</style>

</head>

<body>

<div id="country-ui">

<div class="container">

<div class="page-header">
  <div class="header-left">
    <div class="icon-box">
      <i class="fa-solid fa-globe"></i>
    </div>
    <div>
      <h1>Countries</h1>
      <p>Manage country list</p>
    </div>
  </div>
</div>

<!-- ADD COUNTRY -->

<div class="card">

<form method="post">

<label>Select Country</label>

<input type="hidden" name="country_name" id="countryInput">

<div class="country-wrapper">

<button type="button" class="input" id="countryDisplay">
<span id="countryDisplayText">Select country</span>
</button>

<div class="country-dropdown" id="countryDropdown">

<input class="input" id="countrySearch" placeholder="Search country">

<div class="country-list" id="countryList"></div>

</div>

</div>

<br>

<button class="btn" name="add_country">
<i class="fa fa-plus"></i> Add Country
</button>
</form>

</div>


<!-- LIST -->

<div class="card">

<div class="table-header">
<div>Country Name</div>
<div>Action</div>
</div>

<div id="listBody">

<?php foreach($countries as $c): ?>

<div class="row" data-id="<?php echo $c['id']; ?>">

<div class="country-name">
<img class="country-flag" src="https://flagcdn.com/24x18/<?php echo strtolower(substr($c['country_name'],0,2)); ?>.png">
<?php echo htmlspecialchars($c['country_name']); ?>
</div>

<div class="actions">

<button class="icon-btn delete">
<i class="fa fa-trash"></i>
</button>

</div>

</div>

<?php endforeach; ?>

</div>

</div>

</div>

</div>

<script>

const REST="https://restcountries.com/v3.1/all?fields=name,cca2,flags";

const dropdown=document.getElementById("countryDropdown");
const list=document.getElementById("countryList");
const display=document.getElementById("countryDisplay");
const displayText=document.getElementById("countryDisplayText");
const input=document.getElementById("countryInput");
const search=document.getElementById("countrySearch");

let countries=[];

async function loadCountries(){

if(countries.length) return;

const res=await fetch(REST);
const data=await res.json();

countries=data.map(c=>({

name:c.name.common,
flag:c.flags.png

})).sort((a,b)=>a.name.localeCompare(b.name));

render(countries);

}

function render(arr){

list.innerHTML="";

arr.forEach(c=>{

const div=document.createElement("div");
div.className="country-item";

div.innerHTML=`
<img class="country-flag" src="${c.flag}">
<span>${c.name}</span>
`;

div.onclick=()=>{

displayText.innerHTML=`<img class="country-flag" src="${c.flag}"> ${c.name}`;
input.value=c.name;
dropdown.style.display="none";

};

list.appendChild(div);

});

}

display.onclick=async()=>{

await loadCountries();
dropdown.style.display="block";

};

search.oninput=()=>{

const q=search.value.toLowerCase();
render(countries.filter(c=>c.name.toLowerCase().includes(q)));

};

document.addEventListener("click",e=>{

if(!document.querySelector(".country-wrapper").contains(e.target)){
dropdown.style.display="none";
}

});

/* DELETE */

document.querySelectorAll(".delete").forEach(btn=>{

btn.onclick=function(){

if(!confirm("Delete country?")) return;

let row=this.closest(".row");
let id=row.dataset.id;

let fd=new FormData();
fd.append("delete_country","1");
fd.append("id",id);

fetch(location.href,{method:"POST",body:fd})
.then(()=>row.remove());

};

});

</script>

</body>
</html>