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

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

    <div class="row">
        <div class="col-md-12">
            {{-- TOP BAR --}}
            <div class="card shadow-lg mx-4 mt-top-menu">
                <div class="card-body p-3">
                    <div class="row gx-4">
                        <div class="col-auto my-auto">
                            <div class="h-100">
                                <h5 class="mb-1">
                                    Tambah {{ $title_menu ?? 'ISO Clauses' }}
                                </h5>
                                <p class="mb-0 font-weight-bold text-sm">
                                    Module Tambah {{ $title_menu ?? 'ISO Clauses' }}
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                            <div class="nav-wrapper position-relative inset-e-0">
                                <ul class="nav nav-pills nav-fill p-1 gap-2" role="tablist">
                                    <li class="nav-item">
                                        <h4 class="mb-0">
                                            <button class="btn btn-secondary mb-0 w-100"
                                                onclick="window.location='{{ URL::to($url_menu) }}'">
                                                <i class="fas fa-backward"></i>
                                                <span class="ms-1">Kembali</span>
                                            </button>
                                        </h4>
                                    </li>
                                    <li class="nav-item">
                                        <h4 class="mb-0">
                                            @if (isset($authorize) && $authorize->add == '1')
                                                <button type="submit" class="btn btn-primary mb-0 w-100" form="form-add">
                                                    <i class="fas fa-save"></i>
                                                    <span class="ms-1">Simpan</span>
                                                </button>
                                            @endif
                                        </h4>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- FORM --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        @include('components.alert')

                        <form action="{{ url($url_menu) }}" method="POST" id="form-add" enctype="multipart/form-data">
                            @csrf

                            {{-- ================= ISO HEADER ================= --}}
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <label class="form-label font-weight-bold">Standar ISO</label>
                                    <select name="idstandards" class="form-control" required>
                                        <option value="">-- PILIH ISO --</option>
                                        @foreach ($isoStandards as $iso)
                                            <option value="{{ $iso->idstandards }}">
                                                {{ $iso->code }} - {{ $iso->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <hr class="horizontal dark mt-0">

                            {{-- ================= KLAUSUL TABLE ================= --}}
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="font-weight-bold mb-0">Daftar Klausul</h6>
                                <button type="button" id="addRow" class="btn btn-success btn-sm mb-0">
                                    <i class="fas fa-plus me-1"></i> Tambah Klausul
                                </button>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-bordered align-items-center mb-0" id="klausulTable">
                                    <thead class="thead-light">
                                        <tr>
                                            <th width="5%" class="text-center text-xs font-weight-bold">No</th>
                                            <th width="20%" class="text-xs font-weight-bold">Nomor Klausul</th>
                                            <th width="25%" class="text-xs font-weight-bold">Nama Klausul</th>
                                            <th class="text-xs font-weight-bold">Deskripsi</th>
                                            <th width="5%" class="text-center text-xs font-weight-bold">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="row-number text-center text-sm">1</td>
                                            <td>
                                                <input type="text" name="clause_number[]" class="form-control"
                                                    placeholder="Contoh: 6.1" required>
                                            </td>
                                            <td>
                                                <input type="text" name="clause_name[]" class="form-control"
                                                    placeholder="Nama Klausul" required>
                                            </td>
                                            <td>
                                                <input type="text" name="description[]" class="form-control"
                                                    placeholder="Deskripsi Klausul">
                                            </td>
                                            <td class="text-center align-middle">
                                                <button type="button" class="btn btn-sm btn-danger mb-0 removeRow">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>

                                </table>
                                <div class="py-2 mb-0" role="alert">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Format Klausul:</strong> Gunakan angka dan titik. Contoh:
                                    6.1 (tingkat 1), 6.1.2 (tingkat 2), 6.1.2.3
                                    (tingkat 3).
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('js')
    <script>
        function updateRowNumber() {
            $('#klausulTable tbody tr').each(function(index) {
                $(this).find('.row-number').text(index + 1);
            });
        }

        $('#addRow').click(function() {

            let newRow = `
                    <tr>
                        <td class="row-number text-center"></td>
                        <td>
                            <input type="text" name="clause_number[]" class="form-control" required>
                        </td>
                        <td>
                            <input type="text" name="clause_name[]" class="form-control" required>
                        </td>
                        <td>
                            <input type="text" name="description[]" class="form-control">
                        </td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-danger removeRow">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>`;

            $('#klausulTable tbody').append(newRow);
            updateRowNumber();
        });

        $(document).on('click', '.removeRow', function() {
            if ($('#klausulTable tbody tr').length > 1) {
                $(this).closest('tr').remove();
                updateRowNumber();
            }
        });

        updateRowNumber();
    </script>
@endpush