@extends('admin.layouts.main')
@section('title', 'Data Varian')
@section('navVarian', 'active')

@section('content')

<div class="card border-0 shadow-sm mb-4">
    <div class="card-body d-flex justify-content-between align-items-center">
        <div>
            <h3 class="fw-bold mb-1">Data Varian</h3>
            <small class="text-muted">Manajemen varian produk</small>
        </div>

        <div>
            <i class="bi bi-layers fs-2 text-primary"></i>
        </div>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-3">
    <form method="GET"
        action="{{ route('dashboard-varian.index') }}"
        id="searchForm">
        <div class="input-group" style="max-width: 350px;">
            <span class="input-group-text bg-white">
                <i class="bi bi-search"></i>
            </span>
            <input
                type="text"
                name="search"
                id="searchVarian"
                class="form-control"
                value="{{ request('search') }}"
                placeholder="Cari varian..."
                autocomplete="off"
            >
        </div>
    </form>
    <a href="/dashboard-varian/create" class="btn btn-add-user">
        <i class="bi bi-plus-circle-fill me-2"></i>
        Tambah Varian
    </a>
</div>
<table class="table-dashboard" id="varianTable">
    <thead>
        <tr>
            <th>No</th>
            <th>Produk</th>
            <th>Level</th>
            <th>Ukuran</th>
            <th>Stok</th>
            <th>Harga</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($varians as $varian)
        <tr>
            <td>{{ $varians->firstItem() + $loop->index }}</td>
            <td>{{ $varian->produk->nama_produk ?? '-' }}</td>
            <td>{{ $varian->level }}</td>
            <td>{{ $varian->ukuran }}</td>
            <td>{{ $varian->stok }}</td>
            <td>Rp {{ number_format($varian->harga, 0, ',', '.') }}</td>
            <td class="text-nowrap">
                <div class="d-flex gap-2">
                    <button type="button"
                        class="btn btn-stock btn-add"
                        data-bs-toggle="modal"
                        data-bs-target="#modalTambahStok-{{ $varian->id }}">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                    <button type="button"
                        class="btn btn-stock btn-minus"
                        data-bs-toggle="modal"
                        data-bs-target="#modalKurangiStok-{{ $varian->id }}">
                        <i class="bi bi-dash-lg"></i>
                    </button>
                    <a href="{{ route('dashboard-varian.edit', [
                        'dashboard_varian' => $varian->id,
                        'page' => $varians->currentPage()
                    ]) }}"
                        class="btn btn-sm btn-primary border-0 d-flex align-items-center justify-content-center"
                        title="Edit">
                        <i class="bi bi-pencil-square"></i>
                    </a>
                    <button type="button"
                        class="btn btn-danger btn-sm btn-delete border-0 d-flex align-items-center justify-content-center"
                        data-id="{{ $varian->id }}"
                        title="Hapus">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                    <form id="form-delete-{{ $varian->id }}"
                        action="{{ route('dashboard-varian.destroy', $varian->id) }}"
                        method="POST"
                        style="display: none;">
                        @csrf
                        @method('DELETE')
                    </form>
                </div>
            </td>
        </tr>
        <div class="modal fade" id="modalTambahStok-{{ $varian->id }}" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content modal-luxury border-0">
                    <form action="{{ route('stok.tambah', $varian->id) }}" method="POST">
                        @csrf
                        <div class="modal-header border-0">
                            <h5 class="modal-title text-gold fw-semibold">
                                Tambah Stok -
                                {{ $varian->produk->nama_produk ?? '-' }}
                                ({{ $varian->level }} - {{ $varian->ukuran }})
                            </h5>
                            <button type="button"
                                class="btn-close btn-close-white"
                                data-bs-dismiss="modal">
                            </button>
                        </div>
                        <div class="modal-body">
                            <label class="form-label text-soft">
                                Jumlah
                            </label>
                            <input type="number"
                                name="jumlah"
                                class="form-control input-luxury"
                                min="1"
                                required>
                        </div>
                        <div class="modal-footer border-0">
                            <button type="submit"
                                class="btn btn-gold w-100">
                                Simpan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalKurangiStok-{{ $varian->id }}" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content modal-luxury border-0">
                    <form action="{{ route('stok.kurangi', $varian->id) }}" method="POST">
                        @csrf
                        <div class="modal-header border-0">
                            <h5 class="modal-title text-danger-soft fw-semibold">
                                Kurangi Stok -
                                {{ $varian->produk->nama_produk ?? '-' }}
                                ({{ $varian->level }} - {{ $varian->ukuran }})
                            </h5>
                            <button type="button"
                                class="btn-close btn-close-white"
                                data-bs-dismiss="modal">
                            </button>
                        </div>
                        <div class="modal-body">
                            <label class="form-label text-soft">
                                Jumlah
                            </label>
                            <input type="number"
                                name="jumlah"
                                class="form-control input-luxury mb-3"
                                min="1"
                                required>
                            <label class="form-label text-soft">
                                Keterangan
                            </label>
                            <input type="text"
                                name="keterangan"
                                class="form-control input-luxury"
                                placeholder="Penjualan / rusak / dll"
                                required>
                        </div>
                        <div class="modal-footer border-0">
                            <button type="submit"
                                class="btn btn-danger-soft w-100">
                                Simpan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    </tbody>
