@extends('layouts.user.main')
@section('content')


<script src="{{asset('assets/js/validation/admin/user/userCreate.js?v2')}}"></script>

@if ($errors->any())
<div class="container-xxl alert-custom-class">
    <div class="alert alert-danger alert-dismissible" role="alert">
        <ul>
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!-- Modal Form Start -->
            <div class="modal fade" id="kt_modal_add_user" tabindex="-1" aria-hidden="true">
                <!-- Modal Dialog -->
                <div class="modal-dialog modal-dialog-centered mw-650px">
                    <div class="modal-content">
                        <div class="modal-header" id="kt_modal_add_user_header">
                            <h2 class="fw-bolder" id="modal-title">Add User</h2>
                            <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
                                <span class="fa fa-times"></span>
                            </div>
                        </div>

                        <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                            <form id="kt_modal_add_user_form" class="form" method="POST">
                                <div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_add_user" data-kt-scroll="true" 
                                data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" 
                                data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user" 
                                data-kt-scroll-offset="300px">
                                    @csrf
                                    <!-- Add a hidden input to differentiate between add and update -->
                                    <input type="hidden" name="_method" id="method" value="POST" action="{{route('user.store')}}">
                                    <input type="hidden" name="user_id" id="user_id" value="">

                                    <!-- Name input -->
                                    <div class="fv-row mb-7">
                                        <label class="required fw-bold fs-6 mb-2">Full Name</label>
                                        <input type="text" name="name" id="name" class="form-control form-control-solid mb-3 mb-lg-0"
                                        placeholder="Full name"/>
                                    </div>

                                    <!-- Email input -->
                                    <div class="fv-row mb-7">
                                        <label class="required fw-bold fs-6 mb-2">Email</label>
                                        <input type="email" name="email" id="email" class="form-control form-control-solid mb-3 mb-lg-0" 
                                        placeholder="Enter email"/>
                                    </div>

                                    <div class="fv-row mb-7" data-kt-password-meter="true">
                                        <!--begin::Wrapper-->
                                        <div class="mb-1">
                                            <!--begin::Label-->
                                            <label class="form-label fw-bold fs-6 mb-2">Password</label>
                                            <!--end::Label-->
                                            <!--begin::Input wrapper-->
                                            <div class="position-relative mb-3">
                                                <input class="form-control form-control-lg form-control-solid" type="password" 
                                                placeholder="Enter Password" name="password" id="password" autocomplete="off" />
                                                <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" 
                                                data-kt-password-meter-control="visibility">
                                                    <i class="bi bi-eye-slash fs-2"></i>
                                                    <i class="bi bi-eye fs-2 d-none"></i>
                                                </span>
                                            </div>
                                            <!--end::Input wrapper-->
                                            <!--begin::Meter-->
                                            <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
                                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                                <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
                                            </div>
                                            <!--end::Meter-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Hint-->
                                        <div class="text-muted">Use 8 or more characters with a mix of letters, numbers &amp; symbols.</div>
                                        <!--end::Hint-->
                                    </div>

                                    <!-- Confirm Password input -->
                                    <div class="fv-row mb-7">
                                        <label class="form-label fw-bold fs-6 mb-2">Confirm Password</label>
                                        <input class="form-control form-control-lg form-control-solid" placeholder="Enter Confirm Password" 
                                        type="password" name="confirmPassword" id="confirmPassword" autocomplete="off"/>
                                    </div>

                                    <!-- Role Selection -->
                                    <div class="mb-7">
                                        <label class="required fw-bold fs-6 mb-5">Role</label>
                                        @foreach ($roles as $role)
                                            <div class="d-flex fv-row">
                                                <div class="form-check form-check-custom form-check-solid">
                                                    <input class="form-check-input me-3" name="roles" type="radio" value="{{$role->name}}" 
                                                    id="role_{{$role->id}}" checked='checked' />
                                                    <label class="form-check-label" for="role_{{$role->id}}">
                                                        <div class="fw-bolder text-gray-800">{{$role->name}}</div>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="separator separator-dashed my-5"></div>
                                        @endforeach
                                    </div>
                                </div>

                                <!-- Modal Actions -->
                                <div class="text-center pt-15">
                                    <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
                                    <button type="submit" class="btn btn-primary" id="submit_button">
                                        <span class="indicator-label">Submit</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Form End -->

            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Card-->
                <div class="card card-flush">
                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_user_list">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-125px">User</th>
                                        <th class="min-w-125px">Role</th>
                                        <th class="min-w-125px">Status</th>
                                        <th class="min-w-125px">Join Date</th>
                                        <th class="min-w-100px">Action</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="text-gray-600 fw-bold text-start">
                                </tbody>
                                <!--end::Table body-->
                            </table>
                        </div>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
    <script type="text/javascript">
        const ajaxUrl = @json(route('user.index'));
        const token   = "{{ csrf_token() }}";
        const table   = $('#kt_table_user_list');

        var dataColumns = [
            {
                data: 'name',
                name: 'name',
                render: function(data, type, full, meta) {
                    var nameParts       = full.name.split(" ");
                    var nameFirstLetters = nameParts.slice(0, 2).map(function(part) {
                        return part.charAt(0).toUpperCase();
                    }).join("");

                    var fullName            = full.name;
                    var email               = full.email;

                    return '<div class="d-flex align-items-start">'+
                            '<div class="symbol symbol-circle symbol-50px overflow-hidden me-3">' +
                                '<a href="#">' +
                                    '<div class="symbol-label fs-3 bg-light-info text-info">' +
                                        nameFirstLetters 
                                    + '</div>' +
                                '</a>' +
                            '</div>' +
                            '<div class="d-flex flex-column">' +
                                '<a href="#" class="text-gray-800 text-hover-primary mb-1">' + fullName + '</a>' +
                                '<span>' + email + '</span>' +
                            '</div>'+
                        '</div>';
                }
            },
            {
                data: 'roles',
                name: 'roles',
                render: function(data, type, full, meta) {
                    return full.roles[0] ? full.roles[0].name : '-';
                },
            },
            {
                data: 'status',
                name: 'status',
                render: function(data, type, full, meta) {
                    return `<div class="form-check form-switch form-check-custom form-check-solid d-flex justify-content-start align-items-center">
                                <input class="form-check-input" type="checkbox" value="${full.status}" id="status_${full.id}" name="status" ${full.status === "1" ?
                                'checked="checked"' : ''} onchange="changeUserStatus('${full.id}')">
                                <input type="hidden" name="status" value="${full.status}">
                                <label class="form-check-label fw-bold text-gray-400 ms-3" for="status_${full.id}" id="status_label_${full.id}"></label>
                            </div>                    `;
                },
            },
            {
                data: 'created_at',
                name: 'created_at',
                render: function(data, type, full, meta) {
                    var joinDate = new Date(full.created_at);
                    return joinDate.toLocaleString('en-GB', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: true
                    }).replace(',', '');
                },
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ];

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

        $(document).ready(function() {
            makeDataTable(table, dataColumns);
        });

        function makeDataTable(table, dataColumns) {

            var reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title'<'d-flex position-relative my-1'f>><'card-toolbar flex-row-fluid justify-content-end gap-6'<'custom-button-container'>B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5 gap-2 d-flex align-items-center justify-content-center justify-content-md-start'l<i>><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>",
                processing: true,
                stateSave: true,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search User",
                    search: ""
                },
                buttons: [
                    @if (auth()->user()->can('User###Write'))    
                    {
                        text: 'Add User',
                        action: function (e, dt, node, config) {
                            $('#kt_modal_add_user_form')[0].reset();
                            $('#kt_modal_add_user_form').addClass('add-user-form');
                            $('#kt_modal_add_user_form').attr('action', "{{ route('user.store') }}");
                            $('#method').val('POST');
                            $('#user_id').val('');
                            $('#modal-title').text('Add User');
                            $('#submit_button').html('<span class="indicator-label">Submit</span>');
                            $('#kt_modal_add_user').modal('show');
                        },
                        createdCell: function (cell, cellData, rowData, row, col) {
                            $(cell).find('button').attr({
                                'data-bs-toggle': 'modal',
                                'data-bs-target': '#kt_modal_add_user'
                            });
                        }
                    }
                    @endif
                ],
                ajax: {
                    url: "{{ route('user.index') }}",
                    method: "GET",
                    data: {}
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    $(row).addClass('text-start');
                },
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
                order: [
                    [0, "desc"]
                ],
            }, );

        }

        function editUser(id) {

            $('#kt_modal_add_user_form')[0].reset();
            $('#kt_modal_add_user_form').removeClass('add-user-form');
            $('#method').val('PUT');
            $('#user_id').val(id);
            $('#submit_button').html('<span class="indicator-label">Update</span>');
            $('#kt_modal_add_user_form').attr('action', "{{ route('user.update', ['user' => ':user']) }}".replace(':user', id));
            $('#modal-title').text('Update User');

            $.ajax({
                url: "{{ route('user.edit', ['user' => ':user']) }}".replace(':user', id),
                method: 'GET',
                success: function(data) {                    
                    $('#name').val(data.user.name);
                    $('#email').val(data.user.email);
                    $("input[name='roles']").prop('checked', false);
                    data.userHasRoles.forEach(role => {
                        $('#role_' + role).prop('checked', true);
                    });
                }
            });

            $('#kt_modal_add_user').modal('show');
        }

        function changeUserStatus(id) {
            const statusCheckbox    = $(`#status_${id}`);
            const csrfToken         = "{{ csrf_token() }}";
            const status            = statusCheckbox.prop('checked') ? 1 : 0;
            const message           = `Are you sure you want to ${status == 1 ? 'activate' : 'deactivate'} this User?`;
            
            Swal.fire({
                title: message,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, change it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('updateUserStatus', ['id' => ':id']) }}".replace(':id', id),
                        method: 'POST',
                        data: {
                            status: status,
                            _token: csrfToken
                        },
                        success: function (response) {
                            location.reload();
                        },
                        error: function (error) {
                            console.error(error);
                        }
                    });
                } else {
                    statusCheckbox.prop('checked', !statusCheckbox.prop('checked'));
                }
            });
        }
    </script>
@endsection