@extends('layouts.app')

@section('title', 'Battery Verification - Pamtech')

@section('content')
    @include('partials.nav', ['variant' => 'verify'])

    <section class="pt-20 pb-20 bg-zinc-50 min-h-screen">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Status Header --}}
            <div class="hardware-card overflow-hidden mb-6">
                @if($isValid)
                    <div class="status-valid p-8 md:p-10">
                        <div class="flex flex-col md:flex-row items-center gap-6 text-center md:text-left">
                            <div class="flex items-center gap-4">
                                <span class="status-indicator status-indicator-valid w-4 h-4"></span>
                                <div>
                                    <span class="label-tech text-green-600 block mb-1">Verification Result</span>
                                    <h2 class="text-2xl md:text-3xl font-bold text-green-800">Authentic Pamtech Battery</h2>
                                </div>
                            </div>
                            <div class="md:ml-auto flex flex-wrap gap-2 justify-center">
                                <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-green-100 text-green-700 text-xs font-mono font-medium">GENUINE</span>
                                <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-green-100 text-green-700 text-xs font-mono font-medium">ISO CERTIFIED</span>
                            </div>
                        </div>
                    </div>
                @elseif($isUsed)
                    <div class="status-used p-8 md:p-10">
                        <div class="flex flex-col md:flex-row items-center gap-6 text-center md:text-left">
                            <div class="flex items-center gap-4">
                                <span class="status-indicator status-indicator-used w-4 h-4"></span>
                                <div>
                                    <span class="label-tech text-yellow-600 block mb-1">Verification Result</span>
                                    <h2 class="text-2xl md:text-3xl font-bold text-yellow-800">Previously Verified</h2>
                                </div>
                            </div>
                            <div class="md:ml-auto">
                                <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-yellow-100 text-yellow-700 text-xs font-mono font-medium">ALREADY SCANNED</span>
                            </div>
                        </div>
                        <p class="text-yellow-700/80 text-sm mt-4 text-center md:text-left">This serial has been verified before. The battery remains authentic and warrantied.</p>
                    </div>
                @else
                    <div class="status-invalid p-8 md:p-10">
                        <div class="flex flex-col md:flex-row items-center gap-6 text-center md:text-left">
                            <div class="flex items-center gap-4">
                                <span class="status-indicator status-indicator-invalid w-4 h-4"></span>
                                <div>
                                    <span class="label-tech text-red-600 block mb-1">Verification Result</span>
                                    <h2 class="text-2xl md:text-3xl font-bold text-red-800">Invalid Serial Code</h2>
                                </div>
                            </div>
                            <div class="md:ml-auto">
                                <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-red-100 text-red-700 text-xs font-mono font-medium">NOT AUTHENTIC</span>
                            </div>
                        </div>
                        <p class="text-red-700/80 text-sm mt-4 text-center md:text-left">This serial code is not registered in the Pamtech verification database.</p>
                    </div>
                @endif

                <div class="p-8 md:p-10 border-t border-zinc-100">
                    @if($battery)
                        <div class="mb-8">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="text-lg font-semibold text-zinc-900">Unit Specifications</h3>
                                <span class="label-tech text-zinc-400">Battery Data</span>
                            </div>

                            <div class="data-grid grid grid-cols-2 md:grid-cols-3 mb-6">
                                <div class="data-grid-cell md:col-span-2">
                                    <span class="label-tech text-zinc-400 block mb-1">Serial Code</span>
                                    <span class="font-mono text-lg font-semibold text-zinc-900">{{ $battery->serial_code }}</span>
                                </div>
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">Model</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery->type }}</span>
                                </div>
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">Voltage</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery->volts }}</span>
                                </div>
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">Capacity</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery->amhs }}</span>
                                </div>
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">CCA</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery->cca }}</span>
                                </div>
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">Class</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery->class }}</span>
                                </div>
                                <div class="data-grid-cell">
                                    <span class="label-tech text-zinc-400 block mb-1">Scan Count</span>
                                    <span class="font-mono text-sm font-medium text-zinc-900">{{ $battery->scan_count }}</span>
                                </div>
                            </div>

                            <div class="flex items-center gap-3 p-4 rounded-lg bg-zinc-50 border border-zinc-200">
                                <span class="label-tech text-zinc-400">Status</span>
                                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-md text-xs font-mono font-medium
                                    @if($battery->status === 'valid') bg-green-100 text-green-700
                                    @elseif($battery->status === 'used') bg-yellow-100 text-yellow-700
                                    @else bg-red-100 text-red-700
                                    @endif">
                                    <span class="status-indicator w-2 h-2
                                        @if($battery->status === 'valid') status-indicator-valid
                                        @elseif($battery->status === 'used') status-indicator-used
                                        @else status-indicator-invalid
                                        @endif"></span>
                                    {{ strtoupper($battery->status) }}
                                </span>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-8">
                            <div class="status-invalid rounded-lg p-8 max-w-lg mx-auto">
                                <h3 class="text-xl font-bold text-red-900 mb-4">Unit Not Found</h3>
                                <p class="text-sm text-zinc-600 mb-2">Serial: <span class="font-mono font-semibold text-zinc-900">{{ $serial ?? 'N/A' }}</span></p>
                                <p class="text-red-600 text-sm font-medium mb-4">Not registered in verification database.</p>
                                <div class="text-left text-sm text-zinc-500 space-y-1">
                                    <p class="font-medium text-zinc-700 mb-2">Possible causes:</p>
                                    <p>• Serial code entered incorrectly</p>
                                    <p>• Unit may not be a genuine Pamtech product</p>
                                    <p>• Contact support for manual verification</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($isValid || $isUsed)
                        <div class="p-5 rounded-lg border border-pamtech-blue/20 bg-pamtech-blue/5 mb-8">
                            <p class="text-zinc-900 font-semibold text-sm mb-1">Thank you for choosing Pamtech</p>
                            <p class="text-zinc-600 text-sm leading-relaxed">Your battery is authentic and covered by our comprehensive warranty. Drive with confidence.</p>
                        </div>
                    @endif

                    <div class="flex flex-col sm:flex-row gap-3">
                        <a href="/" class="btn-primary flex-1 py-3.5 text-center">
                            Verify Another Unit
                        </a>
                        @if($battery && ($isValid || $isUsed))
                            <button type="button" onclick="openWarrantyModal()" class="btn-secondary-light flex-1 py-3.5 text-center cursor-pointer border border-zinc-300 rounded-lg font-semibold text-sm hover:bg-zinc-50 transition-colors">
                                File Warranty Claim
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if($battery && ($isValid || $isUsed))
    <div id="warranty-modal" class="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-4" style="display: none;">
        <div class="modal-panel max-w-md w-full max-h-[90vh] overflow-y-auto">
            <div class="p-6">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <span class="label-tech text-zinc-400">Warranty</span>
                        <h3 class="text-xl font-bold text-zinc-900">File a Claim</h3>
                    </div>
                    <button onclick="closeWarrantyModal()" class="w-8 h-8 rounded-md border border-zinc-200 flex items-center justify-center text-zinc-400 hover:text-zinc-600 hover:border-zinc-300 transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>

                <form id="warranty-form" onsubmit="submitWarrantyClaim(event)">
                    <input type="hidden" name="serial_code" value="{{ $battery->serial_code }}">

                    <div class="mb-4">
                        <label for="fullname" class="form-label">Full Name <span class="text-pamtech-red">*</span></label>
                        <input type="text" id="fullname" name="fullname" required class="form-input" placeholder="Enter your full name">
                    </div>

                    <div class="mb-4">
                        <label for="phone_number" class="form-label">Phone Number <span class="text-pamtech-red">*</span></label>
                        <input type="tel" id="phone_number" name="phone_number" required class="form-input" placeholder="Enter your phone number">
                    </div>

                    <div class="mb-6">
                        <label for="email" class="form-label">Email Address <span class="text-pamtech-red">*</span></label>
                        <input type="email" id="email" name="email" required class="form-input" placeholder="Enter your email address">
                    </div>

                    <div id="warranty-message" class="hidden mb-4 p-4 rounded-lg text-sm"></div>

                    <div class="flex gap-3">
                        <button type="button" onclick="closeWarrantyModal()" class="flex-1 px-4 py-3 border border-zinc-200 rounded-lg text-zinc-700 font-medium hover:bg-zinc-50 transition-colors text-sm">
                            Cancel
                        </button>
                        <button type="submit" id="submit-btn" class="btn-primary flex-1 py-3 text-sm">
                            Submit Claim
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif

    @push('scripts')
    <script>
        function openWarrantyModal() {
            const modal = document.getElementById('warranty-modal');
            if (modal) {
                modal.style.display = 'flex';
                document.body.style.overflow = 'hidden';
            } else {
                alert('Warranty modal not found. Please ensure the battery is valid or used.');
            }
        }

        function closeWarrantyModal() {
            const modal = document.getElementById('warranty-modal');
            if (modal) {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
                const form = document.getElementById('warranty-form');
                const messageDiv = document.getElementById('warranty-message');
                if (form) form.reset();
                if (messageDiv) {
                    messageDiv.classList.add('hidden');
                    messageDiv.textContent = '';
                }
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            const menuIcon = document.getElementById('menu-icon');
            const closeIcon = document.getElementById('close-icon');

            if (mobileMenuButton && mobileMenu) {
                mobileMenuButton.addEventListener('click', function() {
                    mobileMenu.classList.toggle('hidden');
                    menuIcon.classList.toggle('hidden');
                    closeIcon.classList.toggle('hidden');
                });

                mobileMenu.querySelectorAll('a').forEach(link => {
                    link.addEventListener('click', function() {
                        mobileMenu.classList.add('hidden');
                        menuIcon.classList.remove('hidden');
                        closeIcon.classList.add('hidden');
                    });
                });
            }

            const modal = document.getElementById('warranty-modal');
            if (modal) {
                modal.addEventListener('click', function(e) {
                    if (e.target === this) closeWarrantyModal();
                });
            }
        });

        function submitWarrantyClaim(event) {
            event.preventDefault();

            const form = document.getElementById('warranty-form');
            const formData = new FormData(form);
            const submitBtn = document.getElementById('submit-btn');
            const messageDiv = document.getElementById('warranty-message');

            submitBtn.disabled = true;
            submitBtn.textContent = 'Submitting...';
            messageDiv.classList.add('hidden');

            fetch('{{ route("warranty-claim.store") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    messageDiv.className = 'mb-4 p-4 rounded-lg text-sm bg-green-50 border border-green-200 text-green-800';
                    messageDiv.textContent = data.message;
                    messageDiv.classList.remove('hidden');
                    form.reset();
                    setTimeout(() => closeWarrantyModal(), 2000);
                } else {
                    throw new Error(data.message || 'An error occurred');
                }
            })
            .catch(error => {
                messageDiv.className = 'mb-4 p-4 rounded-lg text-sm bg-red-50 border border-red-200 text-red-800';
                messageDiv.textContent = error.message || 'Failed to submit warranty claim. Please try again.';
                messageDiv.classList.remove('hidden');
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.textContent = 'Submit Claim';
            });
        }
    </script>
    @endpush
@endsection