@extends('layout.backoffice')
@section('content')
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs flex-column flex-sm-row" id="custom-tabs-four-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#tab-costos-actuales" role="tab" aria-controls="tab-costos-actuales" aria-selected="true">
                        Costo de envío actual
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-categorias" role="tab" aria-controls="tab-categorias" aria-selected="false">
                        Importación masiva
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-imagenes" role="tab" aria-controls="tab-imagenes" aria-selected="false">
                        Configuraciones
                    </a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content" id="custom-tabs-four-tabContent">
                <div class="tab-pane fade show active" id="tab-costos-actuales" role="tabpanel">
                    <div class="row">
                        @include('page.administrar.envio_costo.listado_general')
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-categorias" role="tabpanel">
                    <div class="row">
                        @include('page.administrar.envio_costo.importar_masivamente')
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-imagenes" role="tabpanel">
                    <div class="row">
                        @include('page.administrar.envio_costo.configuraciones', ['codigo' => 'envio_gratis'])
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        #tabla-precios-fletes td:first-child,
        #tabla-precios-fletes th:first-child {
            text-align: left !important;
            width: 1%;
            white-space: nowrap;
            padding-right: 20px;
        }
    </style>
@endsection