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

<div class=" p-4 lg:p-6">

    <!-- Header -->
    <div class="max-w-7xl mx-auto mb-6">

        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">

            <div>

                <h1 class="text-3xl font-bold tracking-tight text-slate-800">
                    Add SMO
                </h1>

            </div>

            <a href="master.php"
                class="inline-flex items-center gap-2 h-10 px-5 rounded-2xl bg-white border border-slate-200 text-sm font-medium text-slate-700 hover:shadow-md transition-all">

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

                Back

            </a>

        </div>

    </div>

    <!-- Grid -->
    <div class="max-w-7xl mx-auto grid grid-cols-1 xl:grid-cols-12 gap-6">

        <!-- Left Form -->
        <div class="xl:col-span-4">

            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden sticky top-5">

                <!-- Card Header -->
                <div class="px-6 py-5 border-b border-slate-100">
            
                    <h2 class="text-lg font-semibold text-slate-800">
                        Add SMO Plan
                    </h2>
            
                </div>
            
                <!-- Form -->
                <form id="seoPlanForm" class="p-6 space-y-5">
            
                    <!-- Plan Name -->
                    <div>
            
                        <label class="block text-sm font-medium text-slate-700 mb-2">
                            Plan Name
                        </label>
            
                        <input
                            type="text"
                            name="plan_name"
                            placeholder="Enter Plan Name"
                            class="w-full h-11 px-4 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            
                    </div>
            
                    <!-- Plan Duration -->
                    <div>
            
                        <label class="block text-sm font-medium text-slate-700 mb-2">
                            Plan Duration
                        </label>
            
                        <input
                            type="text"
                            name="plan_duration"
                            placeholder="Example : 3 Months"
                            class="w-full h-11 px-4 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            
                    </div>
            
                    <!-- Total Posts -->
                    <div>
            
                        <label class="block text-sm font-medium text-slate-700 mb-2">
                            Total No. of Posts
                        </label>
            
                        <input
                            type="number"
                            name="total_posts"
                            placeholder="Enter Total Posts"
                            class="w-full h-11 px-4 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            
                    </div>
            
                    <!-- Total Reels -->
                    <div>
            
                        <label class="block text-sm font-medium text-slate-700 mb-2">
                            Total No. of Reels
                        </label>
            
                        <input
                            type="number"
                            name="total_reels"
                            placeholder="Enter Total Reels"
                            class="w-full h-11 px-4 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            
                    </div>
            
                    <!-- Submit -->
                    <div class="flex justify-end pt-2">
            
                        <button
                            type="submit"
                            class="inline-flex items-center gap-2 h-10 px-5 rounded-xl bg-gradient-to-r from-indigo-600 to-blue-500 text-white text-sm font-medium shadow-lg shadow-indigo-100 hover:opacity-95 transition-all">
            
                            <i class="ri-save-line"></i>
            
                            Save
            
                        </button>
            
                    </div>
            
                </form>
            
            </div>

        </div>

        <!-- Right Table -->
        <div class="xl:col-span-8">

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

                <!-- Table Header -->
                <div class="px-6 py-5 border-b border-slate-100">

                    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">

                        <div>

                            <h2 class="text-lg font-semibold text-slate-800">
                                SMO List
                            </h2>

                        </div>

                    </div>

                </div>


                <div class="overflow-x-auto">

                    <table class="w-full min-w-[1000px]">
                
                        <thead class="bg-slate-50">
                
                            <tr>
                
                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap">
                                    Sr.no
                                </th>
                
                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap min-w-[180px]">
                                    Plan Name
                                </th>
                
                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap min-w-[170px]">
                                    Plan Duration (M/Y)
                                </th>
                
                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap min-w-[160px]">
                                    Total No. of Posts
                                </th>
                
                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500 whitespace-nowrap min-w-[160px]">
                                    Total No. of Reels
                                </th>
                
                                <th class="px-6 py-4 text-center text-xs font-semibold uppercase text-slate-500 whitespace-nowrap min-w-[120px]">
                                    Action
                                </th>
                
                            </tr>
                
                        </thead>
                
                        <tbody class="divide-y divide-slate-100">
                
                            <tr class="hover:bg-slate-50 transition">
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    01
                                </td>
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    Lite Series
                                </td>
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    6 M
                                </td>
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    50
                                </td>
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    10
                                </td>
                                
                                <td class="px-6 py-4">
                
                                    <div class="flex items-center justify-center gap-2">
                
                                        <!-- Edit -->
                                        <button
                                            class="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                
                                            <i class="ri-edit-line"></i>
                
                                        </button>
                
                                        <button
                                            onclick="deleteRow(this)"
                                            class="w-10 h-10 rounded-xl bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                                        
                                            <i class="ri-delete-bin-6-line"></i>
                                                        
                                        </button>
                
                                    </div>
                
                                </td>
                
                            </tr>
                            
                            <tr class="hover:bg-slate-50 transition">
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    02
                                </td>
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    Lite Series Pro
                                </td>
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    1 Y
                                </td>
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    50
                                </td>
                
                                <td class="px-6 py-4 text-sm font-medium text-slate-700 whitespace-nowrap">
                                    10
                                </td>
                                
                                <td class="px-6 py-4">
                
                                    <div class="flex items-center justify-center gap-2">
                
                                        <!-- Edit -->
                                        <button
                                            class="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                
                                            <i class="ri-edit-line"></i>
                
                                        </button>
                
                                        <button
                                            onclick="deleteRow(this)"
                                            class="w-10 h-10 rounded-xl bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                                        
                                            <i class="ri-delete-bin-6-line"></i>
                                                        
                                        </button>
                
                                    </div>
                
                                </td>
                
                            </tr>
                
                        </tbody>
                
                    </table>
                
                </div>

                <!-- Footer -->
                <div class="px-6 py-4 border-t border-slate-100 flex flex-col md:flex-row md:items-center md:justify-between gap-4">

                    <p class="text-sm text-slate-500">
                        Showing 1 to 10 of 24 entries
                    </p>

                    <!-- Pagination -->
                    <div class="flex items-center gap-2">

                        <button
                            class="w-9 h-9 rounded-xl border border-slate-200 hover:bg-slate-50 flex items-center justify-center">

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

                        </button>

                        <button
                            class="w-9 h-9 rounded-xl bg-gradient-to-r from-indigo-600 to-blue-500 text-white text-sm font-medium">
                            1
                        </button>

                        <button
                            class="w-9 h-9 rounded-xl border border-slate-200 hover:bg-slate-50 text-sm">
                            2
                        </button>

                        <button
                            class="w-9 h-9 rounded-xl border border-slate-200 hover:bg-slate-50 flex items-center justify-center">

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

                        </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


