@extends('backend.layouts.app')
@section('content')
{{-- Create Modal --}}
<form action="{{route('patient-story.store')}}" method="post">
    @csrf
    <div class="modal fade" id="addParientStory" tabindex="-1" role="dialog" aria-labelledby="addParientStoryLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addParientStoryLabel">Add Patient Story</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label for="name">Name  <span class="text-danger font-italic" style="font-size: .8em;">(Default: Anonymous)</label>
                    <input type="text" name="name" id="name" class="form-control">
                    <label for="position">Position <span class="text-danger font-italic" style="font-size: .8em;">(Default: Patient)</span></label>
                    <input type="text" name="position" id="position" class="form-control">
                    <label for="message">Message</label>
                    <textarea name="message" id="" cols="30" placeholder="Message..." rows="5" class="form-control"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </div>
        </div>
    </div>
</form>
{{-- End Create Modal --}}
{{-- Edit Modal --}}
<div class="modal fade" id="editParientStory" tabindex="-1" role="dialog" aria-labelledby="editParientStoryLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editParientStoryLabel">Add Patient Story</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label for="name">Name  <span class="text-danger font-italic" style="font-size: .8em;">(Default: Anonymous)</label>
                <input type="text" name="name" id="name" class="form-control">
                <label for="position">Position <span class="text-danger font-italic" style="font-size: .8em;">(Default: Patient)</span></label>
                <input type="text" name="position" id="position" class="form-control">
                <label for="message">Message</label>
                <textarea name="message" id="message" cols="30" placeholder="Message..." rows="5" class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" id="update_btn">Update</button>
            </div>
        </div>
    </div>
</div>
{{-- End Edit Modal --}}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                Patient Stories
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#addParientStory">
                    Add Patient Story
                </button>
                <div class="row mb-2">
                    <div class="col-lg-4">
                        <form method="get">
                            <div class="d-flex">
                                <input type="text" name="search" id="search" placeholder="Search..." class="form-control">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="thead-dark">
                            <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Message</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (count($stories) != 0)
                            @foreach ($stories as $story)
                            <tr>
                                <td>{{$story->name}}</td>
                                <td>{{$story->position}}</td>
                                <td>{{$story->message}}</td>
                                <td>
                                    <div class="d-flex">
                                        <button class="btn btn-success" id="editStory" data-id="{{$story->id}}" data-toggle="modal" data-target="#editParientStory{{$story->id}}">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <div class="mx-1"></div>
                                        <form action="{{route('patient-story.destroy', $story->id)}}" method="post">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                        </form>
                                    </div>
                                    <form action="{{route('patient-story.update', $story->id)}}" method="post">
                                        @csrf
                                        @method("PATCH")
                                        <div class="modal fade" id="editParientStory{{$story->id}}" tabindex="-1" role="dialog" aria-labelledby="editParientStory{{$story->id}}Label" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="editParientStory{{$story->id}}Label">Edit Patient Story</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <label for="name">Name <span class="text-danger font-italic" style="font-size: .8em;">(Default: Anonymous)</span></label>
                                                        <input type="text" name="name" value="{{$story->name}}" id="name" class="form-control">
                                                        <label for="position">Position <span class="text-danger font-italic" style="font-size: .8em;">(Default: Patient)</span></label>
                                                        <input type="text" name="position" value="{{$story->position}}" id="position" class="form-control">
                                                        <label for="message">Message</label>
                                                        <textarea name="message" id="message" cols="30" placeholder="Message..." rows="5" class="form-control">{{$story->message}}</textarea>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                                        <button type="submit" class="btn btn-primary">Update</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                            @else
                            <tr>
                                <td colspan="4" class="text-center bg-light">No data result</td>    
                            </tr> 
                            @endif
                        </tbody>
                    </table>
                </div>
                <nav aria-label="...">
                    <ul class="pagination">
                        @if ($stories->currentPage() > 1)
                            <li class="page-item">
                                <a class="page-link" href="{{$stories->previousPageUrl()}}" tabindex="-1">Previous</a>
                            </li>
                        @else
                            <li class="page-item disabled">
                                <a class="page-link" href="{{$stories->previousPageUrl()}}" tabindex="-1">Previous</a>
                            </li>
                        @endif
                        
                        @for ($i = 1; $i <= $stories->lastPage(); $i++)
                            <li class="page-item @if($i == $stories->currentPage()) active @endif">
                                <a class="page-link" href="{{$stories->url($i)}}">{{$i}}</a>
                            </li>
                        @endfor

                        @if ($stories->currentPage() < $stories->lastPage() )
                            <li class="page-item">
                                <a class="page-link" href="{{$stories->nextPageUrl()}}">Next</a>
                            </li>
                        @else
                            <li class="page-item disabled">
                                <a class="page-link" href="{{$stories->nextPageUrl()}}">Next</a>
                            </li>
                        @endif
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
    $("#search").on("input", function() {
        $(this).quicksearch('table tbody tr');
    });
    var id = 0;
    // $(document).on("click", "#editStory", function() {
    //     // console.log($(this).attr('data-id'));
    //     // var id = 0;
    //     id = $(this).attr('data-id');
    //     $.ajax({
    //         url: `{{route('patient-story.index')}}/${id}/edit`,
    //         type: "GET",
    //         success: function(data) {
    //             console.log(data);
    //             $("#edit_name").val(data.name);
    //             $("#edit_position").val(data.position);
    //             $("#edit_message").val(data.message);
    //             $("#update_btn").attr("data-id", data.id);
    //         }
    //     });
    // });
</script>
@endsection