@section('content')
<!--begin::Subheader-->
    <div class="subheader py-2 py-lg-4 subheader-transparent" id="kt_subheader">
        <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Details-->
            <div class="d-flex align-items-center flex-wrap mr-2">
                <!--begin::Title-->
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">List Projects</h5>
                <!--end::Title-->
                <!--begin::Separator-->
                <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-5 bg-gray-200"></div>
                <!--end::Separator-->
                <!--begin::Search Form-->
                <div class="d-flex align-items-center " id="kt_subheader_search">
                    <span class="text-dark-50 font-weight-bold" id="kt_subheader_total">{{ $totalProject?$totalProject->total_project:0 }} Total</span>
                    {{-- <form class="ml-5"> --}}
                        <div class="input-group input-group-sm input-group-solid ml-5" style="max-width: 200px">
                            <input type="text" class="form-control" id="keyword" placeholder="Search..." />
                            <div class="input-group-append">
                                <span class="input-group-text">
                                    <span class="svg-icon">
                                        <!--begin::Svg Icon | path:assets/media/svg/icons/General/Search.svg-->
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24" />
                                                <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                                <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero" />
                                            </g>
                                        </svg>
                                        <!--end::Svg Icon-->
                                    </span>
                                    <!--<i class="flaticon2-search-1 icon-sm"></i>-->
                                </span>
                            </div>
                        </div>
                    {{-- </form> --}}
                </div>
                <!--end::Search Form-->
                {{-- <!--begin::Group Actions-->
                <div class="d-flex- align-items-center flex-wrap mr-2 d-none" id="kt_subheader_group_actions">
                    <div class="text-dark-50 font-weight-bold">
                    <span id="kt_subheader_group_selected_rows">23</span>Selected:</div>
                    <div class="d-flex ml-6">
                        <div class="dropdown mr-2" id="kt_subheader_group_actions_status_change">
                            <button type="button" class="btn btn-light-primary font-weight-bolder btn-sm dropdown-toggle" data-toggle="dropdown">Update Status</button>
                            <div class="dropdown-menu p-0 m-0 dropdown-menu-sm">
                                <ul class="navi navi-hover pt-3 pb-4">
                                    <li class="navi-header font-weight-bolder text-uppercase text-primary font-size-lg pb-0">Change status to:</li>
                                    <li class="navi-item">
                                        <a href="#" class="navi-link" data-toggle="status-change" data-status="1">
                                            <span class="navi-text">
                                                <span class="label label-light-success label-inline font-weight-bold">Approved</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a href="#" class="navi-link" data-toggle="status-change" data-status="2">
                                            <span class="navi-text">
                                                <span class="label label-light-danger label-inline font-weight-bold">Rejected</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a href="#" class="navi-link" data-toggle="status-change" data-status="3">
                                            <span class="navi-text">
                                                <span class="label label-light-warning label-inline font-weight-bold">Pending</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a href="#" class="navi-link" data-toggle="status-change" data-status="4">
                                            <span class="navi-text">
                                                <span class="label label-light-info label-inline font-weight-bold">On Hold</span>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <button class="btn btn-light-success font-weight-bolder btn-sm mr-2" id="kt_subheader_group_actions_fetch" data-toggle="modal" data-target="#kt_datatable_records_fetch_modal">Fetch Selected</button>
                        <button class="btn btn-light-danger font-weight-bolder btn-sm mr-2" id="kt_subheader_group_actions_delete_all">Delete All</button>
                    </div>
                </div>
                <!--end::Group Actions--> --}}
            </div>
            <!--end::Details-->
            <!--begin::Toolbar-->
            <div class="d-flex align-items-center">
                <!--begin::Button-->
                <a href="#" class=""></a>
                <!--end::Button-->
                <!--begin::Button-->
                <a href="javascript:;" onclick="loadContent('projects', this, event)" class="btn btn-danger font-weight-bold ml-2 mr-2">Reload Page</a>
                <a href="javascript:;" onclick="znModal('mForm')" class="btn btn-primary font-weight-bold ml-2 mr-2">Add Project</a>
                {{-- <a href="javascript:;" onclick="loadContent('tambahProject', this, event)" class="btn btn-primary font-weight-bold ml-2 mr-2">Add Project</a> --}}
                <!--end::Button-->
                <!--begin::Selectpicker-->                                                                               
                {{-- <select class="selectpicker" title="Pilih Tahun" data-style="btn-primary">                    
                    <option>2021</option>
                    <option>2020</option>
                    <option><b>2019</b></option>
                </select> --}}
                <!--end::Selectpicker-->                
            </div>
            <!--end::Toolbar-->
        </div>
    </div>
