@extends('admin.sidebar')
@section('content')
    {{-- TABLE --}}
    <div class="card">
        <div class="card-header center">
            <h5 class="card-title">
                DATA OPERATOR
            </h5>
        </div>
        @include('message')
        <div class="card-body" style="overflow-x:auto;">
            <a href="#modalAdd" id="add" data-bs-toggle="modal" data-bs-target="#modalAdd" class="btn btn-success mb-3"><i
                    class="bi bi-plus"></i>
                Tambahkan Operator</a>
            <table class="table table-striped" id="table1">
                <thead>
                    <tr>
                        <th>photo</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($users as $item)
                        <tr>
                            <td>
                                <img src="{{ asset('images/operator') . '/' . $item->photo }}" alt="profile image"
                                    style="width: 150px" class="rounded">

                            </td>
                            <td>{{ $item->username }}</td>
                            <td>{{ $item->email }}</td>
                            <td>Operator</td>
                            <td>
                                <a data-bs-toggle="modal" data-bs-target="#modalEdit" id="edit"
                                    data-username="{{ $item->username }}" data-email="{{ $item->email }}"
                                    data-olahraga="{{ $item->akses->olahraga }}"
                                    data-pengumuman="{{ $item->akses->pengumuman }}"
                                    data-banner="{{ $item->akses->banner }}" data-fasilitas="{{ $item->akses->fasilitas }}"
                                    data-event="{{ $item->akses->event }}" data-galeri="{{ $item->akses->galeri }}"
                                    data-berita="{{ $item->akses->berita }}"
                                    onclick="$('#modalEdit #formEdit').attr('action', '{{ route('users.update', Crypt::encryptString($item->id)) }}')"
                                    class="open-AddBookDialog btn btn-primary m-1" href=""><i
                                        class="bi bi-pencil-square"></i></a>
                                <a href="" class="btn btn-danger m-1"data-bs-toggle="modal"
                                    data-bs-target="#modalDelete"
                                    onclick="$('#modalDelete #formDelete').attr('action', '{{ route('users.destroy', Crypt::encryptString($item->id)) }}')"><i
                                        class="bi bi-trash-fill"></i></a>

                            </td>
                        </tr>
                    @endforeach

                </tbody>
            </table>
        </div>
    </div>
    {{-- TABLE --}}
    {{-- Modal STORE||START|| --}}
    <div class="modal fade text-left modal-borderless" id="modalAdd" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambahkan Operator</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form action="{{ route('users.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="username" name="username" required>
                        </div>
                        <div class="form-group">
                            <label for="username">Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="password" class="form-label">Password</label>
                            <div class="d-flex">
                                <input type="password" class="form-control" id="password"
                                    name="password"placeholder="Password">
                                <span toggle="#password" class=" eye p-1"
                                    style="width: 40px!important; height:40px!important;"><i
                                        class="bi bi-eye-fill"></i></span>
                            </div>

                        </div>
                        <div class="form-group">
                            <label for="photo">Photo Operator</label>
                            <input type="file" class="form-control" id="photo" name="photo" required>
                            <i>*Foto yang dimasukan tidak boleh lebih dari 2mb!</i>
                        </div>
                        <div class="form-group row">
                            <label class="form-label">Akses User</label>
                            <div class="col-6">
                                <div>
                                    <input type="checkbox" id="olahraga" value="1" name="olahraga">
                                    <label for="olahraga"><i class="bi bi-stack mx-2"></i>Olahraga</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="pengumuman" value="1" name="pengumuman">
                                    <label for="pengumuman"><i class="bi bi-megaphone-fill mx-2"></i>Pengumuman</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="event" value="1" name="event">
                                    <label for="event"><i class="bi bi-calendar mx-2"></i>Event</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="berita" value="1" name="berita">
                                    <label for="berita"><i class="bi bi-newspaper mx-2"></i>Berita</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div>
                                    <input type="checkbox" id="fasilitas" value="1" name="fasilitas">
                                    <label for="fasilitas"><i class="bi bi-buildings-fill mx-2"></i>Fasilitas</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="galeri" value="1" name="galeri">
                                    <label for="galeri"><i class="bi bi-images mx-2"></i>Galeri</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="banner" value="1" name="banner">
                                    <label for="banner"><i class="bi bi-info-circle-fill mx-2"></i>Banner</label>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-primary ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Submit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal STORE||END|| --}}

    {{-- Modal UPDATE||START|| --}}
    <div class="modal fade text-left modal-borderless" id="modalEdit" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Data Operator</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form action="" method="POST" id="formEdit" enctype="multipart/form-data">
                        @csrf
                        @method('put')
                        <div class="form-group">
                            <label for="username-edit">Username</label>
                            <input type="text" class="form-control" id="username-edit" name="username" required>
                        </div>
                        <div class="form-group">
                            <label for="email-edit">Email</label>
                            <input type="email" class="form-control" id="email-edit" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="password-edit">Password</label>
                            <input type="password" class="form-control" id="password" name="password"
                                placeholder="kosongkan bila tidak ingin mengganti password">
                        </div>

                        <div class="form-group">
                            <label for="photo">Photo Operator</label>
                            <input type="file" class="form-control" id="photo" name="photo">
                            <i>*Foto yang dimasukan tidak boleh lebih dari 2mb!</i>
                        </div>
                        <div class="form-group row">
                            <label class="form-label">Akses User</label>
                            <div class="col-6">
                                <div>
                                    <input type="checkbox" id="olahraga-edit" value="1" name="olahraga">
                                    <label for="olahraga-edit"><i class="bi bi-stack mx-2"></i>Olahraga</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="pengumuman-edit" value="1" name="pengumuman">
                                    <label for="pengumuman-edit"><i
                                            class="bi bi-megaphone-fill mx-2"></i>Pengumuman</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="event-edit" value="1" name="event">
                                    <label for="event-edit"><i class="bi bi-calendar mx-2"></i>Event</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="berita-edit" value="1" name="berita">
                                    <label for="berita-edit"><i class="bi bi-newspaper mx-2"></i>Berita</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div>
                                    <input type="checkbox" id="fasilitas-edit" value="1" name="fasilitas">
                                    <label for="fasilitas"><i class="bi bi-buildings-fill mx-2"></i>Fasilitas</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="galeri-edit" value="1" name="galeri">
                                    <label for="galeri"><i class="bi bi-images mx-2"></i>Galeri</label>
                                </div>
                                <div>
                                    <input type="checkbox" id="banner-edit" value="1" name="banner">
                                    <label for="banner"><i class="bi bi-info-circle-fill mx-2"></i>Banner</label>
                                </div>
                            </div>
                        </div>


                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-warning ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Edit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal UPDATE||END|| --}}

    {{-- Modal DESTROY||START|| --}}
    {{-- modal delete --}}
    <div class="modal fade text-left modal-borderless" id="modalDelete" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Hapus Operator</h5>
                    <button type="button" class="close rounded-pill" data-bs-dismiss="modal" aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">

                    <form id="formDelete" action="" method="post">
                        @csrf
                        @method('delete')
                        <div class="form-group" id="pass">
                            <h5>Apakah anda yakin ingin menghapus item?</h5>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-primary" data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="  center">Close</span>
                            </button>
                            <button type="submit" class="btn btn-danger ml-1">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="  center">Delete</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal DESTROY||END|| --}}





    {{-- script --}}
    @push('script-modal')
        {{-- data modal Update --}}
        <script>
            $(document).on('click', '#edit', function() {
                let username = $(this).data('username')
                let email = $(this).data('email')
                let olahraga = $(this).data('olahraga')
                let pengumuman = $(this).data('pengumuman')
                let event = $(this).data('event')
                let berita = $(this).data('berita')
                let fasilitas = $(this).data('fasilitas')
                let galeri = $(this).data('galeri')
                let banner = $(this).data('banner')

                $('.form-group #username-edit').val(username)
                $('.form-group #email-edit').val(email)
                $('.form-group #olahraga-edit').prop('checked', olahraga == 1);
                $('.form-group #pengumuman-edit').prop('checked', pengumuman == 1);
                $('.form-group #event-edit').prop('checked', event == 1);
                $('.form-group #berita-edit').prop('checked', berita == 1);
                $('.form-group #fasilitas-edit').prop('checked', fasilitas == 1);
                $('.form-group #galeri-edit').prop('checked', galeri == 1);
                $('.form-group #banner-edit').prop('checked', banner == 1);

            });
        </script>

        {{-- Mata Password --}}
        <script>
            var clicked = false;
            const togglePassword = document.querySelector('.eye');
            const password = document.querySelector('#password');

            togglePassword.addEventListener('click', function() {
                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                password.setAttribute('type', type);
                if (clicked) {
                    togglePassword.style.cssText =
                        'width: 40px!important; height:40px!important;color:#333!important;';
                } else {
                    togglePassword.style.cssText =
                        'width: 40px!important; height:40px!important;color:#5C7CB4!important;';

                }
                clicked = !clicked;
            });
        </script>
    @endpush
    {{-- script --}}
@endsection