@extends('sur-mesure.layouts.app')

@section('title', __('surmesure.creations_list'))

@section('styles')
    <style>
        .sm-table { width: 100%; border-collapse: collapse; }
        .sm-table th {
            text-align: left; font-size: 12px; text-transform: uppercase;
            letter-spacing: .5px; color: #888; padding: 12px 14px; border-bottom: 1px solid #eee;
        }
        .sm-table td { padding: 14px; border-bottom: 1px solid #f4f4f4; vertical-align: middle; }
        .sm-table tr:last-child td { border-bottom: none; }

        .sm-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid #eee; }
        .sm-thumb-empty { width: 56px; height: 56px; border-radius: 10px; background: #f4f4f4; }

        .sm-badge {
            font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
            border-radius: 20px; padding: 4px 12px; white-space: nowrap;
        }
        .sm-badge-fixed { background: #eaf8ee; color: #2c6b3f; }
        .sm-badge-quote { background: #f3eeda; color: #8a7430; }

        .sm-row-actions { display: flex; gap: 8px; justify-content: flex-end; }
        .sm-row-actions a, .sm-row-actions button {
            border: none; border-radius: 8px; padding: 8px 14px;
            font-size: 13px; cursor: pointer; text-decoration: none;
        }
        .sm-row-actions .sm-edit { background: #f3eeda; color: #8a7430; }
        .sm-row-actions .sm-delete { background: #fff1f1; color: #a12626; }

        .sm-search { display: flex; gap: 10px; margin-bottom: 20px; }
        .sm-search input { flex: 1; border: 1px solid #ddd; border-radius: 10px; padding: 12px; }

        .sm-empty { text-align: center; padding: 50px 20px; color: #999; }
    </style>
@endsection

@section('content')
    <div class="sm-page">
        <div class="sm-card">
            <div style="display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;">
                <div>
                    <h3>{{ __('surmesure.creations_list') }}</h3>
                    <p class="sm-lead" style="margin-bottom:0;">{{ __('surmesure.creations_list_intro') }}</p>
                </div>
                <a href="{{ route('sur-mesure.creations.create') }}" class="rts-btn btn-primary">+ {{ __('surmesure.add_creation') }}</a>
            </div>

            @if(session('success'))
                <div class="sm-alert-success" style="margin-top:20px;">{{ session('success') }}</div>
            @endif

            <form method="GET" class="sm-search" style="margin-top:24px;">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('surmesure.search_placeholder') }}">
                <button class="rts-btn btn-primary">{{ __('surmesure.search') }}</button>
            </form>

            @if($creations->isEmpty())
                <div class="sm-empty">
                    <p>{{ __('surmesure.no_creation') }}</p>
                    <a href="{{ route('sur-mesure.creations.create') }}" class="rts-btn btn-primary" style="margin-top:14px;">
                        + {{ __('surmesure.add_creation') }}
                    </a>
                </div>
            @else
                <div style="overflow-x:auto;">
                    <table class="sm-table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>{{ __('surmesure.creation_name') }}</th>
                                <th>{{ __('surmesure.pricing') }}</th>
                                <th>{{ __('surmesure.price') }}</th>
                                <th>{{ __('surmesure.options_count') }}</th>
                                <th>{{ __('surmesure.delay') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($creations as $creation)
                                <tr id="creation-row-{{ $creation->id }}">
                                    <td>
                                        @if($creation->images->first())
                                            <img class="sm-thumb"
                                                 src="{{ route('vendor.products.thumbnail.show', $creation->images->first()) }}"
                                                 alt="{{ $creation->product_name }}">
                                        @else
                                            <div class="sm-thumb-empty"></div>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $creation->product_name }}</strong>
                                    </td>
                                    <td>
                                        <span class="sm-badge sm-badge-{{ $creation->pricing_mode }}">
                                            {{ __('surmesure.pricing_' . $creation->pricing_mode) }}
                                        </span>
                                    </td>
                                    <td>{{ number_format($creation->product_price, 2, ',', ' ') }} {{ $creation->currency }}</td>
                                    <td>{{ count($creation->custom_options_json ?? []) }}</td>
                                    <td>
                                        {{ $creation->production_delay_days
                                            ? $creation->production_delay_days . ' ' . __('surmesure.days')
                                            : '—' }}
                                    </td>
                                    <td>
                                        <div class="sm-row-actions">
                                            <a class="sm-edit" href="{{ route('sur-mesure.creations.edit', $creation) }}">{{ __('surmesure.edit') }}</a>
                                            <button type="button" class="sm-delete" data-delete="{{ $creation->id }}">{{ __('surmesure.delete') }}</button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div style="margin-top:24px;">
                    {{ $creations->links() }}
                </div>
            @endif
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.querySelectorAll('[data-delete]').forEach(button => {
            button.addEventListener('click', function () {
                if (!confirm(@json(__('surmesure.confirm_delete')))) return;

                const id = this.dataset.delete;

                fetch('{{ url('viki-sur-mesure/creations') }}/' + id, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    },
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('creation-row-' + id)?.remove();
                    } else {
                        alert(data.error || 'Erreur');
                    }
                })
                .catch(() => alert(@json(__('surmesure.err_delete'))));
            });
        });
    </script>
@endsection