@extends('layouts.admin.app')

@section('tablecss')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css"> -->
@endsection

@section('content')
<main role="main" class="main-content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-4">
                <div class="card shadow mb-4">
                    @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <div class="card-header">
                        <strong class="card-title">Create a New Admin</strong>
                    </div>
                    <div class="card-body">
                        <form action="{{route('admin.signup')}}" method="post" class="">
                            @csrf
                            <h3 class="text-center">Sign Up </h3>
                            <div class="form-group ">
                                <label class="" for="name">Name</label>
                                <input type="text" class="form-control" id="" name="name" required>
                            </div>
                            <div class="form-group ">
                                <label class="" for="email">Email</label>
                                <input type="email" class="form-control" id="" name="email" required>
                            </div>
                            <div class="form-group ">
                                <label class="" for="mobile">Mobile</label>
                                <input type="tel" class="form-control" id="" name="mobile" required>
                            </div>
                            <div class="form-group ">
                                <label class="" for="password">Password</label>
                                <input type="password" class="form-control" id="" name="password" required>
                            </div>
                            <div class="form-group ">

                                <input type="submit" class="btn btn-primary btn-block" value="Submit">
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="col-md-8">
                <div class="card shadow">
                    @if (session('success'))
                    <div class="alert alert-success" role="alert">
                        {{ session('success') }}
                    </div>
                    @elseif (session('delete'))
                    <div class="alert alert-danger" role="alert">
                        {{ session('delete') }}
                    </div>
                    @endif
                    <div class="card-header">
                        <strong class="card-title">Existing Admins</strong>
                        <!-- <a class="float-right small text-muted" href="#!">View all</a> -->
                    </div>
                    <div class="card-body table-responsive">
                        <table class="table table-hover display" id="table">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Mobile</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($admins as $admin)
                                @if($admin->name != 'Super Admin')
                                <tr>
                                    <td>{{$admin->name}}</td>
                                    <td>{{$admin->email}}</td>
                                    <td>{{$admin->mobile}}</td>
                                    <td>
                                        <a href="{{route('admin.user.edit', $admin->id) }}" class="btn btn-info btn-sm mb-2">Edit</a>
                                        <form action="{{route('admin.user.destroy')}}" method="POST">
                                            @csrf
                                            <input type="hidden" name="admin_id" value="{{$admin->id}}">
                                            <button class="btn btn-sm btn-danger btn-delete-form" type="submit">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                                @endif
                                @endforeach
                            </tbody>
                            <tfoot>

                            </tfoot>
                        </table>
                    </div>
                    <!-- / .card-body -->
                </div>
                <!-- / .card -->
            </div>
        </div>
    </div>
</main>
@endsection

@section('scripts')
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    $(document).ready(function() {
        $('#table').DataTable();
    });
    $('.btn-delete-form').on('click', function(e) {
        e.preventDefault();
        var form = $(this).parents('form');
        swal({
                title: "Are you sure?",
                text: "Once deleted, this process cannot be reverted!",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
            .then((willDelete) => {
                if (willDelete) {
                    form.submit();
                } else {
                    return;
                }
            });
    });
</script>
@endsection