@extends('dashboard::layouts.app')

@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
        Discussion Forum
    </h5>
@endsection

@section('content')
    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact card-collapsed" data-card="true" id="kt_card_4">
        <div class="card-header">
            <h3 class="card-title">
                Add New Discussion Forum
            </h3>
            <div class="card-toolbar">
                <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-1" data-card-tool="toggle">
                    <i class="ki ki-arrow-down icon-nm"></i>
                </a>
            </div>
        </div>

        <form class="form" action="{{ route('cd-admin.store_discussion_forum') }}" method="post">
            @csrf
            <div class="card-body">

                <div class="row form-group">
                    <label class="col-lg-3 col-form-label text-right">Discussion Forum Name:</label>
                    <div class="col-lg-8">
                        <input type="text" name="discussion_forum_name" class="form-control" placeholder="Enter Discussion Forum name here" value="{{old('discussion_forum_name')}}" required/>
                        @error('discussion_forum_name')
							<span style="color: red;">{{ $message }}</span>
						@enderror
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <button type="submit" class="btn btn-success mr-2">Add New Discussion Forum</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--end::Card-->



    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">
                    Discussion Forum List
                </h3>
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <table class="table topic-table">
                <div class="float-right">
                    <form action="{{ route('cd-admin.view_discussion_forum') }}" class="" method="get">
                        <div class="input-group mb-3">
                            <input type="text" name="searchkey" class="form-control" placeholder="Search" required />
                            <div class="input-group-append">
                              {{-- <button class="btn btn-outline-secondary" type="button">Button</button> --}}
                              <button type="submit" class="btn btn-sm btn-clean btn-icon mr-2 ">
                                <i class="fa fa-search"></i></button>
                            </div>
                          </div>
                    </form>
                </div>
                @if(count($discussionForums)>0)
                <thead>
                    <tr>
                        <th>SN</th>
                        <th>Topic</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @for ($i = 0; $i < count($discussionForums); $i++)
                    <tr>
                        <td>{{ $i+1 }}</td>
                        <td class="title">
                            {{ $discussionForums[$i]['discussion_forum_name'] }}
                        </td>
                        <td>
                            <a href="javascript:;" class="btn btn-sm btn-clean btn-icon mr-2 edit-button" title="Edit details" data-toggle="modal" data-target="#exampleModalSizeXl" data-id="{{  $discussionForums[$i]->id }}">
                                <span class="svg-icon svg-icon-md">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24" />
                                            <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" \ transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) " />
                                            <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1" />
                                        </g>
                                    </svg>
                                </span>
                            </a>
                            <a href="javascript:;" class="btn btn-sm btn-clean btn-icon delete-button" title="Delete" data-toggle="modal" data-target="#exampleModalCenter" data-id="{{  $discussionForums[$i]->id }}">
                                <span class="svg-icon svg-icon-md">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24" />
                                            <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero" />
                                            <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3" />
                                        </g>
                                    </svg>
                                </span>
                            </a>
                        </td>
                    </tr>
                    @endfor
                </tbody>
                @endif
            </table>
            <!--end: Datatable-->
        </div>
    </div>
    <!--end::Card-->
    <div class='dataTables_paginate float-right paging_simple_numbers'>
        {{ $discussionForums->links() }}
    </div>



    <!--begin::Modal-->
    <div class="modal fade" id="exampleModalSizeXl" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalSizeXl" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Discussion Forum</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form" action="{{ route('cd-admin.update_discussion_forum') }}" method="post">
                        @csrf
                        <div class="card-body">
                            <input type="hidden" name="id" id="id">
                            <div class="mb-15">
                                <div class="form-group row">
                                    <label class="col-lg-4 col-form-label text-right">Discussion Forum Name:</label>
                                    <div class="col-lg-8">
                                        <input type="text" id="discussion_forum_name" name="discussion_forum_name" class="form-control" placeholder="Enter Discussion Forum Name here"  required/>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-lg-3"></div>
                                <div class="col-lg-6">
                                    <input type="submit" class="btn btn-success mr-2" value="Edit Discussion Forum">
                                    <button type="reset" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->




    <div class="modal fade" id="exampleModalCenter" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
        <div class="modal-dialog .modal-dialog-centered" role="document">
            <form class="form" action="{{ route('cd-admin.delete_discussion_forum') }}" method="get">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Delete Question Topic</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i aria-hidden="true" class="ki ki-close"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this topic?
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="id" id="topic_id">
                        <input type="submit" class="btn btn-primary font-weight-bold" value="Yes, Delete">                    
                        <button type="reset" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">No, Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script type="text/javascript">
       $('.delete-button').click(function(e){
            e.preventDefault();
            item_id=$(this).data('id');
            $('#topic_id').val(item_id);
        });

        $('.edit-button').click(function(e){
            e.preventDefault();
            item_id=$(this).data('id');
            $.ajax({
                type:"GET",
                url:"/cd-admin/edit-discussion-forum/",
                data:{
                    id:item_id
                },
                success:function(response){
                    console.log(response);
                    $('#id').val(response.id);
                    $('#discussion_forum_name').val(response.discussion_forum_name);
                }
            });
        });
    </script>
@endsection