@extends('backend.layouts.app')
@section('content')

    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">Newsletter Subscription</h4>
        </div>
        <div class="col-md-7 align-self-center text-right">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Newsletter Subscription</li>
                </ol>
                @can('Newsletters Subscriptions-create')
                    <button type="button" class="btn btn-info d-none d-lg-block m-l-15" data-toggle="modal"
                        data-target="#exampleModal"><i class="fa fa-plus-circle"></i> Create</button>
                @endcan
            </div>
        </div>
    </div>

    <div class="container-fluid">
        @if (session('status'))
            <div class="alert alert-success alert-dismissible fade show" role="alert"><i class="far fa-check-circle"></i>
                {{ session('status') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert"><i class="far fa-check-circle"></i>
                {{ session('error') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <div class="card">
            <div class="card-body">
                <div class="form-inline">
                    <form action="{{ route('newsletters') }}" method="get" id="form">
                        <div class="input-group">
                            <input type="text" name="search" value="{{ $search }}" class="form-control"
                                placeholder="Search...">
                            <div class="input-group-append">
                                <button class="btn btn-sidebar btn-secondary" type="submit"><i
                                        class="fas fa-search fa-fw"></i></button>
                                <a href="{{ route('newsletters') }}" class="btn btn-secondary" title="Reload"><i
                                        class="fas fa-sync"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
                <br>
                <div class="table-responsive">
                    <table id="newsletter" class="table table-bordered">
                        <thead>
                            <tr>
                                <th>S. No.</th>
                                <th>@sortablelink('email', 'Email')</th>
                                <th>@sortablelink('created_at', 'Created At')</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i = (($emails->currentPage() - 1) * ($emails->perPage()) + 1) @endphp
                            @forelse ($emails as $email)
                                <tr>
                                    <td>{{ $i }}</td>
                                    <td>{{ $email->email ?? '-' }}</td>

                                    <td>{{ $email->created_at ? $email->created_at->format(config('GET.admin_date_time_format') ?? 'Y-m-d') : '-' }}
                                    </td>
                                    <td onclick="myFunction({{ $email->id }});">
                                        @if ($email->status == 1)
                                            <button class="btn btn-success btn-sm"><span>Active</span></button>
                                        @else
                                            <button class="btn btn-danger btn-sm"><span>Inactive</span></button>
                                        @endif
                                    </td>
                                    <td>

                                        <div class="button-container">
                                            @can('Newsletters Subscriptions-edit')
                                                <button class="btn btn-primary btn-sm edit-btn" title="edit"
                                                    data-toggle="modal" data-target="#editModal"
                                                    data-email="{{ $email->email }}" data-email-id="{{ $email->id }}"><i
                                                        class="fas fa-edit"></i></button>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                @php $i++ @endphp
                            @empty
                                <tr>
                                    <td colspan="10" class="text-center" style="font-weight: bold;">No record found !</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($emails->total() > 0)
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="entries-info">
                            Showing {{ $emails->firstItem() }} to {{ $emails->lastItem() }} of {{ $emails->total() }}
                            entries
                        </div>
                        <div class="pagination-wrapper float-right">
                            {{ $emails->links('vendor.pagination.bootstrap-4') }}
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Create Modal -->
    <div class="modal fade" id="exampleModal" 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">Create Newsletter</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="message-box" role="alert"></div>
                    <form id="inputForm" action="{{ route('newsletters.store') }}" method="post">
                        @csrf
                        <div class="form-group">
                            <label for="inputText">Email<span style="color: red;font-size:18px;"><b>*</b></span></label>
                            <input type="email" class="form-control" id="inputText" name="message" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    @if ($emails->count() > 0)
        <div class="modal fade" id="editModal" 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">Edit Newsletter</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">

                        <div id="message-box" role="alert"></div>

                        <form id="inputForma" action="{{ route('newsletters.update') }}" method="post">
                            @csrf
                            <input type="hidden" name="email_id" id="email_id" required>

                            <!-- Email Input -->
                            <div class="form-group">
                                <label for="inputText">Email<span
                                        style="color: red;font-size:18px;"><b>*</b></span></label>
                                <input type="email" class="form-control" id="inputText" name="email" required>
                            </div>

                            <!-- Submit Button -->
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>



                </div>
            </div>
        </div>
        {{-- Status model --}}
        <div id="statusModal" class="modal fade" role='dialog'>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>Are you sure you want to change the status?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <span id='changestatus'></span>
                    </div>
                </div>
            </div>
        </div>
        {{-- end --}}
    @endif

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $(document).ready(function() {
                $.validator.addMethod("regex", function(value, element, regexp) {
                    var re = new RegExp(regexp);
                    return this.optional(element) || re.test(value);
                }, "Please check your input.");

                $(document).on('click', '.edit-btn', function() {
                    var email = $(this).data('email');
                    var emailId = $(this).data('email-id');

                    $('#editModal #inputText').val(email);
                    $('#editModal #email_id').val(emailId);
                });

                $.validator.addMethod("validEmail", function(value, element) {
                    return this.optional(element) ||
                        /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
                }, "Please enter a valid email address with a domain extension.");

                // Validate the create form
                $('#inputForm').validate({
                    rules: {
                        message: {
                            required: true,
                            email: true,
                            validEmail: true
                        }
                    },
                    messages: {
                        message: {
                            required: "The email address is required.",
                            email: "Please enter a valid email address.",
                            validEmail: "Please enter a valid email address with a domain extension."
                        }
                    },
                    errorClass: "error",
                    highlight: function(element) {
                        $(element).addClass('is-invalid').removeClass('is-valid');
                    },
                    unhighlight: function(element) {
                        $(element).removeClass('is-invalid');
                        // .addClass('is-valid');
                    },
                    submitHandler: function(form) {
                        $(form).find('button[type="submit"]').attr("disabled", true);
                        form.submit();
                    }
                });



                // Validate the form
                $('#inputForma').validate({
                    rules: {
                        email: { // Use the name from the input
                            required: true,
                            email: true,
                            validEmail: true // Use the new custom method
                        }
                    },
                    messages: {
                        email: {
                            required: "The email address is required.",
                            email: "Please enter a valid email address.",
                            validEmail: "Please enter a valid email address with a domain extension."
                        }
                    },
                    errorClass: "error",
                    highlight: function(element) {
                        $(element).addClass('is-invalid').removeClass('is-valid');
                    },
                    unhighlight: function(element) {
                        $(element).removeClass('is-invalid');
                        // .addClass('is-valid');
                    },
                    submitHandler: function(form) {
                        $(form).find('button[type="submit"]').attr("disabled", true);
                        form.submit();
                    }
                });

            });
        });
    </script>
    <script>
        function myFunction(id) {
            $('#statusModal').modal();
            $('#changestatus').html('<a class="btn btn-danger" style="color:white;" onclick="changedataData(' + id +
                ')">Ok</a>')
        }

        function changedataData(id) {
            $('#statusModal').modal('hide');
            location.replace("{{ route('newsletters.changestatus') }}?id=" + id +
                "{{ request()->getQueryString() ? '&' . request()->getQueryString() : '' }}");
        }
    </script>
@stop
