@extends('adminlte::page')

@section('title', 'Almacenes')

@section('content_header')
    <h1>Dashboard</h1>
@endsection


@section('content')
    <div class="row">
        <div class="col-3 mb-4">
            <div id="searchStore">
                <form action="{{ Route('searchStore') }}" method="GET">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-10">
                                <input class="form-control" type="text" placeholder="Buscar almacen..." name="q">
                            </div>
                            <div class="col-2">
                                <button class="btn custom-hover-button" type="submit"><i class="bi bi-search"></i></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="addStore">
                <p class="text-bold">Agregue un nuevo almacen</p>
                <small>
                    @if ($stores->count() == 0)
                        Se necesita agregar almacenes para inventariar los productos
                    @else
                        Agrege nuevos almacenes donde estan los productos
                    @endif
                </small>
                <a href="" id="addStore" class="btn mt-2 btn-success w-100">Agregar nuevo almancen</a>
            </div>
        </div>

        <div class="col-9">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Almacenes existentes</h3>
                </div>
                <!-- ./card-header -->
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Nombre del almacen</th>
                                <th>Abreviación</th>
                                <th>Descripción</th>
                                <th>Productos vinculados</th>
                                <th>Tiempo de entrega (dias)</th>
                                <th>Mostrar</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- Actions --}}
                            @forelse($stores as $store)
                                <tr data-widget="expandable-table" aria-expanded="false" class="row-loading">
                                    <td>{{ $store->store_name }}</td>
                                    <td>{{ $store->abbr }}</td>
                                    <td>{{ $store->description }}</td>
                                    <td>
                                        @if ($store->productInstances->count() > 0)
                                            {{ $store->productInstances->count() }}
                                        @else
                                            <div>
                                                <p class="text-danger">Almacen sin productos.
                                                </p>
                                            </div>
                                        @endif
                                    </td>
                                    <td>{{ $store->delivery_time }}</td>
                                    <td>
                                        @if ($store->show == 1)
                                            Si
                                        @else
                                            No
                                        @endif
                                    </td>
                                </tr>
                                <tr class="expandable-body row-loading">
                                    <td colspan="7" disabled>
                                        <div class="d-flex mx-auto justify-content-around">
                                            <div class="row">
                                                <div class="col border">
                                                    <p class="mt-1">Actualizado por ultima vez:
                                                        {{ $store->updated_at }}</p>
                                                </div>
                                                <div class="col-mg border">
                                                    <a href="" class="btn btn-primary showStore m-1"
                                                        data-store-id="{{ $store->id }}">
                                                        Ver almacen</a>

                                                    <a href="" class="btn btn-warning draftStore mt-1"
                                                        data-store-id="{{ $store->id }}"
                                                        data-store-name="{{ $store->store_name }}"
                                                        data-store-show="{{ $store->show }}">
                                                        @if ($store->show == 1)
                                                            Ocultar almacen
                                                        @else
                                                            Mostrar almacen
                                                        @endif
                                                    </a>
                                                    <form id="showStore_{{ $store->id }}"
                                                        action="{{ route('draftStore') }}" method="POST">
                                                        @csrf
                                                        <input type="hidden" name="idShowStore"
                                                            value="{{ $store->id }}">
                                                    </form>

                                                    <a href="" class="btn btn-danger dropStore m-1"
                                                        data-store-id="{{ $store->id }}"
                                                        data-store-name="{{ $store->store_name }}">
                                                        Borrar almacen</a>

                                                    <form id="dropStore_{{ $store->id }}"
                                                        action="{{ route('dropStore') }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <input type="hidden" name="idDropStore"
                                                            value="{{ $store->id }}">
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td class="bg-secondary" colspan="3" align="center">Sin almacenes disponibles,
                                        agrege uno
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Add store --}}
    <div class="modal fade" id="storeModal" tabindex="-1" role="dialog" aria-labelledby="notLinkedModal"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-success" id="titleStoreModal">Nuevo almacen</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="storesForm" action="{{ Route('addStore') }}" method="post"
                        class="mt-3">
                        <input type="hidden" name="idModStore" id="idModStore" value="">
                        @csrf
                        <div class="row">
                            <div class="col-8">
                                <div class="form-group">
                                    <label for="name">Identificador:</label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                                        id="name" name="name" placeholder="Ingresa el nombre"
                                        value="{{ old('name') }}" minlength="3" maxlength="30" required>
                                    <span id="error-name" class="text-danger"></span>
                                    @if ($errors->has('name'))
                                        <span class="text-danger">{{ $errors->first('name') }}</span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label for="abbr">Abreviación del almacen:</label>
                                    <input type="text" class="form-control @error('abbr') is-invalid @enderror"
                                        id="abbr" name="abbr" placeholder="Ingresa el nombre"
                                        value="{{ old('abbr') }}" minlength="2" maxlength="3" required>
                                    <span id="error-abbr" class="text-danger"></span>
                                    @if ($errors->has('abbr'))
                                        <span class="text-danger">{{ $errors->first('abbr') }}</span>
                                    @endif
                                    <small class="helpText">Esto es necesario para poder identificar los productos en el
                                        inventario. Se
                                        recomienda que la
                                        abreviación sea como max 3 palabras y min 2</small>
                                </div>
                                <div class="form-group">
                                    <label for="description">Descripción:</label>
                                    <textarea class="form-control" name="description" id="description" rows="3" required></textarea>
                                    <span id="error-description" class="text-danger"></span>
                                    @if ($errors->has('description'))
                                        <span class="text-danger">{{ $errors->first('description') }}</span>
                                    @endif
                                    <small class="helpText">Es necesaria la descripcion para dar mas contexto de donde esta
                                        ubicado el
                                        almacen</small>
                                </div>
                                <div class="form-group">
                                    <label for="delivery">Tiempo de entrega (Aprox):</label>
                                    <input type="number" class="form-control @error('delivery') is-invalid @enderror"
                                        id="delivery" name="delivery" placeholder="Ingresa el nombre"
                                        value="{{ old('delivery') }}" minlength="2" maxlength="3" required>
                                    <span id="error-delivery" class="text-danger"></span>
                                    @if ($errors->has('delivery'))
                                        <span class="text-danger">{{ $errors->first('delivery') }}</span>
                                    @endif
                                    <small class="helpText">Determina el tiempo de entrega para el cliente mientras pasa de
                                        un almacen hasta
                                        el
                                        destino</small>
                                </div>
                                <div class="form-group">
                                    <label for="name">Mapa donde esta ubicado (opcional):</label>
                                    <input type="text" class="form-control @error('iframeMap') is-invalid @enderror"
                                        id="iframeMap" name="iframeMap" placeholder="Ingresa el iframe"
                                        value="{{ old('iframeMap') }}" minlength="3">
                                    <span id="error-iframeMap" class="text-danger"></span>
                                    @if ($errors->has('iframeMap'))
                                        <span class="text-danger">{{ $errors->first('iframeMap') }}</span>
                                    @endif
                                    <small class="helpText">
                                        <span class="text-bold">Nota:</span> Tiene que ingresar el iframe exacto
                                        proveeido por aplicacion de navegación (por ejemplo Google Maps).
                                        Dimensiones recomendadas. width="600" height="400"
                                    </small>
                                    <div id="showIframe" class="ratio ratio-16x9" style="display: none;">
                                        <small>Vista previa del iframe</small>
                                        <div id="iframe"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4 border-left">
                                <div class="form-group">
                                    <h5 class="text-bold">Datos del almacen</h5>
                                    <small class="helpText">Ingrese la ubicación del almacen</small>
                                </div>
                                <div class="row">
                                    <div class="col-8">
                                        <div class="form-group">
                                            <label for="name">Dirección:</label>
                                            <input type="text"
                                                class="form-control @error('street') is-invalid @enderror" id="street"
                                                name="street" placeholder="Calle de ejemplo"
                                                value="{{ old('street') }}" minlength="3" maxlength="30" required>
                                            <span id="error-street" class="text-danger"></span>
                                            @if ($errors->has('street'))
                                                <span class="text-danger">{{ $errors->first('street') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-group">
                                            <label for="name">Numero:</label>
                                            <input type="text"
                                                class="form-control @error('number') is-invalid @enderror" id="number"
                                                name="number" placeholder="#" value="{{ old('number') }}"
                                                minlength="3" maxlength="30" required>
                                            <span id="error-number" class="text-danger"></span>
                                            @if ($errors->has('number'))
                                                <span class="text-danger">{{ $errors->first('number') }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="name">Municipio o delegación:</label>
                                    <input type="text" class="form-control @error('city') is-invalid @enderror"
                                        id="city" name="city" placeholder="Ingresa el municipio"
                                        value="{{ old('city') }}" minlength="3" maxlength="30" required>
                                    <span id="error-city" class="text-danger"></span>
                                    @if ($errors->has('city'))
                                        <span class="text-danger">{{ $errors->first('city') }}</span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label for="name">Estado:</label>
                                    <div class="row">
                                        <div class="col-8" id="stateSelect">
                                            <select class="form-control @error('state') is-invalid @enderror"
                                                id="state" name="state" placeholder="Ingresa el estado"
                                                value="{{ $address->state ?? old('state') }}" required>
                                                <option value="" selected disabled>Selecciona una opción</option>
                                                <option value="AG">Aguascalientes</option>
                                                <option value="BC">Baja California</option>
                                                <option value="BS">Baja California Sur</option>
                                                <option value="CM">Campeche</option>
                                                <option value="CS">Chiapas</option>
                                                <option value="CH">Chihuahua</option>
                                                <option value="DF">Ciudad de México</option>
                                                <option value="CO">Coahuila</option>
                                                <option value="CL">Colima</option>
                                                <option value="DG">Durango</option>
                                                <option value="GT">Guanajuato</option>
                                                <option value="GR">Guerrero</option>
                                                <option value="HG">Hidalgo</option>
                                                <option value="JA">Jalisco</option>
                                                <option value="EM">Estado de México</option>
                                                <option value="MI">Michoacán</option>
                                                <option value="MO">Morelos</option>
                                                <option value="NA">Nayarit</option>
                                                <option value="NL">Nuevo León</option>
                                                <option value="OA">Oaxaca</option>
                                                <option value="PU">Puebla</option>
                                                <option value="QT">Querétaro</option>
                                                <option value="QR">Quintana Roo</option>
                                                <option value="SL">San Luis Potosí</option>
                                                <option value="SI">Sinaloa</option>
                                                <option value="SO">Sonora</option>
                                                <option value="TB">Tabasco</option>
                                                <option value="TM">Tamaulipas</option>
                                                <option value="TL">Tlaxcala</option>
                                                <option value="VE">Veracruz</option>
                                                <option value="YU">Yucatán</option>
                                                <option value="ZA">Zacatecas</option>
                                            </select>
                                        </div>
                                        <div class="col-4 p-2">
                                            <input type="checkbox" name="otherCountry" id="otherCountry">
                                            <label for="otherCountry">Otro pais</label>
                                        </div>
                                    </div>
                                    <span id="error-state" class="text-danger"></span>
                                    @if ($errors->has('state'))
                                        <span class="text-danger">{{ $errors->first('state') }}</span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label for="name">País (Abreviación):</label>
                                    <input type="text" class="form-control @error('country') is-invalid @enderror"
                                        id="country" name="country" placeholder="MX" value="{{ old('country') }}"
                                        minlength="2" maxlength="2" required>
                                    <span id="error-country" class="text-danger"></span>
                                    @if ($errors->has('country'))
                                        <span class="text-danger">{{ $errors->first('country') }}</span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label for="name">Codigo postal:</label>
                                    <input type="text" class="form-control @error('postalCode') is-invalid @enderror"
                                        id="postalCode" name="postalCode" placeholder="#####"
                                        value="{{ old('postalCode') }}" minlength="5" maxlength="5" required>
                                    <span id="error-postalCode" class="text-danger"></span>
                                    @if ($errors->has('postalCode'))
                                        <span class="text-danger">{{ $errors->first('postalCode') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="submitStore">Crear almacen</button>
                    <button type="button" class="btn btn-info" id="modStore">Modificar almacen</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Mod store --}}
    <div class="modal fade" id="modStoreModal" tabindex="-1" role="dialog" aria-labelledby="notLinkedModal"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-warning" id="notLinkedModal">Modificar almacen</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off" id="modStoreForm" action="{{ Route('modStore') }}" method="post">
                        @csrf
                        <input type="hidden" name="idModStore" id="idModStore" value="">
                        <input type="hidden" id="nameModStore" value="">
                        <div class="mb-3 form-group">
                            <label for="storeName" class="form-label">Identificador del almacen</label>
                            <input type="text" class="form-control" name="storeName" id="storeName"
                                placeholder="Ingresa el nuevo nombre" required>
                            <small id="helpId" class="form-text text-muted">Ingresa el nuevo nombre o deja el
                                anterior</small>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="storeDescription" class="form-label">Descripción</label>
                            <textarea class="form-control" name="description" id="storeDescription" rows="3"></textarea>
                            <small id="helpId" class="form-text text-muted">Ingresa nueva descripcion o deja el
                                anterior</small>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="abbr">Abreviación del almacen:</label>
                            <input type="text" class="form-control @error('abbr') is-invalid @enderror"
                                id="storeAbbr" name="abbr" placeholder="Ingresa el nombre"
                                value="{{ old('abbr') }}" minlength="2" maxlength="3" required>
                            <small>Esto es necesario para poder identificar los productos en el inventario. Se recomienda
                                que la
                                abreviación sea como max 3 palabras y min 2</small>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="delivery">Tiempo de entrega:</label>
                            <input type="number" class="form-control @error('delivery') is-invalid @enderror"
                                id="storeDelivery" name="delivery" placeholder="Ingresa el nombre"
                                value="{{ old('delivery') }}" minlength="2" maxlength="3" required>
                            <small>Determina el tiempo de entrega para el cliente mientras pasa de un almacen hasta el
                                destino</small>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-warning" id="submitFormStore">Hacer
                                cambios</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @vite('resources/js/inventories/stores/addStore.js')
    @vite('resources/js/inventories/stores/modStore.js')
    @vite('resources/js/inventories/stores/dropStore.js')
    @vite('resources/js/inventories/stores/draftStore.js')
@endsection