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

<?= $this->section('title') ?><?= env('app.name') ?><?= $this->endSection() ?>

<style>
    /* Media query tambahan untuk mendeteksi orientasi */
    @media (max-aspect-ratio: 1/1) {
        /* Pada orientasi portrait */
        .row.no-gutters > div {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    
    .book-cover {
        min-height: 200px; /* Minimal height agar tidak terlalu kecil */
        transition: all 0.3s ease; /* Animasi smooth saat berubah ukuran */
    }
</style>

<!-- main section start-->
<?= $this->section('main') ?>
<?php
    $uri      = current_url(true);
    $segment1 = $uri->setSilent()->getSegment(1);
?>
<!-- Breadcumb -->
<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);"><?= env('app.name') ?></a></li>
    <li class="breadcrumb-item">Library Selling Skill</li>
    
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<div class="row">
    <div class="col-xl-12">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>
                    Library <span class="fw-300">Selling Skill</span>
                </h2>
                <div class="panel-toolbar ml-2">
                    <form method="GET" class="d-flex position-relative ml-auto" style="max-width: 10rem;">
                        <i class="fal fa-search position-absolute pos-left fs-lg px-2 py-1 mt-1 fs-xs"></i>
                        <input type="text" name="search" value="<?= esc($search) ?>" class="form-control form-control-sm pl-5" placeholder="Search" onchange="this.form.submit()">
                        <input type="hidden" name="page" value="1">
                    </form>
                </div>&nbsp;&nbsp;
                <div class="panel-toolbar">
                    <button class="btn btn-icon btn-sm btn-info shadow-0 waves-effect waves-themed" id="rekam_data" onclick="rekam_data()">
                        <i class="fal fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="card-columns">
                        <?php foreach ($rows as $k) { $cover = base_url('flibs/'.$k->cover); ?>
                        <div class="card">
                            <div class="card-body" style="padding: 0.5rem !important;">
                                <div class="d-flex overflow-hidden rounded w-100 border">
                                    <div class="row no-gutters w-100">
                                        <!-- Cover ebook - akan berubah menjadi full width pada mode vertical/portrait -->
                                        <div class="col-12 col-lg-5">
                                            <div class="book-cover" style="
                                                background-image: url('<?= $cover ?>');
                                                padding-top: 140%; /* Aspect ratio 10:14 untuk buku */
                                                background-size: cover;
                                                background-position: center;
                                                background-repeat: no-repeat;
                                            "></div>
                                        </div>
                                        
                                        <!-- Uraian ebook - juga full width pada mode portrait -->
                                        <div class="col-12 col-lg-7">
                                            <div class="bg-faded flex-1 p-4">
                                                <h6 class="text-dark fw-500">
                                                    <?= $k->judul ?><br><small class="text-muted">Penulis : <?= $k->penulis ?></small>
                                                </h6>
                                                <p class="m-0"><?= substr($k->uraian, 0, 350) ?>...</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="row">
                                    <div class="col-4 col-sm-4">
                                        <button class="btn btn-sm btn-default btn-block edit_data" data-id="<?= encrypt_url($k->id) ?>">
                                            EDIT
                                        </button>
                                    </div>
                                    <div class="col-4 col-sm-4">
                                        <button class="btn btn-sm btn-danger btn-block delete_data" data-id="<?= encrypt_url($k->id) ?>" data-judul="<?= $k->judul ?>">
                                            HAPUS
                                        </button>
                                    </div>
                                    <div class="col-4 col-sm-4">
                                        <a href="<?= base_url('flibs/'.$k->berkas) ?>" target="blank" class="btn btn-success btn-sm btn-block pull-right">BACA</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php } ?>
                    </div>
                </div>

                <?php if ($total_pages > 1): ?>
                <div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0 border-bottom-0 text-muted">
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">
                            Showing <?= ($current_page - 1) * $limit + 1 ?> to <?= min($current_page * $limit, $total_records) ?> of <?= $total_records ?> entries
                            <?php if (!empty($search)): ?>
                                for "<strong><?= esc($search) ?></strong>"
                            <?php endif; ?>
                        </small>
                        
                        <ul class="pagination pagination-sm mb-0">
                            <?php
                            $search_param = !empty($search) ? '&search=' . urlencode($search) : '';
                            ?>
                            
                            <!-- Previous Page -->
                            <?php if ($current_page > 1): ?>
                                <li class="page-item">
                                    <a class="page-link" href="?page=<?= $current_page - 1 ?><?= $search_param ?>" aria-label="Previous">
                                        <span aria-hidden="true">«</span>
                                    </a>
                                </li>
                            <?php else: ?>
                                <li class="page-item disabled">
                                    <span class="page-link">«</span>
                                </li>
                            <?php endif; ?>
                            
                            <!-- Page Numbers -->
                            <?php
                            $start_page = max(1, $current_page - 2);
                            $end_page = min($total_pages, $current_page + 2);
                            
                            if ($start_page > 1): ?>
                                <li class="page-item">
                                    <a class="page-link" href="?page=1<?= $search_param ?>">1</a>
                                </li>
                                <?php if ($start_page > 2): ?>
                                    <li class="page-item disabled">
                                        <span class="page-link">...</span>
                                    </li>
                                <?php endif; ?>
                            <?php endif; ?>
                            
                            <?php for ($i = $start_page; $i <= $end_page; $i++): ?>
                                <li class="page-item <?= $i == $current_page ? 'active' : '' ?>">
                                    <a class="page-link" href="?page=<?= $i ?><?= $search_param ?>"><?= $i ?></a>
                                </li>
                            <?php endfor; ?>
                            
                            <?php if ($end_page < $total_pages): ?>
                                <?php if ($end_page < $total_pages - 1): ?>
                                    <li class="page-item disabled">
                                        <span class="page-link">...</span>
                                    </li>
                                <?php endif; ?>
                                <li class="page-item">
                                    <a class="page-link" href="?page=<?= $total_pages ?><?= $search_param ?>"><?= $total_pages ?></a>
                                </li>
                            <?php endif; ?>
                            
                            <!-- Next Page -->
                            <?php if ($current_page < $total_pages): ?>
                                <li class="page-item">
                                    <a class="page-link" href="?page=<?= $current_page + 1 ?><?= $search_param ?>" aria-label="Next">
                                        <span aria-hidden="true">»</span>
                                    </a>
                                </li>
                            <?php else: ?>
                                <li class="page-item disabled">
                                    <span class="page-link">»</span>
                                </li>
                            <?php endif; ?>
                        </ul>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- MODAL REKAM/UBAH -->
<div id="modal-user" class="modal fade default-example-modal-right" data-backdrop="static" tabindex="-1" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-right">
        <div class="modal-content">
            <div id="form-konten"></div>
        </div>
    </div>
</div><!-- END MODAL REKAM/UBAH -->

<?= $this->endSection() ?>
<!-- main section end-->

<!-- pageScripts section start-->
<?= $this->section('pageScripts') ?>

<script type="text/javascript">
function checkOrientation() {
    if (window.innerHeight > window.innerWidth) {
        // Portrait mode
        document.querySelectorAll('.row.no-gutters > div').forEach(col => {
            col.classList.remove('col-lg-5', 'col-lg-7');
            col.classList.add('col-12');
        });
    } else {
        // Landscape mode
        let cols = document.querySelectorAll('.row.no-gutters > div');
        cols[0].classList.remove('col-12');
        cols[0].classList.add('col-lg-5');
        cols[1].classList.remove('col-12');
        cols[1].classList.add('col-lg-7');
    }
}

// Check on load and resize
window.addEventListener('load', checkOrientation);
window.addEventListener('resize', checkOrientation);
</script>

<script type="text/javascript">
    function rekam_data()
    {
        $('#form-konten').load('<?= $link_rekam ?>');
        $('#modal-user').modal('show');
    }
    
    $('.edit_data').click(function() {
        var id = $(this).data('id');
        $('#form-konten').load('<?= $link_edit ?>' + id);
        $('#modal-user').modal('show');
    });

    $('.delete_data').click(function() {
        var id = $(this).data('id');
        var judul = $(this).data('judul');

        // Menggunakan SweetAlert2
        Swal.fire({
            title: '<?= lang('App.delete') ?>',
            text: '<?= lang('App.delete') ?> ' + judul + '?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'YES',
            cancelButtonText: 'CANCEL'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '<?= $link_hapus ?>',
                    type: "post",
                    dataType: 'json',
                    data: {
                        id: id,
                        "<?= csrf_token() ?>": "<?= csrf_hash() ?>",
                    },
                    error: function (xhr, status, message) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: status + ': ' + message
                        });
                    },
                    success: function(res) {
                        toastr.success(res.message, 'Updated!!', {timeOut: 3000});
                        window.location.reload();
                    }
                });
            }
        });
    });
</script>
<?= $this->endSection() ?>
<!-- pageScripts section end-->