@extends('voyager::master')

@section('page_title', 'Producto')




@section('page_header')
    <div class="d-flex justify-between items-center" style="margin: 0px 20px;">
        <div class="d-flex header-title">
            <img src="../../../assets/img/iconos/caja.webp" alt="">
            <h1 class="page-title">
                Articulo: [{{ $product->codigo }}] - {{ $product->articulo }}
            </h1>
        </div>
        <div class="btn-group"
            style="display: flex; justify-content: center; gap: 5px; align-items: center; margin-right: 30px;">
            <a href="/admin/stock-articulos" class="btn btn-warning btn-add-new">
                <i class="voyager-double-left"></i>
                <span>Volver atras</span>
            </a>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" style="margin: 0px !important;" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    Acciones disponibles
                </button>
                <ul class="dropdown-menu" style="margin: 0px !important; background: #fff !important">
                    <li>
                        <a class="dropdown-item" href="/admin/product/{{ $product->id }}/edit"
                            style="display: flex; justify-content: start; align-items: center; gap: 5px;">
                            <img src="../../../assets/img/iconos/editar.webp" alt="">
                            Editar
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-tabs" id="productTabs" role="tablist">
                    <li class="nav-item active">
                        <a class="nav-link active" id="general-tab" data-toggle="tab" href="#general" role="tab"
                            aria-controls="general" aria-selected="true">General</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="empaque-tab" data-toggle="tab" href="#empaque" role="tab"
                            aria-controls="empaque" aria-selected="false">Lista de precios</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="inventario-tab" data-toggle="tab" href="#inventario" role="tab"
                            aria-controls="inventario" aria-selected="false">Inventario</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tienda-tab" data-toggle="tab" href="#tienda" role="tab"
                            aria-controls="tienda" aria-selected="false">Tienda</a>
                    </li>
                    <!-- Agrega más pestañas según sea necesario -->
                    <li class="nav-item">
                        <!-- cargar imagen -->
                        <a class="nav-link" id="imagen-tab" data-toggle="tab" href="#imagen" role="tab"
                            aria-controls="imagen" aria-selected="false">Cargar Imagen</a>
                    </li>
                </ul>
                <div class="tab-content" id="productTabsContent">
                    <div class="tab-pane fade active in" id="general" role="tabpanel" aria-labelledby="general-tab">
                        <!-- Contenido de la pestaña General -->
                        <div class="card mt-3" style="width: 70%;">
                            <div class="card-body">
                                <h5 class="card-title" style="border-bottom: 1px solid #ccc;">General</h5>
                                <div style="margin-left: 50px;">
                                    <p class="card-text" style="border-bottom: 1px solid #ccc;">Tipo: Bienes</p>