@extends('layouts.app')

@section('content')
    <nav class="navbar navbar-main navbar-expand-lg  px-0 mx-4 shadow-none border-radius-xl z-index-sticky " id="navbarBlur"
        data-scroll="false">
        <div class="container-fluid py-1 px-3">
            @include('layouts.navbars.auth.topnav', ['title' => 'Task'])
            <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none ">
                <a href="javascript:;" class="nav-link p-0">
                    <div class="sidenav-toggler-inner">
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                    </div>
                </a>
            </div>
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                    <div class="input-group">
                        <span class="input-group-text text-body"><i class="fas fa-search" aria-hidden="true"></i></span>
                        <input type="text" class="form-control" placeholder="Type here...">
                    </div>
                </div>
                <ul class="navbar-nav  justify-content-end">
                    <li class="nav-item d-flex align-items-center">
                        @include('auth.logout')
                    </li>
                    <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="iconNavbarSidenav">
                            <div class="sidenav-toggler-inner">
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item px-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0">
                            <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                        </a>
                    </li>
                    <li class="nav-item position-relative pe-2 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="dropdownMenuButton"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell cursor-pointer"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
                            <li class="mb-2">
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="my-auto">
                                            <img src="/assets/img/team-2.jpg" class="avatar avatar-sm  me-3 "
                                                alt="user image">
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                <span class="font-weight-bold">New message</span> from Laur
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i>
                                                13 minutes ago
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="mb-2">
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="my-auto">
                                            <img src="/assets/img/small-logos/logo-spotify.svg"
                                                class="avatar avatar-sm bg-gradient-dark  me-3 " alt="logo spotify">
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                <span class="font-weight-bold">New album</span> by Travis Scott
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i>
                                                1 day
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item border-radius-md" href="javascript:;">
                                    <div class="d-flex py-1">
                                        <div class="avatar avatar-sm bg-gradient-secondary  me-3  my-auto">
                                            <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink">
                                                <title>credit-card</title>
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF"
                                                        fill-rule="nonzero">
                                                        <g transform="translate(1716.000000, 291.000000)">
                                                            <g transform="translate(453.000000, 454.000000)">
                                                                <path class="color-background"
                                                                    d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z"
                                                                    opacity="0.593633743"></path>
                                                                <path class="color-background"
                                                                    d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z">
                                                                </path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="text-sm font-weight-normal mb-1">
                                                Payment successfully completed
                                            </h6>
                                            <p class="text-xs text-secondary mb-0">
                                                <i class="fa fa-clock me-1"></i>
                                                2 days
                                            </p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- <div class="card" id="basic-info"style="background-color:lightgray;"> -->
    
