@extends('layouts.' . $viewPrefix . '.' . session('layout', 'app'))

@section('title', setting('training_record_page_title', 'Training Register'))

@section('content')
    {{--<div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-users icon-gradient bg-mean-fruit"></i>
                </div>
                <div>{{ __(setting('training_records_header_title', 'Training Register')) }}</div>
            </div>

            <div class="page-title-actions">
                <div class="d-grid gap-2 d-block">
                    <a href="{{ route($routePrefix . '.trainings.calendar') }}" class="btn-shadow btn btn-danger">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-calendar fa-w-20"></i>
                        </span>
                        {{ __('View Calendar') }}
                    </a>
                    @can(\App\Models\Permission::PERM_TRAINING_CREATE)
                    <a href="{{ route($routePrefix . '.trainings.create') }}" class="btn-shadow btn btn-info">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-plus-circle fa-w-20"></i>
                        </span>
                        {{ __('Create New Training Record') }}
                    </a>
                    @endcan

                </div>
            </div>
        </div>
    </div>--}}

    @if(setting('training_record_page_header'))
        <div class="row">
            <div class="col-12">
                {!! setting('training_record_page_header') !!}
            </div>
        </div>
    @endif

    @if(setting('training_record_page_content'))
        <div class="row">
            <div class="col-12">
                {!! setting('training_record_page_content') !!}
            </div>
        </div>
    @endif

    <div class="row">
        <div class="col-md-12">
            <div class="d-flex flex-column flex-sm-row">
                @can(\App\Models\Permission::PERM_TRAINING_CREATE)
                    <a href="{{ route($routePrefix . '.trainings.create') }}" class="btn-shadow btn btn-info d-block d-sm-inline-block mb-2 me-sm-1">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-plus-circle fa-w-20"></i>
                        </span>
                        {{ __('Create New Training Record') }}
                    </a>
                @endcan
                <a href="{{ route($routePrefix . '.trainings.calendar') }}" class="btn-shadow btn btn-danger d-block d-sm-inline-block mb-2 me-sm-1">
                    <span class="btn-icon-wrapper pr-2 opacity-7">
                        <i class="fas fa-calendar fa-w-20"></i>
                    </span>
                    {{ __('View Calendar') }}
                </a>

                {{--@if(request()->user()->isAdmin() && request()->user()->can('updatePageAttributes', \App\Models\Training::class))

                        <a class="btn-shadow btn btn-warning text-white d-block d-sm-inline-block mb-2 ms-sm-auto" href="{{ route($routePrefix . '.trainings.page.attributes') }}">
                            <span class="btn-icon-wrapper pr-2 opacity-7">
                                <i class="fas fa-pen fa-w-20"></i>
                            </span>
                            {{ __('Edit Page') }}
                        </a>

                @endif--}}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            @if ($errors->any())
                <div class="alert alert-danger">
                    @foreach ($errors->all() as $error)
                        <p class="mb-0">{{ $error }}</p>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="main-card card mb-2">
                <div class="card-body">
                    <div class="table-responsive">
                        <div id="mass-action">
                            <button class="btn btn-info btn-xs d-block d-sm-inline-block mb-2 me-sm-1" onclick="doMassAction('export')"><i class="fas fa-download"></i> Export selected records</button>
                            <button class="btn btn-info btn-xs d-block d-sm-inline-block mb-2 me-sm-1" onclick="doMassAction('delete')"><i class="fas fa-trash"></i> Delete selected records</button>
                        </div>
                        <table id="datatable" class="align-middle mb-0 table table-striped table-bordered table-hover left-sort-icon">
                            <thead>
                                <tr>
                                    <th><input id="select-training-all" type="checkbox" /></th>
                                    <th>Worker's Name</th>
                                    <th>Completed Training</th>
                                    <th>Date Completed</th>
                                    <th>Training Status</th>
                                    <th>Expiry Date</th>
                                    <th>Reminder Status</th>
                                    <th>Certificate</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($trainings as $key => $item)
                                <tr class="cursor-pointer" onclick="document.location.href='{{ route($routePrefix . '.trainings.edit',$item->id) }}'">
                                    <td onclick="event.stopPropagation()"><input data-id="{{ $item->id }}" type="checkbox" class="training-item-check"/></td>
                                    <td>
                                        {{ $item->user->name }}
                                    </td>
                                    <td>{{ $item->trainingProvider->name }}</td>
                                    <td>{{ optional($item->completed_at)->format(setting('site_date_format')) }}</td>
                                    <td>{{ $item->status }}</td>
                                    <td>{{ optional($item->recurring_period)->format(setting('site_date_format')) }}</td>
                                    <td>{{ $item->reminder_status }}</td>
                                    <td>
                                        @if($item->hasMedia(\App\Models\File::COLLECTION_CERTIFICATE))
                                            <span class="text-success"><i class="fas fa-check text-success"></i> Yes</span>
                                        @else
                                            <span class="text-danger"><i class="fas fa-times"></i> No</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <i class="fas fa-ellipsis-v dropdown-toggle me-3"
                                           id="page-dropdown-{{ $item->id }}"
                                           data-bs-toggle="dropdown"
                                           aria-expanded="false" onclick="event.stopPropagation()">
                                        </i>
                                        <ul class="dropdown-menu" aria-labelledby="page-dropdown-{{ $item->id }}">

                                            <li>
                                                <a class="dropdown-item" href="{{ route($routePrefix . '.trainings.show',$item->id) }}">
                                                    <span>Show</span>
                                                </a>
                                            </li>
                                            @can(\App\Models\Permission::PERM_TRAINING_UPDATE)
                                                <li>
                                                    <a class="dropdown-item" href="{{ route($routePrefix . '.trainings.edit',$item->id) }}">
                                                        {{--<i class="fas fa-edit"></i>--}}
                                                        <span>Edit</span>
                                                    </a>
                                                </li>
                                            @endcan

                                            @can(\App\Models\Permission::PERM_TRAINING_DELETE)
                                                <li>
                                                    <button class="dropdown-item" type="button"
                                                            onclick="AppHelper.deleteData({{ $item->id }})">
                                                        <span>Delete</span>
                                                    </button>
                                                    <form id="delete-form-{{ $item->id }}"
                                                          action="{{ route($routePrefix . '.trainings.destroy',$item->id) }}" method="POST"
                                                          style="display: none;">
                                                        @csrf()
                                                        @method('DELETE')
                                                    </form>
                                                </li>
                                            @endcan
                                        </ul>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="d-flex">
                <div class="d-inline-block my-2">
                    {{--<a type="button" data-bs-toggle="modal" data-bs-target="#graph-modal" class="btn-shadow btn btn-info text-white">--}}
                    <a class="btn btn-shadow btn-info text-white px-4" href="{{ route($routePrefix . '.trainings.reports') }}">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-chart-pie fa-w-20"></i>
                        </span>
                        {{ __('Reports') }}
                    </a>
                </div>
                @if(session('layout') === 'app')

                    <div class="d-none d-sm-inline-block my-2 mx-2">
                        <a type="button" data-bs-toggle="modal" data-bs-target="#import-modal" class="btn-shadow btn btn-primary text-white">
                            <span class="btn-icon-wrapper pr-2 opacity-7">
                                <i class="fas fa-file-import fa-w-20"></i>
                            </span>
                            {{ __('Import Training Records') }}
                        </a>
                    </div>
                    @if(request()->user()->can('embed', \App\Models\Training::class))
                        <div class="d-none d-sm-inline-block my-2 ms-auto">
                            <a type="button" data-bs-toggle="modal" data-bs-target="#installation-modal" class="btn-shadow btn btn-secondary text-white">
                                <span class="btn-icon-wrapper pr-2 opacity-7">
                                    <i class="fas fa-object-group fa-w-20"></i>
                                </span>
                                {{ __('Installation Code') }}
                            </a>
                        </div>
                    @endif
                    {{--@if(request()->user()->isAdmin() && request()->user()->can('updatePageAttributes', \App\Models\Training::class))
                        <div class="d-none d-sm-inline-block my-2">
                            <a class="btn-shadow btn btn-warning text-white" href="{{ route($routePrefix . '.trainings.page.attributes') }}">
                                <span class="btn-icon-wrapper pr-2 opacity-7">
                                    <i class="fas fa-pen fa-w-20"></i>
                                </span>
                                {{ __('Edit Page') }}
                            </a>
                        </div>
                    @endif--}}

                @endif
            </div>
        </div>
    </div>

    @if(setting('training_record_page_footer'))
        <div class="row">
            <div class="col-12">
                {!! setting('training_record_page_footer') !!}
            </div>
        </div>
    @endif
