@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
        }

        .custom-verify-btn{
            background-color: yellow !important;
            color: rgb(2, 2, 2) !important;

        }

        .custom-verify-btn:hover {
            background-color: rgb(235, 235, 102) !important;
            color: rgb(2, 2, 2) !important;
        }

        .custom-approve-btn {
            background-color: #3ca5c3 !important;
            border-color: #3ca5c3 !important;
            color: white !important;
            transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
        }

        .custom-approve-btn:hover {
            background-color: #45afcf !important;
            border-color: #4abada !important;
            color: white !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</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 id="reportingDiv">
                                        @php
                                                $company = DB::table('gnr_company')
                                                    ->where('id', Auth::user()->company_id_fk)
                                                    ->select('name', 'address')
                                                    ->first();

                                            @endphp

                                            <div style="text-align: center;font-weight:bold; display: none;" class="heading">
                                                <span style="font-size:14px;">{{ $company->name }}</span><br />
                                                <span style="font-size:11px;">{{ $company->address }}</span><br />
                                                <span style="color: black;font-size:11px;" >Daily Work Status</span><br>
                                                <span style="color: black;font-size:10px;" >Date: {{date('d-m-Y', strtotime($formatDate))}}</span>
                                                <div style="display: flex; justify-content: space-between;">
                                                    <span style="color: black;font-size:10px;">Branch Name: {{$branchName}}</span>
                                                    <span style="color: black;font-size:10px;">Print Date: {{ now()->format('d-m-Y') }}</span>
                                                </div>

                                            </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>
                                            @foreach ($tasksWithStatus as $key => $task)
                                                @php
                                                    $employeeName = DB::table('hr_emp_general_info')->select('emp_name_bangla')->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,]) !!}
                                                    {!! Form::hidden('processId[]', $task->processId, ['id' => 'processId' . $task->id,]) !!}

                                                    <td style="text-align: center">{{$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_bangla}}</td>
                                                    <td>{{$task->time}}</td>
                                                    <td style="text-align: center; width: 60px;">
                                                        <!-- 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' => 'return false;'
                                                        ]) !!}
                                                    </td>
                                                    <td style="text-align: center; width: 60px;">
                                                        <!-- 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' => 'return false;'
                                                        ]) !!}
                                                        </td>
                                                    <td style="text-align: center; width: 60px;">
                                                        <!-- 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' => 'return false;'
                                                        ]) !!}
                                                    </td>
                                                    <td style="text-align: center; width: 60px;">
                                                        <!-- 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' => '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" style="text-align: center">0</td>
                                                <td class="pending-count" style="text-align: center">0</td>
                                                <td class="in-progress-count" style="text-align: center">0</td>
                                                <td class="in-na-count" style="text-align: center">0</td>
                                                <td class="total-count" style="text-align: center">0</td>
                                            </tr>
                                        </table>
                                        <div class="container" id="bottom-signature" style="margin-top: 30px; display: none;">
                                            <div class="row text-center " style="display: flex; justify-content: space-between; text-align: center;">
                                                <div class="col-md-4 border-top pb-2" style="flex: 0; ">................................ <br>Submitted By</div>
                                                <div class="col-md-4 border-top pb-2" style="flex: 1; ">................................ <br>Verified By</div>
                                                <div class="col-md-4 border-top pb-2" style="flex: -1; ">................................ <br>Approved By</div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-12" id="submittedBottom"><br>
                                            <div class="form-group">
                                                <div class="" style="text-align: right">
                                                    {!! Form::submit('Verify', ['id' => 'verify', 'class' => 'btn btn-secondary submitButton custom-verify-btn']) !!}
                                                    {!! Form::submit('Approve', ['id' => 'approved', 'class' => 'btn submitButton custom-approve-btn']) !!}

                                                </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 () {
            $("#printIcon").click(function (event) {

                var mainContents = document.getElementById("reportingDiv").innerHTML;
                var headerContents = '';
                // Add border styles for the table, th, and td elements
                var printStyle = '<style>' +
                    'table { border-collapse: collapse; width: 100%; } ' +
                    '.heading, #bottom-signature { display:block !important; } ' +
                    '#submittedBottom{ display:none; } ' +
                    'thead tr th { text-align: center; vertical-align: middle; padding: 3px; font-size: 11px; border: 1px solid black; } ' +
                    'tbody tr td { border: 1px solid black; padding: 3px; font-size: 11px; } ' +
                    'tr { page-break-inside: avoid; page-break-after: auto; } ' +
                    '</style>' +
                    '<style media="print">' +
                    '@page { margin: 10mm 10mm; }' +
                    '</style>' +
                    '<style>' +
                    '@media print { .element-that-contains-table { overflow: visible !important; } }' +
                    '</style>' +
                    '<style>' +
                    '@page:first { tr:nth-of-type(4n) { page-break-after: always; } }' +
                    '</style>';

                var printContents = '<div id="order-details-wrapper">' + headerContents + printStyle + mainContents + '</div>';

                var win = window.open('', 'printwindow');
                win.document.write(printContents);
                win.print();
                win.close();
            });

                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"]');
            var clickedButtonId = $(document.activeElement).attr('id');
            var formData = $('form').serialize();

            if(clickedButtonId === 'verify'){
                formData += '&action=verify';
                url = '{{route('dailyTaskProcess.verify')}}';
            }else if(clickedButtonId === 'approved'){
                formData += '&action=approved';
                url = '{{route('dailyTaskProcess.approve')}}';
            }

            if (!validateStatusSelection()) {
                toastr.warning('All Task Status Not Updated..', "Warning");
                return false; // Stop form submission if validation fails
            }


            $.ajax({
                type: 'post',
                url: url,
                data: formData,
                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 () {
                            window.location.href = "{{ route('dailyTaskProcess.list') }}";
                        }, 1000);
                    }
                },
                error: function (xhr) {
                    handleError(xhr);
                },
                complete: function () {
                    submitButton.prop('disabled', false);
                }
            });
        });

        function validateStatusSelection() {
            var isValid = true;

            $('.status-checkbox').each(function () {
                var taskId = $(this).data('task-id');
                var isChecked = $('.status-checkbox[data-task-id="' + taskId + '"]:checked').length > 0;

                if (!isChecked) {
                    isValid = false;
                    return false; // Exit the loop if any task row is invalid
                }
            });

            if (!isValid) {

                return false; // Prevent further execution
            }

            return true;
        }
    </script>
@endsection