<?= $this->extend('layout/template') ?>
<?= $this->section('content') ?>

<div class="container-fluid">

    <!-- HEADER -->
    <div class="page-header mb-4">

        <div>
            <h4 class="page-title">
                <i class="fas fa-book-reader text-primary mr-2"></i>
                Peminjaman Buku
            </h4>

            <p class="page-subtitle">
                Kelola transaksi peminjaman buku anggota perpustakaan
            </p>
        </div>

        <button class="btn btn-primary btn-tambah"
                data-toggle="modal"
                data-target="#modalPinjam">

            <i class="fas fa-plus-circle mr-2"></i>
            Tambah Peminjaman

        </button>

    </div>


    <!-- FLASH SUCCESS -->
    <?php if(session()->getFlashdata('success')) : ?>

        <div class="alert alert-success alert-dismissible fade show custom-alert">

            <i class="fas fa-check-circle mr-2"></i>

            <?= session()->getFlashdata('success') ?>

            <button type="button"
                    class="close"
                    data-dismiss="alert">

                <span>&times;</span>

            </button>

        </div>

    <?php endif; ?>


    <!-- FLASH ERROR -->
    <?php if(session()->getFlashdata('error')) : ?>

        <div class="alert alert-danger alert-dismissible fade show custom-alert">

            <i class="fas fa-exclamation-circle mr-2"></i>

            <?= session()->getFlashdata('error') ?>

            <button type="button"
                    class="close"
                    data-dismiss="alert">

                <span>&times;</span>

            </button>

        </div>

    <?php endif; ?>


    <!-- STATISTIK -->
    <div class="row mb-3">

        <!-- TOTAL TRANSAKSI -->
        <div class="col-lg-4 col-md-6 mb-3">

            <div class="loan-stat stat-blue">

                <div class="stat-icon">
                    <i class="fas fa-book"></i>
                </div>

                <div>
                    <small>Total Peminjaman</small>

                    <h3>
                        <?= count($pinjam) ?>
                    </h3>

                    <span>Transaksi tercatat</span>
                </div>

            </div>

        </div>


        <!-- SEDANG DIPINJAM -->
        <div class="col-lg-4 col-md-6 mb-3">

            <?php
                $totalDipinjam = 0;

                foreach($pinjam as $p){
                    if($p['status'] == 'Dipinjam'){
                        $totalDipinjam++;
                    }
                }
            ?>

            <div class="loan-stat stat-orange">

                <div class="stat-icon">
                    <i class="fas fa-clock"></i>
                </div>

                <div>
                    <small>Sedang Dipinjam</small>

                    <h3>
                        <?= $totalDipinjam ?>
                    </h3>

                    <span>Belum dikembalikan</span>
                </div>

            </div>

        </div>


        <!-- DIKEMBALIKAN -->
        <div class="col-lg-4 col-md-6 mb-3">

            <?php
                $totalKembali = 0;

                foreach($pinjam as $p){
                    if($p['status'] == 'Dikembalikan'){
                        $totalKembali++;
                    }
                }
            ?>

            <div class="loan-stat stat-green">

                <div class="stat-icon">
                    <i class="fas fa-check-circle"></i>
                </div>

                <div>
                    <small>Sudah Dikembalikan</small>

                    <h3>
                        <?= $totalKembali ?>
                    </h3>

                    <span>Transaksi selesai</span>
                </div>

            </div>

        </div>

    </div>


    <!-- DATA PEMINJAMAN -->
    <div class="card loan-card">

        <div class="card-header loan-card-header">

            <div>

                <h5 class="mb-1 font-weight-bold">

                    <i class="fas fa-list-alt text-primary mr-2"></i>

                    Daftar Peminjaman

                </h5>

                <small class="text-muted">
                    Riwayat transaksi peminjaman buku
                </small>

            </div>

            <div class="data-label">

                <i class="fas fa-database mr-1"></i>

                Data Transaksi

            </div>

        </div>


        <div class="card-body">

            <div class="table-responsive">

                <table class="table table-hover loan-table"
                       id="tblPinjam">

                    <thead>

                        <tr>

                            <th width="60" class="text-center">
                                No
                            </th>

                            <th>
                                Kode Pinjam
                            </th>

                            <th>
                                Nama Anggota
                            </th>

                            <th width="120" class="text-center">
                                Jumlah Buku
                            </th>

                            <th>
                                Tanggal Pinjam
                            </th>

                            <th>
                                Batas Kembali
                            </th>

                            <th width="120" class="text-center">
                                Status
                            </th>

                            <th width="110" class="text-center">
                                Aksi
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                    <?php if(!empty($pinjam)) : ?>

                        <?php $no=1; ?>

                        <?php foreach($pinjam as $p): ?>

                            <tr>

                                <!-- NOMOR -->
                                <td class="text-center">

                                    <span class="number-circle">
                                        <?= $no++ ?>
                                    </span>

                                </td>


                                <!-- KODE -->
                                <td>

                                    <span class="kode-pinjam">

                                        <i class="fas fa-barcode mr-1"></i>

                                        <?= esc($p['kode_pinjam']) ?>

                                    </span>

                                </td>


                                <!-- NAMA -->
                                <td>

                                    <div class="member-name">

                                        <div class="user-icon">

                                            <i class="fas fa-user"></i>

                                        </div>

                                        <div>

                                            <strong>
                                                <?= esc($p['nama']) ?>
                                            </strong>

                                            <small>
                                                Anggota perpustakaan
                                            </small>

                                        </div>

                                    </div>

                                </td>


                                <!-- JUMLAH BUKU -->
                                <td class="text-center">

                                    <span class="book-count">

                                        <i class="fas fa-book mr-1"></i>

                                        <?= esc($p['jumlah_buku']) ?>

                                        Buku

                                    </span>

                                </td>


                                <!-- TANGGAL PINJAM -->
                                <td>

                                    <div class="date-info">

                                        <i class="far fa-calendar-alt"></i>

                                        <span>
                                            <?= date(
                                                'd M Y',
                                                strtotime($p['tanggal_pinjam'])
                                            ) ?>
                                        </span>

                                    </div>

                                </td>


                                <!-- BATAS KEMBALI -->
                                <td>

                                    <div class="date-info return-date">

                                        <i class="far fa-calendar-check"></i>

                                        <span>
                                            <?= date(
                                                'd M Y',
                                                strtotime($p['tanggal_kembali'])
                                            ) ?>
                                        </span>

                                    </div>

                                </td>


                                <!-- STATUS -->
                                <td class="text-center">

                                    <?php if($p['status']=="Dipinjam"): ?>

                                        <span class="status-badge status-loan">

                                            <i class="fas fa-clock mr-1"></i>

                                            Dipinjam

                                        </span>

                                    <?php else: ?>

                                        <span class="status-badge status-return">

                                            <i class="fas fa-check-circle mr-1"></i>

                                            Dikembalikan

                                        </span>

                                    <?php endif; ?>

                                </td>


                                <!-- AKSI -->
                                <td class="text-center">

                                    <div class="action-buttons">

                                        <a href="<?= base_url('peminjaman/edit/'.$p['id']) ?>"
                                           class="action-btn edit-btn"
                                           title="Edit Peminjaman"
                                           data-toggle="tooltip">

                                            <i class="fas fa-edit"></i>

                                        </a>


                                        <a href="<?= base_url('peminjaman/delete/'.$p['id']) ?>"
                                           class="action-btn delete-btn"
                                           title="Hapus Peminjaman"
                                           data-toggle="tooltip"
                                           onclick="return confirm('Yakin ingin menghapus transaksi ini?')">

                                            <i class="fas fa-trash"></i>

                                        </a>

                                    </div>

                                </td>

                            </tr>

                        <?php endforeach; ?>

                    <?php else : ?>

                        <tr>

                            <td colspan="8">

                                <div class="empty-state">

                                    <div class="empty-icon">

                                        <i class="fas fa-book-reader"></i>

                                    </div>

                                    <h5>
                                        Belum Ada Peminjaman
                                    </h5>

                                    <p>
                                        Belum terdapat transaksi peminjaman buku.
                                    </p>

                                    <button class="btn btn-primary"
                                            data-toggle="modal"
                                            data-target="#modalPinjam">

                                        <i class="fas fa-plus mr-1"></i>

                                        Tambah Peminjaman

                                    </button>

                                </div>

                            </td>

                        </tr>

                    <?php endif; ?>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>


