@section('content')
{{-- <x-other.titleHeader judul="{{$title}}" /> --}}
<div class="row p-0">            
    <div class="col-xl-3 p-0">
        <!--begin::Mixed Widget 2-->
        <div class="card card-custom gutter-b card-stretch" style="border-radius: 0px !important; cursor: pointer;" onclick="changeColorTable(event, 'indexTable', 'new')">
            <!--begin::Header-->   
            <div class="card-header border-0" style="background-color: #b06b03 !important;">
                <div class="card-title">

                </div>
                <div class="card-toolbar">
                    <i class="la la-plus-circle icon-3x" style="color: white"></i>
                </div>
            </div>                 
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body p-0" style="background-color: orange">
                <div class="col-xl-12 p-5">
                    @if($type=='new')
                    <div class="d-flex flex-row-reverse text-center text-white mr-5">
                        New <br> {{ $stat->stat_new ?? 0 }}
                    </div>
                    @else
                    <div class="d-flex flex-row-reverse text-center text-dark mr-5">
                        New <br> {{ $stat->stat_new ?? 0 }}
                    </div>
                    @endif
                </div>                
            </div>
            <!--end::Body-->
        </div>
        <!--end::Mixed Widget 2-->
    </div>
    <div class="col-xl-2 p-0"> 
        <div class="card-custom card-stretch text-center" style="border-radius: 0px !important; cursor: pointer;" onclick="changeColorTable(event, 'indexTable', 'op')">
            <div class="card-header border-0" style="border-radius: 0px !important; background-color: #b06b03bd !important;padding: 1.2rem 2.25rem !important;">
                <i class="la la-cogs icon-3x" style="color: white"></i>
            </div>
            @if($type=='op')
            <div class="card-body text-white" style="background-color: #f0910387 !important; padding: 1.25rem;">
                On Progress <br> {{ $stat->stat_op ?? 0 }}
            </div>         
            @else
            <div class="card-body text-dark" style="background-color: #f0910387 !important; padding: 1.25rem;">
                On Progress <br> {{ $stat->stat_op ?? 0 }}
            </div>         
            @endif             
        </div>               
    </div>
    <div class="col-xl-2 p-0">
        <div class="card-custom card-stretch text-center" style="border-radius: 0px !important; cursor: pointer;" onclick="changeColorTable(event, 'indexTable', 'cancel')">
            <div class="card-header border-0" style="border-radius: 0px !important; background-color: #b30808c4 !important;padding: 1.2rem 2.25rem !important;">
                <i class="fas fa-list icon-3x" style="color: white"></i>
            </div>
            @if($type=='cancel')
            <div class="card-body text-white" style="background-color: #f64e609c !important; padding: 1.25rem;">
                Cancel <br> {{ $stat->stat_cancel ?? 0 }}
            </div>
            @else
            <div class="card-body text-dark" style="background-color: #f64e609c !important; padding: 1.25rem;">
                Cancel <br> {{ $stat->stat_cancel ?? 0 }}
            </div>
            @endif
        </div>                
    </div>
    <div class="col-xl-2 p-0">
        <div class="card-custom card-stretch text-center" style="border-radius: 0px !important; cursor: pointer;" onclick="changeColorTable(event, 'indexTable', 'done')">
            <div class="card-header border-0" style="border-radius: 0px !important; background-color: #418383a6 !important;padding: 1.2rem 2.25rem !important;">
                <i class="la la-check-double icon-3x" style="color: white"></i>
            </div>
            @if($type=='done')
            <div class="card-body text-white" style="background-color: #26bcbc99 !important; padding: 1.25rem;">
                Done <br> {{ $stat->stat_done ?? 0 }}
            </div>
            @else
            <div class="card-body text-dark" style="background-color: #26bcbc99 !important; padding: 1.25rem;">
                Done <br> {{ $stat->stat_done ?? 0 }}
            </div>
            @endif
        </div>                
    </div>
    <div class="col-xl-3 p-0">
        <!--begin::List Widget 7-->
        <div class="card card-custom gutter-b card-stretch" style="border-radius: 0px !important; cursor: pointer;" onclick="changeColorTable(event, 'indexTable', 'overdue')">
            <!--begin::Header-->
            <div class="card-header border-0" style="background-color: #418383 !important;">
                <div class="card-toolbar">
                    <i class="la la-exclamation-triangle icon-3x"></i>
                </div>
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body p-0" style="background-color: turquoise;">
                <div class="col-xl-12 p-5">
                    @if($type=='overdue')
                    <div class="d-flex flex-row text-center text-white ml-1">
                        Overdue <br> {{ $stat->stat_overdue ?? 0 }}
                    </div>
                    @else
                    <div class="d-flex flex-row text-center text-dark ml-1">
                        Overdue <br> {{ $stat->stat_overdue ?? 0 }}
                    </div>
                    @endif
                </div>                                      
            </div>
            <!--end::Body-->
        </div>
        <!--end::List Widget 7-->
    </div>
</div>
<div class="row mt-4">    
    <div class="col-md-12">
        <x-card.content title="Laporan Project {{ $title_progres }}" subTitle="Table Laporan Project {{ $title_progres }}" classAdd="cardLaporan"> 
            <x-slot name="toolbar">
                <button type="button" onclick="cetakExcel(`{{$type}}`)" class="btn btn-success mr-3" style="background:#0CAE63 !important">
                    <i class="las la-file-excel mr-2"></i>Cetak Excel
                </button>
                <button type="button" onclick="loadContent('laporanProject', this, event)" class="btn btn-success mr-3">
                    <i class="la la-refresh mr-2"></i>Tampilkan Semua
                </button>
                {{-- <button type="button" onclick="cetakLaporan()" class="btn btn-danger mr-3">
                    <i class="la la-print mr-2"></i>Cetak Laporan
                </button> --}}
            </x-slot>           
            <x-slot name="content">
                <div class="row">
                    <div class="col-md-6">                                
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-borderless" id="indexTable">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Project Name</th>
                                <th>No Ticket</th>
                                <th>Task Name</th>                                
                                {{-- <th>Task Note</th>                                 --}}
                                <th>status</th>                                
                                <th>Level Urgent</th>                                
                                <th>Created At</th>
                                <th>Implementor</th>
                                <th>Date Deadline</th>
                                <th>Act</th>
                            </tr>
                        </thead>
                        <tbody>                            
                        </tbody>
                    </table>
                </div>
            </x-slot>
        </x-card.content>
    </div>
</div>    
@include('content.projects.detail_dokumen')
@include('content.projects.formHelpdesk')
@include('content.projects.formApproveHelpdesk')
@include('content.projects.formBackDate')
@endsection
@section('script')        
@include('content.projects.action_laporan')
@endsection