@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' => 'Timeline'])
            <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 mt-2" id="basic-info" style="background-color:#FFFFFF;width: 80%;margin: auto;">
        <div class="card-body mt-1">
            <h3 class="text-center mt-4">Project Details</h3>

            <form>
    <div class="row mb-3">
        <div class="col-md-6">
            <label>Project Name</label>
            <input type="text" class="form-control" value="{{ $projects->project_name }}" readonly>
        </div>
        <div class="col-md-6">
            <label>Project Code</label>
            <input type="text" class="form-control" value="{{ $projects->project_code }}" readonly>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <label>Task Count</label>
            <input type="text" class="form-control" value="{{ $projects->task_count }}" readonly>
        </div>
        <div class="col-md-6">
            <label>Status</label>
            <input type="text" class="form-control"
                value="{{ $projects->status == 0 ? 'Pending' : ($projects->status == 1 ? 'Process' : 'Finish') }}"
                readonly>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <label>Customer</label>
            <input type="text" class="form-control" value="{{ $projects->customer_name }}" readonly>
        </div>
        <div class="col-md-6">
            <label>Operational Division</label>
            <input type="text" class="form-control" value="{{ $projects->section_type }}" readonly>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <label>Customer Code</label>
            <input type="text" class="form-control" value="NT00CC01" readonly>
     
            <!-- <input type="text" class="form-control" value="{{ $projects->estimation_cost }}" readonly> -->
        </div>
        <div class="col-md-6">
            <label>Start Date</label>
            <input type="text" class="form-control" value="{{ $projects->start_date }}" readonly>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <label>End Date</label>
            <input type="text" class="form-control" value="{{ $projects->end_date }}" readonly>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-12 text-center">
            <a href="{{ route('projectview') }}" class="btn btn-secondary mt-3">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>
    </div>
