@extends('layouts.main')
@section('title', 'Training')
@section('content')
<!-- push external head elements to head -->
@push('head')
<link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
{{-- date --}}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="{{ asset('css/training.css') }}">
{{-- --}}
<style>
    .card-body table {
        width: 100% !Important;
    }

    .table-actions a {
        font-size: 5px !important;
    }
</style>
@endpush

{{--<div id="loaderEl">
    <x-loader />
</div>--}}

<div class="container-fluid">

    <div class="page-header">
        <div class="row align-items-end">
            <div class="col-lg-8">
                <div class="page-header-title">
                    <i class="ik ik-users bg-blue"></i>
                    <div class="d-inline">
                        <h5>{{__('Training Module') }}</h5>
                        <span>{{ __('Listing of all trainings')}}</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <nav class="breadcrumb-container" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{route('dashboard')}}"><i class="ik ik-home"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}">{{ __('Dashboard')}}</a>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card p-3">
                <div class="card-header d-flex justify-content-between">
                    <h3>Filters: </h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('trainings') }}" method="GET">
                        <div wire:ignore class="form-row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <select class="select2 form-control" name="status" id="status">
                                        <option value="">Select status of training</option>
                                        <option value="all" {{ $publish_status == 'all' ? 'selected' : '' }}>All</option>
                                        <option value="published" {{ $publish_status == 'published' ? 'selected' : '' }}>Published</option>
                                        <option value="unpublished" {{ $publish_status == 'unpublished' ? 'selected' : '' }}>Unpublished</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-sm-12 d-flex justify-content-end">
                                <button style="width:150px;" type="submit" class="btn btn-primary" id="search-btn"><i class="fa fa-search"></i> Search </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card p-3">
                <div class="card-header d-flex justify-content-between">
                    <div>
                        <h3 class="mb-2"><strong>Training Listing</strong></h3>
                        <div class="d-flex" id="filter-wrapper">

                        </div>
                    </div>
                    <div style="height:40px;" class="info-wrapper d-flex justify-content-between align-items-center add-button">
                        <a href="{{ route('add_training_form') }}" style="height:40px; margin-top:-10px; padding: 3px 5px;" class="btn btn-primary text-white text-center d-flex justify-content-center align-items-center">Add
                            New Training</a>
                    </div>
                </div>
                <div class="card-body table-responsive" id="trainingTableWrapper">
                    <table id="training_table" class="table training_table training-module" style="width:100%;">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Tags</th>
                                <th>Type</th>
                                <th>Published</th>
                                <th>Created On</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="training_table_body">
                            @foreach ($trainings as $training)
                            <tr>
                                <td>{{$loop->iteration}}</td>
                                <td>{{$training->title}}</td>
                                <td>{{$training->description}}</td>
                                <td>{{$training->tags}}</td>
                                <td>{{$training->type}}</td>
                                <td>
                                    @if($training->publish)
                                    <span class="bg-success rounded-pill text-white px-2">Published</span>
                                    @else
                                    <span class="bg-warning rounded-pill text-white px-2">Unpublished</span>
                                    @endif
                                </td>
                                <td>{{date('d M, Y',strtotime($training->created_at))}}</td>
                                <td>
                                    @if($training->publish)
                                    <a data-toggle="modal" data-target="#publishModal" data-id="publish_{{$training->id}}" data-publish="publish_toggle_{{$training->publish}}" id='publish-btn' class='badge badge-warning badge-sm publish-button text-white'>
                                        <i data-toggle="modal" data-target="#publishModal" data-id="publish_{{$training->id}}" data-publish="publish_toggle_{{$training->publish}}" class="fa fa-arrow-down"></i>
                                    </a>
                                    @else
                                    <a data-toggle="modal" data-target="#publishModal" data-id="publish_{{$training->id}}" data-publish="publish_toggle_{{$training->publish}}" id='publish-btn' class='badge badge-success badge-sm publish-button text-white'>
                                        <i data-toggle="modal" data-target="#publishModal" data-id="publish_{{$training->id}}" data-publish="publish_toggle_{{$training->publish}}" class="fa fa-arrow-up"></i>
                                    </a>
                                    @endif
                                    <a href="{{ route('edit_training', ['training' => $training->id]) }}" class='badge badge-info badge-sm edit-button text-white'>
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    <a id="view-btn" href="{{ route('view_training_resource', ['training' => $training->id]) }}" class='badge badge-secondary badge-sm view-button text-white'>
                                        <i class="fa fa-eye"></i></i>
                                    </a>
                                    <a id="delete-btn" class='badge badge-danger badge-sm delete-button text-white' data-toggle="modal" data-target="#deleteModal" data-id="delete_publish_{{$training->id}}">
                                        <i data-id="delete_publish_{{$training->id}}" class="fa fa-trash"></i></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    {{-- Action Message Modal --}}
    @if (session('status'))
    <div class="modal fade" id="actionMessageModal" tabindex="-1" role="dialog" aria-labelledby="actionMessageModalLabel" aria-hidden="true">
        <div class="modal-dialog actionMessage" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body actionMessageBody">
                    @if (session('is_success'))
                    <div>
                        <img class="action-message-icon" src="{{ asset('img/faicon/success-check.png')}}" alt="">
                    </div>
                    <h1>Successful</h1>
                    @else
                    <div>
                        <img class="action-message-icon" src="{{ asset('img/faicon/fail-cancel.png')}}" alt="">
                    </div>
                    <h1>Failed</h1>
                    @endif
                    <p>{{ session('status') }}</p>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- END Action Message Modal --}}


    {{-- Delete Modal --}}
    <div class="modal fade" id="deleteModal" 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">Delete Training</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this training?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" id="cancel-btn" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <form id="delete-modal-form" action="" method="POST">
                        <input type="hidden" name="_method" value="DELETE">
                        @csrf
                        <button type="submit" id="delete-modal-btn" class="btn btn-primary">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- END Delete Modal --}}

