@extends('console_layouts.master')
@section('title')
    管理員設定
@endsection
@section('css')
    <link href="{{ asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet">
@endsection
@section('css')
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            管理員操作
        @endslot
        @slot('title')
            管理員設定
        @endslot
    @endcomponent

    <div class="row">
        <div class="col-lg-12">
            <div class="card" id="leadsList">
                <div class="card-header border-0">

                    <div class="row g-4 align-items-center">
                        <div class="col-sm-auto ms-auto">
                            <div class="hstack gap-2">
                                <button type="button" class="btn btn-primary add-btn" data-bs-toggle="modal" id="create-btn"
                                    data-bs-target="#createModal"><i class="ri-add-line align-bottom me-1"></i>新增管理員</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div>
                        <div class="table-responsive table-card">
                            <table class="table align-middle" id="customerTable">
                                <thead class="table-light">
                                    <tr>
                                        <th scope="col" style="width: 50px;">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="checkAll"
                                                    value="option">
                                            </div>
                                        </th>
                                        <th>ID</th>
                                        <th>姓名</th>
                                        <th>動作</th>
                                    </tr>
                                </thead>
                                <tbody class="list form-check-all">
                                    @foreach ($admins as $admin)
                                    <tr data-id="{{$admin->id}}">
                                        <td scope="row">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="chk_child"
                                                    value="option1">
                                            </div>
                                        </td>
                                        <td class="id">{{$admin->id}}</td>
                                        <td class="name">
                                            {{$admin->name}}
                                        </td>
                                        <td>
                                            <ul class="list-inline hstack gap-2 mb-0">
                                                <li class="list-inline-item" data-bs-toggle="tooltip"
                                                    data-bs-trigger="hover" data-bs-placement="top" title="編輯">
                                                    <a class="edit-item-btn" href="#editModal"
                                                        data-bs-toggle="modal"><i
                                                            class="ri-pencil-fill align-bottom text-muted"></i></a>
                                                </li>
                                                <li class="list-inline-item" data-bs-toggle="tooltip"
                                                    data-bs-trigger="hover" data-bs-placement="top" title="變更密碼">
                                                    <a class="edit-password-btn" href="#changPasswordModal"
                                                        data-bs-toggle="modal"><i
                                                            class="ri-lock-unlock-fill align-bottom text-muted"></i></a>
                                                </li>
                                                <li class="list-inline-item" data-bs-toggle="tooltip"
                                                    data-bs-trigger="hover" data-bs-placement="top" title="刪除" role="button"
                                                    onclick="confirmDeleteAdminSwal('{{$admin->id}}')">
                                                        <i class="ri-delete-bin-fill align-bottom text-muted"></i>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="gridjs-footer">
                            @if ($pagination->hasPages())
                                <div class="gridjs-pagination text-end">
                                    <div class="gridjs-pages">
                                        @if (!$pagination->onFirstPage())
                                            <button tabindex="0" role="button" title="Previous"
                                                aria-label="Previous" class=""
                                                onclick="window.location='{{ $pagination->previousPageUrl() }}';">上一頁</a></button>
                                         @endif

                                        @for ($i = 0; $i < $pagination->lastPage(); $i++)
                                            <button tabindex="0" role="button"
                                                class="{{ $pagination->currentPage() == $i + 1 ? 'gridjs-currentPage' : '' }}"
                                                title="Page {{ $i + 1 }}"
                                                aria-label="Page {{ $i + 1 }}"
                                                onclick="window.location='{{ $pagination->url($i + 1) }}';">{{ $i + 1 }}</a></button>
                                        @endfor

                                        @if (!$pagination->onLastPage())
                                            <button tabindex="0" role="button" title="Next"
                                                aria-label="Next" class=""
                                                onclick="window.location='{{ $pagination->nextPageUrl() }}';">下一頁</a></button>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header bg-light p-3">
                                    <h5 class="modal-title" id="exampleModalLabel">新增管理員</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                        id="close-modal"></button>
                                </div>
                                <div action="">
                                    <div class="modal-body">
                                        <input type="hidden" class="id-field" />
                                        <div class="row g-3">
                                            <div class="col-lg-12">
                                                <div>
                                                    <label for="create-name-input"
                                                        class="form-label">姓名</label>
                                                    <input type="text" id="create-name-input" maxlength="255"
                                                        class="form-control"/>
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div>
                                                    <label for="create-username-input" class="form-label">帳號</label>
                                                    <input type="text" id="create-username-input" class="form-control" />
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div>
                                                    <label for="create-password-input"
                                                        class="form-label">密碼</label>
                                                    <input type="text" id="create-password-input" maxlength="255"
                                                        class="form-control"/>
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div>
                                                    <label for="create-password-check-input"
                                                        class="form-label">再次輸入密碼</label>
                                                    <input type="text" id="create-password-check-input" maxlength="255"
                                                        class="form-control"/>
                                                </div>
                                            </div>
                                            <!--end col-->
                                            
                                        </div>
                                        <!--end row-->
                                    </div>
                                    <div class="modal-footer">
                                        <div class="hstack gap-2 justify-content-end">
                                            <button type="button" class="btn btn-light"
                                                data-bs-dismiss="modal">取消</button>
                                            <button type="submit" class="btn btn-success" id="add-btn">新增</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header bg-light p-3">
                                    <h5 class="modal-title" id="exampleModalLabel">編輯資料</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                        id="close-modal"></button>
                                </div>
                                <div>
                                    <div class="modal-body">
                                        <input type="hidden" class="id-field" />
                                        <div class="row g-3">
                                            <div class="col-lg-12">
                                                <div>
                                                    <label for="update-name-input"
                                                        class="form-label">姓名</label>
                                                    <input type="text" id="update-name-input" maxlength="255"
                                                        class="form-control" />
                                                </div>
                                            </div>
                                            <!--end col-->                                            
                                        </div>
                                        <!--end row-->
                                    </div>
                                    <div class="modal-footer">
                                        <div class="hstack gap-2 justify-content-end">
                                            <button type="button" class="btn btn-light"
                                                data-bs-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-success" id="update-save-btn">儲存</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="changPasswordModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header bg-light p-3">
                                    <h5 class="modal-title" id="exampleModalLabel">變更密碼</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                        id="close-modal"></button>
                                </div>
                                <div>
                                    <div class="modal-body">
                                        <input type="hidden" class="id-field" />                                        
                                        <div class="row pb-3">
                                            <div class="change-password-admin-info">
                                            </div>
                                        </div>
                                        <div class="row g-3">
                                            <div class="col-lg-12">
                                                <div>
                                                    <label for="change-password-input"
                                                        class="form-label">新密碼</label>
                                                    <input type="text" id="change-password-input" maxlength="255"
                                                        class="form-control" />
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div>
                                                    <label for="change-password-check-input" class="form-label">再次輸入密碼</label>
                                                    <input type="text" id="change-password-check-input" class="form-control" maxlength="255" />
                                                </div>
                                            </div>
                                            <!--end col-->
                                            
                                        </div>
                                        <!--end row-->
                                    </div>
                                    <div class="modal-footer">
                                        <div class="hstack gap-2 justify-content-end">
                                            <button type="button" class="btn btn-light"
                                                data-bs-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-success" id="change-password-save-btn">儲存</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                </div>
            </div>

        </div>
        <!--end col-->
    </div>
    <!--end row-->
