@extends('layouts.app')

@section('title', 'Edit Price Record')

@section('content')
    <div class="px-4 py-6 sm:px-0">
        <div class="mb-6">
            <h1 class="text-3xl font-bold text-gray-900">Edit Price Record</h1>
            <p class="text-gray-600">Update supplier price information</p>
        </div>

        <form action="{{ route('price-records.update', $priceRecord) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="p-6 space-y-8">
                    <!-- Supplier Selection -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Supplier Information</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="supplier_id" class="block text-sm font-medium text-gray-700">Supplier *</label>
                                <select name="supplier_id" id="supplier_id" required
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500">
                                    <option value="">Select a supplier</option>
                                    @foreach($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" {{ old('supplier_id', $priceRecord->supplier_id) == $supplier->id ? 'selected' : '' }}>
                                            {{ $supplier->codename }} - {{ $supplier->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('supplier_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="quoted_at" class="block text-sm font-medium text-gray-700">Quoted Date *</label>
                                <input type="date" name="quoted_at" id="quoted_at" required
                                    value="{{ old('quoted_at', $priceRecord->quoted_at->format('Y-m-d')) }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500">
                                @error('quoted_at')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Item Details -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Item Details</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="item_type" class="block text-sm font-medium text-gray-700">Item Type *</label>
                                <input type="text" name="item_type" id="item_type" required
                                    value="{{ old('item_type', $priceRecord->item_type) }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
                                    placeholder="e.g., Vinyl Banner, Namecards, Stickers">
                                @error('item_type')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="md:col-span-2">
                                <label for="item_description" class="block text-sm font-medium text-gray-700">Description *</label>
                                <textarea name="item_description" id="item_description" required rows="3"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
                                    placeholder="Detailed description of the item...">{{ old('item_description', $priceRecord->item_description) }}</textarea>
                                @error('item_description')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Quantity & Dimensions -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Quantity & Dimensions</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                            <div>
                                <label for="quantity" class="block text-sm font-medium text-gray-700">Quantity *</label>
                                <input type="number" name="quantity" id="quantity" required step="0.01" min="0.01"
                                    value="{{ old('quantity', $priceRecord->quantity) }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500">
                                @error('quantity')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="uom" class="block text-sm font-medium text-gray-700">Unit *</label>
                                <select name="uom" id="uom" required
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500">
                                    <option value="pcs" {{ old('uom', $priceRecord->uom) == 'pcs' ? 'selected' : '' }}>Pieces (pcs)</option>
                                    <option value="box" {{ old('uom', $priceRecord->uom) == 'box' ? 'selected' : '' }}>Box</option>
                                    <option value="set" {{ old('uom', $priceRecord->uom) == 'set' ? 'selected' : '' }}>Set</option>
                                    <option value="sqft" {{ old('uom', $priceRecord->uom) == 'sqft' ? 'selected' : '' }}>Square Feet (sqft)</option>
                                    <option value="sqm" {{ old('uom', $priceRecord->uom) == 'sqm' ? 'selected' : '' }}>Square Meter (sqm)</option>
                                    <option value="roll" {{ old('uom', $priceRecord->uom) == 'roll' ? 'selected' : '' }}>Roll</option>
                                    <option value="meter" {{ old('uom', $priceRecord->uom) == 'meter' ? 'selected' : '' }}>Meter</option>
                                </select>
                                @error('uom')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="width" class="block text-sm font-medium text-gray-700">Width</label>
                                <input type="number" name="width" id="width" step="0.01" min="0"
                                    value="{{ old('width', $priceRecord->width) }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
                                    placeholder="Optional">
                                @error('width')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="height" class="block text-sm font-medium text-gray-700">Height</label>
                                <input type="number" name="height" id="height" step="0.01" min="0"
                                    value="{{ old('height', $priceRecord->height) }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
                                    placeholder="Optional">
                                @error('height')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="mt-4">
                            <label for="dimension_unit" class="block text-sm font-medium text-gray-700">Dimension Unit</label>
                            <select name="dimension_unit" id="dimension_unit"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500">
                                <option value="">Select unit</option>
                                <option value="mm" {{ old('dimension_unit', $priceRecord->dimension_unit) == 'mm' ? 'selected' : '' }}>Millimeter (mm)</option>
                                <option value="cm" {{ old('dimension_unit', $priceRecord->dimension_unit) == 'cm' ? 'selected' : '' }}>Centimeter (cm)</option>
                                <option value="m" {{ old('dimension_unit', $priceRecord->dimension_unit) == 'm' ? 'selected' : '' }}>Meter (m)</option>
                                <option value="ft" {{ old('dimension_unit', $priceRecord->dimension_unit) == 'ft' ? 'selected' : '' }}>Feet (ft)</option>
                                <option value="inch" {{ old('dimension_unit', $priceRecord->dimension_unit) == 'inch' ? 'selected' : '' }}>Inch</option>
                            </select>
                            @error('dimension_unit')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Pricing -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Pricing</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="unit_price" class="block text-sm font-medium text-gray-700">Unit Price (RM) *</label>
                                <div class="mt-1 relative rounded-md shadow-sm">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm">RM</span>
                                    </div>
                                    <input type="number" name="unit_price" id="unit_price" required step="0.01" min="0"
                                        value="{{ old('unit_price', $priceRecord->unit_price) }}"
                                        class="pl-12 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
                                        placeholder="0.00">
                                </div>
                                @error('unit_price')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Postage / Pickup *</label>
                                <div class="space-y-2">
                                    <div class="flex items-center">
                                        <input type="radio" id="postage_included" name="postage_option" value="included"
                                            {{ old('postage_option', $priceRecord->postage_option) == 'included' ? 'checked' : '' }}
                                            class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300">
                                        <label for="postage_included" class="ml-2 text-sm text-gray-700">Postage Included (Free)</label>
                                    </div>

                                    <div class="flex items-center">
                                        <input type="radio" id="postage_add_on" name="postage_option" value="add_on"
                                            {{ old('postage_option', $priceRecord->postage_option) == 'add_on' ? 'checked' : '' }}
                                            class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300">
                                        <label for="postage_add_on" class="ml-2 text-sm text-gray-700">Add-on Postage</label>
                                        <div class="ml-4 relative rounded-md shadow-sm">
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <span class="text-gray-500 sm:text-sm">RM</span>
                                            </div>
                                            <input type="number" name="postage_price" id="postage_price" step="0.01" min="0"
                                                value="{{ old('postage_price', $priceRecord->postage_price) }}"
                                                class="pl-12 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 disabled:bg-gray-100"
                                                placeholder="0.00"
                                                {{ old('postage_option', $priceRecord->postage_option) != 'add_on' ? 'disabled' : '' }}>
                                        </div>
                                    </div>

                                    <div class="flex items-center">
                                        <input type="radio" id="postage_self_pickup" name="postage_option" value="self_pickup"
                                            {{ old('postage_option', $priceRecord->postage_option) == 'self_pickup' ? 'checked' : '' }}
                                            class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300">
                                        <label for="postage_self_pickup" class="ml-2 text-sm text-gray-700">Self Pickup</label>
                                        <input type="text" name="self_pickup_location" id="self_pickup_location"
                                            value="{{ old('self_pickup_location', $priceRecord->self_pickup_location) }}"
                                            class="ml-4 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 disabled:bg-gray-100"
                                            placeholder="Pickup location"
                                            {{ old('postage_option', $priceRecord->postage_option) != 'self_pickup' ? 'disabled' : '' }}>
                                    </div>
                                </div>
                                @error('postage_option')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                                @error('postage_price')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                                @error('self_pickup_location')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Notes -->
                    <div>
                        <label for="notes" class="block text-sm font-medium text-gray-700">Additional Notes</label>
                        <textarea name="notes" id="notes" rows="2"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"
                            placeholder="Any additional information about this quote...">{{ old('notes', $priceRecord->notes) }}</textarea>
                        @error('notes')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="px-6 py-3 bg-gray-50 flex justify-between items-center">
                    <div class="text-sm text-gray-500">
                        <span class="font-medium">Created:</span> {{ $priceRecord->created_at->format('M d, Y') }}
                        @if($priceRecord->created_at != $priceRecord->updated_at)
                            | <span class="font-medium">Last Updated:</span> {{ $priceRecord->updated_at->format('M d, Y') }}
                        @endif
                    </div>
                    <div class="flex space-x-3">
                        <a href="{{ route('price-records.show', $priceRecord) }}"
                            class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400">
                            Cancel
                        </a>
                        <button type="submit" class="bg-teal-600 text-white px-4 py-2 rounded-md hover:bg-teal-700">
                            Update Record
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <!-- Danger Zone -->
        <div class="mt-6 bg-white shadow rounded-lg overflow-hidden border border-red-200">
            <div class="px-6 py-4 border-b border-red-200 bg-red-50">
                <h2 class="text-lg font-medium text-red-800">Danger Zone</h2>
            </div>
            <div class="p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="text-sm font-medium text-gray-900">Delete this price record</h3>
                        <p class="text-sm text-gray-500">
                            Once deleted, this price record will be permanently removed from the system.
                        </p>
                    </div>
                    <form action="{{ route('price-records.destroy', $priceRecord) }}" method="POST"
                          onsubmit="return confirm('Are you sure you want to delete this price record? This action cannot be undone.')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700">
                            Delete Record
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Enable/disable postage fields based on radio selection
        document.addEventListener('DOMContentLoaded', function() {
            const postageOptionRadios = document.querySelectorAll('input[name="postage_option"]');
            const postagePriceInput = document.getElementById('postage_price');
            const pickupLocationInput = document.getElementById('self_pickup_location');

            function updatePostageFields() {
                const selectedOption = document.querySelector('input[name="postage_option"]:checked').value;

                if (selectedOption === 'add_on') {
                    postagePriceInput.disabled = false;
                    postagePriceInput.required = true;
                    pickupLocationInput.disabled = true;
                    pickupLocationInput.required = false;
                } else if (selectedOption === 'self_pickup') {
                    postagePriceInput.disabled = true;
                    postagePriceInput.required = false;
                    pickupLocationInput.disabled = false;
                    pickupLocationInput.required = true;
                } else {
                    // included
                    postagePriceInput.disabled = true;
                    postagePriceInput.required = false;
                    pickupLocationInput.disabled = true;
                    pickupLocationInput.required = false;
                }
            }

            postageOptionRadios.forEach(radio => {
                radio.addEventListener('change', updatePostageFields);
            });

            // Initialize on page load
            updatePostageFields();
        });
    </script>
@endsection