@extends('layouts.dashboard')
@section('content')
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18">List User</h4>
                            <div>
                                <button type="button" class="btn btn-primary waves-effect btn-label waves-light"
                                    data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo"><i
                                        class="bx bx-user-plus label-icon"></i> Tambah User</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body table-responsive">



                                <table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th>Nama</th>
                                            <th>Role</th>

                                            <th>Email</th>

                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>


                                    <tbody id="users">
                                        @foreach ($users as $user)
                                            <tr>
                                                <td>{{ $user->name }}</td>
                                                <td>{{optional($user->roles->first())->name }}</td>

                                                <td>{{ $user->email }}</td>

                                                <td class="text-center">
                                                    <button class="btn btn-warning btn-label" id="btn-edit" type="button"
                                                        value="{{ $user->id . '*' . $user->name . '*' . $user->email . '*' . optional($user->roles->first())->name . '*' . $user->phone   }}"><i
                                                            class="bx bx-edit label-icon"></i> Edit</button>

                                                </td>


                                            </tr>
                                        @endforeach


                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div> <!-- end col -->
                </div>
                <!-- end row -->

                <hr>
                <!-- start page Diskon -->

                {{-- <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18">List Diskon</h4>
                            <div>
                                <button type="button" class="btn btn-primary waves-effect btn-label waves-light"
                                    data-bs-toggle="modal" data-bs-target="#exampleModalDiskon" data-bs-whatever="@mdo"><i
                                        class="bx bx-plus label-icon"></i>Tambah Diskon</button>
                            </div>
                        </div>
                    </div>
                </div> --}}

                {{-- <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body table-responsive">
                                <table id="datatableDiskon" class="table table-bordered dt-responsive  nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th>Nama</th>
                                            <th>Kategori</th>
                                            <th>Nominal</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>

                                    <tbody id="diskon">
                                        @foreach ($mDiskon as $diskon)
                                            <tr>
                                                <td>{{ $diskon->nama }}</td>
                                                <td>{{ $diskon->kategori }}</td>

                                                <td>{{ rupiah($diskon->nominal) }}</td>

                                                <td class="text-center">
                                                    <button class="btn btn-warning btn-label" id="btn-edit-diskon"
                                                        type="button"
                                                        value="{{ $diskon->id . '*' . $diskon->nama . '*' . $diskon->kategori . '*' . $diskon->nominal }}"><i
                                                            class="bx bx-edit label-icon"></i> Edit</button>
                                                </td>


                                            </tr>
                                        @endforeach


                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div> <!-- end col -->
                </div> --}}


                <!-- end page Diskon -->
            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->
    </div>

    {{-- @include('dashboard.admin.setting.diskon._modalTambahDiskon')
    @include('dashboard.admin.setting.diskon._modalEditDiskon') --}}
    @include('dashboard.admin.users._modalTambahAnggota')
    @include('dashboard.admin.users._modalEditAnggota')
@endsection

@push('AddJS')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="{{ asset('') }}assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('') }}assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\UserRequest', '#new_user') !!}
    {!! JsValidator::formRequest('App\Http\Requests\UserEditRequest', '#edit_user') !!}

    <script>
        $('#datatable').DataTable();
        $('#datatableDiskon').DataTable();

        $("#users").on('click', '#btn-edit', function() {
            value = $(this).val().split('*');

            $('.exampleModalEdit').modal('show');
        });

        $('.exampleModalEdit').on('show.bs.modal', function() {
            $(".id").val(value[0])
            $(".name").val(value[1])
            $(".email").val(value[2])

            $(".phone").val(value[4])

            

            var selectedValue = value[3];
            var selectElement = document.getElementById('mySelect');;
            for (var i = 0; i < selectElement.options.length; i++) {
                if (selectElement.options[i].value === selectedValue) {
                    selectElement.options[i].selected = true;
                    break;
                }
            }
        });

        // Diskon
        $("#diskon").on('click', '#btn-edit-diskon', function() {
            value = $(this).val().split('*');

            $('.exampleModalEditDiskon').modal('show');
        });

        $('.exampleModalEditDiskon').on('show.bs.modal', function() {
            $(".id").val(value[0])
            $(".nama").val(value[1])

            $(".nominal").val(value[3])

            var selectedValue = value[2];
            var selectElement = document.getElementById('mySelectDiskon');
            for (var i = 0; i < selectElement.options.length; i++) {
                if (selectElement.options[i].value === selectedValue) {
                    selectElement.options[i].selected = true;
                    break;
                }
            }
        });
    </script>

    {{-- js stay posision when refresh --}}
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            var scrollpos = localStorage.getItem('scrollpos');
            if (scrollpos) window.scrollTo(0, scrollpos);
        });

        window.onbeforeunload = function(e) {
            localStorage.setItem('scrollpos', window.scrollY);
        };
    </script>

    @if (Session::has('toastr'))
        <script>
            toastr.{{ Session::get('toastr.type') }}('{{ Session::get('toastr.message') }}',
                '{{ Session::get('toastr.title') }}');
        </script>
    @endif
@endpush
@push('AddCSS')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">

    <link href="{{ asset('') }}assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('') }}assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet"
        type="text/css" />
@endpush