<!-- ====================================================== -->
<!-- MODAL TAMBAH PEMINJAMAN -->
<!-- ====================================================== -->

<div class="modal fade"
     id="modalPinjam"
     tabindex="-1">

    <div class="modal-dialog modal-xl modal-dialog-centered">

        <div class="modal-content custom-modal">

            <form action="<?= base_url('peminjaman/store') ?>"
                  method="post">

                <?= csrf_field(); ?>


                <!-- HEADER MODAL -->
                <div class="modal-header modal-header-custom">

                    <div>

                        <h5 class="modal-title font-weight-bold">

                            <i class="fas fa-plus-circle mr-2"></i>

                            Tambah Peminjaman

                        </h5>

                        <small>
                            Buat transaksi peminjaman buku baru
                        </small>

                    </div>


                    <button type="button"
                            class="close text-white"
                            data-dismiss="modal">

                        <span>&times;</span>

                    </button>

                </div>


                <!-- BODY -->
                <div class="modal-body p-4">

                    <div class="row">

                        <!-- ANGGOTA -->
                        <div class="col-md-5">

                            <div class="form-section">

                                <div class="section-title">

                                    <div class="section-icon blue-icon">

                                        <i class="fas fa-user"></i>

                                    </div>

                                    <div>

                                        <h6>
                                            Pilih Anggota
                                        </h6>

                                        <small>
                                            Tentukan anggota peminjam
                                        </small>

                                    </div>

                                </div>


                                <div class="form-group mt-4">

                                    <label>
                                        Nama Anggota
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select name="anggota_id"
                                            class="form-control custom-select"
                                            required>

                                        <option value="">
                                            -- Pilih Anggota --
                                        </option>

                                        <?php foreach($anggota as $a): ?>

                                            <option value="<?= $a['id'] ?>">

                                                <?= esc($a['nama']) ?>

                                            </option>

                                        <?php endforeach; ?>

                                    </select>

                                </div>

                            </div>


                            <!-- TANGGAL -->
                            <div class="form-section mt-3">

                                <div class="section-title">

                                    <div class="section-icon green-icon">

                                        <i class="far fa-calendar-alt"></i>

                                    </div>

                                    <div>

                                        <h6>
                                            Durasi Peminjaman
                                        </h6>

                                        <small>
                                            Tentukan batas pengembalian
                                        </small>

                                    </div>

                                </div>


                                <div class="row mt-4">

                                    <div class="col-md-6">

                                        <div class="form-group">

                                            <label>
                                                Tanggal Pinjam
                                            </label>

                                            <input type="date"
                                                   name="tanggal_pinjam"
                                                   class="form-control"
                                                   value="<?= date('Y-m-d') ?>"
                                                   required>

                                        </div>

                                    </div>


                                    <div class="col-md-6">

                                        <div class="form-group">

                                            <label>
                                                Batas Kembali
                                            </label>

                                            <input type="date"
                                                   name="tanggal_kembali"
                                                   class="form-control"
                                                   value="<?= date('Y-m-d',strtotime('+7 days')) ?>"
                                                   required>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>


                        <!-- BUKU -->
                        <div class="col-md-7">

                            <div class="form-section book-section">

                                <div class="section-title">

                                    <div class="section-icon purple-icon">

                                        <i class="fas fa-books"></i>

                                    </div>

                                    <div>

                                        <h6>
                                            Pilih Buku
                                        </h6>

                                        <small>
                                            Bisa memilih lebih dari satu buku
                                        </small>

                                    </div>

                                </div>


                                <!-- SEARCH BUKU -->
                                <div class="book-search mt-3">

                                    <i class="fas fa-search"></i>

                                    <input type="text"
                                           id="searchBuku"
                                           class="form-control"
                                           placeholder="Cari judul buku...">

                                </div>


                                <!-- LIST BUKU -->
                                <div class="book-list mt-3">

                                    <?php foreach($buku as $b): ?>

                                        <div class="book-item <?= ($b['stok']<=0) ? 'book-disabled' : '' ?>">

                                            <div class="custom-control custom-checkbox">

                                                <input type="checkbox"
                                                       class="custom-control-input buku-check"
                                                       name="buku_id[]"
                                                       value="<?= $b['id'] ?>"
                                                       id="b<?= $b['id'] ?>"
                                                       <?= ($b['stok']<=0)?'disabled':'' ?>>

                                                <label class="custom-control-label"
                                                       for="b<?= $b['id'] ?>">

                                                    <span class="book-title">

                                                        <?= esc($b['judul']) ?>

                                                    </span>

                                                    <span class="book-stock <?= ($b['stok']<=0) ? 'stock-empty' : '' ?>">

                                                        <i class="fas fa-layer-group mr-1"></i>

                                                        Stok <?= esc($b['stok']) ?>

                                                    </span>

                                                </label>

                                            </div>

                                        </div>

                                    <?php endforeach; ?>

                                </div>


                                <!-- SELECTED -->
                                <div class="selected-books mt-3">

                                    <i class="fas fa-check-circle mr-1"></i>

                                    Buku dipilih:

                                    <strong id="jumlahDipilih">
                                        0
                                    </strong>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>


                <!-- FOOTER -->
                <div class="modal-footer modal-footer-custom">

                    <button type="button"
                            class="btn btn-secondary"
                            data-dismiss="modal">

                        <i class="fas fa-times mr-1"></i>

                        Batal

                    </button>


                    <button type="submit"
                            class="btn btn-primary">

                        <i class="fas fa-save mr-1"></i>

                        Simpan Peminjaman

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


