@extends('layouts.admin.base-dashboard')

@section('title', 'List Products')

@push('style')
<style>
/* <576px: satu kartu per baris */
@media (max-width: 575.98px) {
    .table-responsive { display: none !important; }
    #product-cards { display: flex; flex-direction: column; gap: 1rem; }
    #product-cards .col-card { flex: 0 0 100%; }
}
/* 576–768px: dua kartu per baris */
@media (min-width: 576px) and (max-width: 768px) {
    .table-responsive { display: none !important; }
    #product-cards { display: flex; flex-wrap: wrap; gap: 1rem; }
    #product-cards .col-card { flex: 0 0 calc(50% - 0.5rem); }
}
/* ≥769px: tampilkan tabel, sembunyikan kartu */
@media (min-width: 769px) {
    #product-cards { display: none; }
}

/* Styling kartu */
#product-cards .col-card .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#product-cards .col-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
#product-cards .col-card .list-group-item {
    padding: .5rem 1rem;
}
#product-cards .col-card .card-footer {
    background: transparent;
    border: none;
    padding: .5rem 1rem;
}
#product-cards .col-card .btn {
    margin-right: .5rem;
}

/* Popup image on hover */
.image-hover-popup {
    position: absolute;
    display: none;
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 9999;
}
</style>
@endpush

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <form id="branchFilterForm" class="d-flex align-items-center gap-2">
            @if($showBranchFilter)
                <select name="branch_id" id="branch_filter" class="form-control select2" style="min-width:200px">
                    <option value="">📍 Semua Cabang</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ $selectedBranchId == $branch->id ? 'selected' : '' }}>
                            {{ $branch->name }}
                        </option>
                    @endforeach
                </select>
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="la la-filter"></i> Filter
                </button>
            @else
                <span class="fw-bold text-muted">📍 Cabang: {{ auth()->user()->branch->name ?? '-' }}</span>
            @endif
        </form>
        <a href="{{ route('products.create') }}" class="btn btn-success btn-sm text-white">
            <i class="la la-plus"></i> Add
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive mb-3">
            <table id="table-products" class="table table-striped w-100">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Brand</th>
                        <th>Kategori</th>
                        <th>Stok</th>
                        <th>Harga</th>
                        <th>Updated At</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="product-cards" class="row g-3"></div>
    </div>
</div>
@endsection

@push('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(function(){
    $('.select2').select2();

    let table = $('#table-products').DataTable({
        processing: true,
        serverSide: true,
        order: [[0,'desc']],
        ajax: {
            url: '{{ url()->current() }}',
            data: function(d) {
                d.branch_id = $('#branch_filter').val();
            }
        },
        columns: [
            { data:'DT_RowIndex', orderable:false, searchable:false },
            { data:'name' },
            { data:'brand',    name:'brand' },
            { data:'category', name:'category' },
            { data:'stock',    className:'text-center' },
            { data:'price',    render: $.fn.dataTable.render.number(',', '.', 0, 'Rp ') },
            { data:'updated_at' },
            { data:'action',   orderable:false, searchable:false }
        ],
        pageLength: 8,
        lengthMenu: [8,16,32],
        drawCallback: function(){
            let data = this.api().rows({ page:'current' }).data();
            let html = '';
            $.each(data, function(i, r){
                html += `
                <div class="col-card">
                  <div class="card shadow-sm">
                    <div class="card-body">
                      <h5 class="card-title text-truncate">${r.name}</h5>
                      <ul class="list-group list-group-flush mb-3">
                        <li class="list-group-item"><strong>Brand:</strong> ${r.brand}</li>
                        <li class="list-group-item"><strong>Kategori:</strong> ${r.category}</li>
                        <li class="list-group-item"><strong>Stok:</strong>
                          <span class="badge badge-${r.stock>0?'success':'danger'}">${r.stock}</span>
                        </li>
                        <li class="list-group-item"><strong>Harga:</strong> ${r.price}</li>
                        <li class="list-group-item"><strong>Updated:</strong> ${r.updated_at}</li>
                      </ul>
                    </div>
                    <div class="card-footer d-flex">
                      <button type="button"
                              class="btn btn-sm btn-secondary view-image-btn"
                              data-image-url="${r.image_url}">
                        <i class="la la-image"></i>
                      </button>
                      ${r.action}
                    </div>
                  </div>
                </div>`;
            });
            $('#product-cards').html(html);

            if ($(window).width() < 769) {
                $('.table-responsive').hide();
                $('#product-cards').show();
            } else {
                $('.table-responsive').show();
                $('#product-cards').hide();
            }
        }
    });

    $('#branchFilterForm').on('submit', function(e){
        e.preventDefault();
        table.ajax.reload();
    });

    $('body').on('mouseenter', '.view-image-btn', function () {
        $('.image-hover-popup').remove();
        var $btn = $(this),
            url  = $btn.data('image-url'),
            off  = $btn.offset();

        var popup = $(
            `<div class="image-hover-popup">
                <img src="${url}" style="max-width:200px; max-height:200px;">
            </div>`
        );
        $('body').append(popup);
        popup.css({
            top:  off.top + $btn.outerHeight() + 5,
            left: off.left
        }).fadeIn(100);
    });

    $('body').on('mouseleave', '.view-image-btn', function () {
        $('.image-hover-popup').fadeOut(100, function(){
            $(this).remove();
        });
    });
});
</script>
@endpush