@extends('layouts.admin.base')

@section('top-script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@1/dist/tinymce-jquery.min.js"></script>
@endsection

@section('page-title')
    Help
@endsection

@section('content')

<div class="modal fade" role="dialog" tabindex="-1" id="create-help">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h4 class="modal-title">Create Help</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="createhelpform" action="{{ route('admin_create_help') }}" method="POST">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                            <label class="form-label" for="title">Title</label>
                            <input class="form-control" type="text" id="title" autofocus="" required="" name="title">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="form-label" for="description">Description</label>
                                <textarea class="form-control" rows="3" required="" name="description"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="form-label" for="videourl">Video URL</label>
                                <input class="form-control" type="text" id="videourl" name="video url">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <button class="btn btn-primary" type="submit">Create</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
        <div class="mb-3"><a class="text-decoration-none alt-btn" href="#" data-bs-target="#create-help" data-bs-toggle="modal">Create Help<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1 mt-n1">
                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
                </svg></a></div>
        <div class="card card-bg border-0">
            <div class="card-body">
                <div class="table-responsive  mt-4">
                    <table class="table table-borderless table-bordered display responsive table-spacing2" id="table1" style="width: 100%;">
                        <thead class="table-header">
                            <tr class="table-h">
                                <th>Title</th>
                                <th>Description</th>
                                <th>Video</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($helps as $help)
                                <tr class="table-row">
                                    <td>
                                        <p class=" table-p">{{ $help->title }}</p>
                                    </td>
                                    <td >
                                        <p class="table-p">{{ $help->description }}</p>
                                    </td>
                                    <td>{{ $help->video_url }}</td>
                                    <td>
                                        <p class=" table-p">{{ $help->created_at }}</p>
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn text-end" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside" type="button">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-three-dots">
                                                        <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
                                                </svg></button>
                                            <div class="dropdown-menu">
                                                <form method="POST" action="{{ route('admin_delete_help') }}" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this help item?')">
                                                    {{ csrf_field() }}
                                                    <input type="hidden" name="help_id" value="{{ $help->id }}">
                                                    <button type="submit" class="dropdown-item text-red" style="border: none; background: none; width: 100%; text-align: left;">Delete</button>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>

    function init() {
        return {
            help: {
                title: '',
                description: '',
                url: ''
            }
           
        }
    }

</script>
@endsection