@extends('layouts.index')
@section('title')
Monitoring
@endsection
@section('css')
<link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
@endsection
@section('content')
<div class="page-titles">
    <div class="row">
        <div class="col-lg-8 col-md-6 col-12 align-self-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 d-flex align-items-center">
                    <li class="breadcrumb-item">
                        <a href="{{url('home')}}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Monitoring
                    </li>
                </ol>
            </nav>
            <h1 class="mb-0 fw-bold">Daftar Monitoring</h1>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================= -->
<!-- Container fluid  -->
<!-- ============================================================= -->
<div class="container-fluid">
    <!-- ============================================================= -->
    <!-- Start Page Content -->
    <!-- ============================================================= -->

    <div class="row">
        <!-- Column -->

        <div class="col-lg-12 col-xl-12 col-md-12">
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-pills p-3 bg-white border mb-3 align-items-center" role="tablist">


                        <li class="nav-item">
                            <a class="nav-link rounded-pill note-link d-flex align-items-center justify-content-center
                                        active px-3 px-md-3 me-0 me-md-2 active" data-bs-toggle="tab"
                                href="#navpill-111" role="tab">
                                <i data-feather="list" class="feather-sm fill-white me-0 me-md-1"></i>
                                <span class="d-none d-md-block ms-2">Belum Dibayar</span>
                            </a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-link
                                    rounded-pill
                                    note-link
                                    d-flex
                                    align-items-center
                                    justify-content-center
                                    px-3 px-md-3
                                    me-0 me-md-2" data-bs-toggle="tab" href="#navpill-222" role="tab">
                                <span>Pengemasan</span>
                            </a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-link
                                    rounded-pill
                                    note-link
                                    d-flex
                                    align-items-center
                                    justify-content-center
                                    px-3 px-md-3
                                    me-0 me-md-2" data-bs-toggle="tab" href="#navpill-333" role="tab">
                                <span>Pengiriman</span>
                            </a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-link
                                    rounded-pill
                                    note-link
                                    d-flex
                                    align-items-center
                                    justify-content-center
                                    px-3 px-md-3
                                    me-0 me-md-2" data-bs-toggle="tab" href="#navpill-444" role="tab">
                                <span>Selesai</span>
                            </a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-link
                                    rounded-pill
                                    note-link
                                    d-flex
                                    align-items-center
                                    justify-content-center
                                    px-3 px-md-3
                                    me-0 me-md-2" data-bs-toggle="tab" href="#navpill-555" role="tab">
                                <span>Pembatalan</span>
                            </a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link nav-link
                                    rounded-pill
                                    note-link
                                    d-flex
                                    align-items-center
                                    justify-content-center
                                    px-3 px-md-3
                                    me-0 me-md-2" data-bs-toggle="tab" href="#navpill-666" role="tab">
                                <span>Pengembalian</span>
                            </a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content border mt-2">
                        <div class="tab-pane active p-3" id="navpill-111" role="tabpanel">
                            <div class="d-flex no-block align-items-center mb-4">
                                {{-- <h4>Daftar Pengemasan</h4> --}}
                                <div class="ms-auto">
                                    <div class="btn-group">
                                        <a href="{{ url('purchase-obat/create') }}"
                                            class="btn btn-primary font-weight-medium rounded-pill px-4">
                                            <i class="fa fa-plus"></i> Buat Pengembalian
                                        </a>
                                    </div>
                                </div>
                            </div>
        
                            <table class="table" id="zero_config">
                                <thead>
                                    <tr>
                                        <th>Kode </th>
                                        <th>Foto</th>
                                        <th>Daftar Produk</th>
                                        <th>Nama Pelanggan</th>
                                        <th>Order Via</th>
                                        <th>Jumlah Bayar (Rp)</th>
                                        <th>Status Bayar</th>
                                        <th>Jasa Pengembalian</th>
                                        <th>Status Transaksi</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>20 April 2021</td>
                                        <td>FK-23123</td>
                                        <td>Suplier 1 - Bandung</td>
                                        <td>Suplier 1 - Bandung</td>
                                        <td>Suplier 1 - Bandung</td>
                                        <td>Suplier 1 - Bandung</td>
                                        <td>Suplier 1 - Bandung</td>
                                        <td>Suplier 1 - Bandung</td>
                                        <td><span class="badge bg-light-success text-success">Lunas</span> </td>
                                        <td>
                                            <button class="btn btn-sm btn-light-primary" type="button">Detail</button>
                                        </td>
                                    </tr>
        
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane p-3" id="navpill-222" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12">
                                    <h5> Daftar Racikan</h5>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane p-3" id="navpill-333" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12">
                                    <h5> Daftar Racikan</h5>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane p-3" id="navpill-444" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12">
                                    <h5> Daftar Racikan</h5>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane p-3" id="navpill-555" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12">
                                    <h5> Daftar Racikan</h5>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane p-3" id="navpill-666" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12">
                                    <h5> Daftar Racikan</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>
    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
</div>


<div class="offcanvas offcanvas-end" tabindex="-1" id="tambah" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">
            Tambah Data
        </h5>
        <hr>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">

        <form>
            <div class="card">
                <div class="card-body">

                    <div class="mb-3">
                        <label for="formFile" class="form-label">Nama Satuan</label>
                        <input type="text" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label for="formFile" class="form-label">Keterangan</label>
                        <textarea class="form-control"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="formFile" class="form-label">Status</label>
                        <select class="form-select">
                            <option value="">Aktif</option>
                            <option value="">Tidak Aktif</option>
                        </select>
                    </div>


                    <div class="form-actions">
                        <div class="card-body border-top">
                            <button type="button" class="
                                            btn btn-outline-secondary
                                            rounded-pill
                                            px-4
                                            ms-2
                                        ">
                                Batal
                            </button>

                            <button type="submit" class="btn btn-primary rounded-pill px-4">
                                <div class="d-flex align-items-center">
                                    Simpan
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>


@endsection
@section('js')
<!--This page plugins -->
<script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('back') }}s/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>


<script>
    $("#zero_config").DataTable();

</script>


@endsection