@extends('layouts.app')

@section('content')
    <div class="container my-5">
        <h2 class="mb-4">Conviértete en vendedor</h2>

        <form action="{{ Route('validateData') }}" method="POST" enctype="multipart/form-data">
            @csrf

            {{-- Personal Info --}}
            <div class="card mb-4 shadow-sm">
                <div class="card-header custom-bg-color text-white">Información personal</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="first_name" class="form-label">Nombre *</label>
                            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="Juan"
                                required @auth value="{{ Auth::guard('web')->user()->first_name }}" @endauth>
                        </div>
                        <div class="col-md-6">
                            <label for="last_name" class="form-label">Apellido *</label>
                            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Pérez"
                                required @auth value="{{ Auth::guard('web')->user()->last_name }}" @endauth>
                        </div>
                        <div class="col-md-6">
                            <label for="email" class="form-label">Correo electrónico *</label>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="juan@example.com" required
                                @auth value="{{ Auth::guard('web')->user()->email }}" @endauth>
                        </div>
                        <div class="col-md-6">
                            <label for="phone" class="form-label">Teléfono *</label>
                            <input type="text" class="form-control" id="phone" name="phone"
                                placeholder="442 123 4567" required
                                @auth value="{{ Auth::guard('web')->user()->phone_number }}" @endauth>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Shop Info --}}
            <div class="card mb-4 shadow-sm">
                <div class="card-header custom-bg-color text-white">Información de la tienda</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label for="store_name" class="form-label">Nombre de la tienda *</label>
                            <input type="text" class="form-control" id="store_name" name="store_name"
                                placeholder="Mi Tienda Ejemplo" required>
                        </div>
                        <div class="col-md-6">
                            <label for="vendor_email" class="form-label">Correo de la tienda *</label>
                            <input type="text" class="form-control" id="vendor_email" name="vendor_email"
                                placeholder="example@example.com" required>
                        </div>
                        <div class="col-md-6">
                            <label for="vendor_number" class="form-label">Numero de la tienda *</label>
                            <input type="text" class="form-control" id="vendor_number" name="vendor_number"
                                placeholder="442 123 4567" required>
                        </div>
                        <div class="col-md-6">
                            <label for="store_logo" class="form-label">Logo de la tienda *</label>
                            <input type="file" class="form-control" id="store_logo" name="store_logo" accept="image/*" required>
                        </div>
                        <div class="col-md-6">
                            <label for="store_banner" class="form-label">Banner de la tienda *</label>
                            <input type="file" class="form-control" id="store_banner" name="store_banner"
                                accept="image/*" required>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div id="contactInformation" class="card mb-4 shadow-sm" data-target-info="contactInformation">
                <div class="card-header custom-bg-color text-white">Domicilio</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">País</label>
                            <input type="text" name="country"
                                class="form-control @error('country') is-invalid @enderror" maxlength="100"
                                placeholder="País donde se encuentra la empresa" value="{{ old('country') }}" required>
                            @error('country')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Código Postal</label>
                            <input type="text" name="postal_code"
                                class="form-control @error('postal_code') is-invalid @enderror" pattern="\d{4,10}"
                                title="Código postal no válido" placeholder="Código postal"
                                value="{{ old('postal_code') }}" required>
                            @error('postal_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Ciudad</label>
                            <input type="text" name="city" class="form-control @error('city') is-invalid @enderror"
                                maxlength="100" placeholder="Ciudad" value="{{ old('city') }}" required>
                            @error('city')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            @php
                                $states = [
                                    'Aguascalientes',
                                    'Baja California',
                                    'Baja California Sur',
                                    'Campeche',
                                    'Chiapas',
                                    'Chihuahua',
                                    'Ciudad de México',
                                    'Coahuila',
                                    'Colima',
                                    'Durango',
                                    'Guanajuato',
                                    'Guerrero',
                                    'Hidalgo',
                                    'Jalisco',
                                    'Estado de México',
                                    'Michoacán',
                                    'Morelos',
                                    'Nayarit',
                                    'Nuevo León',
                                    'Oaxaca',
                                    'Puebla',
                                    'Querétaro',
                                    'Quintana Roo',
                                    'San Luis Potosí',
                                    'Sinaloa',
                                    'Sonora',
                                    'Tabasco',
                                    'Tamaulipas',
                                    'Tlaxcala',
                                    'Veracruz',
                                    'Yucatán',
                                    'Zacatecas',
                                ];
                            @endphp
                            <label class="form-label">Estado</label>
                            <select class="form-control @error('state') is-invalid @enderror" name="state" required>
                                <option value="" disabled selected>
                                    Selecciona un estado</option>
                                @foreach ($states as $state)
                                    <option value="{{ $state }}">{{ $state }}
                                    </option>
                                @endforeach
                            </select>
                            @error('state')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="row">
                                <div class="col-md-8">
                                    <label class="form-label">Calle</label>
                                    <input type="text" name="street"
                                        class="form-control @error('street') is-invalid @enderror" maxlength="150"
                                        placeholder="Calle" value="{{ old('street') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">#</label>
                                    <input type="text" name="number_address"
                                        class="form-control @error('number_address') is-invalid @enderror" maxlength="150"
                                        placeholder="123" value="{{ old('number_address') }}" required>
                                </div>
                                @error('street')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        {{-- <div class="col-md-4 mb-3">
                            <label class="form-label">Colonia</label>
                            <input type="text" name="colony"
                                class="form-control @error('colony') is-invalid @enderror" maxlength="100"
                                placeholder="Colonia" value="{{ old('colony') }}" required>
                            @error('colony')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div> --}}
                    </div>
                </div>
            </div>

            {{-- Payment Details --}}
            <div class="card mb-4 shadow-sm">
                <div class="card-header custom-bg-color text-white">Métodos de pago</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="bank_name" class="form-label">Banco *</label>
                            <input type="text" class="form-control" id="bank_name" name="bank_name"
                                placeholder="BBVA" required>
                        </div>
                        <div class="col-md-6">
                            <label for="account_number" class="form-label">Número de cuenta *</label>
                            <input type="text" class="form-control" id="account_number" name="account_number"
                                placeholder="0123456789" required>
                        </div>
                        <div class="col-md-12">
                            <label for="account_holder" class="form-label">Titular de la cuenta *</label>
                            <input type="text" class="form-control" id="account_holder" name="account_holder"
                                placeholder="Juan Pérez" required>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Social Network --}}
            <div class="card mb-4 shadow-sm">
                <div class="card-header custom-bg-color text-white">Redes sociales (opcional)</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="facebook" class="form-label">Facebook</label>
                            <input type="url" class="form-control" id="facebook" name="facebook"
                                placeholder="https://facebook.com/mi-tienda">
                        </div>
                        <div class="col-md-6">
                            <label for="instagram" class="form-label">Instagram</label>
                            <input type="url" class="form-control" id="instagram" name="instagram"
                                placeholder="https://instagram.com/mi-tienda">
                        </div>
                        <div class="col-md-6">
                            <label for="twitter" class="form-label">Twitter</label>
                            <input type="url" class="form-control" id="twitter" name="twitter"
                                placeholder="https://twitter.com/mi-tienda">
                        </div>
                        <div class="col-md-6">
                            <label for="youtube" class="form-label">YouTube</label>
                            <input type="url" class="form-control" id="youtube" name="youtube"
                                placeholder="https://youtube.com/mi-tienda">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Terms and conditions --}}
            <div class="form-check mb-4">
                <input class="form-check-input" type="checkbox" value="" id="terms" required>
                <label class="form-check-label" for="terms">
                    Acepto los <a href="#">términos y condiciones</a> y la política de privacidad *
                </label>
            </div>

            {{-- Submit form --}}
            <div class="d-grid">
                <button type="submit" class="btn custom-bg-color">Enviar solicitud</button>
            </div>

        </form>
    </div>
@endsection