@extends('crm.layouts.app')

@section('title', 'Log Maintenance - ' . $equipment->equipment_name)

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="sm:flex sm:items-center sm:justify-between mb-8">
        <div class="min-w-0 flex-1">
            <nav class="flex mb-4" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ route('crm.equipment-maintenance.index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd"></path>
                            </svg>
                            Equipment Maintenance
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <a href="{{ route('crm.equipment-maintenance.show', $equipment) }}" class="ml-1 text-sm font-medium text-gray-700 hover:text-indigo-600 md:ml-2">{{ Str::limit($equipment->equipment_name, 30) }}</a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Log Maintenance</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-semibold text-gray-900">Log Maintenance</h1>
            <p class="mt-2 text-sm text-gray-700">{{ $equipment->equipment_name }}</p>
        </div>
    </div>

    <form action="{{ route('crm.equipment-maintenance.log.store', $equipment) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf

        <!-- Main Form Card -->
        <div class="overflow-visible rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
            <div class="px-4 py-5 sm:p-6">
                <div class="space-y-6">
                    <!-- Maintenance Type -->
                    <div x-data="{
                        open: false,
                        selected: '{{ old('maintenance_type') }}',
                        types: [
                            { value: 'cleaning', label: 'Cleaning' },
                            { value: 'sterilization', label: 'Sterilization' },
                            { value: 'calibration', label: 'Calibration' },
                            { value: 'inspection', label: 'Inspection' },
                            { value: 'repair', label: 'Repair' },
                            { value: 'replacement', label: 'Replacement' }
                        ],
                        getLabel() {
                            const type = this.types.find(t => t.value == this.selected);
                            return type ? type.label : 'Select Type';
                        }
                    }">
                        <label class="block text-sm font-medium text-gray-900 mb-2">
                            Maintenance Type <span class="text-red-500">*</span>
                        </label>
                        <input type="hidden" name="maintenance_type" :value="selected" required>

                        <div class="relative" @click.away="open = false">
                            <button type="button" @click="open = !open"
                                    class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50"
                                    :class="{ 'text-gray-400': !selected }">
                                <span x-text="getLabel()"></span>
                                <svg class="-mr-1 size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
                                </svg>
                            </button>

                            <div x-show="open" x-transition
                                 class="absolute z-[100] mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 -outline-offset-1 outline-black/5"
                                 style="display: none;">
                                <div class="py-1">
                                    <template x-for="type in types" :key="type.value">
                                        <button type="button" @click="selected = type.value; open = false"
                                                class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                                x-text="type.label"></button>
                                    </template>
                                </div>
                            </div>
                        </div>
                        @error('maintenance_type')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Assigned To -->
                    <div x-data="{
                        open: false,
                        selected: '{{ old('assigned_to') }}',
                        users: {{ Js::from($users->map(fn($u) => ['id' => $u->id, 'name' => $u->name])) }},
                        getLabel() {
                            const user = this.users.find(u => u.id == this.selected);
                            return user ? user.name : 'Select User';
                        }
                    }">
                        <label class="block text-sm font-medium text-gray-900 mb-2">
                            Assigned To <span class="text-red-500">*</span>
                        </label>
                        <input type="hidden" name="assigned_to" :value="selected" required>

                        <div class="relative" @click.away="open = false">
                            <button type="button" @click="open = !open"
                                    class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50"
                                    :class="{ 'text-gray-400': !selected }">
                                <span x-text="getLabel()"></span>
                                <svg class="-mr-1 size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
                                </svg>
                            </button>

                            <div x-show="open" x-transition
                                 class="absolute z-[100] mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 -outline-offset-1 outline-black/5"
                                 style="display: none;">
                                <div class="py-1 max-h-60 overflow-y-auto">
                                    <template x-for="user in users" :key="user.id">
                                        <button type="button" @click="selected = user.id; open = false"
                                                class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                                x-text="user.name"></button>
                                    </template>
                                </div>
                            </div>
                        </div>
                        @error('assigned_to')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Scheduled Date -->
                    <div x-data="{
                        open: false,
                        selectedDate: '{{ old('scheduled_date', date('Y-m-d')) }}',
                        currentMonth: new Date('{{ old('scheduled_date', date('Y-m-d')) }}'),

                        get monthYear() {
                            return this.currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
                        },

                        formattedDate() {
                            if (!this.selectedDate) return 'Select date';
                            const date = new Date(this.selectedDate + 'T00:00:00');
                            return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                        },

                        daysInMonth() {
                            const year = this.currentMonth.getFullYear();
                            const month = this.currentMonth.getMonth();
                            const firstDay = new Date(year, month, 1);
                            const lastDay = new Date(year, month + 1, 0);
                            const daysInMonth = lastDay.getDate();
                            const startingDayOfWeek = firstDay.getDay();

                            const days = [];

                            for (let i = 0; i < startingDayOfWeek; i++) {
                                const prevMonthDay = new Date(year, month, -startingDayOfWeek + i + 1);
                                days.push({
                                    date: prevMonthDay,
                                    day: prevMonthDay.getDate(),
                                    isCurrentMonth: false
                                });
                            }

                            for (let day = 1; day <= daysInMonth; day++) {
                                days.push({
                                    date: new Date(year, month, day),
                                    day: day,
                                    isCurrentMonth: true
                                });
                            }

                            const remainingDays = 42 - days.length;
                            for (let i = 1; i <= remainingDays; i++) {
                                const nextMonthDay = new Date(year, month + 1, i);
                                days.push({
                                    date: nextMonthDay,
                                    day: i,
                                    isCurrentMonth: false
                                });
                            }

                            return days;
                        },

                        selectDate(date) {
                            this.selectedDate = date.toISOString().split('T')[0];
                            this.open = false;
                        },

                        isSelected(date) {
                            if (!this.selectedDate) return false;
                            return date.toISOString().split('T')[0] === this.selectedDate;
                        },

                        isToday(date) {
                            const today = new Date();
                            return date.toDateString() === today.toDateString();
                        },

                        previousMonth() {
                            this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1);
                        },

                        nextMonth() {
                            this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
                        }
                    }">
                        <label class="block text-sm font-medium text-gray-900 mb-2">
                            Scheduled Date <span class="text-red-500">*</span>
                        </label>
                        <div class="relative" @click.away="open = false">
                            <button type="button"
                                    @click="open = !open"
                                    class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                                <div class="flex items-center gap-2">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                    <span x-text="formattedDate()"></span>
                                </div>
                                <svg viewBox="0 0 20 20" fill="currentColor" class="-mr-1 size-5 text-gray-400">
                                    <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" />
                                </svg>
                            </button>

                            <div x-show="open"
                                 x-transition:enter="transition ease-out duration-100"
                                 x-transition:enter-start="transform opacity-0 scale-95"
                                 x-transition:enter-end="transform opacity-100 scale-100"
                                 x-transition:leave="transition ease-in duration-75"
                                 x-transition:leave-start="transform opacity-100 scale-100"
                                 x-transition:leave-end="transform opacity-0 scale-95"
                                 class="absolute z-[100] mt-2 w-80 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                                 style="display: none;">
                                <div class="p-4">
                                    <div class="flex items-center justify-between mb-4">
                                        <button @click.stop="previousMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                            <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                                            </svg>
                                        </button>
                                        <span class="text-sm font-semibold text-gray-900" x-text="monthYear"></span>
                                        <button @click.stop="nextMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                            <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="grid grid-cols-7 gap-1 text-center text-xs mb-2">
                                        <div class="text-gray-500 font-medium">Su</div>
                                        <div class="text-gray-500 font-medium">Mo</div>
                                        <div class="text-gray-500 font-medium">Tu</div>
                                        <div class="text-gray-500 font-medium">We</div>
                                        <div class="text-gray-500 font-medium">Th</div>
                                        <div class="text-gray-500 font-medium">Fr</div>
                                        <div class="text-gray-500 font-medium">Sa</div>
                                    </div>
                                    <div class="grid grid-cols-7 gap-1">
                                        <template x-for="day in daysInMonth()" :key="day.date">
                                            <button type="button"
                                                    @click="selectDate(day.date)"
                                                    class="aspect-square p-1 text-sm rounded hover:bg-gray-100"
                                                    :class="{
                                                        'text-gray-400': !day.isCurrentMonth,
                                                        'text-gray-900': day.isCurrentMonth,
                                                        'bg-indigo-600 text-white hover:bg-indigo-700': isSelected(day.date),
                                                        'ring-2 ring-indigo-600': isToday(day.date) && !isSelected(day.date)
                                                    }"
                                                    x-text="day.day">
                                            </button>
                                        </template>
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" name="scheduled_date" :value="selectedDate" required>
                        </div>
                        @error('scheduled_date')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Description -->
                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-900 mb-2">Description</label>
                        <textarea id="description" name="description" rows="4"
                                  class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600"
                                  placeholder="Enter maintenance details...">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Cost -->
                    <div>
                        <label for="cost" class="block text-sm font-medium text-gray-900 mb-2">Cost ($)</label>
                        <div class="relative">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                <span class="text-gray-500 sm:text-sm">$</span>
                            </div>
                            <input type="number" id="cost" name="cost" value="{{ old('cost') }}" step="0.01" min="0" placeholder="0.00"
                                   class="block w-full rounded-md bg-white pl-7 pr-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600">
                        </div>
                        @error('cost')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Receipt Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-900 mb-2">Receipt / Attachment</label>
                        <div class="relative">
                            <input type="file" id="receipt" name="receipt" accept=".pdf,.jpg,.jpeg,.png" class="hidden">
                            <div onclick="document.getElementById('receipt').click()"
                                 class="flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10 hover:border-gray-900/50 cursor-pointer transition-colors">
                                <div class="text-center">
                                    <svg class="mx-auto h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor">
                                        <path fill-rule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6.905 9.97a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72V18a.75.75 0 0 0 1.5 0v-4.19l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd" />
                                        <path d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z" />
                                    </svg>
                                    <div class="mt-4 flex text-sm text-gray-600">
                                        <span class="relative font-semibold text-indigo-600 hover:text-indigo-500">
                                            Click to upload
                                        </span>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-2">PDF, JPG, PNG up to 5MB</p>
                                </div>
                            </div>
                        </div>
                        <div id="receiptPreview" class="mt-3"></div>
                        @error('receipt')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex items-center justify-end gap-x-3 pt-4 border-t border-gray-200">
                        <a href="{{ route('crm.equipment-maintenance.show', $equipment) }}" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                            Cancel
                        </a>
                        <button type="submit" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                            <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
                            </svg>
                            Log Maintenance
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const receiptInput = document.getElementById('receipt');
    const receiptPreview = document.getElementById('receiptPreview');

    receiptInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const fileType = file.type;
            const fileSize = (file.size / 1024 / 1024).toFixed(2);

            let previewContent = '';

            if (fileType === 'application/pdf') {
                previewContent = `
                    <div class="rounded-lg bg-gray-50 p-4 ring-1 ring-gray-900/5">
                        <div class="flex items-start gap-x-3">
                            <svg class="h-10 w-10 flex-none text-red-600" viewBox="0 0 24 24" fill="currentColor">
                                <path fill-rule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6.905 9.97a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72V18a.75.75 0 0 0 1.5 0v-4.19l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd" />
                                <path d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z" />
                            </svg>
                            <div class="flex-auto">
                                <p class="text-sm font-semibold text-gray-900">${file.name}</p>
                                <p class="text-xs text-gray-500 mt-1">${fileSize} MB</p>
                            </div>
                        </div>
                    </div>
                `;
            } else if (fileType.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    receiptPreview.innerHTML = `
                        <div class="rounded-lg bg-gray-50 p-4 ring-1 ring-gray-900/5">
                            <div class="flex items-start gap-x-3">
                                <img src="${e.target.result}" class="h-20 w-20 flex-none rounded-lg object-cover ring-1 ring-gray-900/10">
                                <div class="flex-auto">
                                    <p class="text-sm font-semibold text-gray-900">${file.name}</p>
                                    <p class="text-xs text-gray-500 mt-1">${fileSize} MB</p>
                                </div>
                            </div>
                        </div>
                    `;
                };
                reader.readAsDataURL(file);
                return;
            }

            receiptPreview.innerHTML = previewContent;
        }
    });

    // Drag and drop support
    const dropZone = receiptInput.parentElement.querySelector('[onclick]');

    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => {
            dropZone.classList.add('border-indigo-600', 'bg-indigo-50');
        }, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, () => {
            dropZone.classList.remove('border-indigo-600', 'bg-indigo-50');
        }, false);
    });

    dropZone.addEventListener('drop', function(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        receiptInput.files = files;
        receiptInput.dispatchEvent(new Event('change'));
    }, false);
});
</script>
@endsection