@extends('pages.companies.info')

@section('content')
<!--begin::details View-->
<div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
    <!--begin::Card header-->
    <div class="card-header cursor-pointer">
        <!--begin::Card title-->
        <div class="card-title m-0">
            <h3 class="fw-bolder m-0">Milestones</h3>
        </div>
        <!--end::Card title-->
    </div>
    <!--begin::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-9">
        <table id="kt_datatable_example_1" class="table table-row-bordered gy-5">
            <thead>
                <tr class="fw-bold fs-6 text-muted">
                    <th>Milestone Name</th>
                    <th>Due Date</th>
                    <th>Progress</th>
                    <th>Status</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Milestone name here</td>
                    <td>05/04/2024</td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </td>
                    <td><span class="badge badge-light-warning">Pending</span></td>
                    <td><button type="button" class="btn btn-primary"><span class="indicator-label">Click here</span></button></td>
                </tr>
                <tr>
                    <td>Milestone name here</td>
                    <td>05/04/2024</td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </td>
                    <td><span class="badge badge-light-success">Completed</span></td>
                    <td><button type="button" class="btn btn-primary"><span class="indicator-label">Click here</span></button></td>
                </tr>
                <tr>
                    <td>Milestone name here</td>
                    <td>05/04/2024</td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 5%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </td>
                    <td><span class="badge badge-light-danger">on Going</span></td>
                    <td><button type="button" class="btn btn-primary"><span class="indicator-label">Click here</span></button></td>
                </tr>
                
            </tbody>
            {{-- <tfoot>
                <tr>
                    <th>Profile Picture</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>SSN</th>
                    <th>Action</th>
                </tr>
            </tfoot> --}}
        </table>
    </div>
</div>
@endsection