@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 --}}
<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">
                <form id="add-form" action="{{ route('add_training') }}" enctype="multipart/form-data" method="POST">
                    @csrf
                    <div class="form-row">
                        <div class="col-sm-7">
                            <div class="form-group mb-4">
                                <label for="type">Type</label>
                                <select id="type" name="type" class="form-control service-cat select2 @error('type') is-invalid @enderror" id="main-select" 
                                placeholder="Select service category">
                                    <option value="">Select Type</option>
                                    <option value="video" {{old('type')=='video' ? 'selected' : '' }}>Video</option>
                                    <option value="document" {{old('type')=='document' ? 'selected' : '' }}>Document</option>
                                    <option value="audio" {{old('type')=='audio' ? 'selected' : '' }}>Audio</option>
                                </select>
                                @error('type')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-sm-5">
                            <div class="form-group mb-4">
                                <label for="publish">Publish</label>
                                <select id="publish" name="publish" class="form-control service-cat select2 @error('publish') is-invalid @enderror" id="main-select" placeholder="Select service category">
                                    <option value="">Select Publish Status</option>
                                    <option value="1"  {{old('publish')=='1' ? 'selected' : '' }}>Yes</option>
                                    <option value="0"  {{old('publish')=='0' ? 'selected' : '' }}>No</option>
                                </select>
                                @error('publish')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                    </div>
                    <div class="form-group mb-4">
                        <label for="title">Title</label>
                        <input id="title" type="text" name="title" class="form-control @error('title') is-invalid @enderror" 
                            placeholder="Title" value="{{ old('title') }}">
                        @error('title')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group mb-4">
                        <label for="description">Description</label>
                        <textarea id="description" name="description" class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                        @error('description')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group mb-4">
                        <label for="tags">Tags</label>
                        <input id="tags" name="tags" type="text" class="form-control @error('tags') is-invalid @enderror" placeholder="Tags" value="{{ old('tags') }}">
                        @error('tags')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="filename">Upload Document</label>
                        <input id="filename" type="file" class="form-control-file @error('filename') is-invalid @enderror" name="filename">
                        @error('filename')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary">Save Training</button>
                    </div>

                </form>
            </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 --}}

@push('script')
<script>
    $(document).ready(function() {
        console.log('good')
        $("#actionMessageModal").modal('show');
    });
    document.body.classList.add("sidebar-mini");
</script>
@endpush
@endsection