@extends('admin.layouts.admin')
@section('content')
<div class="page-content">
    {!! globalSearchFilter($filters) !!}
    <div class="card mb-0">
        <div class="card-body">
            <div class="d-flex gap-2 mb-3 align-items-center">
                <button class="btn btn-primary" id="btnTambahData">
                    <i class="bi bi-plus fw-bold"></i> Tambah
                </button>

                <div class="d-flex align-items-center">
                    <button class="btn btn-success mb-0 d-flex align-items-center"
                            data-bs-toggle="modal"
                            data-bs-target="#importModal">
                        <i class="bi bi-file-earmark-excel me-1"></i> Import Excel
                    </button>
                </div>
            </div>

            <div class="table-responsive table-sticky">
                <table class="table table-bordered" id="masterTable">
                    <thead class="table-light text-center text-uppercase">
                    <tr>
                        <th rowspan="2">No</th>
                        <th rowspan="2">Kode Barang</th>
                        <th rowspan="2">Nama Barang</th>
                        <th rowspan="2">Spesifikasi</th>
                        <th rowspan="2">Qty</th>
                        <th rowspan="2">Satuan</th>
                        <th rowspan="2">Klasifikasi</th>
                        <th rowspan="2">Sub Kategori</th>
                        <th rowspan="2">Gambar</th>
                        <th rowspan="2">Keterangan</th>
                        <th rowspan="2">Link Referensi</th>
                        <th colspan="3" class="text-center">Harga</th>
                        <th rowspan="2">Link Ekatalog</th>
                        <th rowspan="2">Tahun</th>
                        <th colspan="3">Record</th>
                        <th rowspan="2">Action</th>
                    </tr>
                    <tr>
                        <th>HPP</th>
                        <th>Pagu</th>
                        <th>Tayang Ekatalog</th>
                        <th>User Account</th>
                        <th>Created At</th>
                        <th>Updated At</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="mt-3 d-flex justify-content-center">
        <nav>
            <ul class="d-inline-block pagination justify-content-end text-center" id="pagination"></ul>
        </nav>
    </div>

</div>

<div class="modal fade" id="formModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Tambah Master Produk</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <button class="btn btn-primary mb-3" id="addRowBtn">Add Row</button>
                <div class="table-responsive">
                    <table class="table table-bordered" id="modalTable">
                        <thead>
                            <tr>
                                <th>Kode Barang</th>
                                <th>Nama Barang</th>
                                <th>Spesifikasi</th>
                                <th>Qty</th>
                                <th>Klasifikasi</th>
                                <th>Sub Kategori</th>
                                <th>Satuan</th>
                                <th>File</th>
                                <th>Preview</th>
                                <th>Keterangan</th>
                                <th>Link Referensi</th>
                                <th>HPP</th>
                                <th>Harga Pagu</th>
                                <th>Harga Tayang Ekatalog</th>
                                <th>Link Ekatalog</th>
                                <th>Tahun</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Excel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formImport" enctype="multipart/form-data">
                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label" for="tahunImport">Tahun</label>
                        <input type="number" class="form-control" name="tahunImport" id="tahunImport" min="1900" max="9999">
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="klasifikasiImport">Klasifikasi</label>
                        <select class="form-select" name="klasifikasiImport" id="klasifikasiImport" required>
                            <option value="">-- Pilih --</option>
                            @foreach ($klasifikasi as $i)
                            <option value="{{ $i->id }}">{{ $i->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="subKategoriImport">Sub Kategori</label>
                        <select class="form-select" name="subKategoriImport" id="subKategoriImport">
                            <option value="">-- Pilih --</option>
                            @foreach ($subKategori as $i)
                            <option value="{{ $i->id }}">{{ $i->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="satuanImport">Satuan</label>
                        <select class="form-select" name="satuanImport" id="satuanImport">
                            <option value="">-- Pilih --</option>
                            @foreach ($satuan as $i)
                            <option value="{{ $i->id }}">{{ $i->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">File Excel</label>
                        <input type="file" class="form-control" name="file" accept=".xlsx,.xls" required>
                    </div>

                    <div class="mb-3 d-none" id="progressWrapper">
                        <label class="form-label">Progress</label>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated"
                                    role="progressbar"
                                    style="width: 0%"
                                    id="importProgress">0%</div>
                            </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
@include('admin.master.js')
@endpush