@extends('layouts/acc_layout')
@section('title', '| Daily Task Process')
@section('content')
    <style>
        /* Increase the size of the checkboxes */
        .status-checkbox {
            width: 12px;
            height: 12px;
            transform: scale(1.5);
            margin: 0 10px 0 0;
            cursor: pointer;
        }

        .table>thead>tr>td:after,
        .table>thead>tr>th:after {
            height: 0px;
        }

        .panel-heading{
            border: none !important
        }


    </style>
     <div class="row">
        <div class="col-md-12">
            <div class="" style="">
                <div class="">
                    <div class="panel panel-default " style="background-color:#708090;">
                        <div class="panel-heading " style="padding-bottom:0px;">
                            <div class="panel-options">
                                {{-- <button id="printIcon" class="btn btn-info pull-right print-icon" style="">
                                    <i class="fa fa-print fa-lg" aria-hidden="true"> Print</i>
                                </button> --}}
                            </div>
                            <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Daily Task Process Status Submission</h3>
                            
                        </div>
                        <div class="row" style="display: flex; justify-content: center;">           
                            
                            
                            <div class="panel-body panelBodyView col-md-12" style="padding-top:0 !important;">
                                <hr style="margin-top:0">
                                <a href="{{ route('dailyTaskProcess.list') }}" class="btn btn-info pull-right addViewBtn"><i
                                    class="glyphicon glyphicon-th-list viewIcon">
                                    </i> Task Process List
                                </a>
                                {!! Form::open(['url' => '#', 'role' => 'form', 'class' => 'form-horizontal form-groups']) !!}
                                @if(count($tasksWithStatus) > 0)
                                    <div >
                                        <table class="table table-striped table-bordered" style="color:black;">
                                            <thead>
                                                <tr>
                                                    <th rowspan="2">SL</th>
                                                    <th rowspan="2">Task Name</th>
                                                    <th rowspan="2">Employee Name</th>
                                                    <th rowspan="2">Duration</th>
                                                    <th colspan="4">Task Condition</th>
                                                </tr>
                                                <tr>
                                                    <th style="padding:10px 2px;font-size:7px !important">Complete</th>
                                                    <th style="padding:10px 2px;font-size:7px !important">Pending</th>
                                                    <th style="padding:10px 2px;font-size:7px !important">In Progress</th>
                                                    <th style="padding:10px 2px;font-size:7px !important">N/A</th>
                                                </tr>
                                            </thead>
                                            @php
                                                $softwareDate = $formatDate->format('Y-m-d');
                                               
                                            @endphp
                                            @foreach ($tasksWithStatus as $key => $task)
                                                @php
                                                  
                                                    $employeeName = DB::table('hr_emp_general_info')->select('emp_name_english')->where('id', $task->emp_id_fk)->first();
                                                    // Check if condition is set and is 'overDate'
                                                    $trStyle = (isset($task->condition) && $task->condition === 'overDate') ? 'background-color: #ffcc00 !important;' : '';   
                                                @endphp
                                                <tr style="{{ $trStyle }}">
                                                    {!! Form::hidden('task_id[]', $task->id, ['id' => 'task_id_' . $task->id,]) !!}
                                                    {!! Form::hidden('department_id[]', $task->department_id, ['id' => 'department_id' . $task->id,]) !!}
                                                    {!! Form::hidden('module_id[]', $task->module_id, ['id' => 'module_id' . $task->id,]) !!}
                                                    {!! Form::hidden('date[]', $task->currentDate, ['id' => 'date_id' . $task->id,]) !!}
            
                                                    <td>{{$key + 1}}</td>
                                                    <td style="text-align: left;padding-left:5px">{{$task->task_name}}</td>
                                                    <td style="text-align: left;padding-left:5px">{{$employeeName->emp_name_english}}</td>
                                                    <td>{{$task->time}}</td>
                                                    <td style="width: 70px">
                                                        <!-- Complete -->
                                                        {!! Form::checkbox('status[' . $task->id . ']', 2, $task->status == 2, [
                                                            'id' => 'status_complete_' . $task->id,
                                                            'class' => 'form-check-input status-checkbox complete-checkbox',
                                                            'data-task-id' => $task->id,
                                                             'onclick' => ($task->emp_id_fk !== Auth::user()->emp_id_fk || ($task->verified_by && $task->verified_date == $softwareDate) ||($task->approved_by && $task->approved_date == $softwareDate)) ? 'return false;' : ''
                                                        ]) !!}
                                                    </td>
                                                    <td style="width: 70px">
                                                        <!-- Pending -->
                                                        {!! Form::checkbox('status[' . $task->id . ']', 0, $task->status === 0, [
                                                            'id' => 'status_pending_' . $task->id,
                                                            'class' => 'form-check-input status-checkbox pending-checkbox',
                                                            'data-task-id' => $task->id,
                                                            'onclick' => ($task->emp_id_fk !== Auth::user()->emp_id_fk || ($task->verified_by && $task->verified_date == $softwareDate) ||($task->approved_by && $task->approved_date == $softwareDate)) ? 'return false;' : ''
                                                            ]) !!}
                                                        </td>
                                                    <td style="width: 70px">
                                                        <!-- In Progress -->
                                                        {!! Form::checkbox('status[' . $task->id . ']', 1, $task->status == 1, [
                                                            'id' => 'status_in_progress_' . $task->id,
                                                            'class' => 'form-check-input status-checkbox in-progress-checkbox',
                                                            'data-task-id' => $task->id,
                                                            'onclick' => ($task->emp_id_fk !== Auth::user()->emp_id_fk || ($task->verified_by && $task->verified_date == $softwareDate) ||($task->approved_by && $task->approved_date == $softwareDate)) ? 'return false;' : ''
                                                            ]) !!}
                                                    </td>
                                                    <td style="width: 70px">
                                                        <!-- N/A -->
                                                        {!! Form::checkbox('status[' . $task->id . ']', 3, $task->status == 3, [
                                                            'id' => 'status_in_na_' . $task->id,
                                                            'class' => 'form-check-input status-checkbox in-na-checkbox',
                                                            'data-task-id' => $task->id,
                                                            'onclick' => ($task->emp_id_fk !== Auth::user()->emp_id_fk || ($task->verified_by && $task->verified_date == $softwareDate) ||($task->approved_by && $task->approved_date == $softwareDate)) ? 'return false;' : ''
                                                            ]) !!}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </table>
                                        <br>
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Complete</th>
                                                    <th>Pending</th>
                                                    <th>In Progress</th>
                                                    <th>N/A</th>
                                                    <th>Total</th>
                                                </tr>
                                            </thead>
                                            <tr style="color: black">
                                                <td class="complete-count">0</td>
                                                <td class="pending-count">0</td>
                                                <td class="in-progress-count">0</td>
                                                <td class="in-na-count">0</td>
                                                <td class="total-count">0</td>
                                            </tr>
                                        </table>
                                        <div class="col-md-12" id="fixedTypeContainer"><br>
            
                                            <div class="form-group">
                                    
                                                <div class="" style="text-align: right">
                                                    {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-secondary submitButton']) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @else
                                        <div class="alert alert-warning text-center p-4" style="background-color: #fffaeb; border: 1px solid #ffc107; color: #856404; font-weight: bold;">
                                            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>  Task Not Available
                                        </div>
                                    @endif
                                {!! Form::close() !!}
        
                            </div>

                        </div>
                        <!--end of panel body-->
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script type="text/javascript">
        $(document).ready(function () {
            // Listen for changes on checkboxes with the class 'status-checkbox'
            $('.status-checkbox').on('change', function () {
                // Get the task ID from the data attribute
                const taskId = $(this).data('task-id');

                // Uncheck all other checkboxes for the same task
                $('.status-checkbox[data-task-id="' + taskId + '"]').not(this).prop('checked', false);
                updateCounts();
            });
            updateCounts();
            
        });

        $('.status-checkbox').on('change', function () {
            updateCounts();
        });

        function updateCounts() {
            let completeCount = $('.complete-checkbox:checked').length;
            let pendingCount = $('.pending-checkbox:checked').length;
            let inProgressCount = $('.in-progress-checkbox:checked').length;
            let inNaCount = $('.in-na-checkbox:checked').length;
            let totalCount = completeCount + pendingCount + inProgressCount + inNaCount;
            
            
            // Update the counts in the table
            $('.complete-count').text(completeCount);
            $('.pending-count').text(pendingCount);
            $('.in-progress-count').text(inProgressCount);
            $('.in-na-count').text(inNaCount);
            $('.total-count').text(totalCount);
        }

        $('form').submit(function (event) {
            event.preventDefault();
            var form = $(this);
            var formData = new FormData(form[0]);
            let submitButton = form.find('button[type="submit"]');

            $.ajax({
                type: 'post',
                url: '{{route('dailyTaskProcess.store')}}',
                data: $('form').serialize(),
                dataType: 'json',
                processData: false,
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}",
                },
                success: function (response) {
                    if (response.errors) {
                        toastr.error(response.responseText, response.responseTitle, opts);
                    } else {
                        toastr.success(response.responseText, response.responseTitle, opts);
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }
                },
                error: function (xhr) {
                    handleError(xhr);
                },
                complete: function () {
                    submitButton.prop('disabled', false);
                }
            });
        });

        // Define the handleError function
        function handleError(xhr) {
            let errorMessage = "An error occurred. Please try again.";
            
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            } else if (xhr.status === 0) {
                errorMessage = "Network error: Check your internet connection.";
            } else if (xhr.status === 404) {
                errorMessage = "Requested resource not found (404).";
            } else if (xhr.status === 500) {
                errorMessage = "Internal Server Error (500).";
            }
            
            toastr.error(errorMessage, "Error", opts);
        }
    </script>
@endsection