<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 mt-5">
                    <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">Paid Replacement Agreement</h4>
                        <p data-slot="card-description" class="text-muted-foreground">Please accept the terms and conditions to proceed with the paid replacement.</p>
                    </div>
                    <div data-slot="card-content" class="px-6 [&amp;:last-child]:pb-6 space-y-4">
                        <div class="space-y-2 px-6 h-64 overflow-y-auto border rounded">
                            <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">Terms & conditions *</label>
                            <p>Replacement of Product. For clarification purposes it is hereby expressly stated that ADRES and/or CAATS shall be offered for a limited time period, not exceeding the term of this Licence. In the event that the Seller should offer a replacement product, the conditions for using such product shall be subject to a separate agreement which will be consistent to the terms hereof.</p>

                            <p>Replacement Offering. The Seller may, at its discretion, offer a replacement product or service for ADRES and/or CAATS during or after the Term.</p>

<p>Commercial Terms. Any replacement product will be offered under a separate written agreement and priced in accordance with the Seller’s then-current list prices, less any mutually agreed credits or discounts. Unless otherwise agreed, fees for the replacement product are in addition to fees paid under this Licence and are non-refundable.</p>

<p>Migration and Transition. If the Buyer elects to purchase the replacement product, the Seller will provide reasonable migration assistance, subject to (a) the Buyer’s timely cooperation; and (b) payment of applicable professional services fees at the Seller’s then-current rates, unless otherwise set out in the separate agreement.</p>

<p>No Automatic Entitlement. The Buyer’s licence to ADRES and/or CAATS does not include any right to receive a replacement product, upgrades, or new functionality without additional charge, except as expressly stated in the separate agreement.</p>

<p>Continuity; Sunset. The Seller will provide at least [60 DAYS’] prior written notice before discontinuing ADRES and/or CAATS in favor of a paid replacement product. During the notice period, the Seller will continue to support ADRES and/or CAATS in accordance with the support terms applicable to the Licence.</p>    

<p>Consistency with Existing Terms. The separate agreement for any replacement product will be consistent with the core commercial and legal terms of this Licence (including confidentiality, IP ownership, data protection, and limitations of liability), except to the extent the parties expressly agree otherwise in writing.</p>

<p>Taxes. Fees for any replacement product are exclusive of taxes. The Buyer is responsible for all applicable taxes, duties, and similar charges, excluding taxes based on the Seller’s net income.</p>    

<p>Payment Terms. Unless otherwise stated in the separate agreement, invoices for the replacement product are due within [30 DAYS] of invoice date. Late payments may accrue interest at [1.5% PER MONTH] or the maximum rate permitted by law, whichever is lower.</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 mt-5">
                    <div data-slot="card-content" class="[&amp;:last-child]:pb-6 p-6">
                        <input type="hidden" x-model="product.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="paidreplacementRequest()">Accept</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>