<?php

include "../includes/admin_auth.php";
include "../config/database.php";

?>

<!DOCTYPE html>
<html lang="en">

<head>

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

<title>Add Plan</title>

<link rel="stylesheet" href="../assets/css/admin.css">
<link rel="stylesheet" href="../assets/css/responsive.css">

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

<style>

.plan-image-preview {
    margin-top: 12px;
    display: none;
}

.plan-image-preview img {
    width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.period-preview {
    margin-top: 10px;
    padding: 12px 15px;
    background: #f0f7ff;
    border-left: 4px solid #0d6efd;
    border-radius: 6px;
    font-weight: 600;
    color: #333;
}

.form-help {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #777;
}

</style>

</head>

<body>

<?php include "../includes/admin_sidebar.php"; ?>

<div class="sidebar-overlay"></div>

<?php include "../includes/admin_topbar.php"; ?>

<div class="main-content">

<div class="page-header">

<h2>

<i class="fas fa-layer-group"></i>

Create New Plan

</h2>

<p>

Create and configure a new contribution scheme.

</p>

</div>


<div class="table-card">

<form
action="save_plan.php"
method="POST"
enctype="multipart/form-data"
class="plan-form"
>


<div class="form-grid">


<!-- PLAN NAME -->

<div class="form-group">

<label>Scheme Name</label>

<input
type="text"
name="plan_name"
class="form-control"
placeholder="Enter scheme name"
required>

</div>


<!-- PLAN TYPE -->

<div class="form-group">

<label>Scheme Type</label>

<select
name="plan_type"
class="form-control"
required>

<option value="">Select Scheme Type</option>

<option value="Savings">Savings</option>

<option value="Food">Food</option>

<option value="Contribution">Contribution</option>

</select>

</div>


<!-- AMOUNT -->

<div class="form-group">

<label>Contribution Amount Per Hand (₦)</label>

<input
type="number"
name="amount"
class="form-control"
placeholder="20000"
min="1"
step="0.01"
required>

<small class="form-help">

Amount a member contributes for one hand.

</small>

</div>


<!-- FREQUENCY -->

<div class="form-group">

<label>Contribution Frequency</label>

<select
name="frequency"
class="form-control"
required>

<option value="">Select Frequency</option>

<option value="Daily">Daily</option>

<option value="Weekly">Weekly</option>

<option value="Monthly">Monthly</option>

<option value="Yearly">Yearly</option>

</select>

</div>


<!-- DURATION -->

<div class="form-group">

<label>Duration</label>

<input
type="number"
name="duration"
id="duration"
class="form-control"
placeholder="12"
min="1"
required>

<small class="form-help">

Enter the number of months the scheme will run.

</small>

</div>


<!-- START MONTH -->

<div class="form-group">

<label>Start Month</label>

<select
name="start_month"
id="start_month"
class="form-control"
required>

<option value="">Select Start Month</option>

<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>

</select>

</div>


<!-- START YEAR -->

<div class="form-group">

<label>Start Year</label>

<select
name="start_year"
id="start_year"
class="form-control"
required>

<option value="">Select Start Year</option>

<?php

$startYear = 2025;
$currentYear = date("Y");

for($year = $startYear; $year <= $currentYear + 10; $year++){

    echo '<option value="'.$year.'">'.$year.'</option>';

}

?>

</select>

</div>


<!-- PERIOD PREVIEW -->

<div
class="form-group"
style="grid-column:1 / -1;"
>

<label>Scheme Period</label>

<div
class="period-preview"
id="periodPreview"
>

Select the start month, year and duration to see the scheme period.

</div>

</div>


<!-- DESCRIPTION -->

<div
class="form-group"
style="grid-column:1 / -1;"
>

<label>Short Description</label>

<textarea
name="description"
class="form-control"
rows="4"
placeholder="Enter a short description of this scheme..."
required></textarea>

</div>


<!-- PACKAGE ITEMS -->

<div
class="form-group"
style="grid-column:1 / -1;"
>

<label>Items / Package Contents</label>

<textarea
name="package_items"
class="form-control"
rows="7"
placeholder="Enter one item per line.

Example:
Rice
Beans
Vegetable Oil
Sugar
Dates
Milk"
required></textarea>

<small class="form-help">

Enter each item on a separate line.

</small>

</div>


<!-- IMAGE -->

<div
class="form-group"
style="grid-column:1 / -1;"
>

<label>Scheme Image</label>

<input
type="file"
name="plan_image"
id="plan_image"
class="form-control"
accept="image/jpeg,image/png,image/webp"
required>

<small class="form-help">

Maximum size: 5MB. Accepted formats: JPG, PNG and WEBP.

</small>


<div
class="plan-image-preview"
id="imagePreview"
>

<img
id="previewImage"
src=""
alt="Scheme preview"
>

</div>

</div>


<!-- STATUS -->

<div class="form-group">

<label>Status</label>

<select
name="status"
class="form-control"
required>

<option value="active">Active</option>

<option value="inactive">Inactive</option>

</select>

</div>


</div>


<!-- ACTIONS -->

<div class="form-actions">

<a
href="plans.php"
class="back-btn"
>

<i class="fas fa-arrow-left"></i>

Back

</a>


<button
type="submit"
class="fund-btn"
>

<i class="fas fa-save"></i>

Save Scheme

</button>

</div>


</form>

</div>

</div>


<script src="../assets/js/admin.js"></script>


<script>

/*
|--------------------------------------------------------------------------
| Scheme Period Preview
|--------------------------------------------------------------------------
*/

const startMonth = document.getElementById("start_month");
const startYear = document.getElementById("start_year");
const duration = document.getElementById("duration");
const periodPreview = document.getElementById("periodPreview");


function updatePeriod(){

    const month = parseInt(startMonth.value);

    const year = parseInt(startYear.value);

    const months = parseInt(duration.value);


    if(!month || !year || !months){

        periodPreview.innerHTML =
        "Select the start month, year and duration to see the scheme period.";

        return;

    }


    const startDate = new Date(
        year,
        month - 1,
        1
    );


    const endDate = new Date(
        year,
        (month - 1) + months - 1,
        1
    );


    const monthNames = [

        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"

    ];


    const startName =
        monthNames[startDate.getMonth()];


    const endName =
        monthNames[endDate.getMonth()];


    periodPreview.innerHTML =
        "📅 " +
        startName +
        " " +
        startDate.getFullYear() +
        " – " +
        endName +
        " " +
        endDate.getFullYear();

}


startMonth.addEventListener(
    "change",
    updatePeriod
);

startYear.addEventListener(
    "change",
    updatePeriod
);

duration.addEventListener(
    "input",
    updatePeriod
);


/*
|--------------------------------------------------------------------------
| Image Preview
|--------------------------------------------------------------------------
*/

const imageInput =
    document.getElementById("plan_image");

const imagePreview =
    document.getElementById("imagePreview");

const previewImage =
    document.getElementById("previewImage");


imageInput.addEventListener(
    "change",
    function(){

        const file = this.files[0];


        if(!file){

            imagePreview.style.display = "none";

            return;

        }


        if(file.size > 5 * 1024 * 1024){

            alert(
                "Image is too large. Maximum size is 5MB."
            );

            this.value = "";

            imagePreview.style.display = "none";

            return;

        }


        const reader = new FileReader();


        reader.onload = function(e){

            previewImage.src = e.target.result;

            imagePreview.style.display = "block";

        };


        reader.readAsDataURL(file);

    }
);

</script>

</body>

</html>