<!-- ====================================================== -->
<!-- JAVASCRIPT -->
<!-- ====================================================== -->

<script>

$(document).ready(function(){


    /* DATATABLE */

    $('#tblPinjam').DataTable({

        responsive: true,

        autoWidth: false,

        language: {

            search: "Cari peminjaman:",

            lengthMenu: "Tampilkan _MENU_ data",

            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ transaksi",

            infoEmpty: "Tidak ada transaksi",

            zeroRecords: "Data peminjaman tidak ditemukan",

            emptyTable: "Belum ada data peminjaman",

            paginate: {

                first: "Awal",

                last: "Akhir",

                next: "›",

                previous: "‹"

            }

        }

    });


    /* TOOLTIP */

    $('[data-toggle="tooltip"]').tooltip();


    /* JUMLAH BUKU DIPILIH */

    $('.buku-check').on('change', function(){

        $('#jumlahDipilih').text(
            $('.buku-check:checked').length
        );

    });


    /* SEARCH BUKU */

    $('#searchBuku').on('keyup', function(){

        let value = $(this).val().toLowerCase();

        $('.book-item').each(function(){

            let text = $(this).text().toLowerCase();

            $(this).toggle(
                text.indexOf(value) > -1
            );

        });

    });


});

</script>


<!-- ====================================================== -->
<!-- STYLE -->
<!-- ====================================================== -->