</table>
<div class="pagination-wrapper">
    <div class="pagination-info">
        Menampilkan
        <strong>{{ $varians->firstItem() ?? 0 }}</strong>
        -
        <strong>{{ $varians->lastItem() ?? 0 }}</strong>
        dari
        <strong>{{ $varians->total() }}</strong>
        varian
    </div>
    <div class="pagination-custom">
        @if ($varians->onFirstPage())
            <span class="page-btn disabled">
                <i class="bi bi-chevron-left"></i>
            </span>
        @else
            <a href="{{ $varians->previousPageUrl() }}" class="page-btn">
                <i class="bi bi-chevron-left"></i>
            </a>
        @endif
        <a href="{{ $varians->url(1) }}"
           class="page-btn {{ $varians->currentPage() == 1 ? 'active' : '' }}">
            1
        </a>
        @if ($varians->lastPage() >= 2)
            <a href="{{ $varians->url(2) }}"
               class="page-btn {{ $varians->currentPage() == 2 ? 'active' : '' }}">
                2
            </a>
        @endif
        @if ($varians->lastPage() >= 3)
            <a href="{{ $varians->url(3) }}"
               class="page-btn {{ $varians->currentPage() == 3 ? 'active' : '' }}">
                3
            </a>
        @endif
        @if ($varians->currentPage() > 3 && $varians->currentPage() < $varians->lastPage())
            <span class="page-dots">
                ...
            </span>
            <span class="page-btn active">
                {{ $varians->currentPage() }}
            </span>
        @elseif ($varians->lastPage() > 4)
            <span class="page-dots">
                ...
            </span>
        @endif
        @if ($varians->lastPage() > 3)
            <a href="{{ $varians->url($varians->lastPage()) }}"
               class="page-btn {{ $varians->currentPage() == $varians->lastPage() ? 'active' : '' }}">
                {{ $varians->lastPage() }}
            </a>
        @endif
        @if ($varians->hasMorePages())
            <a href="{{ $varians->nextPageUrl() }}" class="page-btn">
                <i class="bi bi-chevron-right"></i>
            </a>
        @else
            <span class="page-btn disabled">
                <i class="bi bi-chevron-right"></i>
            </span>
        @endif
    </div>
</div>

<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content modern-detail-modal border-0">
            <div class="modal-header-custom">
                <div>
                    <span class="badge-detail">Varian</span>
                    <h4 class="modal-title-detail mb-0">Detail Varian</h4>
                </div>
            </div>
            <div class="modal-body px-4 pb-4">
                <div class="detail-content">
                    <h2 class="detail-title mb-3" id="detailProduk"></h2>
                    <div class="d-flex gap-2 flex-wrap mb-3">
                        <span class="badge-pill" id="detailLevel"></span>
                        <span class="badge-pill dark" id="detailUkuran"></span>
                        <span class="badge-pill" id="detailStok"></span>
                        <span class="badge-pill dark" id="detailHarga"></span>
                    </div>
                    <button type="button"
                        class="btn-close-modern w-100"
                        data-bs-dismiss="modal">
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    let searchInput = document.getElementById('searchVarian');
        let searchForm = document.getElementById('searchForm');

        let timeout;

        searchInput.addEventListener('keyup', function () {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                searchForm.submit();
            }, 500);
        });

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.btn-delete').forEach(btn => {
            btn.addEventListener('click', function () {
                let id = this.dataset.id;
                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    text: "Data tidak bisa dikembalikan!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('form-delete-' + id).submit();
                    }
                });
            });
        });

        document.querySelectorAll('.btn-detail').forEach(btn => {
            btn.addEventListener('click', function () {
                document.getElementById('detailProduk').innerText = this.dataset.produk;
                document.getElementById('detailLevel').innerText = "Level: " + this.dataset.level;
                document.getElementById('detailUkuran').innerText = "Ukuran: " + this.dataset.ukuran;
                document.getElementById('detailStok').innerText = "Stok: " + this.dataset.stok;
                document.getElementById('detailHarga').innerText =
                    "Rp " + new Intl.NumberFormat('id-ID').format(this.dataset.harga);
                new bootstrap.Modal(document.getElementById('detailModal')).show();
            });
        });
    });
</script>