</form>

        </div>
    </div>

    {{-- <div id="addProjectModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form>
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Add New Project</h5>
                    </div>
                    <div class="modal-body">
    <div class="form-group">
        <label for="project_name">Project Name</label>
        <input type="text" id="project_name" name="project_name" class="form-control" required value="{{ $project->project_name }}">
    </div>
   
    <!-- First Select: Project Section -->
    <div class="form-group">
        <label for="project_section">Project Section</label>
        <input type="text" id="project_section" name="project_section" class="form-control" value="{{ $section->section_type }}" readonly>
    </div>

    <!-- Customer Section (Show customer name if it's external) -->
    @if($project->project_type === 'External')
        <div class="form-group">
            <label for="customer">Customer Name</label>
            <input type="text" id="customer" name="customer" class="form-control" value="{{ $customer->customer_name }}" readonly>
        </div>
    @endif

    <!-- Project Code -->
    <div class="form-group">
        <label for="project_code">Project Code</label>
        <input type="text" id="project_code" name="project_code" class="form-control" readonly value="{{ $project->project_code }}">
    </div>

    <!-- Project Type -->
    <div class="form-group">
        <label for="project_type">Project Type</label>
        <select id="project_type" name="project_type" class="form-control">
            <option value="External" {{ $project->project_type === 'External' ? 'selected' : '' }}>External</option>
            <option value="Internal" {{ $project->project_type === 'Internal' ? 'selected' : '' }}>Internal</option>
        </select>
    </div>

    <!-- External Fields (Visible only when project type is 'External') -->
    <div id="external_fields" style="{{ $project->project_type === 'External' ? '' : 'display: none;' }}">
        <div class="form-group">
            <label for="customer">Customer</label>
            <select id="customer" name="customer" class="form-control">
                <option value="">Select Customer</option>
                @foreach ($customer as $cust)
                    <option value="{{ $cust->id }}" {{ $cust->id == $project->customer_id ? 'selected' : '' }}>{{ $cust->customer_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <label for="estimation_cost">Project Cost</label>
            <input type="text" id="estimation_cost" name="estimation_cost" class="form-control" value="{{ $project->estimation_cost }}">
        </div>
    </div>

    <!-- Task Count and Dynamic Task Inputs -->
    <div class="form-group">
        <label for="task_count">Number of Tasks</label>
        <input type="number" id="task_count" name="task_count" class="form-control" placeholder="Enter number of tasks" min="1" value="{{ old('task_count') }}">
    </div>

    <div id="tasks_container" class="mt-3"></div>
</div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">Save </button>
                        <button type="button" class="btn btn-secondary" onclick="$('#addProjectModal').modal('hide')">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div> --}}
    {{-- <div class="modal-footer">
        <button type="submit" class="btn btn-success">Save </button>
        <button type="button" class="btn btn-secondary" onclick="$('#addProjectModal').modal('hide')">Cancel</button>
    </div> --}}
 {{-- <div class="form-group">
                            <label for="customer">customer</label>
                            <input type="text" id="customer" name="customer" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="project_cost">Project Cost</label>
                            <input type="text" id="project_cost" name="project_cost" class="form-control" required>
                        </div> --}}
                        @endsection
@push('css')
    <style>
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        .table th, .table td {
            padding: 10px;
            text-align: center;
            vertical-align: middle;
        }
        .table thead {
            background-color: #57A6A1;
            color: white;
        }
        .table tbody tr:hover {
            background-color: #f1f1f1; /* Light gray background on hover */
        }
        .btn {
            width: 100px;
            padding: 5px 10px;
            font-size: 14px;
            border-radius: 4px;
            display: inline-block;
        }
        .btn-view, .btn-edit {
            background-color: #3E7B27;
            color: white;
            border: none;
        }
        .btn-view:hover, .btn-edit:hover {
            background-color: #3E7B27;
        }
        .btn-view {
            background-color: #4635B1; /* Change the background color to #4635B1 */
            color: white;
            border: none;
        }

        .btn-view:hover {
            background-color: #362a91; /* Change the hover color to a slightly darker shade */
        }

        .btn-delete {
            background-color: #dc3545; /* Red background for delete */
            color: white;
            border: none;
        }
        .btn-delete:hover {
            background-color: #c82333; /* Darker red on hover */
        }
        .text-middle {
            vertical-align: middle;
        }
        .dropdown-menu {
            min-width: 200px;
        }
    </style>
@endpush

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.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>
        $(document).ready(function () {
            // Short code mapping
            const sectionShortCodes = {
                automation: 'auto',
                software: 'soft',
                autocad: 'cad',
                embedded: 'emb'
            };

            function generateProjectCode() {
                const section = $('#project_section').val();
                const type = $('#project_type').val();

                if (section && type) {
                    const shortCode = sectionShortCodes[section] || section;
                    const typeCode = type.toLowerCase().slice(0, 3); // ext or int
                    const generatedCode = `${shortCode}-${typeCode}`; // Customize here if needed
                    $('#project_code').val(generatedCode);
                } else {
                    $('#project_code').val('');
                }
            }

            // Trigger on change
            $('#project_section, #project_type').on('change', function () {
                generateProjectCode();
            });
        });
    </script> --}}

<!-- jQuery to handle dynamic short code display -->
<script>
    $(document).ready(function () {
        $('#project_section').on('change', function () {
            var selected = $(this).val();
            var shortCode = "";

            // Determine short code based on selected option
            if (selected === "automation") {
                shortCode = "auto";
            } else if (selected === "software") {
                shortCode = "soft";
            } else if (selected === "autocad") {
                shortCode = "cad";
            } else if (selected === "embedded") {
                shortCode = "emb";
            }

            if (shortCode) {
                $('#project_short_code').html('<option value="' + shortCode + '">' + shortCode + '</option>');
                $('#short_code_wrapper').show();
            } else {
                $('#short_code_wrapper').hide();
            }
        });
    });
</script>
    <script>

        $(document).ready(function () {
            $('#project_type').on('change', function () {
                const selected = $(this).val();
                if (selected === 'External') {
                    $('#external_fields').show();
                } else {
                    $('#external_fields').hide();
                }
            });

        });
    </script>
    <script>
        function viewproject(project_id) {
            window.location.href = '/viewproject/' + project_id;
        }

        function editProject(project_id, project_name) {
            // Open a custom confirmation dialog with a text box
            Swal.fire({
                title: 'Are you sure you want to edit this project?',
                text: 'Please type the project name to confirm edit.',
                icon: 'warning',
                input: 'text',
                inputPlaceholder: 'Enter project name',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, edit it!',
                preConfirm: (inputValue) => {
                    if (inputValue !== project_name) {
                        Swal.showValidationMessage('The project name does not match!');
                        return false;
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = '/editproject/' + project_id; // Redirect to the edit page
                }
            });
        }

        // function openAddProjectModal() {
        //     $('#addProjectModal').modal('show'); // Show the modal using Bootstrap
        // }
        function openAddProjectModal() {
        $('#addProjectModal').modal('show');
    }
        const prefix = "NR24";
        let currentNumber = 100; // Initial number

        // Fetch the field
        const projectNameInput = document.getElementById("project_code");

        // Simulate auto-increment logic
        function generateNextProjectName() {
            const nextProjectName = prefix + currentNumber;
            projectNameInput.value = nextProjectName; // Set the value of the input
            currentNumber++; // Increment for the next use
        }

        function editProject(project_id, project_name) {
    Swal.fire({
        title: 'Edit Project Name',
        text: 'You can change the project name below:',
        icon: 'warning',
        input: 'text', // Input box for user to type the new project name
        inputValue: project_name, // Pre-fill the input with the current project name
        inputPlaceholder: 'Enter new project name',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Save Changes',
    }).then((result) => {
        if (result.isConfirmed) {
            // Proceed with the update request
            $.ajax({
                url: `/project/${project_id}`, // Backend route
                type: 'PUT', // Specify the HTTP method as PUT
                data: {
                    _token: '{{ csrf_token() }}', // CSRF token
                    project_name: result.value, // User-inputted name
                },
                success: function (response) {
                    if (response.success) {
                        Swal.fire(
                            'Updated!',
                            response.message,
                            'success'
                        ).then(() => {
                            location.reload(); // Reload the page
                        });
                    } else {
                        Swal.fire(
                            'Error!',
                            response.message || 'Failed to update the project.',
                            'error'
                        );
                    }
                },
                error: function (xhr) {
                    Swal.fire(
                        'Error!',
                        xhr.responseJSON?.message || 'Something went wrong. Please try again.',
                        'error'
                    );
                }
            });
        }
    });
}


        // Automatically set the value when the page loads
        document.addEventListener("DOMContentLoaded", () => {
            generateNextProjectName();
        });

        // document.getElementById('task_count').addEventListener('input', function () {
        //     const count = parseInt(this.value) || 0;
        //     const tasksContainer = document.getElementById('tasks_container');
        //     tasksContainer.innerHTML = ''; // Clear previous task fields

        //     for (let i = 1; i <= count; i++) {
        //         const taskField = `
        //             <div class="form-group">
        //                 <label for="task_name${i}">Task ${i}</label>
        //                 <input type="text" id="task_name${i}" name="task_names[]" class="form-control" placeholder="Enter task ${i} name" required>
        //             </div>
        //         `;
        //         tasksContainer.insertAdjacentHTML('beforeend', taskField);
        //     }
        // });

        $(document).ready(function () {
        $('#addProjectModal form').on('submit', function (e) {
            e.preventDefault();

            var task_name = $('#task_name').val();
            var task_count = $('#task_count').val();
            // var start_date = $('#start_date').val();
            var project_name = $('#project_name').val();
            var project_code = $('#project_code').val();
            var project_section = $('#project_section').val();
            var project_type = $('#project_type').val();
            if (!task_count) {
                // Swal.fire({
                //     icon: 'warning',
                //     title: 'Validation Error',
                //     text: 'Please select a task count.',
                // });
                // return;
            }

            var fd = new FormData(this);
            fd.append('_token', '{{ csrf_token() }}');

            $.ajax({
                url: '{{ route('project.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 () {
                            $('#addProjectModal').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 deleteProject(project_id, project_name) {
    Swal.fire({
        title: `Are you sure you want to deactivate "${project_name}"?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `/project/deactivate/${project_id}`, // Backend route
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                },
                success: function (response) {
                    if (response.success) {
                        Swal.fire(
                            'Deactivated!',
                            response.message,
                            'success'
                        ).then(() => {
                            location.reload(); // Reload page to reflect changes
                        });
                    } else {
                        Swal.fire(
                            'Error!',
                            response.message || 'Failed to deactivate the project.',
                            'error'
                        );
                    }
                },
                error: function (xhr) {
                    Swal.fire(
                        'Error!',
                        xhr.responseJSON?.message || 'Something went wrong. Please try again.',
                        'error'
                    );
                },
            });
        }
    });
}

    </script>
    <script>
    document.addEventListener("DOMContentLoaded", () => {
        const taskCountInput = document.getElementById('task_count');
        const tasksContainer = document.getElementById('tasks_container');

        taskCountInput.addEventListener('input', function () {
            const count = parseInt(this.value) || 0;
            tasksContainer.innerHTML = ''; // Clear existing

            for (let i = 1; i <= count; i++) {
                const taskField = document.createElement('div');
                taskField.classList.add('form-group', 'mb-2');
                taskField.innerHTML = `
                    <label for="task_name${i}">Task ${i}</label>
                    <input type="text" id="task_name${i}" name="task_names[]" class="form-control" placeholder="Enter task ${i} name" required>
                `;
                tasksContainer.appendChild(taskField);
            }
        });
    });
</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 assignToUser(){
            console.log("hello");
        }

        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


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

        // Only run this logic if both elements exist
        if (dropdown && dropdownMenu) {
            // 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>

    <script>

$(document).ready(function () {
    $('#project_section').on('change', function () {
        let sectionId = $(this).val();

        if (!sectionId) return;

        $.ajax({
            url: '{{ route("generate.project.code") }}',
            type: 'GET',
            data: { section_id: sectionId },
            success: function (response) {
                $('#project_code').val(response.project_code);
            },
            error: function () {
                alert('Error generating project code');
            }
        });
    });
});
</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>