@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">Créer une commission</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-handshake me-2 text-primary"></i>Créer une commission
                        </h5>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('partner.commissions.store') }}">
                            @csrf

                            <!-- Commercialisateur -->
                            <div class="mb-3">
                                <label class="form-label">
                                    <i class="fas fa-user me-1 text-primary"></i>Commercialisateur <span class="text-danger">*</span>
                                </label>
                                <select name="user_id" id="user_id" class="form-select @error('user_id') is-invalid @enderror" required>
                                    <option value="">— Sélectionnez un commercialisateur —</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">Sélectionnez un commercialisateur de l'application</small>
                            </div>

                            <!-- Type forcé à Programme (hidden) -->
                            <input type="hidden" name="commissionable_type" value="App\Models\Program">
                            <input type="hidden" name="commission_type" value="pourcentage">

                            <!-- Programme (affiché après sélection de l'utilisateur) -->
                            <div class="mb-3" id="program_field" style="display: none;">
                                <label class="form-label">
                                    <i class="fas fa-building me-1 text-info"></i>Programme <span class="text-danger">*</span>
                                </label>
                                <select name="commissionable_id" id="program_id" class="form-select @error('commissionable_id') is-invalid @enderror" required>
                                    <option value="">— Sélectionnez un programme —</option>
                                    @foreach($programs as $program)
                                        <option value="{{ $program->id }}" {{ old('commissionable_id') == $program->id ? 'selected' : '' }}>
                                            {{ $program->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('commissionable_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Sélectionnez un programme</small>
                            </div>

                            <!-- Bloc Commission -->
                            <div class="card bg-light mb-3" id="commission_fields" style="display: none;">
                                <div class="card-header">
                                    <h6 class="mb-0"><i class="fas fa-calculator me-2"></i>Commission</h6>
                                </div>
                                <div class="card-body">
                                    <!-- 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 <span class="text-danger">*</span>
                                        </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" required>
                                            <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%)</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="submit" class="btn btn-primary" id="submit_btn" disabled>
                                    <i class="fas fa-save me-2"></i>Créer la commission
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const userId = document.getElementById('user_id');
            const programField = document.getElementById('program_field');
            const programId = document.getElementById('program_id');
            const commissionFields = document.getElementById('commission_fields');
            const submitBtn = document.getElementById('submit_btn');
            const commissionValue = document.getElementById('commission_value');
            const commissionBase = document.getElementById('commission_base');
            const valueHt = document.getElementById('value_ht');
            const valueTtc = document.getElementById('value_ttc');

            function handleUserSelection() {
                if (!userId) return;

                if (userId.value) {
                    if (programField) programField.style.display = 'block';
                    if (programId) programId.setAttribute('required', 'required');
                } else {
                    if (programField) programField.style.display = 'none';
                    if (programId) {
                        programId.removeAttribute('required');
                        programId.value = '';
                    }
                    if (commissionFields) commissionFields.style.display = 'none';
                    if (submitBtn) submitBtn.disabled = true;
                }
            }

            function handleProgramSelection() {
                if (!programId) return;

                if (programId.value) {
                    if (commissionFields) commissionFields.style.display = 'block';
                    if (submitBtn) submitBtn.disabled = false;
                } else {
                    if (commissionFields) commissionFields.style.display = 'none';
                    if (submitBtn) submitBtn.disabled = true;
                }
            }

            function updateHiddenFields() {
                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;
                }
            }

            if (userId) {
                userId.addEventListener('change', handleUserSelection);
                handleUserSelection();
            }

            if (programId) {
                programId.addEventListener('change', handleProgramSelection);
                if (programId.value) {
                    handleProgramSelection();
                }
            }

            if (commissionValue) {
                commissionValue.addEventListener('input', updateHiddenFields);
            }
            if (commissionBase) {
                commissionBase.addEventListener('change', updateHiddenFields);
            }

            const form = document.querySelector('form');
            if (form) {
                form.addEventListener('submit', function() {
                    updateHiddenFields();
                });
            }

            updateHiddenFields();
        });
    </script>
    @endpush
@endsection