@extends('layouts.layout')

@section('content')

    <div class="box">
        <div class="box-header">
            <h3 class="box-title"><i class="fa fa-user"></i> Clerks</h3>
            <a href="/clerks/create" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Create</a>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            @if(session()->get('success'))
                <div class="alert alert-success">
                    {{ session()->get('success') }}
                </div><br />
            @endif
            <table class="table table-bordered table-hover table-striped" id="clerks">
                <thead>
                    <th>Name</th>
                    <th>Clerk ID</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </thead>
                <tbody>
                @foreach($clerks as $clerk)
                    <tr>
                        <td><a href="/clerks/{{$clerk->id}}">{{$clerk->name}}</a></td>
                        <td>{{$clerk->clerk_id}}</td>
                        <td><a href="/clerks/{{$clerk->id}}/edit" class="btn btn-warning"><i class="fa fa-edit"></i></a></td>
                        <td>
                            <form method="POST" action="/clerks/{{$clerk->id}}">
                                @method('DELETE')
                                {{ csrf_field() }}

                                <div class="form-group">
                                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure ?')"><i class="fa fa-trash"></i></button>
                                </div>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
            </table>

        </div>
    </div>

@endsection

@section('footer')
    <script>
        $(document).ready( function () {
            $('#clerks').DataTable();
        } );
    </script>
@endsection