@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Groups Name</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="px-4 border">
                        <h3 class="pt-4">Groups Name List</h3>
                        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-original-title="Edit" data-bs-target="#add_group_name" style="float: right;">
                            <i class="fa fa-plus"></i>
                            Add new group name
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class="data-table-example table table-striped table-bordered table-vcenter text-nowrap">
                                <thead>
                                    <tr>
                                        <th style="text-align: center;">Id</th>
                                        <th style="text-align: center;">Name</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $count=0
                                    @endphp
                                    @foreach ($groupsName as $group )
                                    <tr class="text-center">
                                        <td style="text-align: center;">{{++$count}}</td>
                                        <td>{{$group->gname}}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit form modal -->
<div class="modal  fade effect-sign show" id="add_group_name" tabdocumentation="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="example-Modal3">Edit</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form enctype="multipart/form-data" method="POST" action="{{route('groupName.store')}}"
                    class="form-horizontal" id="create_form">
                    @csrf
                    <div class="form-group ">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label mt-2" for="board_url_create">Group Name</label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="gname" id="group_name" {{ old('gname')}} class="form-control" placeholder="Group 1" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-0 row">
                        <div class="col-md-3 mx-auto d-block mt-5">
                            <button type="submit" class="btn btn-primary waves-effect  waves-light">Add New Group</button>
                        </div>
                    </div>
                 </form>
            </div>
        </div>
    </div>
</div>
@endsection