<div class="card mt-2" id="basic-info" style="background-color:#FFFFFF;width: 80%;margin: auto;">
    <div class="card-body mt-1  ">
        <!-- <div class="card card-custom"> -->
        <h3 class=" text-center mt-2  "> @foreach ($projectname as $project) {{ $project->project_name }}@endforeach</h3>
               <div id="divNewUserButton" class="row " style="margin-left:85%;">
                    <div class="col-lg-12 mt-4 ">                
                        <button id="btnAddNewTask" onclick="openAddTaskModal();" class="btn btn-icon5  text-white" style="background-color:#B17457;"style="color:white;" type="button">
                            <span class="btn-inner--icon"><i class="fas fa-plus"></i> </span>
                            <span class="btn-inner--text ms-1">Add  Task</span>
                        </button>  
                    </div>
                </div>
            <div class="table-responsive">
               <table class="table" id="workOrderTable">
                    <thead class=" text-white"style="background-color:#57A6A1;" >
                        <tr>
                            <th class="text-sm text-center">
                                Task Name
                            </th>
                            <th class="text-sm text-center">
                                UserName
                            </th>
                           
                            <th class="text-sm text-center">
                                Status
                            </th>
                            <th class="text-sm text-center">
                               Action
                            </th>
                        </tr>
                    </thead>
                                   
                    <tbody>
                        @foreach ($taskdetails as $task)
                            <tr class="mt-2">
                                <td class="text-sm text-center font-weight-normal text-middle">{{ $task->task_name }}</td>
                                <td class="text-sm text-center font-weight-normal text-middle">
                                    @if(!empty($task->firstname))
                                        {{ $task->firstname }}
                                    @else
                                        <i class="fas fa-plus"
                                        style="cursor: pointer;color:#8D0B41;"
                                        onclick='showAssignUserModal("{{ $task->id }}", "{{ $task->task_name }}");'>
                                        </i>
                                    @endif
                                </td>
                                <td class="text-sm text-center font-weight-normal">
                                    @php
                                        $statuses = [
                                            0 => 'New',
                                            1 => 'In Progress',
                                            2 => 'Completed',
                                            3 => 'Send',
                                            4 => 'Waiting',
                                            5 => 'Deactivate',
                                            6 => 'Yet to Start',
                                            7 => 'Yet to Order',
                                            8 => 'Yet to Check',
                                            9 => 'Ordered',
                                        ];
                                    @endphp
                                    {{ $statuses[$task->status] ?? 'New' }}
                                </td>

                                                            
                                                                <!-- <td class="text-sm text-center font-weight-normal text-middle">{{ $task->id }}</td> -->
                                <td class="text-sm text-center font-weight-normal text-middle">
                                    @if(!empty($task->username))
                                        <button class="btn btn-icon btn-2 mb-0 me-1" style="background-color:#B17457;"
                                            type="button" onclick='updateproject("{{ $task->id }}");'>
                                            <span class="btn-inner--icon" style="color:white;">
                                                <i class="fa fa-eye"></i> Update
                                            </span>
                                        </button>                               
                                        @else
                                        <button class='btn btn-icon btn-2 mb-0 me-1' type='button' style="background-color:#B17457; color:white;"
                                            onclick='showAssignUserModal("{{ $task->id }}", "{{ $task->task_name }}");'>
                                            <span class='btn-inner--icon' style="color:white;">
                                                <i class='fa fa-eye'></i> Assign To User
                                            </span>
                                        </button>
                                    @endif
                                    <button style="background-color:#004A67;" class="btn btn-icon btn-2 btn-info mb-0 me-1" type="button" onclick="edittask({{ $task->id }})">
                                        <span class="btn-inner--icon"><i class="fa fa-edit"></i> </span>
                                    </button>

                                    <button class="btn btn-icon btn-2 btn-danger mb-0 me-1" type="button" onclick="updateTaskAction({{ $task->id }})">
                                        <span class="btn-inner--icon"><i class="fa fa-trash"></i></span>
                                    </button>
                                </td>
                            </tr>
                            <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

                                <!-- Edit Task Modal -->
                            <div class="modal fade" id="editTaskModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="editTaskModalLabel">Edit Task</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form id="editTaskForm" method="POST" action="{{ url('/save-task') }}">
                                                @csrf
                                                <!-- Task Name Field -->
                                                <div class="mb-3">
                                                    <label for="editTaskName" class="form-label">Task Name</label>
                                                    <input type="text" class="form-control" id="editTaskName" name="task_name">
                                                    <input type="hidden" class="form-control" id="editTaskNameid" name="editTaskNameid">
                                                </div>
                                                <!-- User Selection Dropdown -->
                                                <div class="mb-3">
                                                    <label for="editAssignedUser" class="form-label">Assigned User</label>
                                                    <select class="form-control" id="editAssignedUser" name="assigned_user_id">
                                                        <option value="">Select User</option>
                                                        @foreach ($userdetails as $user)
                                                            <option value="{{ $user->id }}">{{ $user->username }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary" onclick="saveTaskChanges();">Save Changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        @endforeach
                    </tbody>
                </table>
            </div>
            <div id="noDataMessage" class="container justify-content-center text-center" style="display: none;">
            @lang('words.nmresultsfound')
            </div>
        <!-- </div> -->
        </div>
    </div>



    <div id="addTaskModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="addTaskForm" name="addTaskForm"> <!-- Add ID & Name -->
                @csrf
                <input type="hidden" name="_token" value="{{ csrf_token() }}"> <!-- Fix CSRF -->

                <div class="modal-header">
                    <h5 class="modal-title">Add New Task</h5>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="project_name">Project Name</label>
                        @foreach ($projectname as $project) 
                            <input type="hidden" id="project_id" name="project_id" value="{{ $project->id }}">
                            <input type="text" id="project_name" class="form-control" value="{{ $project->project_name }}" readonly>
                        @endforeach
                    </div>
                    <div class="form-group">
                        <label for="project_name">Project Code</label>
                        @foreach ($projectname as $project) 
                            <!-- <input type="hidden" id="project_id" name="project_id" value="{{ $project->id }}"> -->
                            <input type="text" id="project_code"name="project_name" class="form-control" value="{{ $project->project_code }}" readonly>
                        @endforeach
                    </div>
                    <div class="form-group">
                        <label for="parent_id"> Project-Task-code</label>
                        <!-- <input type="hidden" id="project_id" name="project_id" value="{{ $project->id }}"> -->
                            <input type="text" id="project_name" class="form-control" value="{{ $project->project_code }}" readonly>
                    </div>
                    <div class="form-group">
                        <label for="parent_id">Parent  Task</label>
                        <select id="parent_id" name="parent_id" class="form-control" >
                            <option value="">Select a task</option>
                            @foreach ($taskdetails as $task)
                                <option value="{{ $task->id }}">{{ $task->task_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="task_name">Task Name</label>
                        <input type="text" id="task_name" name="task_name" class="form-control" placeholder="Enter task name" required>
                    </div>
                    <div class="form-group">
                        <label for="user_name">Assign To</label>
                        <select id="user_name" name="user_name" class="form-control" >
                            <option value="">Select a user</option>
                            @foreach ($userdetails as $user)
                                <option value="{{ $user->id }}">{{ $user->firstname }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="start_date">Start Date</label>
                        <input type="date" id="start_date" name="start_date"class="form-control"  >
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Save Task</button>
                    <button type="button" class="btn btn-secondary" onclick="$('#addTaskModal').modal('hide')">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

   




<div class="modal fade" id="assignUserModal" tabindex="-1" aria-labelledby="assignUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignUserModalLabel">Assign Task to User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="assignTaskForm">
                    @csrf
                    <!-- Task Name Field -->
                    <div class="mb-3">
                        <label for="taskName" class="form-label">Task Name</label>
                        <input type="text" class="form-control" id="taskName" name="taskName" readonly>
                    </div>
                    <!-- User Selection Dropdown -->
                    <div class="mb-3">
                        <label for="assignedUser" class="form-label">Assign to User</label>
                        <select class="form-control" id="assignedUser" name="assignedUser">
                            @foreach ($userdetails as $user)
                                <option value="{{ $user->id }}">{{ $user->firstname }}</option>
                            @endforeach
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" onclick="assignToUser();">Assign</button>
            </div>
        </div>
    </div>
</div>







<div class="modal fade" id="updateTaskModal" tabindex="-1" aria-labelledby="updateTaskModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
    @csrf
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskModalLabel">Update Task</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="updateTaskForm">
                    @csrf
                    <div class="mb-3">
                        <label for="taskName" class="form-label">Task Name</label>
                        <input type="text" class="form-control" id="taskName" name="taskName" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="assignedUser" class="form-label">Assigned User</label>
                        <select class="form-control" id="assignedUser" name="assignedToUserId">
                            <option value="">Select User</option>
                            @foreach ($userdetails as $user)
                                <option value="{{ $user->id }}">{{ $user->firstname }}</option>
                            @endforeach
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="saveTaskDetails();">Save Changes</button>
            </div>
        </div>
    </div>
</div>
@endsection




@push('css')
    <style>
        .choices {
            margin-bottom: 0;
        }
       
        .text-middle
        {
            vertical-align:middle;
        }
    </style>
    
@endpush
@push('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Bootstrap JS (for modal functionality) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

        <script src="/assets/js/plugins/choices.min.js"></script>
        <script src="/assets/js/core/jquery.min.js"></script>
        <script src="/assets/js/plugins/sweetalert.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            function profileSetting(user){
            window.location.href = "/profileView/"+user;
        }
   
        function openAddTaskModal() {
            $('#addTaskModal').modal('show'); // Show the modal using Bootstrap
        }

function updateTaskAction(taskId) {
    Swal.fire({
        title: 'Are you sure?',
        text: "Do you really want to delete this task?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route('update-task-action') }}', // Ensure the route is correct
                type: 'POST',
                data: {
                    task_id: taskId,
                    _token: '{{ csrf_token() }}' // Include CSRF token for security
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Deleted!',
                            text: response.message
                        }).then(() => {
                            location.reload(); // Reload the page or update the table dynamically
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Something went wrong. Please try again.'
                    });
                }
            });
        }
    });
}
    function updateproject(task_id) {
        console.log(task_id)
        window.location.href = '/updateproject/' +task_id;
    }
    function updateuserproject(task_id) {
        console.log(task_id)
        window.location.href = '/updateuserproject/' +task_id;
    }
   
    function cancelEntry()
    {
        $("#divNewUserButton").show();
        $("#divNewUserFields").hide(function () {
            $('#company_name').prop('disabled', false);
           });
    }
    $(document).ready(function () {
    $('#addTaskForm').on('submit', function (e) {  // Correctly target the form
        e.preventDefault(); // Prevent default form submission

        // Fetch input values
        var task_name = $('#task_name').val();
        var assignedToUserId = $('#user_name').val();
        var parent_id = $('#parent_id').val();
        var parent_task = $('#parent_task').val();
        var start_date = $('#start_date').val();
        var project_code = $('#project_code').val();
            console.log(project_code);
        // Validate input fields
        if (!task_name.trim()) {
            Swal.fire({
                icon: 'warning',
                title: 'Validation Error',
                text: 'Task name is required.',
            });
            return;
        }
        // if (!assignedToUserId) {
        //     Swal.fire({
        //         icon: 'warning',
        //         title: 'Validation Error',
        //         text: 'Please select a user.',
        //     });
        //     return;
        // }

        // Prepare FormData for AJAX
        var fd = new FormData(this);

        $.ajax({
            url: '{{ route('tasks.store') }}',
            type: 'POST',
            data: fd,
            contentType: false,
            processData: false,
            success: function (response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: response.message,
                    }).then(function () {
                        $('#addTaskModal').modal('hide');
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Failed to add task.',
                    });
                }
            },
            error: function (xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'Something went wrong. Please try again.',
                });
            },
        });
    });
});




