@extends('layouts.app')

@section('title', 'Create 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">Create Price Record</h1>
            <p class="text-gray-600">Add a new supplier price reference</p>
        </div>

        <form action="{{ route('price-records.store') }}" method="POST">
            @csrf

            <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', request('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', date('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') }}"
                                    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') }}</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', 1) }}"
                                    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') == 'pcs' ? 'selected' : '' }}>Pieces (pcs)</option>
                                    <option value="box" {{ old('uom') == 'box' ? 'selected' : '' }}>Box</option>
                                    <option value="set" {{ old('uom') == 'set' ? 'selected' : '' }}>Set</option>
                                    <option value="sqft" {{ old('uom') == 'sqft' ? 'selected' : '' }}>Square Feet (sqft)</option>
                                    <option value="sqm" {{ old('uom') == 'sqm' ? 'selected' : '' }}>Square Meter (sqm)</option>
                                    <option value="roll" {{ old('uom') == 'roll' ? 'selected' : '' }}>Roll</option>
                                    <option value="meter" {{ old('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') }}"
                                    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') }}"
                                    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') == 'mm' ? 'selected' : '' }}>Millimeter (mm)</option>
                                <option value="cm" {{ old('dimension_unit') == 'cm' ? 'selected' : '' }}>Centimeter (cm)</option>
                                <option value="m" {{ old('dimension_unit') == 'm' ? 'selected' : '' }}>Meter (m)</option>
                                <option value="ft" {{ old('dimension_unit') == 'ft' ? 'selected' : '' }}>Feet (ft)</option>
                                <option value="inch" {{ old('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') }}"
                                        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', 'included') == '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') == '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') }}"
                                                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') != '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') == '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') }}"
                                            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') != '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') }}</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-end space-x-3">
                    <a href="{{ route('price-records.index') }}"
                        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">
                        Create Price Record
                    </button>
                </div>
            </div>
        </form>
    </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;
                    pickupLocationInput.value = '';
                } else if (selectedOption === 'self_pickup') {
                    postagePriceInput.disabled = true;
                    postagePriceInput.required = false;
                    postagePriceInput.value = '';
                    pickupLocationInput.disabled = false;
                    pickupLocationInput.required = true;
                } else {
                    // included
                    postagePriceInput.disabled = true;
                    postagePriceInput.required = false;
                    postagePriceInput.value = '';
                    pickupLocationInput.disabled = true;
                    pickupLocationInput.required = false;
                    pickupLocationInput.value = '';
                }
            }

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

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

    <style>
        .focus\:border-teal-500:focus {
            border-color: #0d9488;
        }
        .focus\:ring-teal-500:focus {
            --tw-ring-color: rgba(13, 148, 136, 0.5);
        }
        .text-teal-600 {
            color: #0d9488;
        }
    </style>
@endsection