@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="row">
                    <div class="col-sm-8">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="title_left">
                                    <h3><i class="fa fa-edit"></i> Gold Swap - User Approval Configuration</h3>
                                </div>
                            </div>
                            <div class="col-sm-3 text-right" style="padding-top: 10px;">
                                <button onclick="modalAdd()" class="btn btn-success"><i class="fa fa-plus"></i> Tambah Approver</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">                
                <div class="col-xs-12">
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="x_panel" style="background: #F1F8E9;">                        
                                <div class="x_content">
                                    <h4><i class="fa fa-users"></i> Approver List</h4>
                                    <table id="table_subscriber" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Username</th>
                                                <th>Name</th>
                                                <th>Role</th>
                                                <th>#</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($user_approvers as $user)
                                                <tr>
                                                    <td class="text-left">{{ $user->userApprove->username }}</td>
                                                    <td class="text-left">{{ $user->userApprove->name }}</td>
                                                    <td class="text-left">{{ $user->role }}</td>
                                                    <td class="text-left">
                                                        <button class="btn btn-info" onclick="removeAccount({{ $user->id }})"><i class="fa fa-trash"></i></button>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="10" class="text-center">No Data</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>


<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title text-left" id="exampleModalLabel"><span id="contentPIN" style="color: #f44336;">Tambah Configurasi</span></h4>
        </div>
        <form class="form-horizontal" id="form_new_approver">
            {{ csrf_field() }} 
            <div class="modal-body">
                <div class="row form-group">
                    <label class="col-xs-12 col-sm-12" style="padding-top: 7px;">Approver <span id="loadingBrand" style="display: none;"><i class="fa fa-pulse fa-spinner"></i> </span></label>
                    <div class="col-xs-12 col-sm-12">
                        <select class="form-control" id="userApprover" name="userApprover">
                            <option value="" disabled selected>Pilih Approver</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-xs-12 col-sm-12" style="padding-top: 7px;">Role <span id="loadingBrand" style="display: none;"><i class="fa fa-pulse fa-spinner"></i> </span></label>
                    <div class="col-xs-12 col-sm-12">
                        <select class="form-control" id="roleApprover" name="roleApprover">
                            <option value="" disabled selected>Pilih Role</option>
                            <option value="qc">Approval QC</option>
                            <option value="ops">Approval Ops</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="submitNewApprover()">Submit</button>
            </div>
        </form>
        </div>
    </div>
</div>
@endsection

@section("scripts")
    <script type="text/javascript">

        function modalAdd() {
            $('#addModal').modal('show');
        }

        function removeAccount(id) {
            if (confirm("Apakah Anda ingin menghapus user ini ?") == true) {
                location.href = '{{ url('gold_swap/config_user/remove') }}/' + id;
            }
        }

        function submitNewApprover() {
            let approverInput = $('#userApprover').val();
            let roleInput = $('#roleApprover').val();

            if(!approverInput || !roleInput) {
                alert('Harap semua data diisi !');
                return false;
            }

            $.ajax({
                url: '{{ url('gold_swap/config_user/submit') }}',
                method: "POST",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: $("#form_new_approver").serialize(),
                success: function(response) {
                    alert(response.message);
                    location.reload();
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                    $(".btn-submit").removeAttr("disabled", "disabled").html('<i class="fa fa-check"></i> Approve');
                }
            });
        }
    </script>
@endsection