<?= $this->extend('themes/vuexy/main/presupuestos_layout') ?>

<?= $this->section('content'); ?>
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="faq-header d-flex flex-column justify-content-center align-items-center rounded">
        <h3 class="text-center">Presupuestos SAFEKAT</h3>
    </div>
    <div class="row mt-4">
        <!-- Navigation -->
        <div class="col-lg-3 col-md-4 col-12 mb-md-0 mb-3">
            <div class="d-flex justify-content-between flex-column mb-2 mb-md-0">
                <ul class="nav nav-align-left nav-pills flex-column">
                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#payment">
                            <i class="ti ti-credit-card me-1 ti-sm"></i>
                            <span class="align-middle fw-semibold">Libros</span>
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#delivery">
                            <i class="ti ti-briefcase me-1 ti-sm"></i>
                            <span class="align-middle fw-semibold">Item 2</span>
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#cancellation">
                            <i class="ti ti-rotate-clockwise-2 me-1 ti-sm"></i>
                            <span class="align-middle fw-semibold">Item 3</span>
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#orders">
                            <i class="ti ti-box me-1 ti-sm"></i>
                            <span class="align-middle fw-semibold">Item 4</span>
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#product">
                            <i class="ti ti-settings me-1 ti-sm"></i>
                            <span class="align-middle fw-semibold">Item N</span>
                        </button>
                    </li>
                </ul>

            </div>
        </div>
        <!-- /Navigation -->

        <!-- Presupuestos -->
        <div class="col-lg-9 col-md-8 col-12">
            <div class="tab-content py-0">
                <div class="tab-pane fade show active" id="payment" role="tabpanel">
                    <div class="d-flex mb-3 gap-3">
                        <div>
                          <span class="badge bg-label-primary rounded-2 p-2">
                            <i class="ti ti-credit-card ti-lg"></i>
                          </span>
                        </div>
                        <div>
                            <h4 class="mb-0">
                                <span class="align-middle">Libros</span>
                            </h4>
                            <small>Seleccione la tipología de libro</small>
                        </div>
                    </div>
                    <!-- Libros -->
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-1.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title"><a href="<?= site_url('presupuestos/presupuesto/tapa_blanda_encolada') ?>">Encuadernación encolada tapa blanda</a></h5>
                                            <p class="card-text">
                                                Este tipo de encuadernación de tapa blanda se destina a proyectos editoriales que buscan un acabado de calidad con buena presentación.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa blanda</h5>
                                            <p class="card-text">
                                                La encuadernación rústica hace referencia a los libros de tapa blanda.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <img class="card-img card-img-right" src="<?= site_url('themes/vuexy/img/safekat/libro-2.png') ?>" alt="Card image" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-3.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa dura</h5>
                                            <p class="card-text">
                                                La encuadernación con cartón o cartoné hace referencia a los libros cosidos de tapa dura.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Libros -->


                </div>
                <div class="tab-pane fade" id="delivery" role="tabpanel">
                    <div class="d-flex mb-3 gap-3">
                        <div>
                          <span class="badge bg-label-primary rounded-2 p-2">
                            <i class="ti ti-briefcase ti-lg"></i>
                          </span>
                        </div>
                        <div>
                            <h4 class="mb-0">
                                <span class="align-middle">Item 2</span>
                            </h4>
                            <small>Lorem ipsum, dolor sit amet.</small>
                        </div>
                    </div>
                    <!-- Libros -->
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-1.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación encolada tapa blanda</h5>
                                            <p class="card-text">
                                                Este tipo de encuadernación de tapa blanda se destina a proyectos editoriales que buscan un acabado de calidad con buena presentación.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa blanda</h5>
                                            <p class="card-text">
                                                La encuadernación rústica hace referencia a los libros de tapa blanda.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <img class="card-img card-img-right" src="<?= site_url('themes/vuexy/img/safekat/libro-2.png') ?>" alt="Card image" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-3.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa dura</h5>
                                            <p class="card-text">
                                                La encuadernación con cartón o cartoné hace referencia a los libros cosidos de tapa dura.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Libros -->
                </div>

                <div class="tab-pane fade" id="cancellation" role="tabpanel">
                    <div class="d-flex mb-3 gap-3">
                        <div>
                          <span class="badge bg-label-primary rounded-2 p-2">
                            <i class="ti ti-rotate-clockwise-2 ti-lg"></i>
                          </span>
                        </div>
                        <div>
                            <h4 class="mb-0"><span class="align-middle">Itemm 3</span></h4>
                            <small>Lorem ipsum, dolor sit amet.</small>
                        </div>
                    </div>
                    <!-- Libros -->
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-1.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación encolada tapa blanda</h5>
                                            <p class="card-text">
                                                Este tipo de encuadernación de tapa blanda se destina a proyectos editoriales que buscan un acabado de calidad con buena presentación.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa blanda</h5>
                                            <p class="card-text">
                                                La encuadernación rústica hace referencia a los libros de tapa blanda.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <img class="card-img card-img-right" src="<?= site_url('themes/vuexy/img/safekat/libro-2.png') ?>" alt="Card image" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-3.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa dura</h5>
                                            <p class="card-text">
                                                La encuadernación con cartón o cartoné hace referencia a los libros cosidos de tapa dura.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Libros -->
                </div>

                <div class="tab-pane fade" id="orders" role="tabpanel">
                    <div class="d-flex mb-3 gap-3">
                        <div>
                          <span class="badge bg-label-primary rounded-2 p-2">
                            <i class="ti ti-box ti-lg"></i>
                          </span>
                        </div>
                        <div>
                            <h4 class="mb-0">
                                <span class="align-middle">Item 4</span>
                            </h4>
                            <small>Lorem ipsum, dolor sit amet.</small>
                        </div>
                    </div>
                    <!-- Libros -->
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-1.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación encolada tapa blanda</h5>
                                            <p class="card-text">
                                                Este tipo de encuadernación de tapa blanda se destina a proyectos editoriales que buscan un acabado de calidad con buena presentación.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa blanda</h5>
                                            <p class="card-text">
                                                La encuadernación rústica hace referencia a los libros de tapa blanda.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <img class="card-img card-img-right" src="<?= site_url('themes/vuexy/img/safekat/libro-2.png') ?>" alt="Card image" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-3.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa dura</h5>
                                            <p class="card-text">
                                                La encuadernación con cartón o cartoné hace referencia a los libros cosidos de tapa dura.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Libros -->
                </div>
                <div class="tab-pane fade" id="product" role="tabpanel">
                    <div class="d-flex mb-3 gap-3">
                        <div>
                          <span class="badge bg-label-primary rounded-2 p-2">
                            <i class="ti ti-camera ti-lg"></i>
                          </span>
                        </div>
                        <div>
                            <h4 class="mb-0">
                                <span class="align-middle">Item N</span>
                            </h4>
                            <small>Lorem ipsum, dolor sit amet.</small>
                        </div>
                    </div>
                    <!-- Libros -->
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-1.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación encolada tapa blanda</h5>
                                            <p class="card-text">
                                                Este tipo de encuadernación de tapa blanda se destina a proyectos editoriales que buscan un acabado de calidad con buena presentación.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa blanda</h5>
                                            <p class="card-text">
                                                La encuadernación rústica hace referencia a los libros de tapa blanda.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <img class="card-img card-img-right" src="<?= site_url('themes/vuexy/img/safekat/libro-2.png') ?>" alt="Card image" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md">
                            <div class="card mb-3">
                                <div class="row g-0">
                                    <div class="col-md-3">
                                        <img class="card-img card-img-left" src="<?= site_url('themes/vuexy/img/safekat/libro-3.png') ?>" alt="Card image" />
                                    </div>
                                    <div class="col-md-9">
                                        <div class="card-body">
                                            <h5 class="card-title">Encuadernación cosida de tapa dura</h5>
                                            <p class="card-text">
                                                La encuadernación con cartón o cartoné hace referencia a los libros cosidos de tapa dura.
                                            </p>
                                            <p class="card-text"><small class="text-muted">Texto Dummy</small></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Libros -->
                </div>
            </div>
        </div>
        <!-- /FAQ's -->
    </div>

    <!-- Contact -->
    <div class="row mt-5">
        <div class="col-12 text-center mb-4">
            <div class="badge bg-label-primary">¿Preguntas?</div>
            <h4 class="my-2">¿Necesita ayuda?</h4>
            <p>No dude en contactar con nuestro equipo de soporte en soporte@safekat.com</p>
        </div>
    </div>
    <div class="row text-center justify-content-center gap-sm-0 gap-3">
        <div class="col-sm-6">
            <div class="py-3 rounded bg-faq-section text-center">
                    <span class="badge bg-label-primary my-3 rounded-2 p-2">
                      <i class="ti ti-phone ti-md"></i>
                    </span>
                <h4 class="mb-2"><a class="text-body" href="tel:+(34)123456789">+(34) 123 456 789</a></h4>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="py-3 rounded bg-faq-section text-center">
                    <span class="badge bg-label-primary my-3 rounded-2 p-2">
                      <i class="ti ti-mail ti-md"></i>
                    </span>
                <h4 class="mb-2"><a class="text-body" href="mailto:ayuda@safekat.com">ayuda@safekat.com</a></h4>
            </div>
        </div>
    </div>
    <!-- /Contact -->
</div>
<?= $this->endSection() ?>