@extends('layouts.app')

@section('title', 'Manajemen Template')

@section('content')
    <div class="container py-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="fw-bold">Manajemen Template</h3>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambah">
                <i class="bi bi-plus-lg"></i> Tambah Template
            </button>
        </div>

        <!-- Table Template -->
        <div class="card shadow-sm">
            <div class="card-body">
                <table class="table table-bordered">
                    <thead class="table-light">
                        <tr>
                            <th>Nomor</th>
                            <th>Nama Template</th>
                            <th>Kategori</th>
                            <th>Harga</th>
                            <th>Fitur</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($templates as $index => $template)
                            <tr>
                                <td>{{ $templates->firstItem() + $index }}</td>
                                <td>{{ $template->nama_template }}</td>
                                <td>{{ $template->kategori->nama_kategori ?? '-' }}</td>
                                <td>Rp {{ number_format($template->harga, 0, ',', '.') }}</td>
                                <td>
                                    @foreach ($template->fiturs as $fitur)
                                        <span class="badge bg-info text-dark">{{ $fitur->nama_fitur }}</span>
                                    @endforeach
                                </td>
                                <td>
                                    <a href="{{ route('templates.show', $template->id) }}" class="btn btn-sm btn-info">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('templates.edit', $template->id) }}" class="btn btn-sm btn-warning">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form action="{{ route('templates.destroy', $template->id) }}" method="POST"
                                        class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-sm btn-danger"
                                            onclick="return confirm('Yakin hapus template ini?')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted">Belum ada template</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="mt-3">
                    {{ $templates->links() }}
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Template -->
    <div class="modal fade" id="modalTambah" tabindex="-1" aria-labelledby="modalTambahLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form action="{{ route('templates.store') }}" method="POST" enctype="multipart/form-data"
                class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTambahLabel">Tambah Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Nama -->
                    <div class="mb-3">
                        <label class="form-label">Nama Template</label>
                        <input type="text" name="nama_template" class="form-control" required>
                    </div>

                    <!-- Kategori -->
                    <div class="mb-3">
                        <label class="form-label">Kategori</label>
                        <select name="kategori_id" class="form-select" required>
                            <option value="">-- Pilih Kategori --</option>
                            @foreach ($kategoris as $kategori)
                                <option value="{{ $kategori->id }}">{{ $kategori->nama_kategori }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Fitur -->
                    <div class="mb-3">
                        <label class="form-label">Fitur</label><br>
                        @foreach ($fiturList as $fitur)
                            <div class="form-check form-check-inline">
                                <input class="form-check-input feature-checkbox" type="checkbox"
                                    id="fitur{{ $fitur->id }}" data-harga="{{ $fitur->harga }}">
                                <label class="form-check-label" for="fitur{{ $fitur->id }}">
                                    {{ $fitur->nama_fitur }} - Rp {{ number_format($fitur->harga, 0, ',', '.') }}
                                </label>
                            </div>
                        @endforeach
                    </div>

                    <!-- Harga -->
                    <div class="mb-3">
                        <label class="form-label">Harga</label>
                        <input type="text" id="harga" name="harga" class="form-control" value="Rp 0" readonly>
                    </div>


                    <!-- Foto -->
                    <div class="mb-3">
                        <label class="form-label">Foto</label>
                        <input type="file" name="foto" class="form-control">
                    </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">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const checkboxes = document.querySelectorAll('.feature-checkbox');
            const hargaInput = document.getElementById('harga');

            function updateHarga() {
                let total = 0;
                checkboxes.forEach(cb => {
                    if (cb.checked) total += parseInt(cb.dataset.harga);
                });

                hargaInput.value = 'Rp ' + total.toLocaleString('id-ID');
            }

            // jalan setiap ada perubahan
            checkboxes.forEach(cb => cb.addEventL   istener('change', updateHarga));

            // jalan pertama kali biar gak kosong
            updateHarga();
        });
    </script>
@endsection