<div>

    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="muduleTitle">
            <h1>{{ __('Proveedores') }}</h1>
        </div>
        <div class="inputTitle">
            <input type="text" class="inputSearch" wire:model="search">
            <button class="btn " wire:click="$toggle('imputActive')"><i class="fa fa-plus"></i>Añadir Proveedor</button>
        </div>
    </div>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        @if($imputActive or $updateMode)
            <div class="flex w-full">
                <div class="dataBox">
                    <div class="rowBox">
                        <div class="labelBox">
                            Nombre o Razon Social
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Nombre" class="form-control" wire:model.defer="name"
                            style="margin-right:5px;">
                            <input type="hidden" wire:model.defer="supplier_id">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Nombre fantasia
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Nombre Fantasia" class="form-control" wire:model.defer="fantasyName"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Provincia
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Provincia" class="form-control" wire:model.defer="province"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Localidad
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Localidad" class="form-control" wire:model.defer="locate"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Dirección
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Direccion" class="form-control" wire:model.defer="address"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Contacto 1
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Contacto" class="form-control" wire:model.defer="contactOne"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Telefono 1
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Telefono" class="form-control" wire:model.defer="phoneOne"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Contacto 2
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Contacto" class="form-control" wire:model.defer="contactTwo"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Telefono 2
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Telefono" class="form-control" wire:model.defer="phoneTwo"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Email
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="email@email.com" class="form-control" wire:model.defer="email"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Sitio Web
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="www.tusitio.com" class="form-control" wire:model.defer="web"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Cuit
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Cuit o Cuil" class="form-control" wire:model.defer="cuit"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Condición
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Nombre" class="form-control" wire:model.defer="condition"
                            style="margin-right:5px;">
                        </div>
                    </div>
                </div>
                <div class="dataBox dataBox--top dataBox--marginLeft">
                    <div class="rowBox">
                        <div class="labelBox labelBox--full">
                            Observaciones
                        </div>
                    </div>
                    <div class="rowBox rowBox--big">
                        <textarea wire:model.defer="observations">

                        </textarea>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox--full">
                            <button class="btn" wire:click="save">
                                <i class="fa fa-save"></i>Guardar
                            </button>
                            <button class="btn" wire:click="resetInput">
                                <i class="fa fa-trash"></i>Cancelar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="flex w-full">
                <table class="quamaqTable">
                    <thead>
                        <th>Nombre/Razón Social</th>
                        <th>Mail</th>
                        <th>Teléfono</th>
                        <th>Localidad</th>
                        <th></th>
                    </thead>
                    <tbody>
                        @foreach($data as $supplier)
                        <tr>
                            <td>{{ $supplier->name }}</td>
                            <td>{{ $supplier->email }}</td>
                            <td>{{ $supplier->phoneOne }}</td>
                            <td>{{ $supplier->locate }}</td>
                            <td>
                                <img src="{{ asset('/storage/images/edit.jpg') }}" wire:click="edit({{ $supplier->id }})">
                                <img src="{{ asset('/storage/images/trash.jpg') }}" wire:click="destroy({{ $supplier->id }})">
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
                <x-welcome />
            </div> -->
        @endif
        </div>

    </div>
</div>