function edittask(id) {
    // Fetch task details by task id using AJAX
    $.ajax({
        url: '/task/details/' + id, // Replace task_id with id
        type: 'GET',
        success: function(response) {
            // Assuming the response contains the task name and the assigned user ID
            $('#editTaskName').val(response.task_name); // Populate task name
            $('#editAssignedUser').val(response.user_id); // Populate assigned user
            $('#editTaskNameid').val(id);

            // Show the modal
            $('#editTaskModal').modal('show');
        },
        error: function() {
            Swal.fire({
                title: 'Error!',
                text: 'Error fetching task details.',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }
    });
}

// Save task changes
function saveTaskChanges() {
    // Get values from form fields
    var taskname = $('#editTaskName').val();
    var userid = $('#editAssignedUser').val();
    var taskid = $('#editTaskNameid').val();

    // Validate if both fields are filled
    if (!taskname || !userid) {
        Swal.fire({
            title: 'Validation Error!',
            text: 'Please provide both task name and assigned user.',
            icon: 'warning',
            confirmButtonText: 'OK'
        });
        return;
    }

    // Create FormData and append the data
    var formData = new FormData();
    formData.append('task_name', taskname);
    formData.append('user_id', userid);
    formData.append('editTaskNameid', taskid);
    formData.append('_token', '{{ csrf_token() }}');

    // Make the AJAX request
    fetch('/save-task', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}' // Add CSRF token here
        }
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    title: 'Success!',
                    text: 'Task updated successfully!',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    $('#editTaskModal').modal('hide');
                    // Optionally reload the table or update the UI here
                    location.reload(); // Reload the page to update the table
                });
            } else {
                Swal.fire({
                    title: 'Update Failed!',
                    text: 'Failed to update task. ' + data.message,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                title: 'Error!',
                text: 'An error occurred while updating the task.',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
}


function assignUserToTask() {
    const taskId = document.getElementById('assignTaskForm').getAttribute('data-task-id');
    const assignedUserId = document.getElementById('assignedUser').value;

    if (!assignedUserId) {
        alert("Please select a user to assign.");
        return;
    }

    // Make an AJAX call to update the task assignment
    fetch(`/assign-task-to-user`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
        },
        body: JSON.stringify({ taskId, assignedUserId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Task successfully assigned!");
            // Optionally reload the page or update the UI
        } else {
            alert("Failed to assign task. Please try again.");
        }
    })
    .catch(error => console.error('Error:', error));
}
// function edittask(taskId) {
   
//     window.location.href = "/taskupdate/" + taskId;
//     }
function assignToUser()
    {
       
        var assignedToUserId = $('#assignedUser').val();
        var assignedToUserName = $('#assignedUser option:selected').text();
           

        var taskName = $('#taskName').val();
        console.log(taskName)
        console.log(assignedToUserId)
        // var assignedToUserName = $('#user_name option:selected').text();
       
        if(parseInt(assignedToUserId) === 0)
        {
            $('#assignedUser').html('Please select username');
            $('#assignedUser').show();
            return;
        }
       
       
           
            var fd = new FormData();
           
            fd.append('taskName',taskName);
            fd.append('assignedToUserId',assignedToUserId);
           
            fd.append('_token','{{csrf_token()}}');
           
            $.ajax({
                 
                url: '{{route('assigntasktouser')}}',
                type: 'post',
                data:fd,
                contentType: false,
                processData: false,
                success: function(response){
                   
                    if (response.success)
                    {
                        Swal.fire({
                                    icon: 'success',
                                    title: 'Task',
                                    text:  'Task assigned to' + assignedToUserName,
                                    showCancelButton: false,
                                    customClass: {
                                        confirmButton: 'btn btn-success mx-2'
                                    },
                                    buttonsStyling: false
                                }).then(function (result) {
                                        window.location.href = "/projectview";
                                  });
                    }
                    else
                    {
                        Swal.fire({
                                icon: 'warning',
                                title: 'Task',
                                text: response.message,
                                showCancelButton: false,
                                customClass: {
                                    confirmButton: 'btn btn-success mx-2'
                                },
                                buttonsStyling: false
                            });
                    }
                   
                 
                   
                },
            });
       
    }


function showAssignUserModal(taskId, taskName) {
    // Populate modal fields
    document.getElementById('taskName').value = taskName;
    document.getElementById('assignedUser').value = ""; // Reset the dropdown
    // Store taskId for submission
    document.getElementById('assignTaskForm').setAttribute('data-task-id', taskId);

    // Show the modal
    let modal = new bootstrap.Modal(document.getElementById('assignUserModal'));
    modal.show();
}
    </script>
    <script>
function saveTaskDetails() {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const taskName = document.getElementById('taskName').value;
    const assignedToUserId = document.getElementById('assignedUser').value;
    fetch('/update-task-details', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            taskName,
            assignedToUserId,
        }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Task updated successfully!');
            const modal = bootstrap.Modal.getInstance(document.getElementById('updateTaskModal'));
            modal.hide();
        } else {
            alert('Error updating task: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An unexpected error occurred.');
    });
}
    </script>
