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

        .clickable-icon span {
            font-size: 16px;
            transition: transform 0.2s ease, color 0.2s ease;
        }

        .clickable-icon:hover span {
            transform: scale(1.3);
            color: blue;
        }


    </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;">Task Process List</h3>
                            
                        </div>
                        <div class="row" style="display: flex; justify-content: center;">           
                            
                            
                            <div class="panel-body panelBodyView col-md-10" style="padding-top:0 !important;">
                                <hr style="margin-top:0">
                                {{-- Date: {{date('Y-m-d', strtotime($formatDate))}} --}}
                                @if ($showAddTaskProcess)
                                    <a href="{{ route('dailyTaskProcess.create') }}" class="btn btn-info pull-right addViewBtn"><i
                                        class="glyphicon glyphicon-plus-sign addIcon">
                                        </i> Add Task Process
                                    </a>
                                @endif
                                
                                @if(count($processDate) > 0)
                                    <div >
                                        <table class="table table-striped table-bordered" style="color:black;">
                                            <thead>
                                                <tr>
                                                    <th>SL</th>
                                                    <th >Task Process Date</th>
                                                    <th >Complete</th>
                                                    <th >Pending</th>
                                                    <th >In Progress</th>
                                                    <th >N/A</th>
                                                    <th >Total</th>
                                                    <th >View</th>
                                                </tr>
                                            </thead>
                                            @foreach ($processDate as $key => $item)
                                               @php
                                                $date = $item['date'];
                                                $complete = $item['complete'];
                                                $pending = $item['pending'];
                                                $progress = $item['progress'];
                                                $na = $item['na'];
                                                $total = $item['complete'] + $item['pending'] + $item['progress'] + $item['na'];
                                               @endphp
                                                <tr>
            
                                                    <td>{{$key + 1}}</td>
                                                    <td style="text-align: left;padding-left:5px">{{date('d-m-Y', strtotime($date))}}</td>
                                                    <td style="text-align: center;">{{$complete}}</td>
                                                    <td style="text-align: center;">{{$pending}}</td>
                                                    <td style="text-align: center;">{{$progress}}</td>
                                                    <td style="text-align: center;">{{$na}}</td>
                                                    <td style="text-align: center;">{{$total}}</td>

                                                    <td style="text-align: center;padding:5px;">
                                                        
                                                        @if (!$showAddTaskProcess && $currentDate == $date)
                                                            <a href="{{ route('dailyTaskProcess.create') }}" target="blank" class="clickable-icon">
                                                                <span style="font-size: 16px;" class="fa fa-edit"></span>
                                                            </a>
                                                        @endif
                                                        <a href="{{route('dailyTaskProcess.date.view', $date)}}" target="blank" class="clickable-icon">
                                                            <span style="font-size: 16px;" class="fa fa-eye"></span>
                                                        </a>
                                                    </td>
                                                   
                                                </tr>
                                            @endforeach
                                        </table>                                       
                                    </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">

        $('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);
                }
            });
        });
    </script>
@endsection