@extends('layouts.themed-app')

@section('title', 'Company Setup')
@section('subtitle', 'Complete your company information to get started')

    <style>
        .form-section {
            background: white;
            border: 1px solid #E5E7EB;
            border-radius: 0.75rem;
            padding: 2rem;
            max-width: 600px;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group:last-child {
            margin-bottom: 0;
        }

        .form-label {
            display: block;
            font-weight: 600;
            color: #1F2937;
            margin-bottom: 0.5rem;
            font-size: 0.9375rem;
        }

        .form-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #E5E7EB;
            border-radius: 0.75rem;
            font-family: inherit;
            font-size: 1rem;
            transition: border-color 0.3s ease;
            background: white;
        }

        .form-input:focus {
            outline: none;
            border-color: #003D7A;
            box-shadow: 0 0 0 3px rgba(0, 61, 122, 0.1);
        }

        .form-input.error {
            border-color: #EF4444;
        }

        .form-hint {
            display: block;
            font-size: 0.875rem;
            color: #6B7280;
            margin-top: 0.5rem;
        }

        .form-error {
            display: block;
            color: #EF4444;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            font-weight: 500;
        }

        .submit-btn {
            width: 100%;
            padding: 0.875rem 1.5rem;
            background-color: #003D7A;
            color: white;
            border: none;
            border-radius: 0.75rem;
            font-size: 1.125rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 2rem;
        }

        .submit-btn:hover {
            background-color: #002651;
            box-shadow: 0 10px 15px -3px rgba(0, 61, 122, 0.2);
            transform: translateY(-2px);
        }

        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        @media (max-width: 640px) {
            .grid-2 {
                grid-template-columns: 1fr;
            }

            .form-section {
                padding: 1.5rem;
            }
        }
    </style>

    <div class="form-section">
        <div style="margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid #E5E7EB;">
            <h2 style="color: #003D7A; font-size: 1.5rem; margin: 0 0 0.5rem 0;">Tell us about your company</h2>
            <p style=" color: #6B7280; margin: 0; font-size: 0.875rem;">Please provide your official business details for compliance and verification.</p>
        </div>

        <form method="POST" action="{{ route('owner.companies.store') }}" novalidate>
            @csrf

            <!-- Company Name -->
            <div class="form-group">
                <label for="name" class="form-label">Company Name *</label>
                <input type="text" id="name" name="name" value="{{ old('name') }}" required autofocus
                       class="form-input @error('name') error @enderror"
                       placeholder="e.g., ABC Trucking LLC" />
                @error('name')
                    <span class="form-error">{{ $message }}</span>
                @enderror
                <span class="form-hint">Your official business legal name</span>
            </div>

            <!-- MC Number & DOT Number -->
            <div class="grid-2">
                <div class="form-group">
                    <label for="mc_number" class="form-label">MC Number *</label>
                    <input type="text" id="mc_number" name="mc_number" value="{{ old('mc_number') }}" required
                           class="form-input @error('mc_number') error @enderror"
                           placeholder="e.g., MC-123456" />
                    @error('mc_number')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                    <span class="form-hint">Motor Carrier Number from FMCSA</span>
                </div>

                <div class="form-group">
                    <label for="dot_number" class="form-label">DOT Number *</label>
                    <input type="text" id="dot_number" name="dot_number" value="{{ old('dot_number') }}" required
                           class="form-input @error('dot_number') error @enderror"
                           placeholder="e.g., 12345678" />
                    @error('dot_number')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                    <span class="form-hint">Department of Transportation Number</span>
                </div>
            </div>

            <!-- Business Address -->
            <div class="form-group">
                <label for="address" class="form-label">Business Address *</label>
                <textarea id="address" name="address" required rows="3"
                          class="form-input @error('address') error @enderror"
                          placeholder="Street Address, City, State, ZIP">{{ old('address') }}</textarea>
                @error('address')
                    <span class="form-error">{{ $message }}</span>
                @enderror
                <span class="form-hint">Your main business location</span>
            </div>

            <!-- Phone Number -->
            <div class="form-group">
                <label for="phone" class="form-label">Business Phone *</label>
                <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" required
                       class="form-input @error('phone') error @enderror"
                       placeholder="e.g., +1 (555) 123-4567" />
                @error('phone')
                    <span class="form-error">{{ $message }}</span>
                @enderror
                <span class="form-hint">Primary contact phone number</span>
            </div>

            <!-- Info Box -->
            <div style="background-color: #F3F4F6; border: 1px solid #D1D5DB; border-radius: 0.75rem; padding: 1rem; margin: 2rem 0;">
                <p style="color: #374151; font-size: 0.875rem; margin: 0;">
                    <svg style="display: inline; width: 16px; height: 16px; margin-right: 0.5rem; vertical-align: -0.125em;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                    </svg>
                    <strong>Pro Tip:</strong> You can update this information anytime in your company settings.
                </p>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="submit-btn">
                Continue to Fleet Setup →
            </button>

            <!-- Back Link -->
            <div style="text-align: center; margin-top: 1rem;">
                <a href="/dashboard" style="color: #6B7280; text-decoration: none; font-size: 0.875rem;">
                    Back to Dashboard
                </a>
            </div>
        </form>
    </div>