@extends('template.master')

@section('content')
    <style>
        .accordion-button:not(.collapsed) {
            background-color: white;
        }

        .accordion-button::after {
            display: none !important;
        }
    </style>
    <div class="container">
        <h3><strong>{{ $form->title }}</strong></h3>
        @if ($canCreate)
            <x-primary-button id="addSection" class="mb-4">Tambah
                Section</x-primary-button>
        @endif
        <div class="accordion" id="accordionExample">
            @foreach ($form->sections as $sect)
                <div class="accordion-item shadow-sm mb-2">
                    <h2 class="accordion-header border border-b">
                        <div class="d-flex justify-content-between align-items-center w-100 pe-4">
                            <button class="accordion-button " type="button" data-bs-toggle="collapse"
                                data-bs-target="#id{{ $loop->iteration }}" aria-expanded="true"
                                aria-controls="id{{ $loop->iteration }}">
                                <h5 class="mb-0"><strong>{{ $sect->name }}</strong></h5>
                            </button>

                            <div class="ms-2 d-flex gap-2">
                                <button class="btn-sm btn btn-warning editSection" data-id="{{ $sect->id }}"
                                    data-name="{{ $sect->name }}"><i class="fa fa-pencil"></i></button>
                                <button data-form-info="section" data-id="{{ $sect->id }}"
                                    class="delete btn-sm btn btn-danger "><i class="fa fa-trash"></i></button>
                            </div>
                        </div>
                    </h2>
                    <div id="id{{ $loop->iteration }}" class="border-t accordion-collapse collapse ">
                        <div class="accordion-body">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 50px">No</th>
                                        <th>Inspection Item</th>
                                        <th>Status</th>
                                        <th style="width: 200px">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($sect->items as $index => $item)
                                        {{-- <tr style="@if ($index % 2 == 1)background-color: #efefef; @endif"> --}}
                                        <tr>
                                            <td class="border-e">{{ $index + 1 }}</td>
                                            <td class="border-e">{{ $item->name }}</td>
                                            <td class="border-e">{{ $item->status->pluck("name")->join(" | ") }}</td>
                                            <td>
                                                @if (PermissionHelper::hasPermission('checklist-items')->update)
                                                    <button data-id="{{ $item->id }}" data-name="{{ $item->name }}"
                                                        data-section_id="{{ $sect->id }}" data-status="{{$item->status->pluck("id")}}"
                                                        class="editItems btn-sm btn btn-warning"><i class="fa fa-pencil"></i></button>
                                                @endif
                                                @if (PermissionHelper::hasPermission('checklist-items')->delete)
                                                    <button data-form-info="item" data-id="{{ $item->id }}"
                                                        class="delete btn-sm btn btn-danger"><i class="fa fa-trash"></i></button>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                    <tr>
                                        <td colspan="4">
                                            <button class="addItems btn btn-primary w-100"
                                                data-section_id="{{ $sect->id }}">Tambah item</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Modal Section --}}
    <div class="modal fade" id="modalForm" tabindex="-1" aria-labelledby="modalTambahRoleLabel" aria-hidden="true">
        <div class="modal-dialog ">
            <form id="form" method="post" action="{{ route('checklist-sections.store') }}">
                @csrf
                @method('POST')
                <input type="hidden" name="form_id" value="{{ $form->id }}">
                <input type="hidden" name="form_section_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Tambah Section</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="name" class="form-label">Nama Section</label>
                            <input type="text" name="name" id="name" required class="form-control"
                                placeholder="Masukkan nama section">
                        </div>
                        <div id="section_status"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <template id="status_template">
        <div class="mb-3">
            <label for="status" class="form-label">Pilih Status Jawaban</label>
            <div class="d-flex flex-wrap gap-3">
                @foreach ($status as $item)
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" id="status_{{ $item->id }}" name="status[]"
                            value="{{ $item->id }}">
                        <label class="form-check-label" for="status_{{ $item->id }}">
                            {{ $item->name }}
                        </label>
                    </div>
                @endforeach
            </div>
        </div>
    </template>
@endsection


