@extends('layouts.base')

@section('content')
    @section('breadcrumb')
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ $homeUrl }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ route('partner.commissions.index') }}">Commissions</a></li>
                <li class="breadcrumb-item active" aria-current="page">Modifier en masse les commissions</li>
            </ol>
        </nav>
    @endsection

    <div class="container-fluid py-4">
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <h5 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Erreurs</h5>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-edit me-2 text-primary"></i>Modifier en masse les commissions
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Information :</strong> Seuls les champs renseignés seront mis à jour. Les champs laissés vides ne seront pas modifiés.
                        </div>

                        <form method="POST" action="{{ route('partner.commissions.bulk-update') }}" id="bulk-update-form">
                            @csrf

                            <!-- Programme -->
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="fas fa-building me-1 text-info"></i>Programme <span class="text-danger">*</span>
                                </label>
                                <select name="program_id" id="program_id" class="form-select @error('program_id') is-invalid @enderror" required>
                                    <option value="">— Sélectionnez un programme —</option>
                                    @foreach($programs as $program)
                                        <option value="{{ $program->id }}" {{ old('program_id') == $program->id ? 'selected' : '' }}>
                                            {{ $program->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('program_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Sélectionnez le programme pour lequel vous souhaitez modifier les commissions</small>
                            </div>

                            <!-- Commercialisateur -->
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="fas fa-user me-1 text-primary"></i>Commercialisateur
                                </label>
                                <select name="user_id" id="user_id" class="form-select @error('user_id') is-invalid @enderror">
                                    <option value="">— Tous les commercialisateurs —</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->fullName() }} - {{ $user->email }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Optionnel : sélectionnez un commercialisateur pour ne modifier que ses commissions</small>
                            </div>

                            <!-- Bloc Commission -->
                            <div class="card bg-light mb-3">
                                <div class="card-header">
                                    <h6 class="mb-0"><i class="fas fa-calculator me-2"></i>Nouveau taux de commission</h6>
                                </div>
                                <div class="card-body">
                                    <p class="text-muted mb-3">
                                        Seul le champ renseigné sera appliqué à toutes les commissions du programme sélectionné.
                                        Les champs laissés vides ne modifieront pas les valeurs actuelles.
                                    </p>

                                    <!-- Champs hidden pour value_ht et value_ttc -->
                                    <input type="hidden" name="value_ht" id="value_ht" value="{{ old('value_ht', '') }}">
                                    <input type="hidden" name="value_ttc" id="value_ttc" value="{{ old('value_ttc', '') }}">

                                    <!-- Taux de commission -->
                                    <div class="mb-3">
                                        <label class="form-label">
                                            <i class="fas fa-percent me-1 text-primary"></i>Taux de commission
                                        </label>
                                        <div class="input-group">
                                            <input
                                                type="number"
                                                id="commission_value"
                                                class="form-control @error('value_ht') @error('value_ttc') is-invalid @enderror @enderror"
                                                value="{{ old('value_ht') ?? old('value_ttc') ?? '' }}"
                                                min="0"
                                                max="100"
                                                step="0.01"
                                            >
                                            <span class="input-group-text">%</span>
                                            <select id="commission_base" class="form-select" style="max-width: 180px;">
                                                <option value="ht" {{ old('value_ht') ? 'selected' : '' }}>sur le prix HT</option>
                                                <option value="ttc" {{ old('value_ttc') && !old('value_ht') ? 'selected' : '' }}>sur le prix TTC</option>
                                            </select>
                                        </div>
                                        @error('value_ht')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                        @error('value_ttc')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Pourcentage de commission (max 100%). Laissez vide pour ne pas modifier les commissions existantes.</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Actions -->
                            <div class="d-flex justify-content-between">
                                <a href="{{ route('partner.commissions.index') }}" class="btn btn-outline-primary">
                                    <i class="fas fa-arrow-left me-2"></i>Annuler
                                </a>
                                <button type="button" class="btn btn-primary" id="submit-btn">
                                    <i class="fas fa-save me-2"></i>Mettre à jour toutes les commissions
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de confirmation -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">
                        <i class="fas fa-exclamation-triangle me-2 text-warning"></i>Confirmation
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="confirm-message"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Annuler
                    </button>
                    <button type="button" class="btn btn-primary" id="confirm-submit">
                        <i class="fas fa-check me-2"></i>Confirmer
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('bulk-update-form');
    const submitBtn = document.getElementById('submit-btn');
    const programSelect = document.getElementById('program_id');
    const confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));
    const confirmMessage = document.getElementById('confirm-message');
    const confirmSubmitBtn = document.getElementById('confirm-submit');

    submitBtn.addEventListener('click', async function(e) {
        e.preventDefault();

        // Vérifier qu'un programme est sélectionné
        if (!programSelect.value) {
            alert('Veuillez sélectionner un programme.');
            return;
        }

        // Vérifier qu'au moins un taux est renseigné
        const commissionValue = document.getElementById('commission_value');
        if (!commissionValue || !commissionValue.value) {
            alert('Veuillez renseigner un taux de commission.');
            return;
        }

        // Récupérer le nombre de commercialisateurs
        try {
            const response = await fetch('{{ route("partner.commissions.get-users-count") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    program_id: programSelect.value,
                    user_id: document.getElementById('user_id')?.value || ''
                })
            });

            const data = await response.json();
            if (data.error) {
                alert(data.error);
                return;
            }

            const usersCount = data.count;
            const programName = programSelect.options[programSelect.selectedIndex].text;

            // Afficher la modal de confirmation
            confirmMessage.textContent = `Vous êtes sur le point de remplacer les commissions de ${usersCount} commercialisateur${usersCount > 1 ? 's' : ''} pour le programme "${programName}". Confirmer ?`;
            confirmModal.show();
        } catch (error) {
            console.error('Erreur:', error);
            alert('Une erreur est survenue lors de la récupération du nombre de commercialisateurs.');
        }
    });

    // Met à jour les champs hidden value_ht / value_ttc avant la soumission
    function updateHiddenFields() {
        const commissionValue = document.getElementById('commission_value');
        const commissionBase = document.getElementById('commission_base');
        const valueHt = document.getElementById('value_ht');
        const valueTtc = document.getElementById('value_ttc');

        const value = commissionValue ? commissionValue.value : '';
        const base = commissionBase ? commissionBase.value : 'ht';

        if (base === 'ht') {
            if (valueHt) valueHt.value = value;
            if (valueTtc) valueTtc.value = '';
        } else {
            if (valueHt) valueHt.value = '';
            if (valueTtc) valueTtc.value = value;
        }
    }

    confirmSubmitBtn.addEventListener('click', function() {
        updateHiddenFields();
        confirmModal.hide();
        form.submit();
    });

    const commissionValueInput = document.getElementById('commission_value');
    const commissionBaseSelect = document.getElementById('commission_base');
    if (commissionValueInput) {
        commissionValueInput.addEventListener('input', updateHiddenFields);
    }
    if (commissionBaseSelect) {
        commissionBaseSelect.addEventListener('change', updateHiddenFields);
    }
});
</script>
@endpush