<script>

    const seoPlanForm = document.getElementById('seoPlanForm');

    seoPlanForm.addEventListener('submit', function (e) {

        e.preventDefault();

        // Inputs
        const planName = document.querySelector('[name="plan_name"]');
        const planDuration = document.querySelector('[name="plan_duration"]');
        const totalPosts = document.querySelector('[name="total_posts"]');
        const totalReels = document.querySelector('[name="total_reels"]');

        // Values
        const planNameValue = planName.value.trim();
        const planDurationValue = planDuration.value.trim();
        const totalPostsValue = totalPosts.value.trim();
        const totalReelsValue = totalReels.value.trim();

        // Validation
        if (planNameValue === '') {

            smallAlert('Please enter plan name', 'warning');
            planName.focus();

            return;

        }

        if (planDurationValue === '') {

            smallAlert('Please enter plan duration', 'warning');
            planDuration.focus();

            return;

        }

        if (totalPostsValue === '') {

            smallAlert('Please enter total posts', 'warning');
            totalPosts.focus();

            return;

        }

        if (parseInt(totalPostsValue) <= 0) {

            smallAlert('Total posts must be greater than 0', 'warning');
            totalPosts.focus();

            return;

        }

        if (totalReelsValue === '') {

            smallAlert('Please enter total reels', 'warning');
            totalReels.focus();

            return;

        }

        if (parseInt(totalReelsValue) <= 0) {

            smallAlert('Total reels must be greater than 0', 'warning');
            totalReels.focus();

            return;

        }

        // Success Alert
        Swal.fire({

            icon: 'success',
            title: 'Success',
            text: 'SEO Plan Saved Successfully',
            width: '340px',
            padding: '1rem',
            timer: 1800,
            showConfirmButton: false,

            customClass: {

                popup: 'rounded-2xl',
                title: 'text-lg font-semibold',
                htmlContainer: 'text-sm'

            }

        });

        // Submit Form
        // seoPlanForm.submit();

    });

    // Small Alert Function
    function smallAlert(message, icon) {

        Swal.fire({

            icon: icon,
            title: 'Validation',
            text: message,
            width: '340px',
            padding: '1rem',
            confirmButtonColor: '#4f46e5',

            customClass: {

                popup: 'rounded-2xl',
                title: 'text-lg font-semibold',
                htmlContainer: 'text-sm',
                confirmButton: 'rounded-lg px-4 py-2 text-sm'

            }

        });

    }

</script>

<script>
    // Delete Row Function
function deleteRow(button) {

    Swal.fire({

        title: 'Delete?',
        text: 'This row will be deleted',
        icon: 'warning',

        width: '340px',
        padding: '1rem',

        showCancelButton: true,

        confirmButtonColor: '#dc2626',
        cancelButtonColor: '#64748b',

        confirmButtonText: 'Delete',
        cancelButtonText: 'Cancel',

        customClass: {

            popup: 'rounded-2xl',
            title: 'text-lg font-semibold',
            htmlContainer: 'text-sm',
            confirmButton: 'rounded-lg px-4 py-2 text-sm',
            cancelButton: 'rounded-lg px-4 py-2 text-sm'

        }

    }).then((result) => {

        if (result.isConfirmed) {

            // Remove Row
            button.closest('tr').remove();

            // Success Alert
            Swal.fire({

                icon: 'success',
                title: 'Deleted',
                text: 'Row deleted successfully',

                width: '340px',
                padding: '1rem',

                timer: 1500,
                showConfirmButton: false,

                customClass: {

                    popup: 'rounded-2xl',
                    title: 'text-lg font-semibold',
                    htmlContainer: 'text-sm'

                }

            });

        }

    });

}
</script>

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