@push('extraJS')
    <script>
        $(document).ready(function () {

            // handle add and edit modal section
            $("#addSection").click(function () {
                $("#modalForm").modal("show");
                $("#modalForm").find(".modal-title").text("Tambah Section")
                $("#modalForm").find("form").attr("action", "/checklist-sections")
                $("#modalForm").find("[name='_method']").attr("value", "POST")
                $("#modalForm").find("[name='name']").val("")
                $("#modalForm").find("[name='name']").attr("placeholder", "Masukkan nama section")
                $("#modalForm").find("label").text("Nama section")
                $("#modalForm").find("#section_status").html("");
            });
            $(".editSection").click(function () {
                const id = $(this).data("id");
                const name = $(this).data("name");
                $("#modalForm").find(".modal-title").text("Ubah Section")
                $("#modalForm").find("[name='name']").val(name)
                $("#modalForm").find("form").attr("action", "/checklist-sections/" + id)
                $("#modalForm").find("[name='_method']").attr("value", "PUT")
                $("#modalForm").find("[name='name']").attr("placeholder", "Masukkan nama section")
                $("#modalForm").find("label").text("Nama section")
                $("#modalForm").find("#section_status").html("");
                $("#modalForm").modal("show");
            });


            // handle add and edit modal items
            $(".addItems").click(function () {
                $("#modalForm").modal("show");
                const section_id = $(this).data("section_id");
                $("#modalForm").find("[name='form_section_id']").val(section_id)
                $("#modalForm").find(".modal-title").text("Tambah Item")
                $("#modalForm").find("form").attr("action", "/checklist-items")
                $("#modalForm").find("[name='_method']").attr("value", "POST")
                $("#modalForm").find("[name='name']").val("")
                $("#modalForm").find("[name='name']").attr("placeholder", "Masukkan nama item")
                $("#modalForm").find("label").text("Nama item")
                $("#modalForm").find("#section_status").html($("#status_template").html());
            });
            $(".editItems").click(function () {
                const id = $(this).data("id");
                const name = $(this).data("name");
                const statusId = $(this).data("status");
                const section_id = $(this).data("section_id");
                $("#modalForm").find(".modal-title").text("Ubah Item")
                $("#modalForm").find("[name='name']").val(name)
                $("#modalForm").find("[name='form_section_id']").val(section_id)
                $("#modalForm").find("form").attr("action", "/checklist-items/" + id)
                $("#modalForm").find("[name='_method']").attr("value", "PUT")
                $("#modalForm").find("[name='name']").attr("placeholder", "Masukkan nama item")
                $("#modalForm").find("label").text("Nama item")

                let status = $("#status_template").html();
                statusId.forEach(s => {
                    status = status.replace(`id="status_${s}"`, `id="status_${s}" checked`);
                });
                console.log(status);
                $("#modalForm").find("#section_status").html(status);
                $("#modalForm").modal("show");
            });




            $("#form").submit(function (e) {
                e.preventDefault();
                const form = $(this)
                const url = $(this).attr("action")
                const method = $(this).find("[name='_method']").val() || form.attr("method");
                $.ajax({
                    url: url,
                    type: method,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: form.serialize(),
                    success: function (response) {
                        $('#modalForm').modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            $('.loading').show();
                            $('body').css('overflow', 'hidden');
                            window.location.reload();
                        });

                    },
                    error: function (xhr) {
                        // let message = xhr.responseJSON?.message ||
                        //     'Terjadi kesalahan saat update.';
                        // Swal.fire({
                        //     icon: 'error',
                        //     title: 'Gagal Update',
                        //     text: message
                        // });
                        handleValidationErrors(xhr, form);
                    }
                });
            })




            // Delete
            $(document).on("click", ".delete", function () {
                var id = $(this).data("id");
                var formInfo = $(this).data("form-info");
                const url = formInfo == "section" ? "/checklist-sections/" + id : "/checklist-items/" + id
                Swal.fire({
                    title: 'Apakah kamu yakin?',
                    text: "Data akan dihapus secara permanen!",
                    icon: 'warning',
                    showCancelButton: true,
                    cancelButtonColor: '#3085d6',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function (res) {
                                Swal.fire({
                                    title: 'Terhapus!',
                                    text: res.message,
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        window.location.reload();
                                    }
                                });


                            },
                            error: function (xhr) {
                                Swal.fire('Gagal!', 'Data gagal dihapus.', 'error');
                            }
                        });
                    }
                });
            });

        })
    </script>
@endpush