@csrf

<div class="row g-4">

    <div class="col-md-6">
        <label class="form-label">Empresa</label>
        <select name="client_id" class="form-select @error('client_id') is-invalid @enderror" required>
            <option value="">Selecciona una empresa</option>
            @foreach ($clients as $c)
                <option value="{{ $c->id }}"
                    {{ old('client_id', $tariff->client_id ?? request('client_id')) == $c->id ? 'selected' : '' }}>
                    {{ $c->business_name ?: $c->contact_name }} ({{ $c->rut }})
                </option>
            @endforeach
        </select>
        @error('client_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Servicio</label>
        <select name="service_id" id="service-select" class="form-select @error('service_id') is-invalid @enderror" required>
            <option value="">Selecciona un servicio</option>
            @foreach ($services as $s)
                <option value="{{ $s->id }}" data-base-price="{{ $s->base_price_per_kg }}"
                    {{ old('service_id', $tariff->service_id ?? request('service_id')) == $s->id ? 'selected' : '' }}>
                    {{ $s->name }} ({{ $s->serviceLineLabel() }})
                </option>
            @endforeach
        </select>
        <div class="form-text">
            Precio base de este servicio: $<span id="base-price-hint">0</span> —
            si no defines un precio aquí, la empresa pagará ese valor.
        </div>
        @error('service_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Precio por kg para esta empresa</label>
        <div class="input-group">
            <span class="input-group-text">$</span>
            <input type="number" step="0.01" name="price_per_kg"
                   class="form-control @error('price_per_kg') is-invalid @enderror"
                   value="{{ old('price_per_kg', $tariff->price_per_kg ?? '') }}" placeholder="0.00" required>
        </div>
        @error('price_per_kg')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Vigente desde</label>
        <input type="date" name="valid_from" class="form-control @error('valid_from') is-invalid @enderror"
               value="{{ old('valid_from', optional($tariff->valid_from ?? null)->format('Y-m-d') ?? now()->format('Y-m-d')) }}" required>
        @error('valid_from')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Vigente hasta</label>
        <input type="date" name="valid_to" class="form-control @error('valid_to') is-invalid @enderror"
               value="{{ old('valid_to', optional($tariff->valid_to ?? null)->format('Y-m-d')) }}">
        <div class="form-text">Vacío = sin fecha de término.</div>
        @error('valid_to')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
    </div>

</div>

<div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
    <a href="{{ route('tariffs.index') }}" class="btn btn-outline-secondary">Cancelar</a>
    <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-lg me-1"></i> Guardar precio
    </button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const serviceSelect = document.getElementById('service-select');
    const hint = document.getElementById('base-price-hint');

    function sync() {
        const opt = serviceSelect.options[serviceSelect.selectedIndex];
        hint.textContent = opt?.dataset.basePrice ?? '0';
    }

    serviceSelect.addEventListener('change', sync);
    sync();
});
</script>