@extends('dashboard.layouts.app')

@section('title', 'Créer un Contrat - UAC eservices')

@section('page-title', 'Créer un Contrat')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('rh.dashboard') }}">RH</a></li>
    <li class="breadcrumb-item"><a href="{{ route('rh.contrats.index') }}">Contrats</a></li>
    <li class="breadcrumb-item active" aria-current="page">Créer</li>
@endsection

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <div class="card-body mx-auto">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h4 class="card-title mb-0">
                    <i class="mdi mdi-file-document-edit"></i> Nouveau Contrat de Travail
                </h4>
            </div>
            <div class="card-body p-4">
                <div class="alert alert-info">
                    <i class="mdi mdi-information"></i>
                    <strong>Information :</strong> Remplissez tous les champs marqués d'un astérisque (*). Le fichier du contrat est obligatoire.
                </div>

                <form method="POST" action="{{ route('rh.contrats.store') }}" enctype="multipart/form-data" class="needs-validation" novalidate>
                    @csrf

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <select class="form-select @error('user_id') is-invalid @enderror"
                                        id="user_id" name="user_id" required>
                                    <option value="">Sélectionner un employé</option>
                                    @foreach($employesSansContrat as $employe)
                                        <option value="{{ $employe->id }}" {{ old('user_id') == $employe->id ? 'selected' : '' }}>
                                            {{ $employe->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <label for="user_id">Employé *</label>
                                @error('user_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <select class="form-select @error('type_contrat') is-invalid @enderror"
                                        id="type_contrat" name="type_contrat" required>
                                    <option value="">Sélectionner un type</option>
                                    <option value="CDI" {{ old('type_contrat') === 'CDI' ? 'selected' : '' }}>
                                        <i class="mdi mdi-briefcase"></i> CDI - Contrat à Durée Indéterminée
                                    </option>
                                    <option value="CDD" {{ old('type_contrat') === 'CDD' ? 'selected' : '' }}>
                                        <i class="mdi mdi-calendar-clock"></i> CDD - Contrat à Durée Déterminée
                                    </option>
                                    <option value="Stage" {{ old('type_contrat') === 'Stage' ? 'selected' : '' }}>
                                        <i class="mdi mdi-school"></i> Stage
                                    </option>
                                    <option value="Alternance" {{ old('type_contrat') === 'Alternance' ? 'selected' : '' }}>
                                        <i class="mdi mdi-book-education"></i> Alternance
                                    </option>
                                    <option value="Intérim" {{ old('type_contrat') === 'Intérim' ? 'selected' : '' }}>
                                        <i class="mdi mdi-clock-fast"></i> Intérim
                                    </option>
                                </select>
                                <label for="type_contrat"><i class="mdi mdi-file-document"></i> Type de contrat *</label>
                                @error('type_contrat')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control @error('salaire') is-invalid @enderror"
                                    id="salaire" name="salaire" placeholder="Ex: 500 000 FCFA"
                                    value="{{ old('salaire') }}">
                                <label for="salaire"><i class="mdi mdi-cash"></i> Salaire mensuel</label>
                                <small class="text-muted">Facultatif - Ex: 500 000 FCFA</small>
                                @error('salaire')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="date" class="form-control @error('date_debut') is-invalid @enderror"
                                    id="date_debut" name="date_debut"
                                    value="{{ old('date_debut') }}" required>
                                <label for="date_debut">Date de début *</label>
                                @error('date_debut')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating mb-3">
                                <input type="date" class="form-control @error('date_fin') is-invalid @enderror"
                                    id="date_fin" name="date_fin"
                                    value="{{ old('date_fin') }}">
                                <label for="date_fin">Date de fin (laisser vide pour CDI)</label>
                                @error('date_fin')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Section Objectifs -->
                    <div class="card bg-light mb-3">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="mdi mdi-target"></i> Objectifs et Indicateurs
                            </h5>
                            <div class="form-floating mb-3">
                                <textarea class="form-control @error('indicateurs_evaluation') is-invalid @enderror"
                                    id="indicateurs_evaluation" name="indicateurs_evaluation"
                                    style="height: 150px;" placeholder="Décrivez les objectifs et indicateurs d'évaluation..."
                                    required>{{ old('indicateurs_evaluation') }}</textarea>
                                <label for="indicateurs_evaluation">Indicateurs d'évaluation et objectifs *</label>
                                <small class="text-muted">
                                    Ex: Atteindre un chiffre d'affaires de X FCFA, améliorer la satisfaction client à X%, etc.
                                </small>
                                @error('indicateurs_evaluation')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-floating mb-3">
                                <textarea class="form-control @error('clauses_speciales') is-invalid @enderror"
                                    id="clauses_speciales" name="clauses_speciales"
                                    style="height: 120px;" placeholder="Clauses particulières...">{{ old('clauses_speciales') }}</textarea>
                                <label for="clauses_speciales">Clauses spéciales (facultatif)</label>
                                <small class="text-muted">
                                    Ex: Clause de non-concurrence, mobilité géographique, etc.
                                </small>
                                @error('clauses_speciales')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Section Upload Fichier -->
                    <div class="card bg-opacity-10 mb-4">
                        <div class="card-body">
                            <h5 class="card-title text-warning">
                                <i class="mdi mdi-file-upload"></i> Document Contractuel (OBLIGATOIRE)
                            </h5>
                            <div class="mb-3">
                                <label for="fichier_contrat" class="form-label">
                                    <i class="mdi mdi-paperclip"></i> Fichier du contrat signé *
                                </label>
                                <input type="file" class="form-control @error('fichier_contrat') is-invalid @enderror"
                                    id="fichier_contrat" name="fichier_contrat"
                                    accept=".pdf,.doc,.docx" required>
                                <small class="text-muted d-block mt-1">
                                    <i class="mdi mdi-information"></i>
                                    Formats acceptés: PDF, DOC, DOCX (Max: 5 MB)
                                </small>
                                @error('fichier_contrat')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror

                                <div id="filePreview" class="mt-2" style="display: none;">
                                    <div class="alert alert-success d-flex align-items-center">
                                        <i class="mdi mdi-file-check me-2"></i>
                                        <span id="fileName"></span>
                                        <button type="button" class="btn-close ms-auto" onclick="clearFile()"></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ route('rh.contrats.index') }}" class="btn btn-secondary btn-lg">
                            <i class="mdi mdi-arrow-left"></i> Annuler
                        </a>
                        <button type="submit" class="btn btn-primary btn-lg px-5">
                            <i class="mdi mdi-content-save"></i> Créer le Contrat
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------- -->
<!-- End PAge Content -->
<!-- -------------------------------------------------------------- -->
@endsection

@push('scripts')
<script>
    // Validation Bootstrap
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                        toastr.error('Veuillez remplir tous les champs obligatoires', 'Erreur');
                    }
                    form.classList.add('was-validated')
                }, false)
            })
    })()

    // Gestion du type de contrat
    document.getElementById('type_contrat').addEventListener('change', function() {
        const dateFinField = document.getElementById('date_fin');
        const dateFinLabel = document.querySelector('label[for="date_fin"]');

        if (this.value === 'CDI') {
            dateFinField.value = '';
            dateFinField.required = false;
            dateFinLabel.innerHTML = '<i class="mdi mdi-calendar"></i> Date de fin (non applicable pour CDI)';
            dateFinField.parentElement.classList.add('opacity-50');
        } else {
            dateFinField.required = true;
            dateFinLabel.innerHTML = '<i class="mdi mdi-calendar-end"></i> Date de fin *';
            dateFinField.parentElement.classList.remove('opacity-50');
        }
    });

    // Prévisualisation du fichier
    document.getElementById('fichier_contrat').addEventListener('change', function(e) {
        const file = e.target.files[0];
        const filePreview = document.getElementById('filePreview');
        const fileName = document.getElementById('fileName');

        if (file) {
            // Vérifier la taille (5 MB max)
            if (file.size > 5 * 1024 * 1024) {
                toastr.error('Le fichier ne doit pas dépasser 5 MB', 'Erreur');
                e.target.value = '';
                filePreview.style.display = 'none';
                return;
            }

            // Vérifier le type
            const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
            if (!allowedTypes.includes(file.type)) {
                toastr.error('Format non accepté. Utilisez PDF, DOC ou DOCX', 'Erreur');
                e.target.value = '';
                filePreview.style.display = 'none';
                return;
            }

            // Afficher le nom du fichier
            fileName.textContent = file.name + ' (' + (file.size / 1024).toFixed(2) + ' KB)';
            filePreview.style.display = 'block';
            toastr.success('Fichier sélectionné avec succès', 'Succès');
        } else {
            filePreview.style.display = 'none';
        }
    });

    // Effacer le fichier
    function clearFile() {
        document.getElementById('fichier_contrat').value = '';
        document.getElementById('filePreview').style.display = 'none';
        toastr.info('Fichier retiré', 'Information');
    }

    // Définir la date minimale à aujourd'hui
    document.getElementById('date_debut').min = new Date().toISOString().split('T')[0];

    // Animation d'entrée
    document.querySelector('.card').style.opacity = '0';
    document.querySelector('.card').style.transform = 'translateY(20px)';
    setTimeout(() => {
        document.querySelector('.card').style.transition = 'all 0.5s ease';
        document.querySelector('.card').style.opacity = '1';
        document.querySelector('.card').style.transform = 'translateY(0)';
    }, 100);
</script>
@endpush