<!--end::Subheader-->
<!--begin::Row-->
<div class="" id="card-project">
    {{-- <div class="row">
        @if($list_project)
            @foreach ($list_project as $lp)  
                @php
                    $a=array("danger","success","primary","warning","info");
                    $random_keys=array_rand($a);
                @endphp                  
                <!--begin::Col-->
                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b card-stretch">
                        <!--begin::Body-->
                        <div class="card-body pt-4 ribbon ribbon-clip ribbon-right">                
                            <div class="ribbon-target" style="top: 12px;">
                                @if($lp->status_id == 1)
                                <span class="ribbon-inner bg-primary"></span>{{ $lp->status_project }}
                                @elseif($lp->status_id == 2)
                                <span class="ribbon-inner bg-warning"></span>{{ $lp->status_project }}
                                @elseif($lp->status_id == 3)
                                <span class="ribbon-inner bg-success"></span>{{ $lp->status_project }}
                                @else
                                <span class="ribbon-inner bg-danger"></span>{{ $lp->status_project }}
                                @endif
                            </div>
                            <!--begin::User-->
                            <div class="d-flex align-items-center mb-7">
                                <!--begin::Pic-->
                                <div class="flex-shrink-0 mr-4">
                                    <div class="symbol symbol-circle symbol-lg-75">
                                        @if($lp->logo_url)
                                            <img src="{{ $lp->logo_url }}" class="img-thumbnail img-fluid rounded-circle" alt="image" />
                                        @else
                                            <img src="{{ asset('assets/media/logos/no_img.png') }}" alt="image" class="img-thumbnail img-fluid rounded-circle"/>
                                        @endif
                                    </div>
                                </div>
                                <!--end::Pic-->
                                <!--begin::Title-->
                                <div class="d-flex flex-column">
                                    <a href="#" class="text-dark font-weight-bold text-hover-primary font-size-h4 mb-0">{{ $lp->project_name }}</a>
                                    <span class="text-muted font-weight-bold">{{ $lp->unit_name }}</span>
                                </div>
                                <!--end::Title-->
                            </div>
                            <!--end::User-->
                            <!--begin::Desc-->
                            <p class="mb-7">{{ $lp->project_short.'...' }}
                            <a href="javascript:void(0);" class="text-primary text-hover-info pr-1" data-toggle="popover" title="{{ $lp->project_name }}" data-content="<span class='font-size-sm text-dark'>{{ $lp->project_detail }}</span>" data-container="body" data-trigger="focus" data-placement="right" data-html="true">Read More</a></p>
                            <!--end::Desc-->
                            <!--begin::Info-->
                            <div class="mb-7">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-dark-75 font-weight-bolder mr-2">Jumlah Anggota Tim:</span>
                                    <a href="#" class="text-muted text-hover-primary">{{ $lp->member }}</a>
                                </div>
                                <div class="d-flex justify-content-between align-items-cente my-1">
                                    <span class="text-dark-75 font-weight-bolder mr-2">Due Date:</span>
                                    <a href="#" class="text-muted text-hover-primary">{{ date('d M Y', strtotime($lp->due_date)) }}</a>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-dark-75 font-weight-bolder mr-2">Days to Duedate:</span>
                                    <span class="text-muted font-weight-bold">{{ $lp->days_overdue }}</span>
                                </div>
                            </div>
                            <!--end::Info-->
                            <a href="javascript:;" onclick="loadContent('detailProjects?id={{ $lp->id }}', this, event)"  class="btn btn-block btn-sm btn-light-success font-weight-bolder text-uppercase py-4">Lihat Informasi Project</a>
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end:: Card-->
                </div>
                <!--end::Col-->  
            @endforeach 
        @endif 
    </div> --}}    
</div>
<!--end::Row-->
<!--begin::Pagination-->
{{-- <div class="card card-custom"> --}}
    {{-- <div class="card-body py-7"> --}}
        <!--begin::Pagination-->
        <div class="d-flex justify-content-between align-items-center flex-wrap mt-4">
            <div class="d-flex flex-wrap mr-3">
                <div class="pagination-wrapper"></div>
                {{-- <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1">
                    <i class="ki ki-bold-double-arrow-back icon-xs"></i>
                </a>
                <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1">
                    <i class="ki ki-bold-arrow-back icon-xs"></i>
                </a>
                <a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
                <a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">23</a>
                <a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary active mr-2 my-1">24</a>
                <a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">25</a>
                <a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">26</a>
                <a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">27</a>
                <a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">28</a>
                <a href="#" class="btn btn-icon btn-sm border-0 btn-hover-primary mr-2 my-1">...</a>
                <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1">
                    <i class="ki ki-bold-arrow-next icon-xs"></i>
                </a>
                <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-2 my-1">
                    <i class="ki ki-bold-double-arrow-next icon-xs"></i>
                </a> --}}
            </div>
            {{-- <div class="d-flex align-items-center">
                <select class="form-control form-control-sm text-primary font-weight-bold mr-4 border-0 bg-light-primary" style="width: 75px;">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span class="text-muted">Displaying 10 of 230 records</span>
            </div> --}}
        </div>
        <!--end:: Pagination-->
    {{-- </div> --}}
{{-- </div> --}}
<!--end::Pagination-->
@include('content.others.project.tambah_project')
@endsection
@section('script')
@include('content.projects.action')
@endsection