@extends('admin.layout')

@section('title', 'Créer une règle de filtrage')

@section('content')
<div style="margin-bottom: 1.5rem;">
    <h1 style="font-size: 1.5rem; font-weight: 600; color: #1a1a1a; margin: 0;">Créer une règle de filtrage</h1>
</div>

@if($errors->any())
    <div style="padding: 1rem; background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 4px; margin-bottom: 1.5rem;">
        <ul style="margin: 0; padding-left: 1.5rem;">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('admin.filtering-rules.store') }}" style="background-color: #ffffff; padding: 1.5rem; border: 1px solid #d1d5db; border-radius: 4px;">
    @csrf

    <div style="margin-bottom: 1.5rem;">
        <label for="name" style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem;">Nom de la règle *</label>
        <input type="text" id="name" name="name" value="{{ old('name') }}" required style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.875rem;">
    </div>

    <div style="margin-bottom: 1.5rem;">
        <label for="source" style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem;">Source *</label>
        <select id="source" name="source" required style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.875rem;">
            <option value="">Sélectionner une source</option>
            @foreach($sources as $source)
                <option value="{{ $source }}" {{ old('source') === $source ? 'selected' : '' }}>{{ $source }}</option>
            @endforeach
        </select>
    </div>

    <div style="margin-bottom: 1.5rem;">
        <label for="market_type" style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem;">Type de marché</label>
        <select id="market_type" name="market_type" style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.875rem;">
            <option value="">Aucun (tous les types)</option>
            <option value="bureau_d_etude" {{ old('market_type') === 'bureau_d_etude' ? 'selected' : '' }}>Bureau d'études</option>
            <option value="consultant_individuel" {{ old('market_type') === 'consultant_individuel' ? 'selected' : '' }}>Consultant individuel</option>
        </select>
    </div>

    <div style="margin-bottom: 1.5rem;">
        <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem;">Pays autorisés (optionnel)</label>
        <div id="countries-container">
            <div style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem;">
                <input type="text" name="countries[]" placeholder="Nom du pays" style="flex: 1; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.875rem;">
                <button type="button" onclick="addCountryField()" style="padding: 0.5rem 1rem; background-color: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer;">+</button>
            </div>
        </div>
        <small style="color: #6b7280; font-size: 0.75rem;">Laissez vide pour accepter tous les pays</small>
    </div>

    <div style="margin-bottom: 1.5rem;">
        <label style="display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem;">Pôles d'activité (optionnel)</label>
        @foreach($activityPoles as $pole)
            <label style="display: flex; align-items: center; margin-bottom: 0.5rem; cursor: pointer;">
                <input type="checkbox" name="activity_pole_ids[]" value="{{ $pole->id }}" style="margin-right: 0.5rem;">
                <span>{{ $pole->name }} ({{ $pole->keywords->count() }} mots-clés)</span>
            </label>
        @endforeach
        @if($activityPoles->isEmpty())
            <p style="color: #6b7280; font-size: 0.875rem;">Aucun pôle d'activité disponible. <a href="{{ route('admin.activity-poles.create') }}" style="color: #3b82f6;">Créer un pôle d'activité</a></p>
        @endif
    </div>

    <div style="margin-bottom: 1.5rem;">
        <label style="display: flex; align-items: center; cursor: pointer;">
            <input type="checkbox" name="is_active" value="1" checked style="margin-right: 0.5rem;">
            <span style="font-size: 0.875rem; font-weight: 500; color: #374151;">Règle active</span>
        </label>
    </div>

    <div style="display: flex; gap: 0.5rem;">
        <button type="submit" style="padding: 0.625rem 1.25rem; background-color: #00C853; color: white; border: none; border-radius: 4px; font-weight: 500; cursor: pointer;">Créer</button>
        <a href="{{ route('admin.filtering-rules.index') }}" style="padding: 0.625rem 1.25rem; background-color: #6b7280; color: white; border: none; border-radius: 4px; font-weight: 500; text-decoration: none; display: inline-block;">Annuler</a>
    </div>
</form>

<script>
function addCountryField() {
    const container = document.getElementById('countries-container');
    const div = document.createElement('div');
    div.style.cssText = 'display: flex; gap: 0.5rem; margin-bottom: 0.5rem;';
    div.innerHTML = `
        <input type="text" name="countries[]" placeholder="Nom du pays" style="flex: 1; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.875rem;">
        <button type="button" onclick="this.parentElement.remove()" style="padding: 0.5rem 1rem; background-color: #ef4444; color: white; border: none; border-radius: 4px; cursor: pointer;">-</button>
    `;
    container.appendChild(div);
}
</script>
@endsection