@extends('layouts.app')
@section('content')
<style>
	.card-animate {
		animation: fadeInUp .7s cubic-bezier(.39,.575,.565,1) both;
	}
	@keyframes fadeInUp {
		0% { opacity: 0; transform: translateY(40px); }
		100% { opacity: 1; transform: none; }
	}
	.btn-primary {
		transition: box-shadow 0.2s, transform 0.2s;
	}
	.btn-primary:hover, .btn-primary:focus {
		box-shadow: 0 4px 16px 0 rgba(33, 150, 243, 0.15);
		transform: translateY(-2px) scale(1.03);
	}
</style>
<div class="container">
	<div class="row justify-content-center">
		<div class="col-lg-9">
			<div class="card shadow-sm card-animate">
				<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
					<span><i class="bi bi-person-plus"></i> Crear proveedor</span>
					<a href="{{ route('admin_fit.supplier.index') }}" class="btn btn-sm btn-light text-primary fw-semibold">
						<i class="bi bi-chevron-left"></i> Volver
					</a>
				</div>
				<div class="card-body bg-white">
					@if ($errors->any())
						<div class="alert alert-danger">
							<ul class="mb-0">
								@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								@endforeach
							</ul>
						</div>
					@endif

					<form method="POST" action="{{ route('admin_fit.supplier.store') }}" autocomplete="off">
						@csrf

						<div class="row g-3">
							<div class="col-md-8">
								<label for="supplier_name" class="form-label fw-semibold">Nombre del proveedor <span class="text-danger">*</span></label>
								<input type="text" id="supplier_name" name="supplier_name" class="form-control border-primary @error('supplier_name') is-invalid @enderror" value="{{ old('supplier_name') }}" required maxlength="255" autofocus>
								@error('supplier_name')
									<div class="invalid-feedback">{{ $message }}</div>
								@enderror
							</div>

							<div class="col-md-4">
								<label for="rif" class="form-label">RIF</label>
								<input type="text" id="rif" name="rif" class="form-control border-primary @error('rif') is-invalid @enderror" value="{{ old('rif') }}" maxlength="50">
								@error('rif')
									<div class="invalid-feedback">{{ $message }}</div>
								@enderror
							</div>

							<div class="col-md-6">
								<label for="contact_name" class="form-label">Nombre de contacto</label>
								<input type="text" id="contact_name" name="contact_name" class="form-control border-primary @error('contact_name') is-invalid @enderror" value="{{ old('contact_name') }}" maxlength="255">
								@error('contact_name')
									<div class="invalid-feedback">{{ $message }}</div>
								@enderror
							</div>

							<div class="col-md-6">
								<label for="phone" class="form-label">Teléfono</label>
								<input type="text" id="phone" name="phone" class="form-control border-primary @error('phone') is-invalid @enderror" value="{{ old('phone') }}" maxlength="50">
								@error('phone')
									<div class="invalid-feedback">{{ $message }}</div>
								@enderror
							</div>

							<div class="col-12">
								<label for="email" class="form-label">Correo electrónico</label>
								<input type="email" id="email" name="email" class="form-control border-primary @error('email') is-invalid @enderror" value="{{ old('email') }}" maxlength="255">
								@error('email')
									<div class="invalid-feedback">{{ $message }}</div>
								@enderror
							</div>

							<div class="col-12">
								<label for="note" class="form-label">Nota</label>
								<textarea id="note" name="note" class="form-control border-primary @error('note') is-invalid @enderror" rows="4" maxlength="1000">{{ old('note') }}</textarea>
								@error('note')
									<div class="invalid-feedback">{{ $message }}</div>
								@enderror
							</div>
						</div>

						<div class="d-flex justify-content-end mt-4">
							<button type="submit" class="btn btn-primary"><i class="bi bi-check-circle"></i> Guardar proveedor</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection