@extends('admin.layout')
@section('content')

<header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
    <div class="container-xl px-4">
        <div class="page-header-content">
            <div class="row align-items-center justify-content-between pt-3">
                <div class="col-auto mb-3">
                    <h1 class="page-header-title">
                        <div class="page-header-icon"><i data-feather="briefcase"></i></div>
                        Información de la Empresa
                    </h1>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container-xl px-4 mt-4">
    <div class="row">
        <!-- Columna del logo -->
        <div class="col-xl-4 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-light fw-bold">Logo de la Empresa</div>
                <div class="card-body text-center d-flex flex-column justify-content-center">
                    <img id="img_logo" class="img-fluid rounded border mb-3" src="" alt="Logo de la empresa" style="max-width: 100%; height: auto;">
                    <div class="text-muted small">
                        JPG o PNG, máx. 2 MB<br>
                        <strong>Medidas recomendadas: 500 x 200 px</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- Columna del formulario -->
        <div class="col-xl-8 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light fw-bold">Detalles de la Empresa</div>
                <div class="card-body">
                    <form id="form_info" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label" for="razon_social">Razón Social</label>
                            <input type="text" id="razon_social" name="razon_social" class="form-control" placeholder="Ingrese la razón social" value="{{ $empresa->razon_social }}">
                        </div>

                        <div class="row gx-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label" for="idpais">País</label>
                                <select id="idpais" name="idpais" class="form-select">
                                    @foreach ($paises as $item)
                                        <option value="{{ $item->id }}" {{ $item->id == $empresa->idpais ? 'selected' : '' }}>{{ $item->descripcion }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="telefono">Teléfono</label>
                                <input type="tel" id="telefono" name="telefono" class="form-control" placeholder="Ingrese el teléfono" value="{{ $empresa->telefono }}">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="direccion">Dirección</label>
                            <input type="text" id="direccion" name="direccion" class="form-control" placeholder="Ingrese la dirección" value="{{ $empresa->direccion }}">
                        </div>

                        <div class="mb-4">
                            <label class="form-label" for="logo">Cargar nuevo logo</label>
                            <input type="file" id="logo" name="logo" class="form-control">
                        </div>

                        <button class="btn btn-success btn-save d-flex align-items-center justify-content-center" type="submit">
                            <span class="btn-text me-2">Guardar cambios</span>
                            <span class="btn-loader d-none"><i class="fas fa-spinner fa-spin"></i></span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    @include('admin.business.js-home')
@endsection