@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">Contracts</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>Contract Name</th>
                    <th>Job Type</th>
                    <th>Progress</th>
                    <th>Timeline</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Contract name here</td>
                    <td>Residential</td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </td>
                    <td>01/01/2023 - 05/04/2024</td>
                    <td><button type="button" class="btn btn-primary"><span class="indicator-label">Click here</span></button></td>
                </tr>
                <tr>
                    <td>Contract name here</td>
                    <td>Residential</td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 60%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </td>
                    <td>01/01/2023 - 05/04/2024</td>
                    <td><button type="button" class="btn btn-primary"><span class="indicator-label">Click here</span></button></td>
                </tr>
                <tr>
                    <td>Contract name here</td>
                    <td>Residential</td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 90%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </td>
                    <td>01/01/2023 - 05/04/2024</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