@endsection
@section('script')
    <script src="{{ asset('assets/js/app.min.js') }}"></script>
    <script>

        const edit_item_btn = document.querySelectorAll('.edit-item-btn');
        const edit_password_btn = document.querySelectorAll('.edit-password-btn');

        const update_name_input = document.getElementById("update-name-input");
        const save_update_btn = document.getElementById("update-save-btn");

        const create_password_input = document.getElementById("create-password-input");
        const create_password_check_input = document.getElementById("create-password-check-input");  
        const change_password_input = document.getElementById("change-password-input");
        const change_password_check_input = document.getElementById("change-password-check-input");   

        const change_password_save_btn = document.getElementById("change-password-save-btn");

        var admins = @json($admins);

        window.onload = function(){
            var create_admin_button = document.getElementById("add-btn");
            var create_name_input = document.getElementById("create-name-input");
            var create_username_input = document.getElementById("create-username-input");          

            create_admin_button.addEventListener('click', function(){
                
                if(create_name_input.value==""){
                    infoSwal('請填寫管理者姓名');
                    return;
                }

                if(create_username_input.value==""){
                    infoSwal('請填寫管理者帳號');
                    return;
                }

                if(create_password_input.value==""){
                    infoSwal('請填寫管理者密碼');
                    return;
                }

                if(create_password_input.value != create_password_check_input.value){
                    infoSwal('兩次輸入的密碼不相符');
                    return;
                }


                data = {
                    name: create_name_input.value,
                    username: create_username_input.value,
                    password: create_password_input.value
                };
                                
                const xhttp = new XMLHttpRequest();
                xhttp.onload = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        var response = JSON.parse(this.responseText);

                        if (response.success) {             
                            successSwal(response.message, function(){
                                location.reload();
                            });                        
                        }else{
                            errorSwal(response.message);        
                        }
                    }else{
                        var response = JSON.parse(this.responseText);
                        errorSwal(response.message);  
                    }
                }
                xhttp.open("POST", "{{locale_api('admin')}}", true);
                xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');
                xhttp.setRequestHeader("X-CSRF-TOKEN", "{{csrf_token()}}");
                xhttp.send(JSON.stringify(data));
            });

            save_update_btn.addEventListener('click', function(){
                var admin_id = document.querySelector('#editModal .id-field').value;
                var data = {
                    name: update_name_input.value,
                }

                const xhttp = new XMLHttpRequest();
                xhttp.onload = function() {
                    var response = JSON.parse(this.responseText);
                    if (this.readyState == 4 && this.status == 200) {

                        if (response.success) {             
                            successSwal(response.message);
                            window.location.reload();                        
                        }else{
                            errorSwal(response.message);        
                        }
                    }else{
                        var response = JSON.parse(this.responseText);
                        errorSwal(response.message);  
                    }
                }
                xhttp.open("POST", '{{locale_api("admin")}}' + '/' + admin_id, true);
                xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');
                xhttp.setRequestHeader("X-CSRF-TOKEN", csrf_token);
                xhttp.send(JSON.stringify(data));
            });

            change_password_save_btn.addEventListener('click', function(){

                var admin_id = document.querySelector('#changPasswordModal .id-field').value;
                var new_password = change_password_input.value;
                var new_password_check = change_password_check_input.value;

                if(new_password != new_password_check){
                    infoSwal('兩次輸入的密碼不相符');
                    return;
                }
                
                var data = {};
                data.new_password = new_password;

                const xhttp = new XMLHttpRequest();
                xhttp.onload = function() {
                    var response = JSON.parse(this.responseText);
                    if (this.readyState == 4 && this.status == 200) {

                        if (response.success) {             
                            successSwal(response.message);
                            window.location.reload();                        
                        }else{
                            errorSwal(response.message);        
                        }
                    }else{
                        var response = JSON.parse(this.responseText);
                        errorSwal(response.message);  
                    }
                }
                xhttp.open("POST", '{{asset("api/admin")}}' + '/' + admin_id + '/change_password', true);
                xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');
                xhttp.setRequestHeader("X-CSRF-TOKEN", csrf_token);
                xhttp.send(JSON.stringify(data));
            });
        };

  
        edit_item_btn.forEach(btn => {
            btn.addEventListener('click', function(){
                var admin_id = btn.closest('tr').dataset.id;
                var admin = admins.find(admin => admin.id == admin_id)
                document.querySelector('#editModal .id-field').value = admin.id;
                update_name_input.value = admin.name;
            })
        });

        edit_password_btn.forEach(btn => {
            btn.addEventListener('click', function(){
                var admin_id = btn.closest('tr').dataset.id;
                var admin = admins.find(admin => admin.id == admin_id)
                document.querySelector('#changPasswordModal .id-field').value = admin.id;
                document.querySelector('#changPasswordModal .change-password-admin-info').innerText = `ID: ${admin_id} \n 姓名: ${admin.name}`
            });

        })

        function confirmDeleteAdminSwal(admin_id){
            confirmDeleteSwal('管理者',  function(){
                delete_admin(admin_id)
            });
        }

        function delete_admin(admin_id){
            const xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                if (this.readyState == 4) {
                    var response = JSON.parse(this.responseText);

                    if (response.success) {             
                        successSwal(response.message, function(){
                            location.reload();
                    });                        
                    }else{
                        errorSwal(response.message);        
                    }
                }else{
                    var response = JSON.parse(this.responseText);
                    errorSwal(response.message);        
                }
            }
            xhttp.open("DELETE", "{{locale_api('admin/')}}/"+admin_id, true);
            xhttp.setRequestHeader("X-CSRF-TOKEN", "{{csrf_token()}}");
            xhttp.send();
        }

        function clearModal(modal){
            var inputs = modal.querySelectorAll('input');
            inputs.forEach(input=>{
                if(input.type == 'radio'){
                    input.checked = false;
                }
                
                if(input.type == 'text'){
                    input.value = "";
                }
                
            })
        }

    </script>
@endsection