@extends('layouts.base')

@section('title')
    Ajouter une opération de caisse
@endsection

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        .form-select:disabled {
            background-color: #f8f9fa !important;
            color: #6c757d !important;
            cursor: not-allowed;
        }
    </style>
@endsection

@section('content')
<div class="row">
            {{--@include('includes.alert/alert_success_error') --}}



    
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Ajouter une opération de caisse - {{ $agence->name }}</h5>
                <a href="{{ $returnUrl }}" class="btn btn-outline-danger">
                    <i class="fa-solid fa-arrow-left"></i> Retour
                </a>
            </div>
            
            <div class="card-body">
                <form action="{{ route('gestion_operation_caisse.ajout_operation') }}" method="POST" class="row g-3 app-form">
                    @csrf
                    
                    <div class="col-md-6">
                        <label for="type">Type d'opération <span class="text-danger">*</span></label>
                        <select name="type" id="type" class="form-select @error('type') is-invalid @enderror" 
                                {{ $type ? 'disabled' : '' }} required>
                            <option value="">-- Choisir le type --</option>
                            <option value="entrée" {{ old('type') == 'entrée' || $type == 'entrée' ? 'selected' : '' }}>Entrée</option>
                            <option value="sortie" {{ old('type') == 'sortie' || $type == 'sortie' ? 'selected' : '' }}>Sortie</option>
                        </select>
                        @if($type)
                            <input type="hidden" name="type" value="{{ $type }}">
                            <small class="text-muted">Type pré-sélectionné pour éviter les erreurs</small>
                        @endif
                        @error('type') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label for="amount">Montant (FCFA) <span class="text-danger">*</span></label>
                        <input type="number" name="amount" id="amount" value="{{ old('amount') }}" 
                               class="form-control @error('amount') is-invalid @enderror" 
                               min="1" step="0.01" required>
                        @error('amount') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label for="operation_date">Date et heure de l'opération <span class="text-danger">*</span></label>
                        <input type="datetime-local" name="operation_date" id="operation_date" 
                               value="{{ old('operation_date', now()->format('Y-m-d\TH:i')) }}" 
                               class="form-control  @error('operation_date') is-invalid @enderror" required>
                        @error('operation_date') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label for="external_reference">Référence</label>
                        <input type="text" name="external_reference" id="external_reference" value="{{ old('external_reference') }}" 
                               class="form-control @error('external_reference') is-invalid @enderror" 
                               placeholder="Référence externe ou générée">
                        @error('external_reference') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>
                    

                    
                    <div class="col-md-6">
                        <label for="reason">Motif / Description <span class="text-danger">*</span></label>
                        <textarea name="reason" id="reason" rows="3" 
                                  class="form-control @error('reason') is-invalid @enderror" 
                                  placeholder="Détails de l'opération" required>{{ old('reason') }}</textarea>
                        @error('reason') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>
                    
                    <div class="col-12 text-end">
                        <button type="submit" class="btn text-white" style="background: {{ config('colors.lnb_green') }};">
                            <i class="fa fa-save"></i> Enregistrer l'opération
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')

<script>
    // Pré-remplir la référence si vide
    document.getElementById('type').addEventListener('change', function() {
        const referenceField = document.getElementById('external_reference');
        if (!referenceField.value) {
            const type = this.value;
            const date = new Date().toISOString().slice(0, 10).replace(/-/g, '');
            const time = new Date().toTimeString().slice(0, 5).replace(/:/g, '');
            referenceField.value = `REF-${type.toUpperCase()}-${date}-${time}`;
        }
    });
    
   
</script>
@endsection