@extends('layouts.app')

@section('title', 'Master Spesifikasi')

@section('content')
    <div class="container py-4">
        <div class="row mb-4 align-items-end" data-aos="fade-down">
            <div class="col-md-8">
                <span
                    class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill mb-2 fw-bold tracking-wide">MASTER
                    DATA KEMASAN</span>
                <h3 class="fw-bolder mb-1">Katalog Spesifikasi Produksi</h3>
                <p class="text-muted mb-0">Kelola daftar material, opsi laminasi, dan jenis printing untuk kebutuhan sampel.
                </p>
            </div>
            <div class="col-md-4 text-md-end mt-3 mt-md-0">
                <button class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm hover-lift" data-bs-toggle="modal"
                    data-bs-target="#addModal">
                    <i class="bi bi-plus-circle-fill me-2"></i>Tambah Spesifikasi
                </button>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-4 border-start border-success border-5 mb-4"
                role="alert" data-aos="fade-in">
                <i class="bi bi-check-circle-fill fs-5 text-success me-2"></i> <span
                    class="fw-medium">{{ session('success') }}</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="card border-0 shadow-sm rounded-4 overflow-hidden" data-aos="fade-up" data-aos-delay="100">
            <div
                class="card-header bg-white border-bottom pt-4 pb-3 px-4 d-flex justify-content-between align-items-center">
                <h6 class="fw-bolder text-dark mb-0"><i class="bi bi-layers text-primary me-2"></i>Daftar Komponen</h6>
                <span class="badge bg-light text-dark border px-3 py-2 rounded-pill shadow-sm">{{ count($specifications) }}
                    Item</span>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="text-uppercase text-secondary fw-bold small py-3 ps-4"
                                    style="letter-spacing: 1px;">Kategori Tipe</th>
                                <th class="text-uppercase text-secondary fw-bold small py-3" style="letter-spacing: 1px;">
                                    Nama Spesifikasi</th>
                                <th class="text-uppercase text-secondary fw-bold small py-3 text-center"
                                    style="letter-spacing: 1px;">Status</th>
                                <th class="text-uppercase text-secondary fw-bold small py-3 pe-4 text-center"
                                    style="letter-spacing: 1px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($specifications as $spec)
                                <tr class="hover-lift-subtle">
                                    <td class="ps-4 py-3">
                                        @php
                                            $typeColor = match (strtolower($spec->type)) {
                                                'material' => 'primary',
                                                'lamination', 'laminasi' => 'info',
                                                'printing' => 'warning text-dark',
                                                default => 'secondary',
                                            };
                                        @endphp
                                        <span
                                            class="badge bg-{{ $typeColor }} bg-opacity-10 text-{{ $typeColor == 'warning text-dark' ? 'dark' : $typeColor }} border border-{{ $typeColor }} border-opacity-25 rounded-pill px-3 py-2 text-uppercase shadow-sm"
                                            style="font-size: 0.7rem;">
                                            <i class="bi bi-tag-fill me-1"></i> {{ $spec->type }}
                                        </span>
                                    </td>
                                    <td class="py-3 fw-bold text-dark">{{ $spec->name }}</td>
                                    <td class="py-3 text-center">
                                        @if ($spec->is_active)
                                            <span class="badge bg-success rounded-pill px-3 shadow-sm"><i
                                                    class="bi bi-check-circle me-1"></i> Aktif</span>
                                        @else
                                            <span class="badge bg-danger rounded-pill px-3 shadow-sm"><i
                                                    class="bi bi-x-circle me-1"></i> Nonaktif</span>
                                        @endif
                                    </td>
                                    <td class="pe-4 py-3 text-center">
                                        <form action="{{ route('dashboard.specifications.destroy', $spec->id) }}"
                                            method="POST" class="d-inline"
                                            onsubmit="return confirm('Yakin ingin menghapus spesifikasi ini dari master data?')">
                                            @csrf @method('DELETE')
                                            <button type="submit"
                                                class="btn btn-sm btn-light text-danger rounded-circle shadow-sm hover-lift"
                                                style="width: 35px; height: 35px;" data-bs-toggle="tooltip"
                                                title="Hapus Item">
                                                <i class="bi bi-trash3-fill"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5">
                                        <div class="bg-light rounded-circle d-inline-flex justify-content-center align-items-center mb-3 shadow-sm"
                                            style="width: 80px; height: 80px;">
                                            <i class="bi bi-box-seam text-muted fs-1"></i>
                                        </div>
                                        <h6 class="fw-bold text-dark">Belum Ada Master Data</h6>
                                        <p class="text-muted small mb-0">Silakan tambah spesifikasi baru untuk keperluan
                                            form sampel.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header border-bottom-0 pb-0 pt-4 px-4">
                    <h5 class="modal-title fw-bold"><i class="bi bi-plus-circle-fill text-primary me-2"></i>Tambah
                        Spesifikasi Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('dashboard.specifications.store') }}" method="POST">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="mb-4">
                            <label class="form-label fw-bold small text-secondary">Kategori Tipe <span
                                    class="text-danger">*</span></label>
                            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                <span class="input-group-text bg-light border-end-0 text-muted px-3"><i
                                        class="bi bi-tag"></i></span>
                                <select name="type" class="form-select border-start-0 py-2" required>
                                    <option value="" disabled selected>-- Pilih Kategori Komponen --</option>
                                    <option value="material">Material Kemasan</option>
                                    <option value="lamination">Laminasi (Lamination)</option>
                                    <option value="printing">Tipe Cetak (Printing)</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-bold small text-secondary">Nama Spesifikasi <span
                                    class="text-danger">*</span></label>
                            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                <span class="input-group-text bg-light border-end-0 text-muted px-3"><i
                                        class="bi bi-card-text"></i></span>
                                <input type="text" name="name" class="form-control border-start-0 py-2"
                                    placeholder="Contoh: PET 12 Micron, Matte, Rotogravure..." required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top-0 pt-0 pb-4 px-4">
                        <button type="button" class="btn btn-light rounded-pill px-4"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit"
                            class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm hover-lift">Simpan Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        });
    </script>
@endsection