@extends('back.layout.app')
@section('title', config('app.name') . ' - Thèmes média')

@php $breadcrumb = 'parameters.media_themes'; @endphp

@section('content')

<div class="kt-container-fixed">
    <div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
        <div class="flex flex-col justify-center gap-2">
            <h1 class="text-xl font-medium leading-none text-mono">Thèmes média</h1>
            <div class="flex items-center gap-2 text-sm font-normal text-secondary-foreground">
                Gestion des thèmes média
            </div>
        </div>
        @can('manage-media-themes')
        <div class="flex items-center gap-2.5">
            <a href="{{ route('admin.medias.themes.export') }}">
                <button type="button" class="kt-btn kt-btn-outline text-green-600">
                    <i class="ki-outline ki-exit-down text-green-600"></i>
                    Export Excel
                </button>
            </a>
            <button type="button"
                data-kt-drawer-toggle="#drawer_create_media_theme"
                class="kt-btn kt-btn-outline text-primary">
                <i class="ki-outline ki-plus-circle text-primary"></i> Ajouter un thème
            </button>
        </div>
        @endcan
    </div>
</div>

{{-- Drawer création --}}
<div
    id="drawer_create_media_theme"
    class="kt-drawer kt-drawer-end hidden w-full max-w-[400px]"
    data-kt-drawer="true"
>
    <div class="kt-drawer-header">
        <h3 class="kt-drawer-title">Nouveau thème média</h3>
        <button class="kt-drawer-close" aria-label="Fermer"
            data-kt-drawer-dismiss="#drawer_create_media_theme">
            <i class="ki-outline ki-cross text-lg"></i>
        </button>
    </div>

    <div class="kt-drawer-content kt-scrollable p-5">
        <form id="create_media_theme_form" method="POST"
            action="{{ route('admin.medias.themes.store') }}"
            class="flex flex-col gap-5">
            @csrf

            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2" for="mt_name">Nom du thème <span class="text-destructive">*</span></label>
                <input id="mt_name" name="name" type="text"
                    class="kt-input @error('name') border-destructive @enderror"
                    value="{{ old('name') }}"
                    autocomplete="off"
                    placeholder="Ex : Luxe, Sport, Technologie...">
                @error('name')
                    <span class="text-xs text-destructive">{{ $message }}</span>
                @enderror
            </div>

        </form>
    </div>

    <div class="kt-drawer-footer justify-end gap-3">
        <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive"
            data-kt-drawer-dismiss="#drawer_create_media_theme">
            {{ __('ui.actions.cancel') }}
        </button>
        <x-ui.loading-button type="submit" form="create_media_theme_form"
            class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
            {{ __('ui.actions.create') }}
        </x-ui.loading-button>
    </div>
</div>

<!-- Container -->
<div class="kt-container-fixed">
    <div class="grid w-full space-y-5">
        <div class="kt-card">
            <div class="kt-card-header min-h-16">
                <input type="text" placeholder="{{ __('ui.datatable.search') }}" class="kt-input sm:w-48"
                    data-kt-datatable-search="#kt_media_themes_datatable" />
            </div>

            <div id="kt_media_themes_datatable" class="kt-card-table"
                data-kt-datatable="true"
                data-kt-datatable-page-size="20"
                data-kt-datatable-state-save="true"
                data-kt-datatable-info="{{ __('ui.datatable.info') }}"
                data-kt-datatable-info-empty="{{ __('ui.datatable.info_empty') }}">

                <div class="kt-table-wrapper kt-scrollable">
                    <table class="kt-table" data-kt-datatable-table="true">
                        <thead>
                            <tr>
                                <th scope="col" data-kt-datatable-column="name">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Thème</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-32" data-kt-datatable-column="medias">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Nb de médias</span><span class="kt-table-col-sort"></span></span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($themes as $theme)
                            <tr>
                                <td data-kt-datatable-value="{{ $theme->name }}">
                                    <span class="text-sm font-medium text-mono">{{ $theme->name }}</span>
                                </td>
                                <td data-kt-datatable-value="0" class="text-center">
                                    <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-primary">{{$theme->medias_count}}</span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="kt-datatable-toolbar">
                    <div class="kt-datatable-length">
                        {{ __('ui.datatable.show') }}<select class="kt-select kt-select-sm w-16" name="perpage"
                            data-kt-datatable-size="true"></select>{{ __('ui.datatable.per_page') }}
                    </div>
                    <div class="kt-datatable-info">
                        <span data-kt-datatable-info="true"></span>
                        <div class="kt-datatable-pagination" data-kt-datatable-pagination="true"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if ($errors->any())
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        KTDrawer.getInstance(document.querySelector('#drawer_create_media_theme'))?.show();
    });
</script>
@endpush
@endif

@endsection