<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
           Replacement Request
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6" x-data="productReplacement()" x-init="replaceinit()">
            <div x-show="product">
                <div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border-0 shadow-xl bg-white/80 backdrop-blur-sm">
                    <div data-slot="card-header" class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6">
                        <h4 data-slot="card-title" class="leading-none flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package h-5 w-5 text-cyan-600" aria-hidden="true"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><path d="m7.5 4.27 9 5.15"></path></svg>Product Information</h4></div>
                    <div data-slot="card-content" class="px-6 [&amp;:last-child]:pb-6">
                        <div class="bg-gray-50 p-4 rounded-xl">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold" x-text="product.serialnumber.product.name"></h3>
                                <span data-slot="badge" class="inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-primary text-primary-foreground [a&amp;]:hover:bg-primary/90 rounded-full">Under Warranty</span>
                            </div>
                            <p class="text-sm text-gray-600" x-text="'Model: '+product.serialnumber.product.model_number"></p>
                            <p class="text-sm text-gray-600" x-text="'Serial: '+product.serialnumber.serial_number"></p>
                            <p class="text-sm text-gray-600" x-text="'Purchase Date: '+product.purchase_date"></p>
                        </div>
                    </div>
                </div>
                <div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border-0 shadow-xl bg-white/80 backdrop-blur-sm">
                    <div data-slot="card-header" class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6">
                        <h4 data-slot="card-title" class="leading-none">Issue Description</h4>
                        <p data-slot="card-description" class="text-muted-foreground">Please describe the issue you're experiencing with your product</p>
                    </div>
                    <div data-slot="card-content" class="px-6 [&amp;:last-child]:pb-6 space-y-4">
                        <div class="space-y-2">
                            <label data-slot="label" class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
                            for="issue">Describe the Issue *</label>
                            <textarea data-slot="textarea" class="resize-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content w-full border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm min-h-32 rounded-xl border-cyan-200 focus:border-cyan-500 focus:ring-cyan-500"
                            id="issue" placeholder="Please provide detailed information about the problem you're experiencing..." x-model="description"></textarea>
                        </div>
                        <div class="space-y-3" style="margin-bottom:25px;">
                            <label data-slot="label" class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50">Upload Photo/Video Evidence</label>
                            <div class="grid grid-cols-2 gap-3">
                                <input type="file" id="fileInput" x-ref="file" class="hidden" @change="fileName = $event.target.files[0]?.name || ''">
                                <label for="fileInput"
        class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all 
               disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none 
               [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 
               focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] 
               aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 
               aria-invalid:border-destructive bg-background text-foreground 
               hover:text-accent-foreground dark:bg-input/30 dark:border-input 
               dark:hover:bg-input/50 px-4 py-2 has-[>svg]:px-3 h-24 flex-col gap-2 
               rounded-xl border-2 border-dashed border-cyan-200 
               hover:border-cyan-400 hover:bg-cyan-50 cursor-pointer">

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
             fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round"
             class="lucide lucide-camera h-6 w-6 text-cyan-600"
             aria-hidden="true">
            <path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"></path>
            <circle cx="12" cy="13" r="3"></circle>
        </svg>

        <span class="text-sm">Upload Photo</span>
    </label>
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div data-slot="card" class="text-card-foreground flex flex-col gap-6 rounded-xl border-0 shadow-xl bg-white/80 backdrop-blur-sm">
                    <div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6">
                        <input type="hidden" x-model="product.request_id">
                        <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3 w-full bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-xl hover:from-cyan-600 hover:to-blue-700 transition-all duration-200" @click="replacementRequest()">Submit Request</button>
                        <p class="text-xs text-gray-500 text-center mt-3">By submitting this request, you agree to our terms and conditions.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>