@extends('administrative.layouts.main')
@section('title', 'Users')
@section('content')
    <x-breadcrumb />

    <div class="flex justify-between items-center mt-5">
        <div>
            <h4 class="text-2xl font-semibold">Users</h4>
        </div>

        <div class="">
            <x-button link="true" url="{{ route('administrative.user.create') }}" variant="blue" size="sm">
                <i class="fas fa-plus me-1"></i> Add New
            </x-button>

            <form action="{{ route('administrative.downloadCList') }}" class="inline-block">
                <x-button type="submit" variant="green" size="sm">
                    <i class="fas fa-download me-1"></i> Download
                </x-button>
            </form>
        </div>
    </div>

    <div class="bg-green-100 text-green-900 p-4 mt-4 rounded-xl hidden" id="successMsg">
        <strong>Success!</strong> Email-SMS sent successfully.
    </div>

    <div class="mt-6 rounded-lg bg-white p-4 shadow-[0_0_10px_0_rgba(183,192,206,0.2)]">
        <table id="datatables" class="table">
            <thead>
                <tr>
                    <th>SL</th>
                    <th>User Name</th>
                    <th>Customer Name</th>
                    <th>Customer Id</th>
                    <th>Role</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Is Verified</th>
                    <th>Data Retention</th>
                    <th>Permitted Report</th>
                    <th>Last Login Time</th>
                    <th>Invitation-Email-SMS</th>
                    <th>Invitation-Email-SMS_sent_at</th>
                    <th>Installation-Email-SMS</th>
                    <th>Installation-Email-SMS_sent_at</th>
                    <th>Status</th>
                    <th class="disabled-sorting text-right">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    {{-- <div class="modal fade bd-example-modal-sm" id="otpModal" tabindex="-1" role="dialog"
    aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content" style="padding: 2%">
        <p style="text-align: center;color: #0f6674">*Otp will be expired in 10 minutes*</p>
        <input type="text" class="form-control" id="input_otp" value="" placeholder="Please Enter OTP">
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" id="confirm_otp" class="btn btn-primary">Confirm OTP</button>
        </div>
      </div>
    </div>
  </div> --}}
@endsection
@section('pageScripts')
    <script>
        $(document).ready(function() {
            $('#datatables').DataTable({
                layout: {
                    topEnd: {
                        search: {
                            placeholder: 'Search...'
                        }
                    }
                },
                lengthMenu: [10, 20, 50, {
                    label: 'All',
                    value: -1
                }],
                pageLength: 20,
                language: {
                    search: ""
                },
                scrollX: true,
                processing: true,
                serverSide: true,
                ajax: '{{ route('administrative.user.data', $type) }}',
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'username',
                        name: 'username'
                    },
                    {
                        data: 'customer_name',
                        name: 'customer_name'
                    },
                    {
                        data: 'customer_code',
                        name: 'customer_code',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'roles',
                        name: 'roles',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'phone_number',
                        name: 'phone_number'
                    },
                    {
                        data: 'is_verified',
                        name: 'is_verified',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'data_retention',
                        name: 'data_retention',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'permitted_report',
                        name: 'permitted_report',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'last_login_time',
                        name: 'last_login_time',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'is_email_sent',
                        name: 'is_email_sent',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'email_sms_send_at',
                        name: 'email_sms_send_at',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'installation_email',
                        name: 'installation_email',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'last_installation_email_sent_at',
                        name: 'last_installation_email_sent_at',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ]
            });
        });

        function deleteData(rowid) {
            let url = '{{ route('administrative.user.destroy', ['id' => ':id']) }}';
            url = url.replace(':id', rowid);
            swal.fire({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        axios.delete(url).then(res => {
                            if (res.data == 'success') {
                                swal.fire({
                                    icon: "success",
                                    button: false,
                                    timer: 1000,
                                });
                                $('#datatables').DataTable().ajax.reload(null, false);
                            }
                        });
                    } else {
                        swal("Your imaginary file is safe!");
                    }
                });
        }

        let base_url = "{{ env('PANEL_URL') }}/switchUser";

        function impersonate(rowid) {
            let customer_id = rowid;

            $.ajax({
                type: "POST",
                url: "{{ route('administrative.impersonate') }}",
                data: {
                    customer_id: customer_id,
                    _token: "{{ csrf_token() }}",
                },
                success: function(response) {
                    const apiEndpoint = base_url;
                    const accessToken = response.access_token;
                    const url = `${apiEndpoint}?access_token=${accessToken}`;
                    window.open(url, '_blank');
                },
                error: function(error) {

                    console.error(error);
                }
            });
        }

        const successMsgEl = document.querySelector('#successMsg');

        function sendEmailSMS(customer_code) {
            var customer_code = customer_code;
            var confirmation = confirm("Are you sure you want to sent email and sms?");

            if (confirmation) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('administrative.sendEmailSMS') }}",
                    data: {
                        customer_code: customer_code,
                        _token: "{{ csrf_token() }}",
                    },
                    success: function(response) {
                        console.log(response.code);
                        if (response.code === 200) {
                            successMsgEl.classList.remove('hidden');
                            setTimeout(hideDiv, 5000);
                        } else if (response.code === 404) {
                            alert("User not found!");
                            console.log(response.msg);
                        }

                    },
                    error: function(error) {
                        alert("Something Went Wrong!");
                        console.log(response.error);
                    }
                });
            }
        }

        function hideDiv() {
            successMsgEl.classList.add('hidden');
            setTimeout(reloadPage, 5000);
        }

        function reloadPage() {
            location.reload();
        }
    </script>
@endsection