@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button type="button" class="btn btn-primary mb-0" onclick="submitForm()" id="btn-simpan">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    @include('components.alert')
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <form id="my-form" action="{{ route('formpp.store') }}" method="POST">
                            @csrf

                            <div class="mb-3">
                                <label for="department" class="form-label">Department</label>
                                <input type="text" class="form-control" id="department" name="department" value="MIS"
                                    readonly>
                            </div>

                            <div class="mb-3">
                                <label for="date" class="form-label">Tanggal</label>
                                <input type="date" max="{{ date('Y-m-d') }}" class="form-control" id="date"
                                    name="date" value="{{ date('Y-m-d') }}">
                            </div>

                            {{-- Tabel detail --}}
                            <div class="col-md-12">
                                <div class="card">
                                    @include('components.alert')
                                    <div class="card-body">
                                        <div class="row mt-4">
                                            <div class="col-md-auto">
                                                <button type="button" class="btn btn-warning" onclick="addRow()"
                                                    style="margin-right: 10px;">
                                                    <i class="fa fa-plus me-2"></i>Tambah List
                                                </button>
                                            </div>
                                        </div>

                                        <div class="table-responsive mt-3">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr style="text-align: center; background-color: #f8f9fa;">
                                                        <th rowspan="2" style="vertical-align: middle;">Aksi</th>
                                                        <th rowspan="2" style="vertical-align: middle;">No</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Type Barang</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Uraian Barang
                                                        </th>
                                                        <th rowspan="2" style="vertical-align: middle;">Jenis / Type /
                                                            Merk / Ukuran *</th>
                                                        <th colspan="2">Jumlah</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Keperluan</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Tgl Dibutuhkan
                                                        </th>
                                                        <th colspan="2">Contoh Barang / Sample / Penawaran *</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Keterangan</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Urgency</th>

                                                    </tr>
                                                    <tr style="text-align: center; background-color: #f8f9fa;">
                                                        <th>QTY</th>
                                                        <th>Satuan</th>
                                                        <th>Ada</th>
                                                        <th>Tidak Ada</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="item-list">
                                                    <tr>
                                                        <td style="text-align: center;">
                                                            <button type="button" class="btn btn-danger"
                                                                onclick="removeRow(this)">X</button>
                                                        </td>
                                                        <td style="text-align: center;">1</td>
                                                        <td>
                                                            <select name="detail[0][type_b]" class="form-select">
                                                                @foreach ($typeBrg as $t)
                                                                    <option value="{{ $t->value }}">{{ $t->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <input type="text" name="detail[0][uraian]"
                                                                class="form-control required-input" required>
                                                        </td>
                                                        <td><input type="text" name="detail[0][type]"
                                                                class="form-control"></td>
                                                        <td>
                                                            <input type="number" name="detail[0][quantity]"
                                                                class="form-control required-input" min="1"
                                                                value="1" required>
                                                        </td>

                                                        <td>
                                                            <select name="detail[0][satuan]" class="form-select">
                                                                @foreach ($satuan as $value => $name)
                                                                    <option value="{{ $name }}">{{ $name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </td>

                                                        <td><input type="text" name="detail[0][purpose]"
                                                                class="form-control"></td>
                                                        <td><input type="date" name="detail[0][required_date]"
                                                                class="form-control"></td>
                                                        <td>
                                                            <div class="d-flex justify-content-center">
                                                                <div class="form-check me-2">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="detail[0][sample_available]"
                                                                        id="sampleAvailableYes_0" value="1">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex justify-content-center">
                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="detail[0][sample_available]"
                                                                        id="sampleAvailableNo_0" value="0" checked>
                                                                </div>
                                                            </div>
                                                        </td>


                                                        <td>
                                                            <textarea name="detail[0][notes]" class="form-control"></textarea>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex justify-content-center">
                                                                <!-- default 0 saat tidak dicentang -->
                                                                <input type="hidden" name="detail[0][urgency]"
                                                                    value="0">

                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="detail[0][urgency]" id="urgency_0"
                                                                        value="1">
                                                                    <label class="form-check-label ms-1"
                                                                        for="urgency_0">Ya. Urgent</label>
                                                                </div>
                                                            </div>
                                                        </td>


                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>


                </div>
            </div>

            <script>
                const satuanOptions = @json($satuan);
                const typeBOptions = @json($typeB);

                // console.log('typeB', typeBOptions);


                function submitForm() {
                    const inputs = document.querySelectorAll('.required-input');
                    let valid = true;

                    // Periksa apakah semua input wajib diisi
                    inputs.forEach(input => {
                        if (!input.value.trim()) {
                            valid = false;
                            input.classList.add('is-invalid'); // Tambahkan gaya untuk input yang kosong
                        } else {
                            input.classList.remove('is-invalid'); // Hapus gaya jika input diisi
                        }
                    });

                    if (!valid) {
                        Swal.fire(
                            'Gagal!',
                            'Harap lengkapi semua isian wajib.',
                            'error'
                        );
                        return;
                    }

                    Swal.fire({
                        title: 'Apakah Anda yakin?',
                        text: "Data akan disimpan ke dalam sistem.",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Ya, Simpan!',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Tampilkan alert sukses setelah validasi berhasil
                            Swal.fire({
                                title: 'Berhasil!',
                                text: 'Data berhasil disimpan.',
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                document.getElementById('my-form').submit(); // Kirim form setelah alert selesai
                            });
                        }
                    });
                }



                let itemIndex = 1;

                function addRow() {
                    const tableBody = document.getElementById('item-list');
                    const newRow = document.createElement('tr');

                    newRow.innerHTML = `
                    <td style="text-align: center;"><button type="button" class="btn btn-danger" onclick="removeRow(this)">X</button></td>
                        <td style="text-align: center;">${itemIndex + 1}</td>
                         <td>
                            <select name="detail[${itemIndex}][type_b]" class="form-select">
                                ${Object.entries(typeBOptions)
                            .map(([text, value]) => `<option value="${value}">${text}</option>`)
                            .join('')}
                            </select>
                        </td>
                        <td><input type="text" name="detail[${itemIndex}][uraian]" class="form-control required-input" required></td>
                                    <td><input type="text" name="detail[${itemIndex}][type]" class="form-control"></td>
                                    <td><input type="number" name="detail[${itemIndex}][quantity]" class="form-control required-input" required value="1" min="1"></td>
                                    
                        <td>
                            <select name="detail[${itemIndex}][satuan]" class="form-select">
                                ${Object.entries(satuanOptions).map(([value, name]) => `<option value="${name}">${name}</option>`).join('')}
                            </select>
                        </td>
                        <td><input type="text" name="detail[${itemIndex}][purpose]" class="form-control"></td>
                        <td><input type="date" name="detail[${itemIndex}][required_date]" class="form-control"></td>
                        <td>
                                                            <div class="d-flex justify-content-center">
                                                                <div class="form-check me-2">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="detail[${itemIndex}][sample_available]"
                                                                        id="sampleAvailableYes_0" value="1">
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex justify-content-center">
                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="detail[${itemIndex}][sample_available]"
                                                                        id="sampleAvailableNo_0" value="0" checked>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td><textarea name="detail[${itemIndex}][notes]" class="form-control"></textarea></td>
                                                        <td>
                                                            <div class="d-flex justify-content-center">
                                                                <!-- default 0 saat tidak dicentang -->
                                                                <input type="hidden" name="detail[${itemIndex}][urgency]"
                                                                    value="0">

                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="detail[${itemIndex}][urgency]" id="urgency_0"
                                                                        value="1">
                                                                    <label class="form-check-label ms-1"
                                                                        for="urgency_0">Ya. Urgent</label>
                                                                </div>
                                                            </div>
                                                        </td>
        
    `;
                    tableBody.appendChild(newRow);
                    itemIndex++;
                }

                function removeRow(button) {
                    const row = button.closest('tr');
                    row.remove();

                    const rows = document.querySelectorAll("#item-list tr");
                    rows.forEach((row, index) => {
                        row.cells[0].textContent = index + 1;
                    });

                    itemIndex = rows.length;
                }

                function removeRow(button) {
                    Swal.fire({
                        title: 'Yakin ingin menghapus?',
                        text: "Data yang dihapus tidak dapat dikembalikan!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Ya, Hapus!',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            const row = button.closest('tr');
                            row.remove();

                            const rows = document.querySelectorAll("#item-list tr");
                            rows.forEach((row, index) => {
                                row.cells[1].textContent = index + 1;
                            });

                            itemIndex = rows.length;

                            Swal.fire(
                                'Dihapus!',
                                'Baris berhasil dihapus.',
                                'success'
                            );
                        }
                    });
                }
            </script>
        @endsection