<style>

/* ========================= */
/* HEADER */
/* ========================= */

.page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.page-title {

    font-weight: 700;

    color: #343a40;

    margin-bottom: 4px;

}

.page-subtitle {

    color: #8a94a6;

    font-size: 13px;

    margin: 0;

}

.btn-tambah {

    padding: 10px 18px;

    border-radius: 8px;

    font-weight: 500;

    box-shadow: 0 4px 12px rgba(0,123,255,.18);

}


/* ========================= */
/* ALERT */
/* ========================= */

.custom-alert {

    border: 0;

    border-radius: 8px;

    box-shadow: 0 3px 12px rgba(0,0,0,.05);

}


/* ========================= */
/* STATISTIC */
/* ========================= */

.loan-stat {

    min-height: 115px;

    border-radius: 12px;

    padding: 20px;

    color: white;

    display: flex;

    align-items: center;

    gap: 18px;

    box-shadow: 0 5px 15px rgba(0,0,0,.08);

    transition: .25s;

}

.loan-stat:hover {

    transform: translateY(-3px);

    box-shadow: 0 9px 22px rgba(0,0,0,.12);

}

.stat-blue {

    background: linear-gradient(
        135deg,
        #007bff,
        #0062cc
    );

}

.stat-orange {

    background: linear-gradient(
        135deg,
        #fd7e14,
        #e8590c
    );

}

