@extends('user.app.layout')

@section('content')
<div class="main-content">
    <section class="table-section">
        <div class="table-section-color">
            <div class="container-fluid p-0">
                <div class="table-button">
                    <div class="row">
                        <div class="col-lg-5 col-sm-6 my-auto">
                            <h4>Group</h4>
                        </div>
                        <div class="col-lg-7 col-sm-6 text-end">
                            <a class="btn btn-blue-button" href="javascript:void(0)" data-bs-toggle="modal"
                                data-bs-target="#add_new_group"><img src="../assets/images/plus.png" alt="plus"
                                    class="me-3">Add New Group</a>
                        </div>
                    </div>
                </div>
                <table id="table_1" class="datatable_ct table table-striped mb-2 pb-1 mt-2 text-center"
                    style="width:100%">
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">Sr No</th>
                            <th scope="col" class="text-center">Group Name</th>
                            <th scope="col" class="text-center">Status</th>
                            <th scope="col" class="text-center">Actions</th>

                        </tr>
                    </thead>
                    <tbody>
                        {{-- <tr>
                                <td>01</td>
                                <td>Template 1</td>
                                <td><label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label></td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#edit_new_group"><img src="../assets/images/b.png"
                                                alt="image" class="me-2"> Edit</button>
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#delete"><img src="../assets/images/a.png" alt="image"
                                                class="me-2"> Delete</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>02</td>
                                <td>Template 2</td>
                                <td><label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label></td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#edit_new_group"><img src="../assets/images/b.png"
                                                alt="image" class="me-2"> Edit</button>
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#delete"><img src="../assets/images/a.png" alt="image"
                                                class="me-2"> Delete</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>03</td>
                                <td>Template 3</td>
                                <td><label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label></td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#edit_new_group"><img src="../assets/images/b.png"
                                                alt="image" class="me-2"> Edit</button>
                                        <button type="button" class="btn edit_btn" data-bs-toggle="modal"
                                            data-bs-target="#delete"><img src="../assets/images/a.png" alt="image"
                                                class="me-2"> Delete</button>
                                    </div>
                                </td>
                            </tr> --}}
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</div>


<div class="modal fade addresource-modal" id="add_new_group" data-bs-backdrop="static" data-bs-keyboard="false"
    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="add_new_group_head">Add New Group</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="new-resorces row">
                    <div class="col-sm-12 col-lg-12 col-md-12">
                        {{ Form::open(['url' => '#', 'name' => 'groupForm', 'id' => 'groupForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}
                        <div class="resorces-leftbox file-upload">
                            <div class="form-group">
                                <label for="group_name">Group Name *</label>
                                <input type="text" id="group_name" name="group_name" class="form-control"
                                    placeholder="Enter Group Name">
                            </div>
                            <input type="hidden" id="group_id" name="group_id">

                            <button type="submit" class="btn btn-submit" id="groupFormSubmit">Save</button>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade addresource-modal" id="edit_new_group" data-bs-backdrop="static" data-bs-keyboard="false"
    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Edit New Group</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="new-resorces row">
                    <div class="col-sm-12 col-lg-12 col-md-12">
                        <div class="resorces-leftbox file-upload">
                            <form>
                                <div class="form-group">
                                    <label for="inputEmail">Group Name *</label>
                                    <input type="text" id="inputEmail" class="form-control"
                                        placeholder="Enter Group Name" required autofocus>
                                </div>

                                <a class="btn btn-submit" href="javascript:void(0)">Save</a>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- enroll_doctor -->
<div class="modal fade" id="delete" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <!-- <div class="modal-header">
                                                        <h4 class="modal-title" id="exampleModalToggleLabel">Are you sure?</h4>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                      </div> -->
            <div class="modal-body">
                <div class="mb-3 delete_modal">
                    <i class="fa-solid fa-circle-exclamation"></i>
                    <h3 class="text-center" id="">Are you sure?</h3>
                    <h6 class="text-center">You won't be able to revert this!</h6>
                </div>

            </div>
            <div class="pt-2 pb-4 text-center">
                <button class="btn btn-success">Yes, delete it!</button>
                <button class="btn btn-danger" data-bs-dismiss="modal">Reject</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    $('#add_new_group').on('hidden.bs.modal', function() {
        $('#groupForm')[0].reset();
        var validator = $('#groupForm').validate();
        validator.resetForm();
        $('#add_new_group_head').html('Add New Group');
        $('#group_id').val('');
        $('#groupFormSubmit').show();
    });


    function changeStatus(id) {
        $.ajax({
            url: "{{ route('groupStatusAdmin') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    filterData()
                    $.notify(response.msg, "success");
                } else
                    $.notify(response.msg, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }

    function editGroupDetails(id) {
        $.ajax({
            url: "{{ route('groupViewDetails') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $('#group_id').val(response.encrypted_group_id);
                    $('#group_name').val(response.data.group_name);
                    $('#add_new_group_head').html('Edit Group Details');
                    $('#groupFormSubmit').show();

                    $('#add_new_group').modal('show');
                } else {
                    $.notify(response.msg, "error");
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }


    function filterData() {
        var i = 1;
        var table = $('#table_1').DataTable({
            scrollX: true,
            destroy: true,
            processing: true,
            serverSide: true,
            responsive: true,
            autoWidth: false,
            language: {
                searchPlaceholder: "Search",
                emptyTable: "No records available", // Message when no data exists
                zeroRecords: "No matching records found", // Message when no search results are found
                processing: "Loading, please wait...", // Message during data loading
            },
            ajax: {
                url: "{{ route('adminGroupPaginate') }}",
                data: function(d) {
                    d._token = "{{ csrf_token() }}"; // Properly include CSRF token
                    d.pendingList = $('#pendingList').is(':checked') ? 1 : 0;
                    d.group_filter = $('#group_filter').val();
                    d.verification_filter = $('#veification_filter').val();
                    d.type_filter = $('#type_filter').val();
                },
            },
            drawCallback: function(settings) {
                var api = this.api();

                // Handle empty data explicitly
                if (api.rows({
                        page: 'current'
                    }).data().length === 0) {
                    $("#table_1 tbody").html(`
                    <tr>
                        <td colspan="10" class="text-center">${api.settings()[0].oLanguage.emptyTable}</td>
                    </tr>
                `);
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'group_name',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'group_status',
                    orderable: false,
                    searchable: true
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: true
                },
            ],
            columnDefs: [{
                "aTargets": [1, 2, 3],
                "mRender": function(data, type, full) {
                    if (data != null) {
                        return data;
                    } else {
                        return '-';
                    }
                },
            }, ],

        });

    }

    $(document).ready(function() {
        filterData();

        $.validator.addMethod("notOnlySpaces", function(value, element) {
            return $.trim(value).length > 0;
        }, "This field cannot be just spaces.");

        $('#groupForm').validate({
            ignore: ".ignore",
            rules: {
                group_name: {
                    required: true,
                    maxlength: 50,
                    notOnlySpaces: true,
                },
            },
            messages: {},
            submitHandler: function(form) {

                $("#groupFormSubmit").attr('disabled', true);

                var formData = new FormData($("#groupForm")[0]);

                $.ajax({
                    url: "{{ route('adminAddUpdateGroup') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        $("#groupFormSubmit").attr('disabled', false);
                        if (response.status === 'success') {
                            $.notify(response.message, "success");
                            filterData();
                            $('#add_new_group').modal('hide');
                        } else {
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR) {
                        $("#groupFormSubmit").attr('disabled', false);
                        if (jqXHR.status === 422) {
                            const errors = jqXHR.responseJSON.errors;
                            for (const [field, messages] of Object.entries(errors)) {
                                $.notify(messages[0],
                                    "error");
                            }
                        } else {
                            $.notify(jqXHR.responseJSON.message || "An error occurred.",
                                "error");
                        }
                    }
                });
            }
        });
    });
</script>
@endsection