<?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 User</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{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 input: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;}.fi input:focus + label,.fi input: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: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;}@media(max-width:640px){.ts-control{height:52px!important;min-height:52px!important;}.fi input,.si select{height:52px;}}</style>
</head>

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

    <!-- HEADER -->
    <div class="max-w-7xl mx-auto px-3 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 Time Log
                </h1>
            </div>

            <a href="time_tracking.php"
                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
            
            </a>

        </div>

    </div>

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

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

            <!-- FORM CONTENT -->
            <div id="formContent">

                <div class="mb-8">

                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900">
                        Time log Details
                    </h2>
                </div>

                <!-- TWO INPUTS PER ROW -->
                <!-- FORM FIELDS -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">

    <!-- DATE -->
    <div class="fi">
        <input type="date" id="logDate" placeholder=" ">
        <label>Date <span class="text-red-500">*</span></label>
    </div>

    <!-- PROJECT -->
    <div class="si">
        <select id="project">
            <option value="">Project</option>
            <option>CRM System</option>
            <option>E-Commerce Website</option>
            <option>Mobile Application</option>
            <option>ERP System</option>
        </select>
    </div>

    <!-- TASK NAME -->
    <div class="fi">
        <input type="text" id="taskName" placeholder=" ">
        <label>Task Name <span class="text-red-500">*</span></label>
    </div>

    <!-- TASK TYPE -->
    <div class="si">
        <select id="taskType">
            <option value="">Task Type</option>
            <option>Development</option>
            <option>Design</option>
            <option>Testing</option>
            <option>Meeting</option>
            <option>Support</option>
            <option>Research</option>
        </select>
    </div>

    <!-- START TIME -->
    <div class="fi">
        <input type="time" id="startTime" placeholder=" ">
        <label>Start Time <span class="text-red-500">*</span></label>
    </div>

    <!-- END TIME -->
    <div class="fi">
        <input type="time" id="endTime" placeholder=" ">
        <label>End Time <span class="text-red-500">*</span></label>
    </div>

    <!-- HOURS -->
    <div class="fi">
        <input type="number" id="hours" step="0.25" placeholder=" ">
        <label>Total Hours <span class="text-red-500">*</span></label>
    </div>

    <!-- BILLABLE TYPE -->
    <div class="si">
        <select id="billableType">
            <option value="">Billable Type</option>
            <option>Billable</option>
            <option>Non-Billable</option>
        </select>
    </div>

    <!-- STATUS -->
    <div class="si">
        <select id="status">
            <option value="">Status</option>
            <option>Completed</option>
            <option>In Progress</option>
            <option>Pending</option>
        </select>
    </div>

</div>

<!-- DESCRIPTION -->
<div class="mt-6">
    <textarea
        id="description"
        rows="5"
        class="w-full rounded-2xl border border-gray-300 p-4 focus:border-violet-500 focus:ring-4 focus:ring-violet-100 outline-none resize-none"
        placeholder="Description"></textarea>
</div>

                <!-- BUTTON -->
                <div class="flex justify-end mt-8 pt-6 border-t border-gray-100">

<button
    type="button"
    onclick="submitForm()"
    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">
    Save
    <i class="ri-check-line"></i>
</button>

                </div>

            </div>

            <!-- SUCCESS -->
            <div id="successMsg" class="hidden text-center py-10">

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

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

                </div>

                <h2 class="text-2xl font-bold text-gray-900 mb-2">
                    Time Log Added!
                </h2>

                <p class="text-sm text-gray-500 mb-5">
                   Time log has been saved successfully.
                </p>

                <button
                    onclick="resetForm()"
                    class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-lg shadow-violet-200">

                    <i class="ri-add-line"></i>
                    Add Another Time Log

                </button>

            </div>

        </div>

    </div>

    <script>

const searchableSelects = [
    '#project',
    '#taskType',
    '#billableType',
    '#status'
];

        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>';
                        }
                    }
                });

            }

        });

        /* SUBMIT */

/* SUBMIT */

