@extends('layouts.app')

@section('title', 'Réserver ' . $equipment->name)

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_green.css">
<style>
    .flatpickr-calendar {
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
    }
    .flatpickr-days {
        width: 100% !important;
    }
    .dayContainer {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
    }
    .flatpickr-day {
        max-width: unset !important;
        height: 36px !important;
        line-height: 36px !important;
    }
    
    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
        background: #16a34a !important;
        border-color: #16a34a !important;
    }
    
    .flatpickr-day.inRange {
        box-shadow: -5px 0 0 #dcfce7, 5px 0 0 #dcfce7 !important;
        background: #dcfce7 !important;
        border-color: #dcfce7 !important;
        color: #166534 !important;
    }
    
    /* Responsive for small screens */
    @media (max-width: 400px) {
        .flatpickr-day {
            height: 32px !important;
            line-height: 32px !important;
            font-size: 0.8125rem !important;
        }
        
        .flatpickr-months {
            padding: 0.25rem !important;
        }
        
        .flatpickr-current-month {
            font-size: 0.875rem !important;
        }
        
        .flatpickr-weekday {
            font-size: 0.6875rem !important;
        }
    }
</style>
@endpush

@section('content')
<div class="bg-green-50 min-h-screen">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
        <div class="max-w-7xl mx-auto">
            <!-- Breadcrumb -->
            <nav class="flex mb-4 sm:mb-6" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3 text-xs sm:text-sm">
                    <li class="inline-flex items-center">
                        <a href="{{ route('equipment.index') }}" class="inline-flex items-center font-medium text-green-700 hover:text-green-600">
                            <svg class="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
                            </svg>
                            <span class="hidden sm:inline">Équipements</span>
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-3 h-3 text-green-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                            </svg>
                            <a href="{{ route('equipment.show', $equipment) }}" class="ml-1 font-medium text-green-700 hover:text-green-600 md:ml-2 truncate max-w-32 sm:max-w-none">{{ Str::limit($equipment->name, 20) }}</a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <svg class="w-3 h-3 text-green-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                            </svg>
                            <span class="ml-1 font-medium text-green-500 md:ml-2">Réserver</span>
                        </div>
                    </li>
                </ol>
            </nav>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
                
                <!-- LEFT COLUMN: Equipment Details -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-xl shadow-lg border border-green-200 p-4 sm:p-6 sticky top-4 sm:top-8">
                        <h2 class="text-xl sm:text-2xl font-bold text-green-800 mb-4 sm:mb-5 border-b-2 border-green-200 pb-2 sm:pb-3">Détails de l'équipement</h2>
                        
                            <div class="mb-4 rounded-lg overflow-hidden shadow-sm">
                                @php
                                    $photoPath = $equipment->main_photo ?? ($equipment->photos[0] ?? null);
                                @endphp
                                @if($photoPath)
                                    <x-media-image :path="$photoPath" :alt="$equipment->name" class="w-full h-48 object-cover" placeholder="https://via.placeholder.com/300x200?text=Équipement" />
                                @else
                                    <div class="w-full h-48 bg-gradient-to-br from-green-100 to-green-200 flex items-center justify-center">
                                        <svg class="w-16 h-16 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                        </svg>
                                    </div>
                                @endif
                            </div>

                        <div class="space-y-4 sm:space-y-5">
                            <div>
                                <h3 class="font-bold text-base sm:text-lg text-gray-800">{{ $equipment->name }}</h3>
                                <p class="text-gray-600 text-sm mt-1">{{ Str::limit($equipment->description, 100) }}</p>
                            </div>
                            
                            <div class="flex items-center gap-2">
                                <div class="flex items-center bg-yellow-50 px-2 py-1 rounded-full">
                                    <svg class="w-4 h-4 text-yellow-500 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                                    <span class="text-yellow-700 font-semibold text-sm">{{ number_format($equipment->average_rating, 1) }}</span>
                                </div>
                                <span class="text-gray-500 text-sm">({{ $equipment->reviews_count }} avis)</span>
                            </div>

                            <div class="border-t border-gray-200 pt-3 sm:pt-4 space-y-2 sm:space-y-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600 font-medium text-sm sm:text-base">Prix par jour :</span>
                                    <span class="font-bold text-xl text-green-600">{{ number_format($equipment->price_per_day, 2) }} €</span>
                                </div>
                                @if($equipment->price_per_hour)
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600 font-medium text-sm sm:text-base">Prix par heure :</span>
                                    <span class="font-bold text-lg text-green-600">{{ number_format($equipment->price_per_hour, 2) }} €</span>
                                </div>
                                @endif
                            </div>
                            
                            @if($equipment->prestataire)
                            <div class="border-t border-gray-200 pt-3 sm:pt-4">
                                <h4 class="font-bold text-gray-800 mb-2 sm:mb-3 text-sm sm:text-base">Propriétaire</h4>
                                <a href="#" class="flex items-center gap-3 p-3 bg-green-50 rounded-lg hover:bg-green-100 transition duration-200">
                                    <div class="w-10 h-10 bg-green-200 rounded-full flex items-center justify-center text-green-800 font-bold">
                                        {{ substr($equipment->prestataire->user->name, 0, 1) }}
                                    </div>
                                    <div>
                                        <div class="font-bold text-green-900 text-sm">{{ $equipment->prestataire->user->name }}</div>
                                    </div>
                                </a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- RIGHT COLUMN: Booking Form -->
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-xl shadow-lg border border-green-200 p-4 sm:p-6 md:p-8">
                        <h2 class="text-xl sm:text-2xl font-bold text-green-800 mb-4 sm:mb-6 border-b-2 border-green-200 pb-2 sm:pb-3">Sélectionner vos dates</h2>
                        
                        <form action="{{ route('equipment.rent', $equipment) }}" method="POST" x-data="bookingForm()">
                            @csrf
                            <input type="hidden" id="start_date" name="start_date" x-model="startDate">
                            <input type="hidden" id="end_date" name="end_date" x-model="endDate">
                            <input type="hidden" name="is_hourly" x-model="isHourly">
                            <input type="hidden" name="start_time" x-model="startTime">
                            <input type="hidden" name="end_time" x-model="endTime">

                            <!-- Toggle Switch (only if hourly rental is available) -->
                            @if($equipment->price_per_hour && $equipment->price_per_hour > 0)
                            <div class="flex justify-center mb-6">
                                <div class="bg-gray-100 p-1 rounded-lg inline-flex shadow-inner">
                                    <button type="button" @click="setMode(false)" :class="{'bg-white shadow text-green-700': !isHourly, 'text-gray-500 hover:text-gray-700': isHourly}" class="px-6 py-2.5 rounded-md text-sm font-semibold transition-all duration-200 flex items-center">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3a1 1 0 011-1h6a1 1 0 011 1v4m-6 0h6m-6 0a1 1 0 00-1 1v10a1 1 0 001 1h6a1 1 0 001-1V8a1 1 0 00-1-1m-6 0V7"></path></svg>
                                        Par Jour
                                    </button>
                                    <button type="button" @click="setMode(true)" :class="{'bg-white shadow text-green-700': isHourly, 'text-gray-500 hover:text-gray-700': !isHourly}" class="px-6 py-2.5 rounded-md text-sm font-semibold transition-all duration-200 flex items-center">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                        Par Heure
                                    </button>
                                </div>
                            </div>
                            @endif

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Calendar Column -->
                                <div>
                                    <div class="mb-4">
                                        <h3 class="font-semibold text-gray-700 mb-2">1. Choisissez une date</h3>
                                        <div id="availability-calendar" class="rounded-lg overflow-hidden border border-gray-200"></div>
                                    </div>
                                </div>

                                <!-- Options/Summary Column -->
                                <div>
                                    <h3 class="font-semibold text-gray-700 mb-2">2. Options & Résumé</h3>
                                    
                                    <div class="bg-gray-50 rounded-lg border border-gray-200 p-4 h-full flex flex-col">
                                        
                                        <!-- Hourly Inputs (only if hourly rental is available) -->
                                        @if($equipment->price_per_hour && $equipment->price_per_hour > 0)
                                        <div x-show="isHourly" x-transition class="mb-4">
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Horaires</label>
                                            <div class="grid grid-cols-2 gap-2">
                                                <div>
                                                    <label class="text-xs text-gray-500">Début</label>
                                                    <input type="time" x-model="startTime" @change="calculateTotal()" class="w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 text-sm">
                                                </div>
                                                <div>
                                                    <label class="text-xs text-gray-500">Fin</label>
                                                    <input type="time" x-model="endTime" @change="calculateTotal()" class="w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500 text-sm">
                                                </div>
                                            </div>
                                        </div>
                                        @endif

                                        <!-- Summary -->
                                        <div class="mt-auto space-y-3">
                                            <div class="flex justify-between text-sm">
                                                <span class="text-gray-600">Durée:</span>
                                                <span class="font-semibold text-gray-900" x-text="duration + (isHourly ? ' heures' : ' jours')">0</span>
                                            </div>
                                            <div class="flex justify-between text-lg font-bold border-t border-gray-200 pt-3">
                                                <span class="text-green-800">Total:</span>
                                                <span class="text-green-600" x-text="totalPrice.toFixed(2) + ' €'">0.00 €</span>
                                            </div>
                                            
                                            <button id="submit-btn" type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-semibold shadow-md transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed mt-4" :disabled="!isValid">
                                                Réserver
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/fr.js"></script>
<script>
    function bookingForm() {
        return {
            isHourly: false,
            allowHourly: {{ ($equipment->price_per_hour && $equipment->price_per_hour > 0) ? 'true' : 'false' }},
            startDate: '',
            endDate: '',
            startTime: '',
            endTime: '',
            pricePerDay: {{ $equipment->price_per_day }},
            pricePerHour: {{ $equipment->price_per_hour ?? 0 }},
            totalPrice: 0,
            duration: 0,
            calendar: null,
            isValid: false,

            init() {
                this.initCalendar();
            },

            setMode(hourly) {
                // Ne permet pas le mode horaire si pas de prix à l'heure
                if (hourly && !this.allowHourly) {
                    return;
                }
                this.isHourly = hourly;
                this.startDate = '';
                this.endDate = '';
                this.startTime = '';
                this.endTime = '';
                this.totalPrice = 0;
                this.duration = 0;
                this.isValid = false;
                
                if (this.calendar) {
                    this.calendar.destroy();
                }
                this.initCalendar();
            },

            initCalendar() {
                const unavailableDates = @json($unavailableDates);
                const availabilityPeriod = @json($availabilityPeriod);
                
                let minDate = "today";
                let maxDate = null;
                
                if (availabilityPeriod.available_from) {
                    const availableFrom = new Date(availabilityPeriod.available_from);
                    const today = new Date();
                    minDate = availableFrom > today ? availabilityPeriod.available_from : "today";
                }
                
                if (availabilityPeriod.available_until) {
                    maxDate = availabilityPeriod.available_until;
                }

                const self = this;

                this.calendar = flatpickr("#availability-calendar", {
                    inline: true,
                    mode: this.isHourly ? "single" : "range",
                    dateFormat: "Y-m-d",
                    minDate: minDate,
                    maxDate: maxDate,
                    disable: unavailableDates,
                    locale: "fr",
                    onChange: function(selectedDates, dateStr, instance) {
                        if (self.isHourly) {
                            if (selectedDates.length === 1) {
                                self.startDate = instance.formatDate(selectedDates[0], 'Y-m-d');
                                self.endDate = self.startDate;
                                self.calculateTotal();
                            }
                        } else {
                            if (selectedDates.length === 2) {
                                self.startDate = instance.formatDate(selectedDates[0], 'Y-m-d');
                                self.endDate = instance.formatDate(selectedDates[1], 'Y-m-d');
                                self.calculateTotal();
                            } else {
                                self.duration = 0;
                                self.totalPrice = 0;
                                self.isValid = false;
                            }
                        }
                    }
                });
            },

            calculateTotal() {
                if (this.isHourly) {
                    if (this.startDate && this.startTime && this.endTime) {
                        let start = new Date(this.startDate + 'T' + this.startTime);
                        let end = new Date(this.startDate + 'T' + this.endTime);
                        
                        if (end <= start) {
                            this.duration = 0;
                            this.totalPrice = 0;
                            this.isValid = false;
                        } else {
                            let diff = (end - start) / (1000 * 60 * 60);
                            this.duration = Math.max(1, Math.ceil(diff));
                            this.totalPrice = this.duration * this.pricePerHour;
                            this.isValid = true;
                        }
                    } else {
                        this.duration = 0;
                        this.totalPrice = 0;
                        this.isValid = false;
                    }
                } else {
                    if (this.startDate && this.endDate) {
                        const start = new Date(this.startDate);
                        const end = new Date(this.endDate);
                        const diffTime = Math.abs(end - start);
                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
                        this.duration = diffDays;
                        this.totalPrice = this.duration * this.pricePerDay;
                        this.isValid = true;
                    } else {
                        this.duration = 0;
                        this.totalPrice = 0;
                        this.isValid = false;
                    }
                }
            }
        }
    }
</script>
@endpush