.stat-green {

    background: linear-gradient(
        135deg,
        #28a745,
        #218838
    );

}

.stat-icon {

    width: 58px;

    height: 58px;

    border-radius: 15px;

    background: rgba(255,255,255,.18);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

}

.loan-stat small {

    opacity: .9;

}

.loan-stat h3 {

    font-size: 28px;

    margin: 2px 0;

    font-weight: 700;

}

.loan-stat span {

    font-size: 12px;

    opacity: .75;

}


/* ========================= */
/* CARD */
/* ========================= */

.loan-card {

    border: 0;

    border-radius: 12px;

    box-shadow: 0 3px 15px rgba(0,0,0,.06);

}

.loan-card-header {

    background: white;

    border-bottom: 1px solid #edf0f4;

    padding: 18px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.data-label {

    background: #f4f7fb;

    color: #6c757d;

    padding: 7px 12px;

    border-radius: 20px;

    font-size: 12px;

}


/* ========================= */
/* TABLE */
/* ========================= */

.loan-table {

    margin-bottom: 0;

}

.loan-table thead th {

    background: #f7f9fc;

    border-top: 0;

    border-bottom: 1px solid #e5e9ef;

    color: #495057;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .3px;

    padding: 14px 10px;

    white-space: nowrap;

}

.loan-table tbody td {

    vertical-align: middle;

    padding: 13px 10px;

    font-size: 13px;

    border-color: #edf0f4;

}

.loan-table tbody tr {

    transition: .15s;

}

.loan-table tbody tr:hover {

    background: #f8fbff;

}


/* ========================= */
/* NUMBER */
/* ========================= */

.number-circle {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #f0f4f8;

    font-weight: 600;

    font-size: 12px;

}


/* ========================= */
/* KODE */
/* ========================= */

.kode-pinjam {

    display: inline-block;

    background: #eaf2ff;

    color: #0069d9;

    padding: 7px 10px;

    border-radius: 6px;

    font-size: 12px;

    font-weight: 600;

}


/* ========================= */
/* MEMBER */
/* ========================= */

.member-name {

    display: flex;

    align-items: center;

    gap: 9px;

}

.member-name strong {

    display: block;

    color: #343a40;

}

.member-name small {

    display: block;

    color: #9aa3af;

    font-size: 10px;

}

.user-icon {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #e8f1ff;

    color: #007bff;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ========================= */
/* JUMLAH BUKU */
/* ========================= */

.book-count {

    background: #e8f7ef;

    color: #218838;

    padding: 7px 10px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 600;

}


/* ========================= */
/* DATE */
/* ========================= */

.date-info {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #5f6772;

    white-space: nowrap;

}

.date-info i {

    color: #007bff;

}

.return-date i {

    color: #28a745;

}


/* ========================= */
/* STATUS */
/* ========================= */

.status-badge {

    display: inline-block;

    padding: 7px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 600;

}

.status-loan {

    background: #fff3cd;

    color: #b77900;

}

.status-return {

    background: #e7f7ed;

    color: #218838;

}


/* ========================= */
/* ACTION */
/* ========================= */

.action-buttons {

    display: flex;

    justify-content: center;

    gap: 5px;

}

.action-btn {

    width: 34px;

    height: 34px;

    border-radius: 7px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none !important;

    transition: .2s;

}

.edit-btn {

    background: #fff3cd;

    color: #d39e00;

}

.edit-btn:hover {

    background: #ffc107;

    color: white;

}

.delete-btn {

    background: #fde8e8;

    color: #dc3545;

}

.delete-btn:hover {

    background: #dc3545;

    color: white;

}


/* ========================= */
/* EMPTY */
/* ========================= */

.empty-state {

    text-align: center;

    padding: 55px 20px;

}

.empty-icon {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: #f0f4f8;

    color: #adb5bd;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    font-size: 28px;

}

.empty-state h5 {

    margin-top: 18px;

    font-weight: 600;

}

.empty-state p {

    color: #8a94a6;

    font-size: 13px;

}


/* ========================= */
/* MODAL */
/* ========================= */

.custom-modal {

    border: 0;

    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 15px 50px rgba(0,0,0,.2);

}

.modal-header-custom {

    background: linear-gradient(
        135deg,
        #007bff,
        #0062cc
    );

    color: white;

    border: 0;

}

.modal-header-custom small {

    opacity: .8;

}


/* ========================= */
/* FORM SECTION */
/* ========================= */

.form-section {

    border: 1px solid #e5e9ef;

    border-radius: 12px;

    padding: 18px;

    background: #fff;

}

.section-title {

    display: flex;

    align-items: center;

    gap: 12px;

}

.section-title h6 {

    margin: 0 0 3px;

    font-weight: 700;

}

.section-title small {

    color: #9aa3af;

    font-size: 11px;

}

.section-icon {

    width: 40px;

    height: 40px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.blue-icon {

    background: #e8f1ff;

    color: #007bff;

}

.green-icon {

    background: #e7f7ed;

    color: #28a745;

}

.purple-icon {

    background: #f0e8ff;

    color: #6f42c1;

}


/* ========================= */
/* FORM */
/* ========================= */

.form-group label {

    font-size: 12px;

    font-weight: 600;

    color: #495057;

}

.form-control {

    border-radius: 7px;

    border-color: #dce1e7;

    font-size: 13px;

}

.form-control:focus {

    border-color: #80bdff;

    box-shadow: 0 0 0 .15rem rgba(0,123,255,.1);

}


/* ========================= */
/* SEARCH BUKU */
/* ========================= */

.book-search {

    position: relative;

}

.book-search i {

    position: absolute;

    left: 13px;

    top: 11px;

    color: #9aa3af;

    z-index: 2;

}

.book-search input {

    padding-left: 36px;

}


/* ========================= */
/* BOOK LIST */
/* ========================= */

.book-list {

    height: 235px;

    overflow-y: auto;

    border: 1px solid #e5e9ef;

    border-radius: 8px;

    padding: 8px;

    background: #fafbfc;

}

.book-item {

    padding: 10px;

    border-radius: 7px;

    transition: .15s;

}

.book-item:hover {

    background: #eef5ff;

}

.book-disabled {

    opacity: .5;

}

.book-title {

    font-weight: 500;

    color: #343a40;

}

.book-stock {

    display: inline-block;

    margin-left: 8px;

    padding: 3px 7px;

    border-radius: 5px;

    background: #e8f7ef;

    color: #218838;

    font-size: 10px;

}

.stock-empty {

    background: #fde8e8;

    color: #dc3545;

}


/* ========================= */
/* SELECTED BOOK */
/* ========================= */

.selected-books {

    background: #eaf2ff;

    color: #0069d9;

    border-radius: 7px;

    padding: 9px 12px;

    font-size: 12px;

}


/* ========================= */
/* FOOTER */
/* ========================= */

.modal-footer-custom {

    background: #f8f9fa;

}


/* ========================= */
/* DATATABLE */
/* ========================= */

.dataTables_wrapper {

    font-size: 13px;

}

.dataTables_wrapper .dataTables_filter input {

    border: 1px solid #dce1e7;

    border-radius: 7px;

    padding: 7px 10px;

    margin-left: 5px;

}

.dataTables_wrapper .dataTables_length select {

    border: 1px solid #dce1e7;

    border-radius: 7px;

    padding: 5px 8px;

}


/* ========================= */
/* MOBILE */
/* ========================= */

@media(max-width:768px) {

    .page-header {

        display: block;

    }

    .btn-tambah {

        width: 100%;

        margin-top: 15px;

    }

    .loan-card-header {

        display: block;

    }

    .data-label {

        display: inline-block;

        margin-top: 10px;

    }

    .loan-table {

        min-width: 950px;

    }

}

</style>


<?= $this->endSection() ?>