function submitForm(){

    const logDate = document.getElementById('logDate').value;
    const project = document.getElementById('project').value;
    const taskName = document.getElementById('taskName').value.trim();
    const taskType = document.getElementById('taskType').value;
    const startTime = document.getElementById('startTime').value;
    const endTime = document.getElementById('endTime').value;
    const hours = document.getElementById('hours').value;
    const billableType = document.getElementById('billableType').value;
    const status = document.getElementById('status').value;

    if(logDate === ''){
       Swal.fire({
        icon: 'warning',
        title: 'Warning',
        text: 'Please select date',
        width: '350px',
        padding: '15px',
        confirmButtonText: 'OK',
        confirmButtonColor: '#8b5cf6',
        customClass: {
            popup: 'rounded-xl',
            title: 'text-base',
            htmlContainer: 'text-sm',
            confirmButton: 'px-3 py-1'
        }
    });
        return;
    }

    if(project === ''){
        Swal.fire({
            icon: 'warning',
            title: 'Warning',
            text: 'Please select project',
            width: '350px',
            padding: '15px',
            confirmButtonText: 'OK',
            confirmButtonColor: '#8b5cf6',
            customClass: {
                popup: 'rounded-xl',
                title: 'text-base',
                htmlContainer: 'text-sm',
                confirmButton: 'px-3 py-1'
            }
        });
        return;
    }

    if(taskName === ''){
        Swal.fire({
            icon: 'warning',
            title: 'Warning',
            text: 'Please select  task name',
            width: '350px',
            padding: '15px',
            confirmButtonText: 'OK',
            confirmButtonColor: '#8b5cf6',
            customClass: {
                popup: 'rounded-xl',
                title: 'text-base',
                htmlContainer: 'text-sm',
                confirmButton: 'px-3 py-1'
            }
        });
        return;
    }

    if(taskType === ''){
        Swal.fire({
            icon: 'warning',
            title: 'Warning',
            text: 'Please select task type',
            width: '350px',
            padding: '15px',
            confirmButtonText: 'OK',
            confirmButtonColor: '#8b5cf6',
            customClass: {
                popup: 'rounded-xl',
                title: 'text-base',
                htmlContainer: 'text-sm',
                confirmButton: 'px-3 py-1'
            }
        });
        return;
    }

    if(startTime === ''){
        Swal.fire({
            icon: 'warning',
            title: 'Warning',
            text: 'Please select start time',
            width: '350px',
            padding: '15px',
            confirmButtonText: 'OK',
            confirmButtonColor: '#8b5cf6',
            customClass: {
                popup: 'rounded-xl',
                title: 'text-base',
                htmlContainer: 'text-sm',
                confirmButton: 'px-3 py-1'
            }
        });
        return;
    }

    if(endTime === ''){
         Swal.fire({
            icon: 'warning',
            title: 'Warning',
            text: 'Please select end time',
            width: '350px',
            padding: '15px',
            confirmButtonText: 'OK',
            confirmButtonColor: '#8b5cf6',
            customClass: {
                popup: 'rounded-xl',
                title: 'text-base',
                htmlContainer: 'text-sm',
                confirmButton: 'px-3 py-1'
            }
        });
        return;
    }

    if(hours === ''){
         Swal.fire({
            icon: 'warning',
            title: 'Warning',
            text: 'Please select total hours',
            width: '350px',
            padding: '15px',
            confirmButtonText: 'OK',
            confirmButtonColor: '#8b5cf6',
            customClass: {
                popup: 'rounded-xl',
                title: 'text-base',
                htmlContainer: 'text-sm',
                confirmButton: 'px-3 py-1'
            }
        });
        return;
    }

    if(billableType === ''){
         Swal.fire({
            icon: 'warning',
            title: 'Warning',
            text: 'Please select billable type',
            width: '350px',
            padding: '15px',
            confirmButtonText: 'OK',
            confirmButtonColor: '#8b5cf6',
            customClass: {
                popup: 'rounded-xl',
                title: 'text-base',
                htmlContainer: 'text-sm',
                confirmButton: 'px-3 py-1'
            }
        });
        return;
    }

    if(status === ''){
         Swal.fire({
            icon: 'warning',
            title: 'Warning',
            text: 'Please select status',
            width: '350px',
            padding: '15px',
            confirmButtonText: 'OK',
            confirmButtonColor: '#8b5cf6',
            customClass: {
                popup: 'rounded-xl',
                title: 'text-base',
                htmlContainer: 'text-sm',
                confirmButton: 'px-3 py-1'
            }
        });
        return;
    }

  Swal.fire({
    icon: 'success',
    title: 'Saved!',
    text: 'Time Log Added Successfully',
    confirmButtonColor: '#8b5cf6',
    width: '350px',
    padding: '1rem',
    customClass: {
        popup: 'rounded-2xl',
        title: 'text-lg',
        htmlContainer: 'text-sm',
        confirmButton: 'px-4 py-2'
    }
    }).then(() => {

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

    });
}


/* MOBILE VALIDATION */

        function resetForm(){

            document.querySelectorAll('input')
                .forEach(el => el.value = '');

            document.querySelectorAll('select')
                .forEach(el => {

                    el.selectedIndex = 0;

                    if(el.tomselect){

                        el.tomselect.clear();

                        el.tomselect.refreshOptions(false);
                    }

                });

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

            document.getElementById('successMsg')
                .classList.add('hidden');
        }

    </script>

</body>

</html>

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