@extends('layouts.prestataire')

@section('title', 'Modifier ma proposition')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/tender-prestataire.css') }}">
<link rel="stylesheet" href="{{ asset('css/tender-respond.css') }}">
@endsection

@section('content')
<div class="respond-container" x-data="editResponseForm()">
    
    {{-- Breadcrumb --}}
    <nav class="breadcrumb">
        <a href="{{ route('prestataire.tenders.show', $tender) }}">
            <i class="fas fa-arrow-left"></i>
            Retour à la demande
        </a>
    </nav>

    {{-- En-tête --}}
    <div class="respond-header edit-mode">
        <div class="tender-summary">
            <div class="edit-badge">
                <i class="fas fa-edit"></i> Mode modification
            </div>
            <h1>Modifier ma proposition</h1>
            <div class="tender-info">
                <h2>{{ $tender->title }}</h2>
                <div class="tender-meta">
                    <span><i class="fas fa-map-marker-alt"></i> {{ $tender->city }}</span>
                    <span><i class="fas fa-calendar"></i> {{ $tender->start_date ? $tender->start_date->format('d/m/Y') : 'Flexible' }}</span>
                </div>
            </div>
        </div>

        <div class="response-status">
            <span class="status-badge {{ $response->status }}">
                @switch($response->status)
                    @case('pending') <i class="fas fa-clock"></i> En attente @break
                    @case('viewed') <i class="fas fa-eye"></i> Consultée @break
                @endswitch
            </span>
            <span class="sent-info">
                Envoyée {{ $response->created_at->diffForHumans() }}
            </span>
        </div>
    </div>

    {{-- Formulaire --}}
    <form action="{{ route('prestataire.tenders.update-response', [$tender, $response]) }}" 
          method="POST" 
          enctype="multipart/form-data" 
          class="respond-form"
          @submit.prevent="submitForm">
        @csrf
        @method('PUT')
        
        <div class="form-grid">
            {{-- Colonne gauche --}}
            <div class="form-main">
                {{-- Section Prix --}}
                <div class="form-card">
                    <h3><i class="fas fa-euro-sign"></i> Votre tarif</h3>
                    
                    <div class="price-section">
                        <div class="price-type-selector">
                            <label class="price-type-option" :class="{ active: priceType === 'fixed' }">
                                <input type="radio" name="price_type" value="fixed" x-model="priceType">
                                <span class="option-icon"><i class="fas fa-tag"></i></span>
                                <span class="option-label">Prix fixe</span>
                            </label>
                            <label class="price-type-option" :class="{ active: priceType === 'hourly' }">
                                <input type="radio" name="price_type" value="hourly" x-model="priceType">
                                <span class="option-icon"><i class="fas fa-clock"></i></span>
                                <span class="option-label">À l'heure</span>
                            </label>
                            <label class="price-type-option" :class="{ active: priceType === 'daily' }">
                                <input type="radio" name="price_type" value="daily" x-model="priceType">
                                <span class="option-icon"><i class="fas fa-calendar-day"></i></span>
                                <span class="option-label">À la journée</span>
                            </label>
                            <label class="price-type-option" :class="{ active: priceType === 'negotiable' }">
                                <input type="radio" name="price_type" value="negotiable" x-model="priceType">
                                <span class="option-icon"><i class="fas fa-handshake"></i></span>
                                <span class="option-label">Négociable</span>
                            </label>
                        </div>

                        <div class="price-input-group" x-show="priceType !== 'negotiable'">
                            <div class="price-input">
                                <span class="currency">€</span>
                                <input type="number" 
                                       name="proposed_price" 
                                       x-model="price"
                                       min="0" 
                                       step="0.01" 
                                       placeholder="0.00"
                                       required>
                                <span class="unit" x-text="priceUnit"></span>
                            </div>
                        </div>

                        <div x-show="priceType !== 'negotiable' && priceType !== 'fixed'" class="estimation-group">
                            <label>Durée estimée</label>
                            <div class="duration-inputs">
                                <input type="text" 
                                       name="estimated_duration" 
                                       x-model="duration"
                                       placeholder="ex: 2 jours, 5 heures...">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Section Disponibilité --}}
                <div class="form-card">
                    <h3><i class="fas fa-calendar-check"></i> Votre disponibilité</h3>
                    
                    <div class="availability-section">
                        <div class="date-input-group">
                            <label>Disponible à partir du *</label>
                            <input type="date" 
                                   name="availability_start" 
                                   x-model="availabilityStart"
                                   min="{{ date('Y-m-d') }}"
                                   required>
                        </div>

                        <div class="date-input-group">
                            <label>Jusqu'au (optionnel)</label>
                            <input type="date" 
                                   name="availability_end" 
                                   x-model="availabilityEnd"
                                   :min="availabilityStart">
                        </div>
                    </div>
                </div>

                {{-- Section Message --}}
                <div class="form-card">
                    <h3><i class="fas fa-comment-alt"></i> Votre message</h3>
                    
                    <div class="message-section">
                        <textarea name="message" 
                                  x-model="message" 
                                  rows="6" 
                                  required></textarea>
                        <p class="char-count" :class="{ warning: message.length > 900, danger: message.length > 1000 }">
                            <span x-text="message.length"></span>/1000
                        </p>
                    </div>
                </div>

                {{-- Pièces jointes existantes --}}
                @if(count($response->attachments ?? []) > 0)
                    <div class="form-card">
                        <h3><i class="fas fa-paperclip"></i> Pièces jointes actuelles</h3>
                        <div class="existing-attachments">
                            @foreach($response->attachments as $index => $attachment)
                                <div class="attachment-item">
                                    <i class="fas fa-file"></i>
                                    <span>{{ basename($attachment) }}</span>
                                    <label class="remove-checkbox">
                                        <input type="checkbox" name="remove_attachments[]" value="{{ $index }}">
                                        Supprimer
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Nouvelles pièces jointes --}}
                <div class="form-card">
                    <h3><i class="fas fa-plus-circle"></i> Ajouter des pièces jointes</h3>
                    
                    <div class="attachments-section">
                        <div class="upload-zone" 
                             @dragover.prevent="dragOver = true"
                             @dragleave.prevent="dragOver = false"
                             @drop.prevent="handleDrop($event)"
                             :class="{ 'drag-over': dragOver }">
                            <input type="file" 
                                   name="attachments[]" 
                                   multiple 
                                   accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                                   @change="handleFiles($event)"
                                   id="attachments">
                            <label for="attachments" class="upload-label">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <span>Glissez vos fichiers ici</span>
                                <small>PDF, Word, Images (max 5 fichiers)</small>
                            </label>
                        </div>

                        <div class="file-list" x-show="files.length > 0">
                            <template x-for="(file, index) in files" :key="index">
                                <div class="file-item">
                                    <i class="fas" :class="getFileIcon(file.name)"></i>
                                    <span class="file-name" x-text="file.name"></span>
                                    <span class="file-size" x-text="formatFileSize(file.size)"></span>
                                    <button type="button" @click="removeFile(index)" class="remove-file">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Colonne droite - Résumé --}}
            <div class="form-sidebar">
                <div class="summary-card sticky">
                    <h3>Modifications</h3>
                    
                    <div class="changes-indicator" x-show="hasChanges">
                        <i class="fas fa-exclamation-circle"></i>
                        <span>Vous avez des modifications non enregistrées</span>
                    </div>

                    <div class="summary-content">
                        <div class="summary-item">
                            <span class="label">Tarif proposé</span>
                            <span class="value" x-show="priceType !== 'negotiable'">
                                <span x-text="formatPrice(price)"></span>
                                <span class="unit" x-text="priceUnit"></span>
                            </span>
                            <span class="value" x-show="priceType === 'negotiable'">
                                <em>À négocier</em>
                            </span>
                        </div>

                        <div class="summary-item">
                            <span class="label">Disponibilité</span>
                            <span class="value" x-text="formatDate(availabilityStart)"></span>
                        </div>
                    </div>

                    <div class="summary-actions">
                        <button type="submit" 
                                class="btn btn-primary btn-block"
                                :disabled="!isValid || isSubmitting">
                            <i class="fas" :class="isSubmitting ? 'fa-spinner fa-spin' : 'fa-save'"></i>
                            <span x-text="isSubmitting ? 'Enregistrement...' : 'Enregistrer les modifications'"></span>
                        </button>
                        
                        <a href="{{ route('prestataire.tenders.show', $tender) }}" class="btn btn-secondary btn-block">
                            <i class="fas fa-times"></i>
                            Annuler
                        </a>
                    </div>

                    <div class="danger-zone">
                        <h4>Zone de danger</h4>
                        <form action="{{ route('prestataire.tenders.withdraw-response', $response) }}" 
                              method="POST"
                              onsubmit="return confirm('Êtes-vous sûr de vouloir retirer définitivement votre proposition ?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-block">
                                <i class="fas fa-trash"></i>
                                Retirer ma proposition
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
function editResponseForm() {
    return {
        priceType: '{{ $response->price_type }}',
        price: '{{ $response->proposed_price }}',
        duration: '{{ $response->estimated_duration }}',
        availabilityStart: '{{ $response->availability_start->format('Y-m-d') }}',
        availabilityEnd: '{{ $response->availability_end ? $response->availability_end->format('Y-m-d') : '' }}',
        message: `{{ $response->message }}`,
        files: [],
        dragOver: false,
        isSubmitting: false,
        
        // Valeurs originales pour détecter les changements
        original: {
            priceType: '{{ $response->price_type }}',
            price: '{{ $response->proposed_price }}',
            message: `{{ $response->message }}`
        },

        get priceUnit() {
            switch(this.priceType) {
                case 'hourly': return '/h';
                case 'daily': return '/jour';
                default: return '';
            }
        },

        get hasChanges() {
            return this.priceType !== this.original.priceType ||
                   this.price !== this.original.price ||
                   this.message !== this.original.message ||
                   this.files.length > 0;
        },

        get isValid() {
            return (this.priceType === 'negotiable' || this.price > 0) && 
                   this.availabilityStart && 
                   this.message.length >= 20 && 
                   this.message.length <= 1000;
        },

        formatPrice(amount) {
            if (!amount) return '0,00 €';
            return parseFloat(amount).toLocaleString('fr-FR', {
                style: 'currency',
                currency: 'EUR'
            });
        },

        formatDate(date) {
            if (!date) return '-';
            return new Date(date).toLocaleDateString('fr-FR');
        },

        formatFileSize(bytes) {
            if (bytes < 1024) return bytes + ' o';
            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' Ko';
            return (bytes / (1024 * 1024)).toFixed(1) + ' Mo';
        },

        getFileIcon(filename) {
            const ext = filename.split('.').pop().toLowerCase();
            const icons = { 'pdf': 'fa-file-pdf', 'doc': 'fa-file-word', 'docx': 'fa-file-word' };
            return icons[ext] || 'fa-file';
        },

        handleFiles(event) {
            for (let file of event.target.files) {
                if (this.files.length >= 5) break;
                this.files.push(file);
            }
        },

        handleDrop(event) {
            this.dragOver = false;
            for (let file of event.dataTransfer.files) {
                if (this.files.length >= 5) break;
                this.files.push(file);
            }
        },

        removeFile(index) {
            this.files.splice(index, 1);
        },

        async submitForm() {
            if (!this.isValid) return;
            
            this.isSubmitting = true;
            
            const formData = new FormData();
            formData.append('_method', 'PUT');
            formData.append('price_type', this.priceType);
            formData.append('proposed_price', this.price || 0);
            formData.append('estimated_duration', this.duration);
            formData.append('availability_start', this.availabilityStart);
            formData.append('availability_end', this.availabilityEnd);
            formData.append('message', this.message);
            formData.append('_token', '{{ csrf_token() }}');
            
            for (let file of this.files) {
                formData.append('attachments[]', file);
            }

            // Récupérer les pièces jointes à supprimer
            document.querySelectorAll('input[name="remove_attachments[]"]:checked').forEach(cb => {
                formData.append('remove_attachments[]', cb.value);
            });

            try {
                const response = await fetch('{{ route('prestataire.tenders.update-response', [$tender, $response]) }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                if (response.ok) {
                    const data = await response.json();
                    window.location.href = data.redirect || '{{ route('prestataire.tenders.show', $tender) }}';
                } else {
                    const errors = await response.json();
                    alert('Erreur : ' + (errors.message || 'Une erreur est survenue'));
                    this.isSubmitting = false;
                }
            } catch (error) {
                alert('Erreur de connexion. Veuillez réessayer.');
                this.isSubmitting = false;
            }
        }
    };
}
</script>

<style>
.respond-header.edit-mode {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.edit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.2);
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.response-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.response-status .status-badge {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(255,255,255,0.2);
}

.sent-info {
    font-size: 0.8rem;
    opacity: 0.8;
}

.existing-attachments {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}

.attachment-item i {
    color: var(--primary-color, #8b5cf6);
}

.attachment-item span {
    flex: 1;
}

.remove-checkbox {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #ef4444;
    cursor: pointer;
}

.changes-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fef3c7;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #92400e;
}

.danger-zone {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #fee2e2;
}

.danger-zone h4 {
    font-size: 0.85rem;
    color: #ef4444;
    margin-bottom: 0.75rem;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}
</style>
@endsection