@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row justify-content-center">

        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Thematics</div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <form action="{{route('thematics.store')}}" method="POST">
                                {{csrf_field()}}
                                <label for="ThematicName">Thematic Area</label>
                                <input id="ThematicName" type="text" class="form-control mb-2" name="name">
                                <button class="btn btn-success">Add</button>
                            </form>
                        </div>
                        <div class="col-6">
                            <table class="table">
                                @if(isset($thematics))
                                @foreach($thematics as $them)
                                <tr>
                                    <td>
                                        <span class="id d-none">{{$them->id}}</span>
                                        <span class="name">{{$them->name}}</span>
                                    </td>
                                    <td>
                                       
                                      
                                        <form method="POST" class=" " action="{{action('ThematicController@destroy',$them->id)}}">
                                            {{csrf_field()}}
                                            <input type="hidden" name="_method" value="DELETE">
                                            <button type="submit" class="float-right btn btn-outline-danger btn-sm" id="call-to-action">delete</button> 
                                        </form>

                                        <button type="button" class="float-right mr-2 btn btn-outline-secondary  btn-sm edit-btn" data-toggle="modal" data-target="#exampleModal">
                                            edit
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                                @else
                                <tr>
                                    <td>No Thematics found</td>
                                </tr>
                                @endif
                            </table>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 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">Edit Thematic Area</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{route('thematics.store')}}">
                <div class="modal-body">
                    {{csrf_field()}}
                    <input type="hidden" name="id" value="" id="id">
                    <input type="text" name="name" id="name" value="" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $(".edit-btn").click(function() {
            var id = $(this).parent().siblings(':first-child').children('.id').text();
            var name = $(this).parent().siblings(':first-child').children('.name').text();

            $("#id").val(id);
            $("#name").val(name);
        });
    });
</script>
@endsection