@extends('layout.adminapp')
@section('content')
    <div class="container-fluid">
        <div class="card shadow mb-4">
            <div class="card-header py-3">

                <h6 class="m-0 font-weight-bold text-primary">Admins</h6>
            </div>
            @if (Session::has('status'))
                <div class="alert alert-success">
                    <ul>
                        <li>{{ Session::get('status') }}</li>
                    </ul>
                </div>
            @endif
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered admin" id="dataTable" cellspacing="0">
                        <thead>
                            <tr>
                                <th width="50%">Email</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Email</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            @foreach ($emails as $key => $email)
                                <tr>
                                    <td>{{ $email->email }} <input type="hidden" value="{{ $email->id }}"></td>
                                    <td>
                                        @if ($email->status)
                                            <button class="btn btn-success active">Active</button>
                                        @else
                                            <button class="btn btn-warning not-active">Not-Active</button>
                                        @endif
                                    </td>
                                    <td><input type="button" class="btn btn-danger mt-1 delete" value="Delete"></td>
                                </tr>
                            @endforeach
                        </tbody>

                    </table>
                    <div class="float-right">
                        <a href="#" class="btn btn-primary mt-2" data-toggle="modal"
                                            data-target="#addEmailModal">Add Email<a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--//model new Email-->
    <div class="modal fade" id="addEmailModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Email</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form action="{{ route('admin.email.add') }}" method="post">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="modal-body">
                        @csrf
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" class="form-control form-control-user" name="email">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" type="submit">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('admindic/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('admindic/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
    <script src="{{ asset('admindic/js/demo/datatables-demo.js') }}"></script>
    @if ($errors->any())
        <script>
            $(document).ready(function() {
                $('#addEmailModal').modal('show');
            })
        </script>
    @endif
    <script>
        $(document).ready(function() {
            $(".admin").on("click", ".delete", function() {
                var currentRow = $(this).closest("tr");
                var id = currentRow.find("td:eq(0) input[type = hidden]").val();
                // console.log(id);
                swal({
                        title: `Are you sure you want to delete this record?`,
                        text: "If you delete this, it will be gone forever.",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            $.ajax({
                                url: "{{ route('admin.email.delete') }}",
                                method: "GET",
                                data: {
                                    id: id
                                },
                                success: function(data) {
                                    // console.log(data);
                                    $(currentRow).remove();
                                }
                            })
                        }
                    })
            });

            $(".admin").on("click", ".active", function() {
                var button = $(this);
                var currentRow = $(this).closest("tr");
                var id = currentRow.find("td:eq(0) input[type = hidden]").val();
                swal({
                        title: `Are you sure you want to mark this Email as Not-Active?`,
                        text: `You will no longer be able to receive email on this address`,
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willUpdate) => {
                        if (willUpdate) {
                            $.ajax({
                                url: "{{ route('admin.email.status') }}",
                                method: "GET",
                                data: {
                                    id: id,
                                    status: 0
                                },
                                success: function(data) {
                                    button.addClass('btn-warning');
                                    button.addClass('not-active');
                                    button.html('Not-Active');
                                    button.removeClass('active');
                                    button.removeClass('btn-success');
                                }
                            })
                        }
                    })
            })
            $(".admin").on("click", ".not-active", function() {
                var button = $(this);
                var currentRow = $(this).closest("tr");
                var id = currentRow.find("td:eq(0) input[type = hidden]").val();
                swal({
                        title: `Are you sure you want to mark this Email as Active?`,
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willUpdate) => {
                        if (willUpdate) {
                            $.ajax({
                                url: "{{ route('admin.email.status') }}",
                                method: "GET",
                                data: {
                                    id: id,
                                    status: 1
                                },
                                success: function(data) {
                                    button.removeClass('btn-warning');
                                    button.removeClass('not-active');
                                    button.html('Active');
                                    button.addClass('active');
                                    button.addClass('btn-success');
                                }
                            })
                        }
                    })
            })
        });
    </script>
@endsection