<link rel="stylesheet" href="{{ asset('css/adminstyle.css') }}" id="main-style-link">
<style>
    .btn-stock{
        width:48px;
        height:48px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:none;
        border-radius:16px;
        cursor:pointer;
        transition:.3s ease;
        box-shadow:0 10px 24px rgba(0,0,0,.12);
    }
    .btn-stock i{
        font-size:18px;
        font-weight:700;
    }
    .btn-add{
        background:linear-gradient(135deg,#c89a4b,#e6c980);
        color:#fff;
    }
    .btn-add:hover{
        background:linear-gradient(135deg,#b88437,#d7b05d);
        transform:translateY(-3px);
        box-shadow:0 14px 30px rgba(200,154,75,.30);
    }
    .btn-minus{
        background:#fff;
        color:#d9534f;
        border:1px solid #eadfc9;
    }
    .btn-minus:hover{
        background:#fdecec;
        color:#c9302c;
        transform:translateY(-3px);
        box-shadow:0 14px 28px rgba(217,83,79,.20);
    }
    .modal-luxury{
        background: linear-gradient(145deg, #141414, #0f0f0f);
        border-radius:22px;
        box-shadow:0 20px 60px rgba(0,0,0,.5);
    }
    .text-gold{
        color:#d4af37;
    }
    .text-danger-soft{
        color:#ff6b6b;
    }
    .text-soft{
        color:rgba(255,255,255,.65);
    }
    .input-luxury{
        background:#1b1b1b;
        border:1px solid rgba(255,255,255,.08);
        border-radius:14px;
        color:#fff;
        padding:10px 14px;
    }
    .input-luxury:focus{
        border-color:#d4af37;
        box-shadow:none;
        background:#1b1b1b;
        color:#fff;
    }
    .btn-gold{
        background:linear-gradient(135deg,#d4af37,#f5e6a3);
        color:#111;
        font-weight:600;
        border-radius:14px;
        padding:10px;
    }
    .btn-danger-soft{
        background:linear-gradient(135deg,#2b2b2b,#3a3a3a);
        color:#ff6b6b;
        border:1px solid rgba(255,107,107,.25);
        font-weight:600;
        border-radius:14px;
        padding:10px;
    }
    @media (max-width: 768px){
        .card-body{
            padding:16px;
        }
        .card-body h3{
            font-size:22px;
        }
        .card-body small{
            font-size:12px;
        }
        .card-body i{
            font-size:28px !important;
        }
        .btn-add-user{
            width:100%;
            padding:10px 14px;
            font-size:14px;
        }
        .dataTables_wrapper{
            overflow-x:auto;
        }
        #varianTable{
            min-width:700px;
        }
        #varianTable th,
        #varianTable td{
            font-size:13px;
            padding:10px 8px;
            white-space:nowrap;
        }
        .btn-stock,
        .btn-primary,
        .btn-danger{
            width:36px;
            height:36px;
            border-radius:10px;
        }
        .btn-stock i,
        .btn-primary i,
        .btn-danger i{
            font-size:14px;
        }
        .modal-dialog{
            margin:12px;
        }
        .modal-title{
            font-size:16px;
        }
        .modal-body{
            padding:16px;
        }
        .modal-footer{
            padding:16px;
        }
        .input-luxury{
            font-size:14px;
            padding:10px 12px;
        }
        .btn-gold,
        .btn-danger-soft{
            padding:10px;
            font-size:14px;
        }
        .text-gold,
        .text-danger-soft{
            font-size:15px;
        }
        .form-label{
            font-size:13px;
        }
    }
    .pagination-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 24px;
        padding: 18px 20px;
        background: #fff;
        border: 1px solid #eadfd3;
        border-radius: 12px;
    }
    .pagination-info {
        color: #75685D;
        font-size: 14px;
        line-height: 1.5;
        white-space: nowrap;
    }
    .pagination-info strong {
        color: #4B3022;
        font-weight: 600;
    }
    .pagination-custom {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .page-btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #E5D6C3;
        border-radius: 8px;
        background: #fff;
        color: #6E4B35;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition:
            background-color .2s ease,
            color .2s ease,
            border-color .2s ease,
            transform .2s ease;
    }
    .page-btn:hover {
        background: #F8F3EB;
        border-color: #B88A44;
        color: #6E4B35;
        text-decoration: none;
    }
    .page-btn.active {
        background: #6E4B35;
        border-color: #6E4B35;
        color: #fff;
        font-weight: 600;
    }
    .page-btn i {
        font-size: 13px;
    }
    .page-btn.disabled {
        background: #faf8f5;
        border-color: #eee5dc;
        color: #c8beb4;

        cursor: not-allowed;
    }
    @media (max-width: 768px) {
        .pagination-wrapper {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .pagination-info {
            font-size: 13px;
        }
        .pagination-custom {
            justify-content: center;
        }
        .page-btn {
            width: 34px;
            height: 34px;
        }
    }
</style>
@endpush