@extends('layouts.app')

@section('title', 'Group Email')

@section('content')
    <section>
        <div class="section-body">
            <div class="card">
                @include('flash-message')
                @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif
                <div class="card-head">
                    <header class="text-capitalize">all group emails</header>
                    <div class="tools">
                        @can('group-email-export')<a href="{{route('export-group-email')}}" class="btn btn-success excel-btn">Excel</a>@endcan
                        @can('template-export')<a href="{{route('export-group-email-template')}}" class="btn btn-warning excel-btn">Excel Template</a>@endcan
                        @can('group-email-create')<a class="btn btn-primary ink-reaction" href="{{route('group-email.create')}}">
                            <i class="md md-add"></i>
                            Add
                        </a>
                        @endcan
                        @can('group-email-import')<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#importFileModal">Import Excel</button>@endcan

                    </div>
                </div>
                <div class="card-body table-responsive">
                    <table id="example" class="table table-hover table-bordered display">
                        <thead>
                            <tr>
                                <th width="10%">SNo.</th>
                                <th width="30%">Group</th>
                                <th width="40%">Emails</th>
                                <th width="20%">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($group_emails as $key=>$group_email)
                                <tr>
                                    <td>{{++$key}}</td>
                                    <td>{{$group_email->group}}</td>
                                    <td>{{$group_email->email}}</td>
                                    <td>
                                        @can('group-email-edit')<a href="#" class="btn btn-flat btn-primary btn-xs updateModal" title="edit" data-id="{{$group_email->id}}" data-group-name="{{$group_email->group}}" data-group-email="{{$group_email->email}}">
                                            <i class="glyphicon glyphicon-edit"></i>
                                        </a>@endcan
                                        @can('group-email-delete')<a href="{{route("group-email.destroy",$group_email->id)}}">
                                            <button type="button" data-url="{{route("group-email.destroy",$group_email->id)}}"
                                                    class="btn btn-flat btn-danger btn-xs item-delete" title="delete" onclick="return confirm('Are you sure?')">
                                                <i class="glyphicon glyphicon-trash"></i>
                                            </button>
                                         </a>@endcan
                                    </td>
                                </tr>
                                <!-- Modal -->

                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    {{$group_emails->links('vendor.pagination.default')}}
                </div>
                            <!-- Modal -->
            <div id="importFileModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
            
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Import Excel</h4>
                    </div>
                    <form action="{{route('import-group-email')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                                <div class="form-group" style="display: contents;">
                                    <input type="file" class="form-control-file" name="fileToUpload" id="exampleInputFile" aria-describedby="fileHelp">
                                </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Import</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            
                </div>
            </div>
                <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Edit</h4>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="row mb-2">
                                    <label for="group" class="form-label">Group Name</label>
                                    <input type="text" id="group_name" class="form-control" value="" disabled>
                                </div>
                                <div class="row mb-2">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" id="model_email" class="form-control" value="" name="email">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" id="updateBtn">Save</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop
@push('styles')
<style>
    .card-footer nav{
        float: right;
        padding-right: 15px;
    }
    .dataTables_paginate, .dataTables_info{
        display: none !important;
    }
</style>

@endpush
@push('scripts')
    <script>
        $(document).ready(function() {
            $('#example').DataTable();
                let group_id = '';
                let model_group_name = '';
                let group_email = '';
            $('.updateModal').on('click', function(e){
                group_id = $(this).data('id');
                model_group_name = $(this).data('group-name');
                group_email = $(this).data('group-email');
                // $('#model_group_id').val(model_group_name);
                $('#model_email').val(group_email);
                $('#group_name').val(model_group_name);
                $('#myModal').modal('show');
            });
            $('#updateBtn').on('click',function(e){
                e.preventDefault();
                let email = $('#model_email').val();
                $.ajax({
                    type: "POST",
                    url: "group-email/update/"+group_id,
                    data:{
                        id: group_id,
                        email: email,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType:"json",
                    success: function(response){
                        $('#myModal').modal('hide');
                        location.reload();
                    }
                });
            })
        } );
    </script>
@endpush