<?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>Quotation Form</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">

    <style>

        .fi {
            position: relative;
        }

        .fi input,
        .fi textarea {
            width: 100%;
            height: 56px;
            border: 1px solid #d1d5db;
            border-radius: 14px;
            padding: 0 16px;
            outline: none;
            font-size: 14px;
            background: #fff;
            transition: .2s;
        }

        .fi textarea {
            height: 120px;
            padding-top: 18px;
            resize: none;
        }

        .fi input:focus,
        .fi textarea:focus {
            border-color: #8b5cf6;
            box-shadow: 0 0 0 4px rgba(139,92,246,.10);
        }

        .fi label {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            background: #fff;
            padding: 0 4px;
            color: #6b7280;
            font-size: 14px;
            pointer-events: none;
            transition: .2s;
        }

        .fi textarea+label {
            top: 20px;
            transform: none;
        }

        .fi input:focus+label,
        .fi input:not(:placeholder-shown)+label,
        .fi textarea:focus+label,
        .fi textarea:not(:placeholder-shown)+label {
            top: 0;
            transform: translateY(-50%);
            font-size: 11px;
            color: #8b5cf6;
        }

        .si {
            position: relative;
        }

        .si select {
            width: 100%;
            height: 56px;
            border: 1px solid #d1d5db;
            border-radius: 14px;
            padding: 0 16px;
            outline: none;
            font-size: 14px;
            appearance: none;
            background: #fff;
        }

        .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;
        }

    </style>
</head>

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

