@extends('layouts.dashboard.app')

@section('title')
    {{ __('pages.dashboard') }}
@endsection

@section('custom-body-attr')
    {!! 'class="g-sidenav-show bg-gray-100"' !!}
@endsection

@section('content')
    <div class="min-height-300 bg-primary position-absolute w-100"></div>
    @include('admin::layouts.aside')

    <main class="main-content position-relative border-radius-lg ">
        @include('admin::layouts.navbar')

        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-header pb-0" style="display: flex;justify-content: space-between;">
                            <div>
                                <h6>resources table</h6>
                            </div>
                            <div>
                                <button id="add_resource" class="async_action btn btn-primary btn-sm m-0" type="button" data-bs-toggle="modal" data-bs-target="#resource_modal" data-action="{{ route('admin.resources.create') }}">{{ __('pages.add') }}</button>
                            </div>
                        </div>
                        <div class="card-body px-0 pt-0 pb-2">
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">ID</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Nume</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Categorie</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Descriere</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Link</th>
                                        <th class="text-secondary opacity-7"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @if(count($resources) > 0)
                                        @foreach($resources as $resource)
                                            <tr>
                                                <td>
                                                    <div class="d-flex px-2 py-1">
                                                        <div>
                                                            <img src="{{ $resource->course->photo() }}"
                                                                 class="avatar avatar-sm me-3" alt="course photo">
                                                        </div>
                                                        <div class="d-flex flex-column justify-content-center">
                                                            <h6 class="mb-0 text-sm">{{ $resource->id }}</h6>
                                                            <p class="text-xs text-secondary mb-0"></p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <p class="text-xs font-weight-bold mb-0">{{ $resource->learner->first_name }} {{ $resource->learner->last_name }}</p>
                                                </td>
                                                <td>
                                                    <p class="text-xs font-weight-bold mb-0">{{ $resource->teacher->first_name }} {{ $resource->teacher->last_name }}</p>
                                                </td>
                                                <td class="align-middle text-center text-sm">
                                                    <span class="badge badge-sm bg-gradient-success">{{ $resource->course->name }}</span>
                                                </td>
                                                <td class="align-middle text-center">
                                                    <span class="text-secondary text-xs font-weight-bold">{{ $resource->type }}</span>
                                                </td>
                                                <td class="align-middle text-center">
                                                    <span class="text-secondary text-xs font-weight-bold">{{ $resource->assisted_hours }}</span>
                                                </td>
                                                <td class="align-middle text-center">
                                                    <span class="text-secondary text-xs font-weight-bold">{{ $resource->order_number }}</span>
                                                </td>
                                                <td class="align-middle text-center">
                                                    <span class="text-secondary text-xs font-weight-bold">{{ $resource->issue_date }}</span>
                                                </td>
                                                <td class="align-middle">
                                                    <a href="javascript:void(0);"
                                                       class="async_action text-secondary font-weight-bold text-xs"
                                                       data-bs-toggle="modal" data-bs-target="#edit_resource_modal"
                                                       data-original-title="Edit user"
                                                       data-action="{{ route('admin.resources.edit', $resource->id) }}">
                                                        {{ __('pages.edit') }}
                                                    </a>
                                                    <a href="javascript:void(0);"
                                                       class="async_action text-secondary font-weight-bold text-xs"
                                                       data-bs-toggle="modal" data-bs-target="#delete_resource_modal"
                                                       data-original-title="Delete user"
                                                       data-action="{{ route('admin.resources.delete', $resource->id) }}">
                                                        {{ __('pages.delete') }}
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr style="text-align: center">
                                            <td colspan="7">
                                                <img width="8%" alt="data not found" src="{{ asset('img/data_not_found.png') }}"/>
                                            </td>
                                        </tr>
                                    @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('admin::layouts.footer')
        </div>

        {{-- Add Certificate Modal --}}
        <div class="modal modal-lg fade" id="resource_modal" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered" role="document" style="justify-content: center"></div>
        </div>

        {{-- Delete Certificate Modal --}}
        <div class="modal modal-lg fade" id="delete_resource_modal" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered" role="document" style="justify-content: center"></div>
        </div>

        {{-- Edit Certificate Modal --}}
        <div class="modal modal-lg fade" id="edit_resource_modal" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered" role="document" style="justify-content: center"></div>
        </div>
    </main>
@endsection

@section('custom-css')
@endsection

@section('custom-scripts')
@endsection