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

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

    <!-- Page 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 text-slate-800 tracking-tight">
                    Designation Management
                </h1>
            </div>

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

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

            </a>

        </div>

    </div>

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

        <!-- Form Card -->
        <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 New Designation
                    </h2>

                </div>

                <!-- Form -->
                <form id="designationForm" class="p-6 space-y-5">

                    <!-- Input -->
                    <div>

                        <label class="block text-sm font-medium text-slate-600 mb-2">
                            Designation Name
                        </label>

                        <div class="relative">

                            <i class="ri-briefcase-4-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>

                            <input
                                type="text"
                                id="designation"
                                placeholder="Enter designation"
                                class="w-full h-12 rounded-2xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 outline-none transition-all pl-11 pr-4 text-sm">

                        </div>

                    </div>

                    <!-- Button -->
                    <div class="pt-2 flex justify-end">
                    
                        <button
                            type="submit"
                            class="inline-flex items-center justify-center gap-2 h-9 px-4 rounded-xl bg-gradient-to-r from-indigo-600 to-blue-500 hover:opacity-95 text-white text-xs font-semibold shadow-md shadow-indigo-100 transition-all">
                    
                            <i class="ri-save-line text-sm"></i>
                    
                            Save
                    
                        </button>
                    
                    </div>
                </form>

            </div>

        </div>

        <!-- Table Section -->
        <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">
                                Designation List
                            </h2>

                        </div>

                    </div>

                </div>

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

                    <table class="w-full">

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

                            <tr>

                                <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase">
                                    Sr.no
                                </th>

                                <th class="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase">
                                    Designation
                                </th>

                                <th class="px-6 py-4 text-center text-xs font-semibold text-slate-500 uppercase">
                                    Actions
                                </th>

                            </tr>

                        </thead>

                        <tbody class="divide-y divide-slate-100">

                            <!-- Row -->
                            <tr class="hover:bg-slate-50 transition">

                                <td class="px-6 py-4 text-sm font-medium text-slate-700">
                                    01
                                </td>

                                <td class="px-6 py-4">

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

                                        <div>

                                            <p class="text-sm font-semibold text-slate-800">
                                                Manager
                                            </p>

                                        </div>

                                    </div>

                                </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 hover:bg-blue-100 text-blue-600 transition flex items-center justify-center">

                                            <i class="ri-edit-line"></i>

                                        </button>

<!-- Delete -->
<button
    onclick="deleteRow(this)"
    class="w-10 h-10 rounded-xl bg-red-50 hover:bg-red-100 text-red-600 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-10 h-10 rounded-xl border border-slate-200 hover:bg-slate-50 flex items-center justify-center text-slate-500">

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

                        </button>

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

                            1

                        </button>

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

                            2

                        </button>

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

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

                        </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    document.getElementById("designationForm").addEventListener("submit", function(e) {

        e.preventDefault();

        const designation = document.getElementById("designation").value.trim();

        // Validation Alert
        if (designation === "") {

            Swal.fire({
                icon: 'warning',
                title: 'Delete ?',
                text: 'Designation is required!',
                width: '320px',
                confirmButtonColor: '#4f46e5'
            });

            return;
        }

        // Success Alert
        Swal.fire({
            icon: 'success',
            title: 'Success',
            text: 'Designation saved successfully!',
            width: '320px',
            showConfirmButton: false,
            timer: 1800
        });

        document.getElementById("designationForm").reset();

    });

</script>

<script>

    function deleteRow(button) {

        Swal.fire({
            title: 'Delete?',
            text: "This record will be removed.",
            icon: 'warning',
            width: '320px',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Delete',
            cancelButtonText: 'Cancel'
        }).then((result) => {

            if (result.isConfirmed) {

                const row = button.closest("tr");

                row.remove();

                // Small Success Toast
                Swal.fire({
                    icon: 'success',
                    title: 'Deleted successfully',
                    showConfirmButton: false,
                    timer: 2000,
                    width: '320px',
                    timerProgressBar: true,
                    didOpen: () => {

                            document.querySelector('.swal2-popup').style.borderRadius = '10px';
            
                            document.querySelector('.swal2-confirm').style.borderRadius = '8px';
            
                        }
                });
 

            }

        });

    }

</script>

<script>

document.getElementById("designationForm").addEventListener("submit", function(e) {

    e.preventDefault();

    const designationInput = document.getElementById("designation");

    const designation = designationInput.value.trim();

    // RESET BORDER
    designationInput.classList.remove(
        "border-red-500",
        "focus:border-red-500"
    );

    // EMPTY VALIDATION
    if (designation === "") {

        designationInput.classList.add(
            "border-red-500",
            "focus:border-red-500"
        );

        designationInput.focus();

        Swal.fire({

            icon: 'warning',
            title: 'Designation Required',
            text: 'Please enter designation name',

            width: '320px',

            confirmButtonColor: '#4f46e5',

            didOpen: () => {

                document.querySelector('.swal2-popup').style.borderRadius = '10px';

                document.querySelector('.swal2-confirm').style.borderRadius = '8px';

            }

        });

        return;

    }

    // MINIMUM LENGTH VALIDATION
    if (designation.length < 3) {

        designationInput.classList.add(
            "border-red-500",
            "focus:border-red-500"
        );

        Swal.fire({

            icon: 'warning',
            title: 'Invalid Designation',
            text: 'Designation must be at least 3 characters',

            width: '320px',

            confirmButtonColor: '#4f46e5'

        });

        return;

    }

    // SUCCESS ALERT
    Swal.fire({

        icon: 'success',
        title: 'Success!',
        text: 'Designation saved successfully.',

        timer: 1500,
        showConfirmButton: false,

        width: '300px',

        didOpen: () => {

            document.querySelector('.swal2-popup').style.borderRadius = '10px';

        }

    });

    // RESET FORM
    document.getElementById("designationForm").reset();

});

</script>

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