@extends('layouts.admin')

@section('title', 'Create Warranty Claim / Repair Ticket')
@section('subtitle', 'Log returned devices and track supplier warranty actions')

@section('content')
    <div class="max-w-3xl bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
        <form action="{{ route('admin.repairs.store') }}" method="POST" class="space-y-6">
            @csrf

            <input type="hidden" name="invoice_id" value="{{ $invoiceId }}">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Product Information --}}
                <div class="space-y-4">
                    <h3 class="font-bold text-slate-800 text-sm border-b border-slate-100 pb-2">📱 Device Information</h3>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Link to Catalog Product (For Return Reports)</label>
                        <select name="product_id" id="catalog_product_select" class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none bg-white">
                            <option value="">-- Optional (Link to catalog item) --</option>
                            @foreach($products as $prod)
                                <option value="{{ $prod->id }}" data-name="{{ $prod->name }}" {{ old('product_id', $productId) == $prod->id ? 'selected' : '' }}>
                                    {{ $prod->name }} [SKU: {{ $prod->sku }}]
                                </option>
                            @endforeach
                        </select>
                        @error('product_id')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Product Name *</label>
                        <input type="text" name="product_name" id="product_name_input" value="{{ old('product_name', $productName) }}" placeholder="e.g. iPhone 15 Pro, Samsung S24" required
                            class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                        @error('product_name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">IMEI / Serial Number</label>
                        <input type="text" name="imei_numbers" value="{{ old('imei_numbers', $imei) }}" placeholder="Type/Scan Device IMEI (Optional)"
                            class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                        @error('imei_numbers')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Issue / Fault Description *</label>
                        <textarea name="issue_description" rows="3" placeholder="Describe the device fault..." required
                            class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">{{ old('issue_description') }}</textarea>
                        @error('issue_description')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                {{-- Customer & Supplier Info --}}
                <div class="space-y-4">
                    <h3 class="font-bold text-slate-800 text-sm border-b border-slate-100 pb-2">👤 Contact & Supplier Details</h3>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Customer Name *</label>
                        <input type="text" name="customer_name" value="{{ old('customer_name', $customerName) }}" placeholder="Customer Name" required
                            class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                        @error('customer_name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Customer Phone</label>
                        <input type="text" name="customer_phone" value="{{ old('customer_phone', $customerPhone) }}" placeholder="Phone Number"
                            class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                        @error('customer_phone')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Assign to Supplier (For Warranty Repair)</label>
                        <select name="supplier_id" class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none bg-white">
                            <option value="">Handle In-House (No Supplier)</option>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                    {{ $supplier->name }} ({{ $supplier->company_name }})
                                </option>
                            @endforeach
                        </select>
                        @error('supplier_id')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            {{-- Flow Status & Notes --}}
            <div class="border-t border-slate-100 pt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Initial Status *</label>
                    <select name="status" required class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none bg-white">
                        <option value="received" {{ old('status', 'received') === 'received' ? 'selected' : '' }}>Received from Customer</option>
                        <option value="sent_to_supplier" {{ old('status') === 'sent_to_supplier' ? 'selected' : '' }}>Sent to Supplier</option>
                        <option value="returned_from_supplier" {{ old('status') === 'returned_from_supplier' ? 'selected' : '' }}>Returned from Supplier</option>
                        <option value="completed" {{ old('status') === 'completed' ? 'selected' : '' }}>Completed / Returned to Customer</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Date Sent to Supplier</label>
                    <input type="date" name="supplier_sent_date" value="{{ old('supplier_sent_date') }}"
                        class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Date Returned from Supplier</label>
                    <input type="date" name="supplier_return_date" value="{{ old('supplier_return_date') }}"
                        class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                </div>
            </div>

            {{-- Replacement Section --}}
            <div class="border-t border-slate-100 pt-6 space-y-4">
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_replaced" id="is_replaced" value="1" {{ old('is_replaced') ? 'checked' : '' }}
                        class="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500">
                    <label for="is_replaced" class="text-sm font-bold text-slate-800 cursor-pointer">🔄 Issue Replacement from Stock immediately</label>
                </div>

                <div id="replacement_fields" class="grid grid-cols-1 md:grid-cols-4 gap-6 p-4 bg-slate-50 border border-slate-100 rounded-xl {{ old('is_replaced') ? '' : 'hidden' }}">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Replacement Product *</label>
                        <select name="replacement_product_id" class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none bg-white">
                            <option value="">-- Select Product --</option>
                            @foreach($products as $prod)
                                <option value="{{ $prod->id }}" {{ old('replacement_product_id') == $prod->id ? 'selected' : '' }}>
                                    {{ $prod->name }} [SKU: {{ $prod->sku }}]
                                </option>
                            @endforeach
                        </select>
                        @error('replacement_product_id')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Replacement Branch *</label>
                        <select name="replacement_branch_id" class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none bg-white">
                            <option value="">-- Select Branch --</option>
                            @foreach($branches as $br)
                                <option value="{{ $br->id }}" {{ old('replacement_branch_id', auth()->user()->branch_id) == $br->id ? 'selected' : '' }}>
                                    {{ $br->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('replacement_branch_id')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Replacement Qty *</label>
                        <input type="number" step="0.001" name="replacement_qty" value="{{ old('replacement_qty', 1) }}"
                            class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                        @error('replacement_qty')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Replacement IMEI / Serial</label>
                        <input type="text" name="replacement_imei" value="{{ old('replacement_imei') }}" placeholder="New IMEI / Serial"
                            class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                        @error('replacement_imei')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const chk = document.getElementById('is_replaced');
                    const fields = document.getElementById('replacement_fields');
                    chk.addEventListener('change', function() {
                        if (this.checked) {
                            fields.classList.remove('hidden');
                        } else {
                            fields.classList.add('hidden');
                        }
                    });

                    const select = document.getElementById('catalog_product_select');
                    const nameInput = document.getElementById('product_name_input');
                    select.addEventListener('change', function() {
                        const selectedOption = this.options[this.selectedIndex];
                        if (selectedOption && selectedOption.value) {
                            nameInput.value = selectedOption.getAttribute('data-name');
                        }
                    });
                });
            </script>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Claim Notes / Internal Log</label>
                <textarea name="notes" placeholder="Any update details or supplier claim reference number..." rows="2"
                    class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">{{ old('notes') }}</textarea>
            </div>

            <div class="flex gap-4 pt-6 border-t border-slate-100">
                <button type="submit"
                    class="px-6 py-2.5 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition">
                    Create Claim Ticket
                </button>
                <a href="{{ route('admin.repairs.index') }}"
                    class="px-6 py-2.5 bg-slate-100 text-slate-700 rounded-xl font-medium hover:bg-slate-200 transition">
                    Cancel
                </a>
            </div>
        </form>
    </div>
@endsection