@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <h3 class="text-2xl font-semibold text-gray-800 mb-6">
        Create Production Cost Factor
    </h3>

    @if ($errors->any())
        <div class="mb-4 p-4 bg-red-100 border border-red-300 text-red-700 rounded-lg">
            <ul class="list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('production-cost-factors.store') }}" class="space-y-6 bg-white p-6 rounded-xl shadow-md">
        @csrf

        <!-- Module -->
        <div>
            <label class="block text-gray-700 font-medium mb-2">Module</label>
            <select name="module_id" class="w-full border border-gray-300 rounded-lg p-2 focus:ring focus:ring-blue-200 focus:outline-none">
                @foreach ($modules as $module)
                    <option value="{{ $module->id }}">
                        {{ $module->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Sign Type -->
        <div>
            <label class="block text-gray-700 font-medium mb-2">Sign Type</label>
            <select name="sign_type_id" class="w-full border border-gray-300 rounded-lg p-2 focus:ring focus:ring-blue-200 focus:outline-none">
                @foreach ($signTypes as $signType)
                    <option value="{{ $signType->id }}">
                        {{ $signType->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Factor -->
        <div>
            <label class="block text-gray-700 font-medium mb-2">Factor</label>
            <input type="number" step="0.01" name="factor" required
                   class="w-full border border-gray-300 rounded-lg p-2 focus:ring focus:ring-blue-200 focus:outline-none">
        </div>

        <!-- Submit Button -->
        <div class="flex items-center space-x-4">
            <button type="submit"
                    class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow transition">
                Save
            </button>

            <a href="{{ route('production-cost-factors.index') }}"
               class="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-lg shadow transition">
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection