@extends('layouts.app')

@section('content')
    <div class="contents">
        <div class="crm mb-25">
            <div class="container-fluid">
                <div class="row ">
                    <div class="col-lg-12 d-flex justify-content-end">
                        @include('layouts.navigation')
                    </div>

                    <div class="col-lg-12">
                        <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                            <h2 class="breadcrumb-title"> (KAP) Questionnaires</h2>
                            {{-- <button class="btn btn-primary btn-squared" data-bs-toggle="modal" data-bs-target="#modal-basic">
                            Add Role <i class="fa-solid fa-plus ms-2"></i>
                        </button> --}}
                            <button class="btn btn-white btn-default btn-rounded asd_pragati_img px-2"><img width=""
                                    height="32px" src="././website_assets/images/ask-pragati-img.svg" alt="img"
                                    class="svg">
                                Ask Pragati
                            </button>
                        </div>
                    </div>

                    <div class="col-xxl-12">
                        {{-- <div class="userDatatable global-shadow border-light-0 w-100 adv-table">
                        <div class="table-responsive">
                            <table class="table mb-0 table-borderless table-striped">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th>S.No.</th>
                                        <th>Role Name</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($roles as $key => $role)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $role->name }}</td>
                                        <td class="text-end">
                                            <ul class="orderDatatable_actions mb-0 d-flex flex-wrap justify-content-end">
                                                @can('update-role')
                                                <li>
                                                    <a href="javascript:void(0)" class="edit text-success edit-permission-btn"
                                                        data-id="{{ $role->id }}"
                                                        data-name="{{ $role->name }}">
                                                        <i class="fas fa-pen"></i>
                                                    </a>
                                                </li>
                                                @endcan

                                                @can('delete-role')
                                                <li>
                                                    <a href="{{ url('roles/'.$role->id) }}"
                                                        class="remove text-danger mx-2">
                                                        <i class="fas fa-trash"></i>
                                                    </a>
                                                </li>
                                                @endcan
                                            </ul>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div> --}}

                        <div class="card card-default card-md mb-4">
                            <div class="card-header">
                                <h6>1. What do you understand by obesity?</h6>
                            </div>
                            <div class="card-body">
                                <div class="radio-theme-default custom-radio mb-3">
                                    <input class="radio" type="radio" name="radio-default" value="0" id="radio-1">
                                    <label for="radio-1">
                                        <span class="radio-text ps-2">Don’t Know</span>
                                    </label>
                                </div>
                                <div class="radio-theme-default custom-radio mb-3">
                                    <input class="radio" type="radio" name="radio-default" value="0" id="radio-1">
                                    <label for="radio-1">
                                        <span class="radio-text ps-2">A condition where a person has too much body fat</span>
                                    </label>
                                </div>
                                <div class="radio-theme-default custom-radio mb-3">
                                    <input class="radio" type="radio" name="radio-default" value="0" id="radio-1">
                                    <label for="radio-1">
                                        <span class="radio-text ps-2">A disease where a person becomes very thin</span>
                                    </label>
                                </div>
                                 <div class="radio-theme-default custom-radio mb-3">
                                    <input class="radio" type="radio" name="radio-default" value="0" id="radio-1">
                                    <label for="radio-1">
                                        <span class="radio-text ps-2">A disease where a person becomes very thin</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="modal-basic" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content modal-bg-white">
                        <div class="modal-header">
                            <h3 class="modal-title">Create Role Management</h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <form id="permissionForm" class="p-3">
                                @csrf
                                <input type="hidden" name="permission_id" id="permission_id">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group mb-3">
                                            <label for="permission_name" class="fw-500 mb-2">
                                                Role Name <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" id="permission_name" name="name" class="form-control"
                                                placeholder="Enter Role Name">
                                        </div>
                                        <div class="form-group mb-3">
                                            <label class="mb-2 text-primary">*Assign Permissions</label>
                                            <div class="crete-permission-role-list">
                                                @foreach ($permission as $key => $value)
                                                    <div class="form-check form-check-inline mb-2">
                                                        <input type="checkbox" name="permission[]"
                                                            value="{{ $value->id }}" class="form-check-input"
                                                            id="perm{{ $key + 1 }}">
                                                        <label class="form-check-label" for="perm{{ $key + 1 }}">
                                                            {{ $value->name }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <button type="submit" id="permissionSubmit"
                                            class="btn btn-primary btn-rounded mt-3 w-100">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Scripts --}}
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
            <script>
                $(function() {
                    const baseUrl = "{{ url('/') }}";

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    // Add button click
                    $('[data-bs-target="#modal-basic"]').on('click', function() {
                        $('#modal-basic .modal-title').text('Create Role');
                        $('#permissionForm')[0].reset();
                        $('#permissionForm input[type=checkbox]').prop('checked', false);
                        $('#permission_id').val('');
                        $('#permissionSubmit').text('Save');
                    });

                    // Edit button click
                    $(document).on('click', '.edit-permission-btn', function() {
                        const id = $(this).data('id');
                        const name = $(this).data('name');

                        $('#modal-basic .modal-title').text('Edit Role');
                        $('#permission_id').val(id);
                        $('#permission_name').val(name);
                        $('#permissionSubmit').text('Update');
                        $('#permissionForm input[type=checkbox]').prop('checked', false);

                        $.get(`${baseUrl}/roles/${id}/permissions`, function(data) {
                            $('#permissionForm input[type=checkbox]').prop('checked', false);
                            data.permissions.forEach(function(permId) {
                                $(`#permissionForm input[value="${permId}"]`).prop('checked', true);
                            });
                        });


                        $('#modal-basic').modal('show');
                    });

                    // Form submit
                    $('#permissionForm').on('submit', function(e) {
                        e.preventDefault();
                        const id = $('#permission_id').val();
                        const name = $('#permission_name').val();
                        const url = id ? `${baseUrl}/roles/${id}` : `${baseUrl}/roles`;
                        const method = id ? 'PUT' : 'POST';

                        const permissions = [];
                        $('#permissionForm input[name="permission[]"]:checked').each(function() {
                            permissions.push($(this).val());
                        });

                        $.ajax({
                            url: url,
                            method: 'POST',
                            data: {
                                name: name,
                                permission: permissions,
                                _method: method
                            },
                            success: function() {
                                $('#modal-basic').modal('hide');
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: id ? 'Role updated successfully!' :
                                        'Role created successfully!',
                                    timer: 2000,
                                    showConfirmButton: false
                                }).then(() => location.reload());
                            },
                            error: function(xhr) {
                                const message = xhr.responseJSON?.message || 'Something went wrong!';
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: message
                                });
                            }
                        });
                    });

                    // Delete with confirmation
                    $(document).on('click', '.remove', function(e) {
                        e.preventDefault();
                        const url = $(this).attr('href');

                        Swal.fire({
                            title: 'Are you sure?',
                            text: "This role will be permanently deleted!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Yes, delete it!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.post(url, {
                                    _method: 'DELETE'
                                }, function() {
                                    Swal.fire('Deleted!', 'Role has been deleted.', 'success')
                                        .then(() => location.reload());
                                }).fail(function() {
                                    Swal.fire('Error!', 'Failed to delete role.', 'error');
                                });
                            }
                        });
                    });
                });
            </script>
        </div>
    </div>
@endsection