@extends('layouts.prestataire')

@section('title', 'Proposer mes services - ' . $tender->title)

@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="respondForm()">
    
    {{-- 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">
        <div class="tender-summary">
            <h1>Proposer mes services</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>
                    @if($tender->budget_visible)
                        <span><i class="fas fa-euro-sign"></i> {{ $tender->budget_display }}</span>
                    @endif
                </div>
                <div class="tender-categories">
                    @foreach($tender->categories as $category)
                        <span class="category-tag">{{ $category->name }}</span>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="match-indicator" style="--score: {{ $matchScore }}%">
            <svg viewBox="0 0 36 36">
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none" stroke="#e2e8f0" stroke-width="3"/>
                <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none" stroke="url(#matchGradient)" stroke-width="3" stroke-dasharray="{{ $matchScore }}, 100"/>
            </svg>
            <span>{{ $matchScore }}%</span>
        </div>
    </div>

    {{-- Formulaire --}}
    <form action="{{ route('prestataire.tenders.store-response', $tender) }}" 
          method="POST" 
          enctype="multipart/form-data" 
          class="respond-form"
          @submit.prevent="submitForm">
        @csrf
        
        <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>
                            @if($tender->budget_visible)
                                <p class="budget-reference">
                                    <i class="fas fa-info-circle"></i>
                                    Budget client : {{ $tender->budget_display }}
                                </p>
                            @endif
                        </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>
                            <p class="total-estimate" x-show="price && duration">
                                Total estimé : <strong x-text="formatPrice(estimatedTotal)"></strong>
                            </p>
                        </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>

                        @if($tender->start_date)
                            <div class="tender-dates-reference">
                                <i class="fas fa-info-circle"></i>
                                Date souhaitée par le client : 
                                <strong>{{ $tender->start_date->format('d/m/Y') }}</strong>
                                @if($tender->end_date)
                                    - {{ $tender->end_date->format('d/m/Y') }}
                                @endif
                            </div>
                        @endif
                    </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" 
                                  placeholder="Présentez votre offre au client...
                                  
• Décrivez brièvement votre expérience
• Expliquez pourquoi vous êtes le bon choix
• Mentionnez ce qui est inclus dans votre prix
• Posez des questions si nécessaire"
                                  required></textarea>
                        <p class="char-count" :class="{ warning: message.length > 900, danger: message.length > 1000 }">
                            <span x-text="message.length"></span>/1000
                        </p>
                    </div>

                    {{-- Templates de réponse --}}
                    <div class="response-templates">
                        <p class="templates-label">Modèles rapides :</p>
                        <div class="template-buttons">
                            <button type="button" 
                                    class="template-btn"
                                    @click="applyTemplate('professional')">
                                <i class="fas fa-briefcase"></i> Professionnel
                            </button>
                            <button type="button" 
                                    class="template-btn"
                                    @click="applyTemplate('friendly')">
                                <i class="fas fa-smile"></i> Convivial
                            </button>
                            <button type="button" 
                                    class="template-btn"
                                    @click="applyTemplate('detailed')">
                                <i class="fas fa-list"></i> Détaillé
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Section Pièces jointes --}}
                <div class="form-card">
                    <h3><i class="fas fa-paperclip"></i> Pièces jointes (optionnel)</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 ou cliquez pour parcourir</span>
                                <small>PDF, Word, Images (max 5 fichiers, 10 Mo chacun)</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>Résumé de votre proposition</h3>
                    
                    <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" x-show="duration && priceType !== 'fixed'">
                            <span class="label">Durée estimée</span>
                            <span class="value" x-text="duration"></span>
                        </div>

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

                        <div class="summary-item" x-show="files.length > 0">
                            <span class="label">Pièces jointes</span>
                            <span class="value" x-text="files.length + ' fichier(s)'"></span>
                        </div>
                    </div>

                    <div class="summary-actions">
                        <button type="submit" 
                                class="btn btn-success btn-block"
                                :disabled="!isValid || isSubmitting">
                            <i class="fas" :class="isSubmitting ? 'fa-spinner fa-spin' : 'fa-paper-plane'"></i>
                            <span x-text="isSubmitting ? 'Envoi en cours...' : 'Envoyer ma proposition'"></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="summary-notes">
                        <p><i class="fas fa-shield-alt"></i> Votre proposition sera visible uniquement par le client</p>
                        <p><i class="fas fa-edit"></i> Vous pourrez la modifier tant qu'elle n'a pas été acceptée</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
function respondForm() {
    return {
        priceType: 'fixed',
        price: '',
        duration: '',
        availabilityStart: '{{ date('Y-m-d') }}',
        availabilityEnd: '',
        message: '',
        files: [],
        dragOver: false,
        isSubmitting: false,

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

        get estimatedTotal() {
            if (!this.price || !this.duration) return 0;
            const match = this.duration.match(/(\d+)/);
            if (match) {
                return parseFloat(this.price) * parseInt(match[1]);
            }
            return parseFloat(this.price);
        },

        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',
                'jpg': 'fa-file-image',
                'jpeg': 'fa-file-image',
                'png': 'fa-file-image'
            };
            return icons[ext] || 'fa-file';
        },

        handleFiles(event) {
            this.addFiles(event.target.files);
        },

        handleDrop(event) {
            this.dragOver = false;
            this.addFiles(event.dataTransfer.files);
        },

        addFiles(newFiles) {
            for (let file of newFiles) {
                if (this.files.length >= 5) break;
                if (file.size > 10 * 1024 * 1024) {
                    alert('Le fichier ' + file.name + ' dépasse 10 Mo');
                    continue;
                }
                this.files.push(file);
            }
        },

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

        applyTemplate(type) {
            const prestataireName = '{{ auth()->user()->name }}';
            const templates = {
                professional: `Bonjour,

Je suis ${prestataireName} et je suis très intéressé par votre demande.

Avec mon expérience dans ce domaine, je suis en mesure de vous proposer un service de qualité qui répondra parfaitement à vos attentes.

Mon tarif inclut :
• [Détaillez ce qui est inclus]
• [Service supplémentaire]
• [Garanties éventuelles]

Je reste à votre disposition pour toute question complémentaire.

Cordialement`,
                friendly: `Bonjour ! 👋

J'ai vu votre annonce et ça m'a tout de suite intéressé !

Je fais ce type de prestation depuis plusieurs années et j'adore mon métier. Je serais ravi de pouvoir vous aider.

N'hésitez pas à me contacter si vous avez des questions, je suis très réactif !

À bientôt j'espère ! 😊`,
                detailed: `Bonjour,

Suite à votre demande, permettez-moi de vous présenter ma proposition détaillée.

📋 CE QUE JE PROPOSE :
• [Description du service]
• [Méthodologie utilisée]
• [Matériel/équipement fourni]

⏱️ DÉROULEMENT :
1. Prise de contact et analyse des besoins
2. [Étape 2]
3. [Étape 3]
4. Livraison finale et validation

✅ INCLUS DANS LE TARIF :
• [Élément 1]
• [Élément 2]
• Garantie satisfaction

📞 DISPONIBILITÉ :
Je suis disponible [jours/horaires] et peux commencer rapidement.

Je reste à votre entière disposition.

Cordialement,
${prestataireName}`
            };
            this.message = templates[type] || '';
        },

        async submitForm() {
            if (!this.isValid) return;
            
            this.isSubmitting = true;
            
            const formData = new FormData();
            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);
            }

            try {
                const response = await fetch('{{ route('prestataire.tenders.store-response', $tender) }}', {
                    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.my-responses') }}';
                } 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>
@endsection