@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb pb-3">
                      <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                      <li class="breadcrumb-item active" aria-current="page">Capaian</li>
                    </ol>
                  </nav>

                <div class="card-body text-center">
                    
                    <div class="row mb-4">
                        <div class="col-2 justify-content-start">
                        </div>
                        <div class="col-8 mt-3 justify-content-center">
                        </div>
                        <div class="col-2">
                        </div>
                    </div>

                    <div class="col-12 row">
                        <div class="col-4">   
                            <label>Bajet Gadai:</label>
                            <input type="text" class="form-control"/>
                        </div>
                        
                        <div class="col-4">
                            <label>Bajet Penyelesaian Pem.:</label>
                            <input type="text" class="form-control"/>
                        </div>

                        <div class="col-4">
                            <label>Bajet Upah:</label>
                            <input type="text" class="form-control"/>
                        </div>
                    </div>

                    <div class="row mt-4 col-12 d-flex justify-content-center">
                
                        <a href="#" class="btn btn-info  col-2">Cetak Notis</a>
                        <a href="#" class="btn btn-info ml-1 col-2">Detail No Rujukan</a>
                        <a href="#" class="btn btn-info ml-1 col-2">Kemaskini</a>
                        <a href="#" class="btn btn-info ml-1 col-2">Carian</a>

                    </div>

                    <div class="mt-3">

                        <table class='table table-striped table-hover' id='table-capaian' style="width:100%;">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Bil</th>
                                    <th>Teller</th>
                                    <th>Tarikh</th>
                                    <th>Pendahuluan</th>
                                    <th>Serahan</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                <td>1</td>
                                <td>31231</td>
                                <td>2321</td>
                                <td>32</td>
                                <td>32</td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    var tablecapaian = $('#table-capaian').DataTable({
          "scrollX": true
        });
    
    </script>

@endsection