<?php include 'header.php'; ?>

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

<head>

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

    <title>Add Client</title>

    <script>
        tailwind.config = {
            theme: {
                extend: {}
            }
        }
    </script>

<style>.ts-wrapper{width:100%;position:relative;}.ts-control{min-height:56px !important;height:56px !important;border:1px solid #d1d5db !important;border-radius:16px !important;padding:0 16px !important;background:#fff !important;box-shadow:none !important;display:flex !important;align-items:center !important;overflow:hidden !important;}.ts-control input{font-size:14px !important;}.ts-wrapper.focus .ts-control{border-color:#8b5cf6 !important;box-shadow:0 0 0 4px rgba(139,92,246,0.10) !important;}.ts-dropdown{margin-top:8px !important;border-radius:16px !important;border:1px solid #e5e7eb !important;overflow:hidden !important;background:#fff !important;box-shadow:0 10px 30px rgba(0,0,0,0.10) !important;z-index:9999 !important;}.ts-dropdown-content{max-height:220px !important;overflow-y:auto !important;overflow-x:hidden !important;scroll-behavior:smooth;}.ts-dropdown-content::-webkit-scrollbar{width:6px;}.ts-dropdown-content::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:20px;}.ts-dropdown .option{padding:14px 16px !important;font-size:14px !important;cursor:pointer;}.ts-dropdown .active{background:#f3e8ff !important;color:#7c3aed !important;}.fi{position:relative;}.fi input,.fi textarea{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 16px;outline:none;font-size:15px;background:#fff;transition:0.25s;}.fi textarea{height:100px;resize:none;padding-top:16px;}.fi input:focus,.fi textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.fi label{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;padding:0 6px;font-size:14px;color:#6b7280;pointer-events:none;transition:0.2s;z-index:2;}.fi textarea+label{top:22px;transform:none;}.fi input:focus+label,.fi input:not(:placeholder-shown)+label{top:0;transform:translateY(-50%);font-size:11px;color:#8b5cf6;}.fi textarea:focus+label,.fi textarea:not(:placeholder-shown)+label{top:-8px;transform:none;font-size:11px;color:#8b5cf6;}.si{position:relative;}.si select{width:100%;height:56px;border:1px solid #d1d5db;border-radius:16px;padding:0 42px 0 16px;outline:none;font-size:15px;background:#fff;appearance:none;transition:0.25s;}.si select:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,0.10);}.si::after{content:'\ea4e';font-family:'remixicon';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;}.form-step{display:none;}.form-step.active{display:block;}.checkbox-wrap{display:flex;align-items:center;gap:8px;padding:4px 0;}.checkbox-wrap input[type="checkbox"]{width:18px;height:18px;accent-color:#8b5cf6;cursor:pointer;}.checkbox-wrap label{font-size:13px;color:#6b7280;cursor:pointer;}@media(max-width:640px){.ts-control{height:52px !important;min-height:52px !important;}.fi input,.fi textarea,.si select{height:52px;}.fi textarea{height:90px;}}</style>

</head>

<body class="bg-gray-100 min-h-screen">

    <!-- HEADER -->
    <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pt-6 sm:pt-8 pb-5 sm:pb-6">

        <div class="flex items-start justify-between">

            <div>
                <h1 class="text-3xl font-bold text-gray-900">
                    Add Client
                </h1>
            </div>

            <a href="amc_list.php">
                <button class="inline-flex items-center gap-2 h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 text-sm font-semibold transition-all shadow-sm">

                    <i class="ri-arrow-left-line"></i>
                    Back

                </button>
            </a>

        </div>

    </div>

    <!-- MAIN -->
    <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 pb-6 sm:pb-10">

        <div class="w-full bg-white rounded-2xl sm:rounded-3xl shadow-xl border border-gray-100 p-3 sm:p-6 md:p-8 lg:p-12 overflow-visible">

            <div class="flex flex-col lg:flex-row gap-6 lg:gap-14">

                <!-- SIDEBAR -->
                <div class="w-full lg:w-64 xl:w-72 flex-shrink-0">

                    <!-- MOBILE -->
                    <div class="flex lg:hidden items-center justify-between mb-6">

                        <span id="mobileLabel" class="text-sm font-semibold text-gray-800">
                            Step 1 of 4 — Client Info
                        </span>

                        <div class="flex gap-1.5">

                            <div id="mdot0" class="w-2.5 h-2.5 rounded-full bg-violet-500"></div>
                            <div id="mdot1" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                            <div id="mdot2" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>
                            <div id="mdot3" class="w-2.5 h-2.5 rounded-full bg-violet-200"></div>

                        </div>

                    </div>

                    <!-- DESKTOP -->
                    <div class="hidden lg:flex flex-col gap-0">

                        <?php

                        $steps = [

                            ['01', 'Client Info', 'Basic company & client details'],
                            ['02', 'Contact Info', 'Primary contact & communication'],
                            ['03', 'Address', 'Billing & office address details'],
                            ['04', 'Other Details', 'Business preferences & additional info'],

                        ];

                        foreach ($steps as $index => $step):

                        ?>

                            <div class="flex gap-4 items-start">

                                <div class="flex flex-col items-center">

                                    <div id="sd<?= $index ?>"
                                        class="w-7 h-7 rounded-full <?= $index == 0 ? 'border-[3px] border-violet-500' : 'border-2 border-violet-200' ?> bg-white flex items-center justify-center transition-all duration-300"></div>

                                    <?php if ($index != 3): ?>
                                        <div class="w-0.5 h-10 bg-violet-200 mt-1"></div>
                                    <?php endif; ?>

                                </div>

                                <div class="pt-0.5">

                                    <div class="text-[11px] font-semibold text-gray-400">
                                        <?= $step[0] ?>
                                    </div>

                                    <div id="st<?= $index ?>"
                                        class="text-[15px] font-bold <?= $index == 0 ? 'text-gray-900' : 'text-gray-400' ?>">
                                        <?= $step[1] ?>
                                    </div>

                                    <div class="text-xs text-gray-400">
                                        <?= $step[2] ?>
                                    </div>

                                </div>

                            </div>

                        <?php endforeach; ?>

                    </div>

                </div>

                <!-- FORM -->
                <div class="flex-1 min-w-0 lg:border-l lg:border-gray-100 lg:pl-10 xl:pl-12">

                    <!-- STEP 1 -->
                    <div class="form-step active" id="fs0">

                        <div class="mb-8">
                            <p class="text-xs text-gray-400 mb-1">Step 1 of 4</p>
                            <h1 class="text-3xl font-bold text-gray-900">Client Info</h1>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>Client Name *</label>
                            </div>

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>Company Name *</label>
                            </div>

                            <div class="si">
                                <select id="clientType">
                                    <option value="" disabled selected>Client Type *</option>
                                    <option>Individual</option>
                                    <option>Startup</option>
                                    <option>SME</option>
                                    <option>Corporate</option>
                                    <option>Agency</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="industryType">
                                    <option value="" disabled selected>Industry Type *</option>
                                    <option>IT Company</option>
                                    <option>Finance</option>
                                    <option>Healthcare</option>
                                    <option>Education</option>
                                    <option>Real Estate</option>
                                    <option>Retail</option>
                                    <option>Manufacturing</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="companySize">
                                    <option value="" disabled selected>Company Size</option>
                                    <option>1-10 Employees</option>
                                    <option>11-50 Employees</option>
                                    <option>51-200 Employees</option>
                                    <option>200+ Employees</option>
                                </select>
                            </div>

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>Website</label>
                            </div>
<div class="sm:col-span-3">

    <label class="block text-sm font-semibold text-gray-700 mb-3">
        Do You Have GST?
    </label>

    <div class="flex items-center gap-6">

        <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="hasGST" value="yes"
                onchange="toggleGSTField(true)"
                class="w-4 h-4 accent-violet-500">
            <span class="text-sm text-gray-700">Yes</span>
        </label>

        <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="hasGST" value="no"
                onchange="toggleGSTField(false)"
                checked
                class="w-4 h-4 accent-violet-500">
            <span class="text-sm text-gray-700">No</span>
        </label>

    </div>

</div>

<div class="fi hidden" id="gstFieldWrap">
    <input type="text" placeholder=" " id="gstNumber" maxlength="15">
    <label>GST Number</label>
</div>

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>PAN Number</label>
                            </div>

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>Client Code</label>
                            </div>

                        </div>

                    </div>

                    <!-- STEP 2 -->
                    <div class="form-step" id="fs1">

                        <div class="mb-8">
                            <p class="text-xs text-gray-400 mb-1">Step 2 of 4</p>
                            <h1 class="text-3xl font-bold text-gray-900">Contact Info</h1>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>Primary Contact Person *</label>
                            </div>

<div class="fi">
    <input type="email" placeholder=" " id="emailAddress">
    <label>Email Address *</label>
</div>

<div class="fi">
    <input type="tel" placeholder=" " id="phoneNumber">
    <label>Phone Number *</label>
</div>

<div class="fi">
    <input type="tel" placeholder=" " id="alternateNumber">
    <label>Alternate Number</label>
</div>

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>Department</label>
                            </div>

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>Designation</label>
                            </div>

                        </div>

                    </div>

                    <!-- STEP 3 -->
                    <div class="form-step" id="fs2">

                        <div class="mb-8">
                            <p class="text-xs text-gray-400 mb-1">Step 3 of 4</p>
                            <h1 class="text-3xl font-bold text-gray-900">Address</h1>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                            <div class="fi">
                                <textarea placeholder=" "></textarea>
                                <label>Office Address *</label>
                            </div>

                            <div class="fi">
                                <textarea placeholder=" "></textarea>
                                <label>Billing Address *</label>
                            </div>

                            <div class="sm:col-span-2">

                                <div class="checkbox-wrap">

                                    <input type="checkbox">

                                    <label>Same as office address</label>

                                </div>

                            </div>

                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">

                            <div class="si">
                                <select id="city">
                                    <option value="" selected disabled>City *</option>
                                    <option>Ahmedabad</option>
                                    <option>Surat</option>
                                    <option>Vadodara</option>
                                    <option>Rajkot</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="state">
                                    <option value="" disabled selected>State *</option>
                                    <option>Gujarat</option>
                                    <option>Maharashtra</option>
                                    <option>Delhi</option>
                                    <option>Karnataka</option>
                                    <option>Rajasthan</option>
                                </select>
                            </div>

                            <div class="fi">
                                <input type="text" placeholder=" " id="pincode" maxlength="6" pattern="^\d{6}$" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                <label>PIN Code *</label>
                            </div>

                            <div class="si">
                                <select id="country">
                                    <option value="" disabled selected>Country *</option>
                                    <option>India</option>
                                    <option>United States</option>
                                    <option>United Kingdom</option>
                                    <option>Canada</option>
                                    <option>Australia</option>
                                </select>
                            </div>

                        </div>

                    </div>

                    <!-- STEP 4 -->
                    <div class="form-step" id="fs3">

                        <div class="mb-8">
                            <p class="text-xs text-gray-400 mb-1">Step 4 of 4</p>
                            <h1 class="text-3xl font-bold text-gray-900">Other Details</h1>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

                            <div class="si">
                                <select id="clientCategory">
                                    <option value="" disabled selected>Client Category</option>
                                    <option>Premium</option>
                                    <option>Regular</option>
                                    <option>VIP</option>
                                    <option>Enterprise</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="paymentTerms">
                                    <option value="" disabled selected>Payment Terms</option>
                                    <option>Advance Payment</option>
                                    <option>Net 15 Days</option>
                                    <option>Net 30 Days</option>
                                    <option>Quarterly</option>
                                    <option>Yearly</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="serviceType">
                                    <option value="" disabled selected>Service Type</option>
                                    <option>AMC</option>
                                    <option>Web Development</option>
                                    <option>SEO</option>
                                    <option>SMM</option>
                                    <option>Software Development</option>
                                    <option>Digital Marketing</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="priorityLevel">
                                    <option value="" disabled selected>Priority Level</option>
                                    <option>Low</option>
                                    <option>Medium</option>
                                    <option>High</option>
                                    <option>Critical</option>
                                </select>
                            </div>

                            <div class="si">
                                <select id="accountManager">
                                    <option value="" disabled selected>Account Manager</option>
                                    <option>Rahul Shah</option>
                                    <option>Neha Patel</option>
                                    <option>Amit Joshi</option>
                                    <option>Priya Mehta</option>
                                </select>
                            </div>

                            <div class="fi">
                                <input type="text" placeholder=" ">
                                <label>Reference Source</label>
                            </div>

                            <div class="fi sm:col-span-3">
                                <textarea placeholder=" "></textarea>
                                <label>Notes / Remarks</label>
                            </div>

                        </div>

                    </div>

                    <!-- SUCCESS -->
                    <div id="successMsg" class="hidden text-center py-8 sm:py-12">

                        <div class="w-16 h-16 rounded-full bg-violet-100 flex items-center justify-center mx-auto mb-3">

                            <i class="ri-check-line text-3xl text-violet-600"></i>

                        </div>

                        <h2 class="text-xl font-bold text-gray-900 mb-2">
                            Client Created!
                        </h2>

                        <p class="text-sm text-gray-500 mb-4">
                            Client has been added successfully.
                        </p>

                    </div>

                    <!-- BUTTONS -->
                    <div id="btnRow" class="flex flex-col-reverse sm:flex-row gap-3 sm:gap-0 items-stretch sm:items-center justify-between mt-8 sm:mt-10 pt-6 border-t border-gray-100">

                        <button id="prevBtn" onclick="goStep(-1)" class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-7 rounded-xl border border-gray-200 bg-white text-black text-sm font-semibold opacity-40 cursor-not-allowed transition-all">

                            <i class="ri-arrow-left-line"></i>
                            Previous

                        </button>

                        <button id="nextBtn" onclick="goStep(1)" class="w-full sm:w-auto inline-flex justify-center items-center gap-2 h-12 px-9 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">

                            Next
                            <i class="ri-arrow-right-line"></i>

                        </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script>
        let cur = 0;

        const total = 4;

        const mobileLabels = [

            'Step 1 of 4 — Client Info',
            'Step 2 of 4 — Contact Info',
            'Step 3 of 4 — Address',
            'Step 4 of 4 — Other Details',

        ];

        const searchableSelects = [

            '#clientType',
            '#industryType',
            '#companySize',
            '#state',
            '#city',
            '#country',
            '#clientCategory',
            '#paymentTerms',
            '#serviceType',
            '#priorityLevel',
            '#accountManager',
             '#city'

        ];

        searchableSelects.forEach(id => {

            if (document.querySelector(id)) {

                new TomSelect(id, {

                    create: false,
                    allowEmptyOption: true,
                    placeholder: 'Search...',
                    closeAfterSelect: true,

                    render: {
                        no_results: function() {
                            return '<div class="p-3 text-sm text-gray-400">No results found</div>';
                        }
                    }

                });

            }

        });

        function updateSidebar() {

            for (let i = 0; i < total; i++) {

                const dot = document.getElementById('sd' + i);

                const title = document.getElementById('st' + i);

                if (i < cur) {

                    dot.className =
                        'w-7 h-7 rounded-full bg-violet-500 border-2 border-violet-500 flex items-center justify-center transition-all duration-300';

                    dot.innerHTML =
                        '<i class="ri-check-line text-white text-xs"></i>';

                    title.className =
                        'text-[15px] font-bold text-gray-400';

                } else if (i === cur) {

                    dot.className =
                        'w-7 h-7 rounded-full border-[3px] border-violet-500 bg-white flex items-center justify-center transition-all duration-300';

                    dot.innerHTML = '';

                    title.className =
                        'text-[15px] font-bold text-gray-900';

                } else {

                    dot.className =
                        'w-7 h-7 rounded-full border-2 border-violet-200 bg-white flex items-center justify-center transition-all duration-300';

                    dot.innerHTML = '';

                    title.className =
                        'text-[15px] font-bold text-gray-400';

                }

            }

            document.getElementById('mobileLabel').textContent =
                mobileLabels[Math.min(cur, 3)];

            for (let i = 0; i < total; i++) {

                document.getElementById('mdot' + i).className =
                    i <= cur ?
                    'w-2.5 h-2.5 rounded-full bg-violet-500' :
                    'w-2.5 h-2.5 rounded-full bg-violet-200';

            }

        }
/* =========================
   GST FIELD TOGGLE
========================== */

function toggleGSTField(show){

    const gstWrap =
        document.getElementById('gstFieldWrap');

    if(show){

        gstWrap.classList.remove('hidden');

    }else{

        gstWrap.classList.add('hidden');

        document.getElementById('gstNumber').value = '';

    }

}


/* =========================
   ONLY NUMBER VALIDATION
========================== */

function onlyDigits(input, limit){

    input.addEventListener('input', function(){

        this.value = this.value
            .replace(/\D/g,'')
            .slice(0, limit);

    });

}


/* =========================
   MOBILE / PHONE VALIDATION
========================== */

onlyDigits(
    document.getElementById('phoneNumber'),
    10
);

onlyDigits(
    document.getElementById('alternateNumber'),
    10
);

onlyDigits(
    document.getElementById('pincode'),
    6
);


/* =========================
   EMAIL VALIDATION
========================== */

function isValidEmail(email){

    return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/
        .test(email);

}


/* =========================
   GST VALIDATION
========================== */

function isValidGST(gst){

    return /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/
        .test(gst);

}
        function goStep(dir) {

            if (cur === 3 && dir === 1) {

                document.querySelectorAll('.form-step')
                    .forEach(s => s.classList.remove('active'));

                document.getElementById('btnRow')
                    .style.display = 'none';

                document.getElementById('successMsg')
                    .classList.remove('hidden');

                setTimeout(() => {
                    window.location.href = 'amc_list.php';
                }, 2000);

                return;

            }

            const nxt = cur + dir;
            
            /* =========================
   STEP 1 VALIDATION
========================== */

if(cur === 0 && dir === 1){

    const gstYes =
        document.querySelector(
            'input[name="hasGST"]:checked'
        ).value === 'yes';

    const gstNumber =
        document.getElementById('gstNumber').value.trim();

    if(gstYes){

        if(gstNumber === ''){

            Swal.fire({
                icon:'warning',
                title:'GST Number Required',
                text:'Please enter GST number',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

        if(!isValidGST(gstNumber.toUpperCase())){

            Swal.fire({
                icon:'warning',
                title:'Invalid GST Number',
                text:'Please enter valid GST number',
                confirmButtonColor:'#8b5cf6'
            });

            return;
        }

    }

}


/* =========================
   STEP 2 VALIDATION
========================== */

if(cur === 1 && dir === 1){

    const email =
        document.getElementById('emailAddress').value.trim();

    const phone =
        document.getElementById('phoneNumber').value.trim();

    const alternate =
        document.getElementById('alternateNumber').value.trim();

    if(email === ''){

        Swal.fire({
            icon:'warning',
            title:'Email Required',
            text:'Please enter email address',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

    if(!isValidEmail(email)){

        Swal.fire({
            icon:'warning',
            title:'Invalid Email',
            text:'Please enter valid email address',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

    if(phone === ''){

        Swal.fire({
            icon:'warning',
            title:'Phone Number Required',
            text:'Please enter phone number',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

    if(phone.length !== 10){

        Swal.fire({
            icon:'warning',
            title:'Invalid Phone Number',
            text:'Phone number must be exactly 10 digits',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

    if(alternate !== '' && alternate.length !== 10){

        Swal.fire({
            icon:'warning',
            title:'Invalid Alternate Number',
            text:'Alternate number must be exactly 10 digits',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

}


/* =========================
   STEP 3 VALIDATION
========================== */

if(cur === 2 && dir === 1){

    const pincode =
        document.getElementById('pincode').value.trim();

    if(pincode === ''){

        Swal.fire({
            icon:'warning',
            title:'PIN Code Required',
            text:'Please enter PIN code',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

    if(pincode.length !== 6){

        Swal.fire({
            icon:'warning',
            title:'Invalid PIN Code',
            text:'PIN code must be exactly 6 digits',
            confirmButtonColor:'#8b5cf6'
        });

        return;
    }

}

            if (nxt < 0 || nxt >= total) return;

            document.getElementById('fs' + cur)
                .classList.remove('active');

            cur = nxt;

            document.getElementById('fs' + cur)
                .classList.add('active');

            updateSidebar();

            const pb = document.getElementById('prevBtn');

            const nb = document.getElementById('nextBtn');

            if (cur === 0) {

                pb.classList.add(
                    'opacity-40',
                    'cursor-not-allowed'
                );

            } else {

                pb.classList.remove(
                    'opacity-40',
                    'cursor-not-allowed'
                );

            }

            if (cur === 3) {

                nb.innerHTML =
                    '<i class="ri-check-line"></i> Create Client';

                nb.classList.remove(
                    'bg-violet-500',
                    'hover:bg-violet-600'
                );

                nb.classList.add(
                    'bg-green-600',
                    'hover:bg-green-700'
                );

            } else {

                nb.innerHTML =
                    'Next <i class="ri-arrow-right-line"></i>';

                nb.classList.add(
                    'bg-violet-500',
                    'hover:bg-violet-600'
                );

                nb.classList.remove(
                    'bg-green-600',
                    'hover:bg-green-700'
                );

            }

        }
    </script>

</body>

</html>

<?php include 'footer.php'; ?>