@endsection

@section('modal')
    <div class="modal fade" id="installation-modal" tabindex="-1" role="dialog" aria-labelledby="installationModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-label">Embed Code</h5>
                </div>
                <div class="modal-body">
                    <div class="page-installation-code">
                        <div class="position-relative">
                            <textarea id="installation-code" rows="12" readonly class="copy-area form-control pt-4">{{ $embed }}</textarea>
                            <button  type="button" id="copyit" class="btn-shadow btn btn-xs btn-outline-dark position-absolute" onclick="InstallationCode.copy('.copy-area', this)"><i class="fas fa-clipboard"></i> Copy</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="import-modal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-label">Import Training Providers</h5>
                    <button type="button" class="close border-0" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times fs-140 close" data-bs-dismiss="modal"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form role="form" id="importForm" method="POST"
                          action="{{ route($routePrefix . '.training-providers.import') }}"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="from-group">
                            <label class="form-label" for="import">Upload File (.xls, .csv)</label>
                            <input type="file"
                                   name="import"
                                   id="import"
                                   class="dropify"
                            >
                        </div>
                        <div class="from-group mt-3">
                            <button class="btn btn-primary btn-danger">Import Providers</button>
                            <a class="btn btn-info" href="{{ route($routePrefix . '.training-providers.template') }}">Download Template</a>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade" id="import-modal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-label">Import Training Records</h5>
                    <button type="button" class="close border-0" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times fs-140 close" data-bs-dismiss="modal"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form role="form" id="importForm" method="POST"
                          action="{{ route($routePrefix . '.trainings.import') }}"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="from-group">
                            <label class="form-label" for="import">Upload File (.xls, .csv)</label>
                            <input type="file"
                                   name="import"
                                   id="import"
                                   class="dropify"
                            >
                        </div>
                        <div class="from-group mt-3">
                            <button class="btn btn-primary btn-danger">Import Records</button>
                            <a class="btn btn-info" href="{{ route($routePrefix . '.trainings.template') }}">Download Template</a>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="graph-modal" tabindex="-1" role="dialog" aria-labelledby="graphModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-label">Graph</h5>
                    <button type="button" class="close border-0" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times fs-140 close" data-bs-dismiss="modal"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div style="height: 400px">
                        <canvas id="training-records-chart" height="400"></canvas>
                    </div>
                    <div class="page-installation-code mt-2">
                        <textarea id="graph-embed-code" rows="12" readonly class="graph-copy-area form-control pt-4 d-none">{{ $graphShareCode }}</textarea>
                        <button  type="button" id="graph-copyit" class="btn-shadow btn btn-xs btn-outline-dark" onclick="InstallationCode.copy('.graph-copy-area', this)"><i class="fas fa-clipboard"></i> Iframe Code</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.min.js" integrity="sha512-O2fWHvFel3xjQSi9FyzKXWLTvnom+lOYR/AUEThL/fbP4hv1Lo5LCFCGuTXBRyKC4K4DJldg5kxptkgXAzUpvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>

        function doMassAction(type = null) {

            let ids = $('input.training-item-check:checked').map(function(){
                return $(this).data('id');
            }).get();

            switch (type) {
                case '{{ \App\Models\Training::MASS_EXPORT }}': {

                    window.location.href = '{{ route($routePrefix . '.trainings.mass.action', \App\Models\Training::MASS_EXPORT) }}' + '?' + $.param({ids:ids});
                    break;
                }
                case '{{ \App\Models\Training::MASS_DELETE }}': {

                    Swal.fire({
                        title: 'Are you sure that you want to delete ' + ids.length + ' selected record(s)',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.value) {
                            window.location.href = '{{ route($routePrefix . '.trainings.mass.action', \App\Models\Training::MASS_DELETE) }}' + '?' + $.param({ids:ids});
                        }
                    })

                    break;
                }
                default: {

                }
            }
        }

        function showMassAction() {
            let massAction = $('#mass-action');

            if($('input.training-item-check:checked').length) {
                massAction.show();
            }
            else {
                massAction.hide();
            }
        }

        $(document).ready(function() {
            showMassAction();

            $('#select-training-all').change(function(e) {
                let checked = $(this).is(":checked");
                $('.training-item-check').prop('checked', checked);
                showMassAction();
            });

            $('.training-item-check').change(function(e) {
                showMassAction();
            });

            AppDataTable.init({
                table_id: 'datatable',
                prefix: 'training_records',
                columnDefs: [
                    { width: "20%", targets: 1 },
                    { width: "27%", targets: 2 },
                    { width: "8%", targets: 3 },
                    { width: "10%", targets: 4 },
                    { width: "8%", targets: 5 },
                    { width: "8%", targets: 6 },
                    { width: "6%", targets: 7 },
                    { width: "8%", targets: 8 },
                    { targets: 0, orderable: false}
                ],
            });

            /*$("#datatable").DataTable({
                dom: '<"top"f>rt<"bottom d-flex"li<"ms-auto"p>><"clear">',
                aaSorting: [],
                columnDefs: [

                    { width: "20%", targets: 1 },
                    { width: "27%", targets: 2 },
                    { width: "8%", targets: 3 },
                    { width: "10%", targets: 4 },
                    { width: "8%", targets: 5 },
                    { width: "8%", targets: 6 },
                    { width: "6%", targets: 7 },
                    { width: "8%", targets: 8 },
                    { targets: 0, orderable: false}
                ],
            });*/

            const ctx = document.getElementById('training-records-chart');
            const chart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: JSON.parse('{!! json_encode(array_keys($graph)) !!}'),
                    datasets: [{
                        label: '# of Training Records',
                        data: JSON.parse('{!! json_encode(array_values($graph)) !!}'),
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {

                    }
                }
            });
        });
    </script>
@endpush