@extends('layouts.index')
@section('title')
    Ref. Attendance
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/prism/prism.css" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" />

    <link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
    <link
        href="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css"
        rel="stylesheet">
        <style>
            label.error {
                color: #F94687;
                font-size: 13px;
                font-size: .875rem;
                font-weight: 400;
                line-height: 1.5;
                margin-top: 5px;
                padding: 0;
            }
        
            input.error {
                color: #F94687;
                border: 1px solid #F94687;
            }

            select.error {
                color: #F94687;
                border: 1px solid #F94687;
            }
        </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{ url('/') }}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Ref. Attendance
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Ref. Attendance</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <h4>Ref. Attendance</h4>
                            <div class="ms-auto p-3">
                                <a href="javascript:void(0)" id="btn-add-contact" class="btn btn-info"
                                    onclick="tambahData()" aria-controls="editJadwalSemua">
                                    <i data-feather="edit" class="feather-sm fill-white me-1">
                                    </i>
                                    Add Attendance</a>
                            </div>
                        </div>
                        <div class="card">
                            <div class="border-bottom title-part-padding">
                                <h4 class="card-title mb-0">List of Attendance</h4>
                            </div>
                            <div class="card-body">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Name</th>
                                            <th>Slug</th>
                                            <th>Is Mandatory</th>
                                            <th>Placeholder Description</th>
                                            <th>Status</th>
                                            <th>Option</th>
                                        </tr>
                                    </thead>
                                    <tbody id="list">
                                        @foreach ($list as $item)
                                            <tr id="list_{{ $item->id }}">
                                                <td @if ($loop->last) id="lastCount" @endif>{{ $loop->iteration }}</td>
                                                <td>{{ $item->nama }}</td>
                                                <td>{{ $item->slug ?: '-' }}</td>
                                                <td>
                                                    @php
                                                        if ($item->is_mandatory == 'Y') {
                                                            $status_is_mandatory = 'Active';
                                                            $statusColor_is_mandatory = 'success';
                                                        } else {
                                                            $status_is_mandatory = 'Inactive';
                                                            $statusColor_is_mandatory = 'danger';
                                                        }
                                                    @endphp
                                                    <span
                                                        class="badge bg-light-{{ $statusColor_is_mandatory }} text-{{ $statusColor_is_mandatory }}">{{ $status_is_mandatory }}</span>
                                                </td>
                                                <td>
                                                    {{ $item->placeholder_description ?: '-' }}
                                                </td>
                                                <td>
                                                    @php
                                                        if ($item->status == 'Y') {
                                                            $status = 'Active';
                                                            $statusColor = 'success';
                                                        } else {
                                                            $status = 'Inactive';
                                                            $statusColor = 'danger';
                                                        }
                                                    @endphp
                                                    <span
                                                        class="badge bg-light-{{ $statusColor }} text-{{ $statusColor }}">{{ $status }}</span>
                                                </td>
                                                <td>
                                                    @if ($item->kunci == 'N')
                                                        <a href="javascript:void(0)" id="btn-add-contact"
                                                            onclick="editData({{ $item->id }})"
                                                            aria-controls="editJadwalSemua">
                                                            <i class="fa fa-edit text-info">
                                                            </i>
                                                        </a>
                                                        <a href="javascript:void(0)"
                                                            onclick="deleteData({{ $item->id }})">
                                                            <i class="fa fa-trash text-danger">
                                                            </i>
                                                        </a>
                                                    @else
                                                        <i class="fa fa-lock"> Dikunci</i>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>

    <!-- Tambah -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="tambahData" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Add Data
            </h5>
            <hr>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div>
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-3">Add Attendance</h4>
                        <form class="form" id="tambah">
                            <div class="mb-3 mt-3">
                                <label for="fullname">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="nama" id="nama_tambah"
                                    placeholder="Name">
                                    <label id="error_nama" class="error mt-2" style="display: none;"></label>

                            </div>
                            <div class="mb-3 mt-3">
                                <label for="fullname">Slug <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="slug" id="slug_tambah"
                                    placeholder="Slug">
                                    <label id="error_slug" class="error mt-2" style="display: none;"></label>

                            </div>
                            <div class="mb-3">
                                <label for="fullname">Description</label>
                                <textarea id="uraian_tambah" class="form-control" name="uraian"></textarea>
                            </div>

                            <div class="mb-3">
                                <label for="fullname">Is Mandatory <span class="text-danger">*</span></label>
                                <select class="form-select" name="is_mandatory" id="is_mandatory">
                                    <option value="">-Choose Mandatory Status-</option>
                                    <option value="Y">Active</option>
                                    <option value="T">Inactive</option>
                                </select>
                                <label id="error_is_mandatory" class="error mt-2" style="display: none;"></label>
                            </div>

                            <div class="mb-3">
                                <label for="">Placeholder Description</label>
                                <input type="text" class="form-control" name="placeholder_description" id="placeholder_description_tambah">
                            </div>

                            <div class="mb-3">
                                <label for="fullname">Status <span class="text-danger">*</span></label>
                                <select class="form-select" name="status" id="status_tambah">
                                    <option value="Y">Active</option>
                                    <option value="T">Inactive</option>
                                </select>
                                <label id="error_status" class="error mt-2" style="display: none;"></label>

                            </div>
                            <div class="form-actions">
                                <div class="card-body border-top">
                                    <button type="button"
                                        class="
                            btn btn-outline-secondary
                            rounded-pill
                            px-4
                            ms-2
                           
                          "
                                        data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>

                                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                                        <div class="d-flex align-items-center">

                                            Save
                                        </div>
                                    </button>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="editData" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Edit Data
            </h5>
            <hr>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div>
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-3">Edit Ref. Attendance</h4>

                        <form class="form" id="edit">
                            <input type="hidden" name="id" id="id_edit" value="">
                            <div class="mb-3 mt-3">
                                <label for="fullname">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="edit_nama" id="nama_edit"
                                    placeholder="Name">
                                    <label id="error_edit_nama" class="error mt-2" style="display: none;"></label>
                            </div>
                            <div class="mb-3 mt-3">
                                <label for="fullname">Slug <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="edit_slug" id="slug_edit"
                                    placeholder="Slug">
                                    <label id="error_edit_slug" class="error mt-2" style="display: none;"></label>
                            </div>
                            <div class="mb-3">
                                <label for="fullname">Description</label>
                                <textarea id="uraian_edit" class="form-control" name="edit_uraian"></textarea>
                            </div>

                            <div class="mb-3">
                                <label for="fullname">Is Mandatory <span class="text-danger">*</span></label>
                                <select class="form-select" name="edit_is_mandatory" id="is_mandatory_edit">
                                    <option value="">-Choose Mandatory Status-</option>
                                    <option value="Y">Active</option>
                                    <option value="T">Inactive</option>
                                </select>
                                <label id="error_edit_is_mandatory" class="error mt-2" style="display: none;"></label>
                            </div>

                            <div class="mb-3">
                                <label for="">Placeholder Description</label>
                                <input type="text" class="form-control" name="placeholder_description" id="edit_placeholder_description">
                            </div>
                            
                            <div class="mb-3">
                                <label for="fullname">Status <span class="text-danger">*</span></label>
                                <select class="form-select" name="edit_status" id="status_edit">
                                    <option value="Y">Active</option>
                                    <option value="T">Inactive</option>
                                </select>
                                <label id="error_edit_status" class="error mt-2" style="display: none;"></label>
                            </div>
                            <div class="form-actions">
                                <div class="card-body border-top">
                                    <button type="button"
                                        class="
                            btn btn-outline-secondary
                            rounded-pill
                            px-4
                            ms-2
                           
                          "
                                        data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>

                                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                                        <div class="d-flex align-items-center">
                                            Save
                                        </div>
                                    </button>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    @endsection
    @section('js')
        <!--This page plugins -->
        <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
        <!-- start - This is for export functionality only -->
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
        <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

        <script src="{{ asset('back') }}/extra-libs/prism/prism.js"></script>
        <script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
        <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
        <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>

        <script src="{{ asset('back') }}/libs/nestable/jquery.nestable.js"></script>
        <script>
            //Aksi Tambah

            var offCanvasTambahData = document.getElementById("tambahData");
            var offCanvasTambah = new bootstrap.Offcanvas(offCanvasTambahData, {
                backdrop: true
            });

            function tambahData() {
                offCanvasTambah.show()
            }

            const tambah = document.getElementById('tambah');

            tambah.addEventListener('submit', async (e) => {
                e.preventDefault();

                const nama = tambah.nama.value;
                const is_mandatory = tambah.is_mandatory.value;
                const status = tambah.status.value;
                const uraian = tambah.uraian.value;
                const placeholder_description = tambah.placeholder_description.value;
                const slug = tambah.slug.value;
                const _token = "{{ csrf_token() }}";

                let formData = new FormData();
                formData.append("nama", nama);
                formData.append("is_mandatory", is_mandatory);
                formData.append("placeholder_description", placeholder_description);
                formData.append("status", status);
                formData.append("uraian", uraian);
                formData.append("slug", slug);

                try {
                    let response = await fetch("{{ route('ref-absensi.store-modal') }}", {
                        method: "POST",
                        body: formData,
                        headers: {
                            "X-CSRF-TOKEN": _token
                        }
                    });
                    var datasend = await response.json();

                    if (datasend.status == 'success') {

                        var res_id = datasend.data.id;
                        var res_nama = datasend.data.nama;
                        var res_is_mandatory = datasend.data.is_mandatory;
                        var res_status = datasend.data.status;
                        var res_uraian = datasend.data.uraian;
                        var res_placeholder_description = datasend.data.placeholder_description ?? '-';
                        var res_slug = datasend.data.slug;
                        var res_badge = 'success';
                        var res_status_value = 'Active';

                        if (res_status == 'T') {
                            res_badge = 'danger';
                            res_status_value = 'Inactive';
                        }

                        var last_count = $('#lastCount').text() ? $('#lastCount').text() : 0;
                        var number = parseInt(last_count) + 1;

                        var row = '<tr id="list_' + res_id + '"><td>' + number + '</td> <td>' + res_nama + '</td>';
                        row += '<td>' + res_slug + '</td> <td>' + res_is_mandatory + '</td> <td>'+res_placeholder_description+'</td><td><span class="badge bg-light-' + res_badge +
                            ' text-' + res_badge + '">' + res_status_value + '</span></td>';
                        row +=
                            '<td> <a href="javascript:void(0)" id="btn-add-contact" onclick="editData(' + res_id +
                            ')" aria-controls="editJadwalSemua">';
                        row +=
                            '<i class="fa fa-edit text-info"></i></a><a href="javascript:void(0)"  onclick="deleteData(' +
                            res_id + ')">';
                        row +=
                            ' <i class="fa fa-trash text-danger"> </i> </a> </td> </tr>';

                        $('#nama_tambah').val("");
                        $('#uraian_tambah').val("");
                        $('#placeholder_description_tambah').val("");
                        $('#slug_tambah').val("");
                        $('#list').append(row);
                        offCanvasTambah.hide()
                        Swal.fire('Attendence Reference has been added successfully', '', 'success')
                    } else if(datasend.status == 'false') {
                        $("label.error").css("display", "none");
                        $("input.error").removeClass("error");
                        for (const [key, value] of Object.entries(datasend.errors)) {
                            $("#error_" + key).css("display", "block");
                            $("#error_" + key).html(value[0]);
                            $('[name="' + key + '"]').addClass("error");
                        }
                    }

                } catch (err) {
                    console.log(err);
                }

                return false;
            });

            //Aksi Edit

            var offCanvasEditData = document.getElementById("editData");
            var offCanvasEdit = new bootstrap.Offcanvas(offCanvasEditData, {
                backdrop: true
            });

            function editData(id) {

                fetch("{{ url('ref-absensi-detail') }}/" + id).then(function(response) {
                    response.json().then(function(resp) {
                        var res = resp;
                        var nama = res.data.nama;
                        var uraian = res.data.uraian;
                        var slug = res.data.slug;
                        var is_mandatory = res.data.is_mandatory;
                        var placeholder_description = res.data.placeholder_description;
                        var status = res.data.status;

                        $('#id_edit').val(id);
                        $('#nama_edit').val(nama);
                        $('#uraian_edit').val(uraian);
                        $('#slug_edit').val(slug);
                        $('#is_mandatory_edit').val(is_mandatory);
                        $('#placeholder_description_edit').val(placeholder_description);
                        $('#status_edit').val(status);
                    });
                });

                offCanvasEdit.show();
            }

            const edit = document.getElementById('edit');

            edit.addEventListener('submit', async (e) => {
                e.preventDefault();

                const id = edit.id.value;
                const nama = edit.edit_nama.value;
                const is_mandatory = edit.edit_is_mandatory.value;
                const placeholder_description = edit.edit_placeholder_description.value;
                const status = edit.edit_status.value;
                const uraian = edit.edit_uraian.value;
                const slug = edit.edit_slug.value;
                const _token = "{{ csrf_token() }}";

                let formData = new FormData();
                formData.append("id", id);
                formData.append("edit_nama", nama);
                formData.append("edit_is_mandatory", is_mandatory);
                formData.append("edit_placeholder_description", placeholder_description);
                formData.append("edit_status", status);
                formData.append("edit_uraian", uraian);
                formData.append("edit_slug", slug);

                try {
                    let response = await fetch("{{ route('ref-absensi.update-modal') }}", {
                        method: "POST",
                        body: formData,
                        headers: {
                            "X-CSRF-TOKEN": _token
                        }
                    });
                    var datasend = await response.json();

                    if (datasend.status == 'success') {

                        var res_id = datasend.data.id;
                        var res_nama = datasend.data.nama;
                        var res_is_mandatory = datasend.data.is_mandatory;
                        var res_placeholder_description = datasend.data.placeholder_description;
                        var res_status = datasend.data.status;
                        var res_uraian = datasend.data.uraian;
                        var res_slug = datasend.data.slug;

                        var res_badge_is_mandatory = 'success';
                        var res_status_value_is_mandatory = 'Active';

                        var res_badge = 'success';
                        var res_status_value = 'Active';

                        if (res_status == 'T') {
                            res_badge = 'danger';
                            res_status_value = 'Inactive';
                        }

                        if (res_is_mandatory == 'T') {
                            res_badge_is_mandatory = 'danger';
                            res_status_value_is_mandatory = 'Inactive';
                        }

                        var last_count = $('#lastCount').text() ? $('#lastCount').text() : 0;
                        var number = parseInt(last_count) + 1;

                        var row = '<tr id="list_' + res_id + '"><td>' + number + '</td> <td>' + res_nama +
                            '</td>';
                        row += '<td>' + res_slug + '</td> <td><span class="badge bg-light-' + res_badge_is_mandatory +
                            ' text-' + res_badge_is_mandatory + '">' + res_status_value_is_mandatory + '</span></td> <td>'+res_placeholder_description+'</td> <td><span class="badge bg-light-' + res_badge +
                            ' text-' + res_badge + '">' + res_status_value + '</span></td>';
                        row +=
                            '<td> <a href="javascript:void(0)" id="btn-add-contact" onclick="editData(' + res_id +
                            ')" aria-controls="editJadwalSemua">';
                        row +=
                            '<i class="fa fa-edit text-info"></i></a><a href="javascript:void(0)"  onclick="deleteData(' +
                            res_id + ')">';
                        row +=
                            ' <i class="fa fa-trash text-danger"> </i> </a> </td> </tr>';

                        $('#nama_edit').val("");
                        $('#uraian_edit').val("");
                        $('#slug_edit').val("");
                        $('#placeholder_description_edit').val("");
                        $('#list_' + res_id).replaceWith(row);
                        offCanvasEdit.hide()
                        Swal.fire('Attendence Reference has been changed successfully', '', 'success')
                    } else if(datasend.status == 'false') {
                        $("label.error").css("display", "none");
                        $("input.error").removeClass("error");
                        for (const [key, value] of Object.entries(datasend.errors)) {
                            $("#error_" + key).css("display", "block");
                            $("#error_" + key).html(value[0]);
                            $('[name="' + key + '"]').addClass("error");
                        }
                    }

                } catch (err) {
                    console.log(err);
                }

                return false;
            });

            function deleteData(id) {
                Swal.fire({
                    title: 'Are you sure to delete this attendance reference?',
                    icon: 'info',
                    confirmButtonText: `Yes, delete it !`,
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('ref-absensi.delete-modal') }}",
                            method: "POST",
                            data: {
                                "_token": "{{ csrf_token() }}",
                                "id": id
                            },

                            success: function(result) {
                                Swal.fire('Attendance Reference has been successfully deleted', '', 'success')
                                $('#list_' + id).remove();
                            }
                        });
                    } else {

                    }
                });
            }
        </script>


    @endsection