@extends('layouts/contentLayoutMaster')

@section('title', 'Artiste - Librairie')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-6">
                    <h1 class="mb-3">{Nom de l'artiste}</h1>
                </div>
                <div class="col-6 text-end">
                    <a href="{{ route('artist.create', ['artist_id' => $artist_id]) }}" class="btn btn-primary"><i
                            data-feather='edit'></i> Modifier l'artiste</a>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <ul class="nav nav-tabs nav-justified" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="archive-tab" data-bs-toggle="tab" href="#archive"
                                aria-controls="archive" role="tab" aria-selected="true">Archive</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="project-tab" data-bs-toggle="tab" href="#project"
                                aria-controls="project" role="tab" aria-selected="false">Projets</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pdf-tab" data-bs-toggle="tab" href="#pdf" aria-controls="pdf"
                                role="tab" aria-selected="false">PDFs</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="home" aria-labelledby="home-tab" role="tabpanel">
                            <p>
                                Archive : In progress...
                            </p>
                        </div>
                        <div class="tab-pane" id="project" aria-labelledby="project-tab" role="tabpanel">
                            <table class="table" id="projects">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Nom</th>
                                        <th class="text-end">Auteur</th>
                                        <th class="text-end">Date</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="tab-pane" id="pdf" aria-labelledby="pdf-tab" role="tabpanel">
                          <table class="table" id="pdfs">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nom</th>
                                    <th class="text-end">Auteur</th>
                                    <th class="text-end">Date</th>
                                </tr>
                            </thead>
                        </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection


@section('vendor-script')
    {{-- vendor files --}}
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.min.js')) }}"></script>
@endsection
@section('page-script')
    <script>
        var project_create = "{{ route('project.create') }}";
        var pdf_create = "{{ route('pdf.create') }}";
    </script>
    <script src="{{ asset(mix('js/scripts/libraries/datatable-fr.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/app/artist/library.js')) }}"></script>
@endsection