{{-- Publish Modal --}}
<div class="modal fade" id="publishModal" tabindex="-1" role="dialog" aria-labelledby="publishModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="publishModalLabel">Delete Training</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="publish-modal-message">Are you sure you want to publish this training?</p>
            </div>
            <div class="modal-footer">
                <button type="button" id="cancel-btn" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <form id="publish-modal-form" action="" method="POST">
                    <input type="hidden" name="_method" value="PUT">
                    @csrf
                    <button type="submit" id="modal-btn" class="btn btn-primary">Proceed</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- END Publish Modal --}}

</div>

@push('script')
<script src="{{ asset('js/_assets/general_js.js?tx=')}}{{strtotime("now")}}"> </script>
<script>
    $(document).ready(function() {
        $("#actionMessageModal").modal('show');
        generalInitDataTable('training_table', 0, '', [0, 1, 2, 3, 4, 5, 6], true)
    });
    document.body.classList.add("sidebar-mini");

    let publish_btns = document.querySelectorAll(`.publish-button`);
    let publish_modal_content = document.querySelector(`#publish-modal-message`);
    let publish_modal_form = document.querySelector('#publish-modal-form')

    let delete_btns = document.querySelectorAll(`.delete-button`);
    let delete_modal_content = document.querySelector(`#delete-modal-message`);
    let delete_modal_form = document.querySelector('#delete-modal-form')

    Array.prototype.forEach.call(publish_btns, function(publish_btn) {
        publish_btn.addEventListener('click', function(e) {
            let publish_data_id = e.target.dataset.id
            let publish_data_id_array = publish_data_id.split("_")
            let publish_data_id_length = publish_data_id_array.length - 1
            let publish_data_toggle = e.target.dataset.publish
            let publish_data_toggle_array = publish_data_toggle.split("_")
            let publish_data_toggle_length = publish_data_toggle_array.length - 1
            console.log(publish_data_toggle_array[publish_data_toggle_length])
            if (publish_data_toggle_array[publish_data_toggle_length] == '0') {
                publish_modal_content.innerHTML = 'Are you sure you want to Publish this training?'
            } else if (publish_data_toggle_array[publish_data_toggle_length] == '1') {
                publish_modal_content.innerHTML = 'Are you sure you want to Unpublish this training?'
            }
            publish_modal_form.setAttribute('action', `${window.location.origin}/trainings/${publish_data_id_array[publish_data_id_length]}/publish`)
        })
    });

    Array.prototype.forEach.call(delete_btns, function(delete_btn) {
        delete_btn.addEventListener('click', function(e) {
            let delete_data_id = e.target.dataset.id
            let delete_data_id_array = delete_data_id.split("_")
            let delete_data_id_length = delete_data_id_array.length - 1
            console.log(delete_data_id_array[delete_data_id_length])
            delete_modal_form.setAttribute('action', `${window.location.origin}/trainings/${delete_data_id_array[delete_data_id_length]}/destroy`)
        })
    });
</script>
@endpush



<!-- push external js -->

@endsection