<div class="max-w-7xl mx-auto px-4 py-8">

    <div class="bg-white rounded-3xl border border-gray-200 shadow-sm overflow-hidden">

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

            <!-- LEFT -->
            <div class="w-full lg:w-72 border-r border-gray-100 p-8">

                <div class="flex items-center gap-3 mb-10">

                    <div class="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center font-bold">
                        2
                    </div>

                    <h2 class="text-2xl font-bold text-blue-700">
                        QUOTATION
                    </h2>

                </div>

                <div class="space-y-7">

                    <div class="flex gap-4">

                        <div class="w-7 h-7 rounded-full border-2 border-blue-600 text-blue-600 flex items-center justify-center text-sm font-bold">
                            1
                        </div>

                        <div>
                            <div class="text-xs font-semibold text-gray-400 uppercase">
                                Flow
                            </div>

                            <div class="font-semibold text-gray-900">
                                Select Client
                            </div>
                        </div>

                    </div>

                    <div class="flex gap-4">

                        <div class="w-7 h-7 rounded-full border-2 border-gray-300 text-gray-400 flex items-center justify-center text-sm font-bold">
                            2
                        </div>

                        <div>
                            <div class="font-semibold text-gray-500">
                                Quotation Details
                            </div>
                        </div>

                    </div>

                    <div class="flex gap-4">

                        <div class="w-7 h-7 rounded-full border-2 border-gray-300 text-gray-400 flex items-center justify-center text-sm font-bold">
                            3
                        </div>

                        <div>
                            <div class="font-semibold text-gray-500">
                                Add Items/Services
                            </div>
                        </div>

                    </div>

                    <div class="flex gap-4">

                        <div class="w-7 h-7 rounded-full border-2 border-gray-300 text-gray-400 flex items-center justify-center text-sm font-bold">
                            4
                        </div>

                        <div>
                            <div class="font-semibold text-gray-500">
                                Terms & Conditions
                            </div>
                        </div>

                    </div>

                    <div class="flex gap-4">

                        <div class="w-7 h-7 rounded-full border-2 border-gray-300 text-gray-400 flex items-center justify-center text-sm font-bold">
                            5
                        </div>

                        <div>
                            <div class="font-semibold text-gray-500">
                                Review & Save
                            </div>
                        </div>

                    </div>

                </div>

            </div>

            <!-- RIGHT -->
            <div class="flex-1 p-8">

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

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

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                        <div class="si md:col-span-2">
                            <select>
                                <option selected disabled>Client Name</option>
                                <option>ABC Pvt Ltd</option>
                                <option>XYZ Corporation</option>
                            </select>
                        </div>

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

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

                        <div class="fi md:col-span-2">
                            <textarea placeholder=" "></textarea>
                            <label>Client Address</label>
                        </div>

                    </div>

                </div>

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

                    <h2 class="text-2xl font-bold text-gray-900 mb-8">
                        Quotation Details
                    </h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                        <div class="fi">
                            <input type="text" placeholder=" ">
                            <label>Quotation No. (Auto)</label>
                        </div>

                        <div class="fi">
                            <input type="date" placeholder=" ">
                            <label>Quotation Date</label>
                        </div>

                        <div class="fi">
                            <input type="date" placeholder=" ">
                            <label>Valid Till</label>
                        </div>

                        <div class="si">
                            <select>
                                <option selected disabled>Client Name</option>
                                <option>ABC Pvt Ltd</option>
                            </select>
                        </div>

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

                        <div class="si">
                            <select>
                                <option selected disabled>Sales Person</option>
                                <option>Dev Mistry</option>
                            </select>
                        </div>

                        <div class="si">
                            <select>
                                <option selected disabled>Currency</option>
                                <option>INR</option>
                                <option>USD</option>
                            </select>
                        </div>

                    </div>

                </div>

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

                    <h2 class="text-2xl font-bold text-gray-900 mb-8">
                        Add Items / Services
                    </h2>

                    <div class="overflow-x-auto border border-gray-200 rounded-2xl">

                        <table class="w-full">

                            <thead class="bg-gray-50">

                                <tr>

                                    <th class="px-4 py-4 text-left text-sm font-semibold">
                                        #
                                    </th>

                                    <th class="px-4 py-4 text-left text-sm font-semibold">
                                        Item / Service
                                    </th>

                                    <th class="px-4 py-4 text-left text-sm font-semibold">
                                        Qty
                                    </th>

                                    <th class="px-4 py-4 text-left text-sm font-semibold">
                                        Rate
                                    </th>

                                    <th class="px-4 py-4 text-left text-sm font-semibold">
                                        Amount
                                    </th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr class="border-t border-gray-100">

                                    <td class="px-4 py-4">
                                        1
                                    </td>

                                    <td class="px-4 py-4">
                                        <input type="text"
                                            class="w-full border border-gray-200 rounded-xl h-11 px-3 outline-none">
                                    </td>

                                    <td class="px-4 py-4">
                                        <input type="number"
                                            class="w-full border border-gray-200 rounded-xl h-11 px-3 outline-none">
                                    </td>

                                    <td class="px-4 py-4">
                                        <input type="number"
                                            class="w-full border border-gray-200 rounded-xl h-11 px-3 outline-none">
                                    </td>

                                    <td class="px-4 py-4">
                                        <input type="number"
                                            class="w-full border border-gray-200 rounded-xl h-11 px-3 outline-none">
                                    </td>

                                </tr>

                            </tbody>

                        </table>

                    </div>

                    <button class="mt-4 text-blue-600 font-semibold text-sm flex items-center gap-2">
                        <i class="ri-add-line"></i>
                        Add Row
                    </button>

                </div>

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

                    <h2 class="text-2xl font-bold text-gray-900 mb-8">
                        Terms & Conditions
                    </h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                        <div class="si">
                            <select>
                                <option selected disabled>Discount Type</option>
                                <option>Flat</option>
                                <option>Percentage</option>
                            </select>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" ">
                            <label>Discount Value</label>
                        </div>

                        <div class="si">
                            <select>
                                <option selected disabled>Tax Type</option>
                                <option>GST</option>
                            </select>
                        </div>

                        <div class="fi">
                            <input type="number" placeholder=" ">
                            <label>Tax %</label>
                        </div>

                        <div class="fi md:col-span-2">
                            <input type="text" placeholder=" ">
                            <label>Total Amount</label>
                        </div>

                        <div class="fi md:col-span-2">
                            <textarea placeholder=" "></textarea>
                            <label>Terms & Conditions</label>
                        </div>

                    </div>

                </div>

                <!-- STEP 5 -->
                <div class="form-step" id="step4">

                    <h2 class="text-2xl font-bold text-gray-900 mb-8">
                        Review & Save
                    </h2>

                    <div class="border border-gray-200 rounded-2xl p-6">

                        <p class="text-gray-600">
                            Review quotation details before saving.
                        </p>

                    </div>

                </div>

                <!-- BUTTONS -->
                <div class="flex items-center justify-between mt-10 pt-6 border-t border-gray-100">

                    <button onclick="prevStep()"
                        class="h-12 px-7 rounded-xl border border-gray-300 font-semibold">
                        Previous
                    </button>

                    <button onclick="nextStep()"
                        class="h-12 px-7 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold">
                        Next
                    </button>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    let currentStep = 0;

    const steps = document.querySelectorAll('.form-step');

    function showStep(index) {

        steps.forEach(step => {
            step.classList.remove('active');
        });

        steps[index].classList.add('active');
    }

    function nextStep() {

        if(currentStep < steps.length - 1) {

            currentStep++;

            showStep(currentStep);
        }
    }

    function prevStep() {

        if(currentStep > 0) {

            currentStep--;

            showStep(currentStep);
        }
    }

</script>

</body>
</html>

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