@extends('back.layout.app')
@section('title', config('app.name') . ' - Médias')

@php $breadcrumb = 'crm.media'; @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">Médias</h1>
            <div class="flex items-center gap-2 text-sm font-normal text-secondary-foreground">
                Liste des supports médias
            </div>
        </div>
        <div class="flex items-center gap-2.5">
            @can('export-media')
            <a href="{{ route('admin.crm.media.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>
            @endcan
            @can('create-media')
            <button type="button"
                data-kt-drawer-toggle="#drawer_create_media"
                class="kt-btn kt-btn-outline text-primary">
                <i class="ki-outline ki-plus-circle text-primary"></i> Ajouter un média
            </button>
            @endcan
        </div>
    </div>
</div>

@include('back.modules.crm.media.partials.create_media')

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

                <form method="GET" action="{{ route('admin.crm.media') }}" class="flex items-center gap-2">
                    <label class="flex items-center gap-2 text-sm">
                        <span class="text-muted-foreground">Thème</span>
                        <select name="theme_id" class="kt-select kt-select-sm w-44" onchange="this.form.submit()">
                            <option value="">Tous</option>
                            @foreach ($themes as $theme)
                                <option value="{{ $theme->id }}" {{ request('theme_id') == $theme->id ? 'selected' : '' }}>
                                    {{ $theme->name }}
                                </option>
                            @endforeach
                        </select>
                    </label>
                    @if (request('theme_id'))
                        <a href="{{ route('admin.crm.media') }}" class="kt-btn kt-btn-sm kt-btn-ghost">
                            Réinitialiser
                        </a>
                    @endif
                </form>
            </div>

            <div id="kt_media_datatable" class="kt-card-table"
                data-kt-datatable="true"
                data-kt-datatable-page-size="20"
                data-kt-datatable-state-save="false"
                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" class="w-72" data-kt-datatable-column="name">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Nom / Groupe</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-36" data-kt-datatable-column="type">
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Type</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-36" data-kt-datatable-column="theme">
                                    <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-28" data-kt-datatable-column="operations" >
                                    <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Nb opérations</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-24" data-kt-datatable-column="actions"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($medias as $media)
                            <tr>
                                <td data-kt-datatable-value="{{ $media->name }}">
                                    <div class="flex flex-col gap-0.5">
                                        <a href="{{ route('admin.crm.media.show', $media) }}"
                                            class="text-sm font-medium text-mono hover:text-primary">
                                            {{ $media->name }}
                                        </a>
                                        @if ($media->group)
                                            <span class="text-xs text-gray-400">{{ $media->group->name }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td data-kt-datatable-value="{{ $media->type?->name }}">
                                    @if ($media->type)
                                        <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-primary">{{ $media->type->name }}</span>
                                    @else
                                        <span class="text-xs text-secondary-foreground">—</span>
                                    @endif
                                </td>
                                <td data-kt-datatable-value="{{ $media->theme?->name }}">
                                    @if ($media->theme)
                                        <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-info">{{ $media->theme->name }}</span>
                                    @else
                                        <span class="text-xs text-secondary-foreground">—</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span style="display:none">{{ str_pad($media->operations_count ?? 0, 6, '0', STR_PAD_LEFT) }}</span>
                                    <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-primary">{{ $media->operations_count ?? 0 }}</span>
                                </td>
                                <td class="text-end">
                                    <span class="inline-flex gap-2.5">
                                        @can('view-media')
                                        <div>
                                            <a href="{{ route('admin.crm.media.show', $media) }}"
                                                class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                                data-kt-tooltip="#tooltip_consult_{{ $media->id }}"
                                                data-kt-tooltip-placement="bottom">
                                                <i class="ki-outline ki-eye"></i>
                                            </a>
                                            <div id="tooltip_consult_{{ $media->id }}" class="kt-tooltip">Consulter</div>
                                        </div>
                                        @endcan
                                        @can('delete-media')
                                        @if ($media->operations_count === 0)
                                        <div>
                                            <button type="button"
                                                class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline hover:text-destructive hover:border-destructive"
                                                data-kt-modal-toggle="#modal_confirm_delete"
                                                data-confirm-url="{{ route('admin.crm.media.destroy', $media) }}"
                                                data-confirm-name="{{ $media->name }}"
                                                data-kt-tooltip="#tooltip_del_{{ $media->id }}"
                                                data-kt-tooltip-placement="bottom">
                                                <i class="ki-outline ki-trash text-destructive"></i>
                                            </button>
                                            <div id="tooltip_del_{{ $media->id }}" class="kt-tooltip">Supprimer</div>
                                        </div>
                                        @endif
                                        @endcan
                                    </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>

@endsection