<script>
   function start(){
       const sidenav = document.getElementById("sidenav");
    const toggleBtn = document.getElementById("toggleBtn");

    toggleBtn.addEventListener("click", () => {
      sidenav.classList.toggle("collapsed");
    });
}
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        }

                $(document).ready(function() {
                    var userid = $("#inUserId").val();

                    getUserRoles(userid);
                    function fetchWorkOrderCount() {
                $.ajax({
                    url: '/path/to/api/endpoint', // Replace with your actual API endpoint
                    method: 'GET',
                    success: function(data) {
                        // Assuming the data contains the work order count
                        if (data.workOrderCount && data.workOrderCount > 0) {
                            $('#menuWorkOrderHistory .nav-link-text').append('<span class="badge badge-pill badge-danger">' + data.workOrderCount + '</span>');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Failed to fetch work order count:', error);
                    }
                });
            }
            fetchWorkOrderCount();
        });
</script>
<script>
function updateRunningTime() {
        const timeLabel = document.getElementById('runningTime');
        const now = new Date();

        // Format the time (HH:mm:ss)
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        const formattedTime = `${hours}:${minutes}:${seconds}`;

        // Update the label
        timeLabel.textContent = formattedTime;
    }

    document.addEventListener('DOMContentLoaded', function () {
        // Initialize the time display
        updateRunningTime();

        // Update the time every second
        setInterval(updateRunningTime, 1000);
    });
        function showCheckInButton() {
            var locationSelect = document.getElementById("location");
            var btnCheckIn = document.getElementById("toggleCheckInOut");

            if (locationSelect.value !== "0") {
                btnCheckIn.style.display = "inline-block"; // Show the button when a location is selected
            } else {
                btnCheckIn.style.display = "none"; // Hide the button if no location is selected
            }
        }

function toggleCheckInOut() {
const button = document.getElementById("btnCheckInOut");
const currentStatus = button.getAttribute("data-status");

if (currentStatus === "checkin") {
// Perform Check-In Logic
performCheckIn().then(() => {
button.textContent = "Check Out";
button.classList.remove("btn-success");
button.classList.add("btn-danger");
button.setAttribute("data-status", "checkout");
}).catch((error) => {
console.error("Check-In Error:", error);
});
} else if (currentStatus === "checkout") {
// Perform Check-Out Logic
performCheckOut().then(() => {
button.textContent = "Checked Out";
button.classList.remove("btn-danger");
button.classList.add("btn-secondary");
button.disabled = true; // Disable button after check-out
}).catch((error) => {
console.error("Check-Out Error:", error);
});
}
}
document.addEventListener('DOMContentLoaded', function () {
        const locationDropdown = document.getElementById('location');
        const btnCheckInOut = document.getElementById('btnCheckInOut');

        // Initially hide the button if no location is selected
        if (locationDropdown && (!locationDropdown.value || locationDropdown.value === "0")) {
            btnCheckInOut.style.display = "none";
        }

        // Listen for changes on the location dropdown
        if (locationDropdown) {
            locationDropdown.addEventListener('change', function () {
                const selectedLocation = locationDropdown.value;

                if (selectedLocation && selectedLocation !== "0") {
                    // Show the button when a valid location is selected
                    btnCheckInOut.style.display = "inline-block";
                } else {
                    // Hide the button if no location is selected
                    btnCheckInOut.style.display = "none";
                }
            });
        }
    });

function performCheckIn() {
return new Promise((resolve, reject) => {
const locationId = $("#location").val();

if (locationId === "0" || locationId === "") {
Swal.fire({
icon: 'warning',
title: 'Location is required',
text: 'Please select a location before proceeding.',
showCancelButton: false,
customClass: {
confirmButton: 'btn btn-success mx-2',
},
buttonsStyling: false
});
reject();
return;
}

// Simulate a server call with setTimeout
setTimeout(() => {
window.location.href = "/attendance_update/" + locationId;
resolve();
}, 1000);
});
}

function performCheckOut() {
return new Promise((resolve, reject) => {
const locationId = $("input[name='location']").val();

if (locationId === "0" || locationId === "" || !locationId) {
Swal.fire({
icon: 'warning',
title: 'Location is required',
text: 'Please select a location before proceeding.',
showCancelButton: false,
customClass: {
confirmButton: 'btn btn-danger mx-2',
},
buttonsStyling: false
});
reject();
return;
}

// Simulate a server call with setTimeout
setTimeout(() => {
window.location.href = "/attendance_update/" + locationId;
resolve();
}, 1000);
});
}

</script>
    <script>
function profileSetting(user){
window.location.href = "/profileView/"+user;
}

var workOrderName = "";
var workAreaId = 0;
var workAreaName = "";
var startDateTxt = "";
var endDateTxt = "";
var workOrderId = 0;

function logins(){
console.log("hello");
}
function validateFileds(){
workAreaId =$("#selWorkarea").val();
if (workAreaId <= 0) {
$("#selWorkarea").focus();
Swal.fire({
icon: 'warning',
title: '@lang('Checkin')',
text: '@lang('Please Select the Location')',
//html: '<div class="form-group"><label class="form-label">Please select the workarea!</label></div>',
showCancelButton: false,
customClass: {
confirmButton: 'btn btn-success mx-2',
//cancelButton: 'btn btn-danger mx-2'
},
buttonsStyling: false
}).then(function (result) {

});
return;
}

if($("#startdate").val() == "")
{
Swal.fire({
icon: 'warning',
title: '@lang('words.workorder')',
text: '@lang('words.pleaseselectstartdate')',
//html: '<div class="form-group"><label class="form-label">Please Select EndDate </label></div>',
showCancelButton: false,
customClass: {
confirmButton: 'btn btn-success mx-2',
//cancelButton: 'btn btn-danger mx-2'
},
buttonsStyling: false
}).then(function (result) {

});
return;
}

startDateTxt =$("#startdate").val();

if($("#enddate").val() == "")
{
Swal.fire({
icon: 'warning',
title: '@lang('words.workorder')',
text: '@lang('words.pleaseselectenddate')',
//html: '<div class="form-group"><label class="form-label">Please Select EndDate </label></div>',
showCancelButton: false,
customClass: {
confirmButton: 'btn btn-success mx-2',
//cancelButton: 'btn btn-danger mx-2'
},
buttonsStyling: false
}).then(function (result) {

});

return;
}
endDateTxt =$("#enddate").val()
sendCreateRequest();
}

function sendCreateRequest()
{
var fd = new FormData();
fd.append('workOrderName',workOrderName);
fd.append('workAreaId',workAreaId);
fd.append('workAreaName',workAreaName);
fd.append('planned_startdate',startDateTxt);
fd.append('planned_enddate',endDateTxt);
fd.append('_token','{{csrf_token()}}');

$.ajax({
url: '{{ route('workorder_create') }}',
type: 'post',
data:fd,
contentType: false,
processData: false,
success: function(response){
workOrderId = response.workorderid;
Swal.fire({
icon: 'success',
title: workOrderName,
text: '@lang('words.workordercreatedsuccessfully')',
//html: '<div class="form-group"><label class="form-label">Work Order Name Already Exists.</label></div>',
showCancelButton: false,
customClass: {
confirmButton: 'btn btn-success mx-2'
},
buttonsStyling: false
}).then(function (result) {
window.location.href = "/home";
});
},
});
}

function assignToUsesr()
{
var assignedToUserId = $('#user_name').val();
var assignedToUserName = $('#user_name option:selected').text();
var location= $('#user_name').val();
if(parseInt(assignedToUserId) === 0)
{
$('#user_name_error').html('@lang('unsnbemt')');
$('#user_name_error').show();
return;
}

var workOrderId = $('#inWorkOrderId').val();

var fd = new FormData();
fd.append('workOrderId',workOrderId);
fd.append('assignedToUserId',assignedToUserId);

fd.append('_token','{{csrf_token()}}');
$.ajax({
url: '{{route('assignToUserPreproductionPost')}}',
type: 'post',
data:fd,
contentType: false,
processData: false,
success: function(response){

if (response.success)
{
Swal.fire({
icon: 'success',
title: '@lang('words.workorder')',
text: '@lang('words.wororderassign')' + assignedToUserName,
showCancelButton: false,
customClass: {
confirmButton: 'btn btn-success mx-2'
},
buttonsStyling: false
}).then(function (result) {
window.location.href = "/home_preproduction";
});
}
else
{
Swal.fire({
icon: 'warning',
title: '@lang('words.workorder')',
text: response.message,
showCancelButton: false,
customClass: {
confirmButton: 'btn btn-success mx-2'
},
buttonsStyling: false
});
}
},
});
}
    </script>

<script>
   function start(){
       const sidenav = document.getElementById("sidenav");
    const toggleBtn = document.getElementById("toggleBtn");

    toggleBtn.addEventListener("click", () => {
      sidenav.classList.toggle("collapsed");
    });
}
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        }

                $(document).ready(function() {
                    var userid = $("#inUserId").val();

                    getUserRoles(userid);
                    function fetchWorkOrderCount() {
                $.ajax({
                    url: '/path/to/api/endpoint', // Replace with your actual API endpoint
                    method: 'GET',
                    success: function(data) {
                        // Assuming the data contains the work order count
                        if (data.workOrderCount && data.workOrderCount > 0) {
                            $('#menuWorkOrderHistory .nav-link-text').append('<span class="badge badge-pill badge-danger">' + data.workOrderCount + '</span>');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Failed to fetch work order count:', error);
                    }
                });
            }
            fetchWorkOrderCount();
        });

        function getUserRoles(userid)
        {
            var fd = new FormData();

            fd.append('userid',userid);
            fd.append('_token','{{csrf_token()}}');

            $.ajax({

                url: '{{ route('getuserroleforid') }}',
                type: 'post',
                data:fd,
                contentType: false,
                processData: false,
                success: function(response){

                    if (response.success)
                    {
                        $(".sidemenuitem").hide();



                        var roles = response.roles;

                        console.log(roles);
                        var isAdmin = false;

                        for(var i=0;i<roles.length;i++)
                        {
                            if (roles[i].role_id==1)
                            {
                                console.log(roles[i]);
                                isAdmin=true;
                            }
                        }

                        if (isAdmin)
                        {

                            $("#details").show();


                            return;
                        }
                        else{

                            $("#menuAttendance").show();
                            $("#menuProject").show();
                            $("#ddd").show();
                        }
                        var companyDefaultUserId = company ? company.default_user_id : null;
                        for(var i=0;i<roles.length;i++)
                        {

                            if (roles[i].roleid==2)
                            {
                                $("#menuWorkOrderHistory").show();
                                $("#menuAttendance").show();
                                $("#menuProject").show();
                            }
                            if (roles[i].roleid==3)
                            {
                                $("#menuPreproduction").show();
                                if(preproductionCount == 0){
                                    $("#menuPreproductioncount").text(preproductionCount).hide();
                                }
                                else if (preproductionCount != null && !isNaN(preproductionCount))
                                {

                                    $("#menuPreproductioncount").text(preproductionCount).show();
                                }
                            }
                            if (roles[i].roleid==4)
                            {
                                $("#menuSurvey").show();
                                if(surveyCount == 0){
                                    $("#menuSurveycount").text(surveyCount).hide();
                                }
                                else if (surveyCount != null && !isNaN(surveyCount))
                                {

                                    $("#menuSurveycount").text(surveyCount).show();
                                }
                            }
                            if (roles[i].roleid==5)
                            {
                                $("#menuMapCreation").show();
                                if(mapCount == 0){
                                    $("#menuMapcount").text(mapCount).hide();
                                }
                                else if (mapCount != null && !isNaN(mapCount))
                                {

                                    $("#menuMapcount").text(mapCount).show();
                                }
                            }
                            if (roles[i].roleid==6)
                            {
                                $("#menuModelCreation").show();
                                if(modelCount == 0){
                                    $("#menuModelcount").text(modelCount).hide();
                                }
                                else if (modelCount != null && !isNaN(modelCount))
                                {
                                    $("#menuModelcount").text(modelCount).show();
                                }
                            }

                            if (roles[i].roleid==7)
                            {
                                $("#qc").show();
                                if(preqcCount==0){

                                    $("#menuPreqccount").text(preqcCount).hide();
                                }
                                else if (preqcCount != null && !isNaN(preqcCount))
                                {

                                    $("#menuPreqccount").text(preqcCount).show();
                                }
                                if(mapqcCount==0){

                                    $("#menuMapqccount").text(mapqcCount).hide();
                                }
                                else if (mapqcCount != null && !isNaN(mapqcCount))
                                {

                                    $("#menuMapqccount").text(mapqcCount).show();
                                }
                                if(modelqcCount==0)
                                {
                                   $("#menuModelqccount").text(modelqcCount).hide();
                                }
                                else if (modelqcCount != null && !isNaN(modelqcCount))
                                {

                                    $("#menuModelqccount").text(modelqcCount).show();
                                }
                                if(modelareaqcCount==0)
                                {
                                   $("#menuModelareaqccount").text(modelareaqcCount).hide();
                                }
                                else if (modelareaqcCount != null && !isNaN(modelareaqcCount))
                                {

                                    $("#menuModelareaqccount").text(modelareaqcCount).show();
                                }
                            }
                            if (roles[i].roleid==8)
                            {
                                $("#menumapattribute").show();

                            }
                            if (roles[i].roleid==7)
                            {
                                $("#menumodelstatus").show();

                            }
                            if (roles[i].roleid==9)
                            {
                                $("#menumodelareaattribute").show();
                                if(modelareaCount == 0){
                                    $("#menumodelareaattributecount").text(modelareaCount).hide();
                                }
                                else if (modelareaCount != null && !isNaN(modelareaCount))
                                {
                                    $("#menumodelareaattributecount").text(modelareaCount).show();
                                }
                            }
                        }
                        $("#menuDownloadDispatch").show();
                        $("#menuFinalDownload").show();
                        // $("#menuDownloadCADApp").show();
                    }
                },
            });
        }


        // Close the dropdown programmatically
document.addEventListener('click', (e) => {
    const dropdown = document.getElementById('profileDropdown');
    const dropdownMenu = document.querySelector('.dropdown-menu');

    // Check if clicked outside the dropdown
    if (!dropdown.contains(e.target) && !dropdownMenu.contains(e.target)) {
        const bsDropdown = bootstrap.Dropdown.getInstance(dropdownMenu);
        if (bsDropdown) {
            bsDropdown.hide();
        }
    }
});

    </script>
    <!-- Github buttons -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!-- Control Center for Soft Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="/assets/js/argon-dashboard.js"></script>
    <script src="/assets/js/core/datatables.min.js"></script>
<style>
    #confirmLeaveBtn {
        background-color: #0edae7;
        color: white;
        border: none; /* Remove the default border */
        cursor: pointer; /* Add a pointer cursor on hover */
        transition: background-color 0.3s ease; Smooth transition for background-color
    }

    #confirmLeaveBtn:hover {
        background-color: #218838; /* Darker green on hover */
    }
     .fc-today {
        margin-top: 20px;
        background-color: hsl(185, 100%, 44%) !important; /* Set the background color */
        color: white !important;          Ensure text is visible */
        border: 1px solid black; Black border around day cells */
     }
    .fc-day-leave {
        background-color: #FFCC00 !important; /* Yellow background for leave days */
         color: white !important; White text
    }


    #calendar {
        margin-top: 30%; /* Set the margin-top to 30px */
        border-radius: 5px; /* Optional: Rounded corners */
        max-width: 600px; /* Set the maximum width */
        margin: 0 auto; /* Center the calendar */
        height: 500px; /* Set the height */
    }
    #okLeaveBtn{
        margin-left: 45%;
        margin-top: 7px;
        background-color: red   ;
    }
    #okLeaveBtn:hover {
        background-color: rgb(219, 15, 49); /* Darker Blue on hover */
    }

  </style>
  <style>

    @media (min-width: 768px) {

      #confirmationModal .modal-dialog {
        margin-top: 200px;
      }
    }

    @media (max-width: 767px) {

      #confirmationModal .modal-dialog {
        margin-top: 200px;
      }
    }
  </style>

   </body>
</html>