<?= $this->include('themes/_commonPartialsBs/datatables') ?>
<?= $this->include("themes/_commonPartialsBs/select2bs5") ?>
<?= $this->include("themes/_commonPartialsBs/sweetalert") ?>

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


<?= $this->section("content") ?>

<?= view("themes/vuexy/form/clientes/cliente/_clienteDireccionesForm") ?>
<?= view("themes/_commonPartialsBs/_modalInput") ?>
<?= view("themes/vuexy/components/modals/modalDireccion") ?>

<div id="mainContainer" class="container-xxl flex-grow-1 container-p-y">

  <div class="col-12">

    <?php if ($state != 2): ?>
      <h3 class="card-title"><?= $boxTitle ?? $pageTitle ?></h3>
    <?php endif; ?>
    <?= csrf_field() ?>
    <?= view("themes/_commonPartialsBs/_alertBoxes") ?>
    <?= !empty($validation->getErrors()) ? $validation->listErrors("bootstrap_style") : "" ?>

    <input hidden id="lc" value=""></input>
    <input hidden id="lsc" value=""></input>
    <input readonly hidden id="pod" value="<?= $POD ?>"></input>
    <input readonly hidden id="lomo_maximo" value="<?= $lomo_maximo ?>"></input>
    <input readonly hidden id="lomo_minimo_fresado_cosido" value="<?= $lomo_minimo_fresado_cosido ?>"></input>
    <input readonly hidden id="pod" value="<?= $POD ?>"></input>
    <input readonly hidden id="c" value="<?= $clienteId ?>"></input>
    <input readonly hidden id="eb" value="<?= $eb ?>"></input>

    <!-- Create Deal Wizard -->
    <div id="wizard-presupuesto-cliente" class="bs-stepper vertical mt-2 linear">

      <div class="d-flex justify-content-start d-md-none mb-2">
        <button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#menu-offcanvas"
          aria-controls="menu-offcanvas" aria-label="Abrir menú">
          <i class="ti ti-menu-2" style="font-size: 1.5rem;"></i> <!-- Icono de hamburguesa -->
        </button>
      </div>

      <!-- Menú Offcanvas -->
      <div id="menu-offcanvas" class="offcanvas offcanvas-start d-md-none" tabindex="-1"
        aria-labelledby="menuOffcanvasLabel">
        <div class="offcanvas-header justify-content-end">
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">

        </div>
      </div>

      <div class="bs-stepper-header col-3">

        <div <?= ($state == 2) ? 'hidden' : '' ?> class="step active titulos-menu" data-target="#datos-generales">
          <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
            <span class="bs-stepper-circle"><i class="ti ti-info-circle ti-sm"></i></span>
            <span class="bs-stepper-label">
              <span class="bs-stepper-title">Datos generales</span>
            </span>
          </button>
        </div>

        <div <?= ($state == 2) ? 'hidden' : '' ?> class="step titulos-menu" data-target="#interior-libro">
          <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
            <span class="bs-stepper-circle"><i class="ti ti-book ti-sm"></i></span>
            <span class="bs-stepper-label">
              <span class="bs-stepper-title">Interior</span>
            </span>
          </button>
        </div>

        <div <?= ($state == 2) ? 'hidden' : '' ?> class="step titulos-menu" data-target="#cubierta-libro">
          <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
            <span class="bs-stepper-circle"><i class="ti ti-books ti-sm"></i></span>
            <span class="bs-stepper-label">
              <span class="bs-stepper-title">Cubierta</span>
            </span>
          </button>
        </div>

        <div <?= ($state == 2) ? 'hidden' : '' ?> class="step titulos-menu" data-target="#direcciones-libro">
          <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
            <span class="bs-stepper-circle"><i class="ti ti-map-pins ti-sm"></i></span>
            <span class="bs-stepper-label">
              <span class="bs-stepper-title">Direcciones</span>
            </span>
          </button>
        </div>

        <div id="menu_resumen_button" class="step titulos-menu" data-target="#resumen-libro">
          <button type="button" class="step-trigger" aria-selected="false" disabled="disabled">
            <span class="bs-stepper-circle"><i class="ti ti-checkbox ti-sm"></i></span>
            <span class="bs-stepper-label">
              <span class="bs-stepper-title">Resumen del presupuesto</span>
            </span>
          </button>
        </div>

        <div class="line"></div>

        <div id='resumenLateral' class="container align-items-center">


          <div class="rl-datos-generales rl-item d-none">
            <div class="row">Libro</div>
            <div class="row">
              <ul class="list-group list-group-timeline">
                <li id="rl_tipo" class="list-group-item list-group-timeline-primary texto-resumen-lateral">Rustica
                  Fresado</li>
                <li id="rl_tipo_cubierta" class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  Tapa
                  dura</li>
                <li id="rl_tamanio" class="list-group-item list-group-timeline-primary texto-resumen-lateral">170.0
                  x
                  240.0</li>
                <li id="rl_tiradas" class="list-group-item list-group-timeline-primary texto-resumen-lateral">10,
                  50,
                  100, 200</li>
                <li id="rl_paginas" class="list-group-item list-group-timeline-primary texto-resumen-lateral">340
                  páginas</li>
              </ul>
            </div>
          </div>

          <div class="rl-interior  rl-item d-none">
            <div class="row">Interior</div>
            <div class="row">
              <ul class="list-group list-group-timeline">
                <li id="rl_tipo_interior" class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  Blanco y
                  negro estándar</li>
                <li id="rl_papel_interior" class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  Offset
                  blanco 90 gr.</li>
                <li id="rl_papel_interior_color"
                  class="list-group-item list-group-timeline-primary texto-resumen-lateral d-none">Offset
                  blanco 90 gr.</li>
              </ul>
            </div>
          </div>

          <div class="rl-cubierta  rl-item d-none">
            <div class="row">Cubierta</div>
            <div class="row">
              <ul class="list-group list-group-timeline">
                <li id="rl_papel_cubierta" class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  Estucado
                  Mate
                  300 gr.</li>
                <li id="rl_caras_cubierta" class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  Impresa
                  1
                  cara</li>
                <li id="rl_acabado_cubierta" class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  Plastificado brillo</li>
                <li id="rl_lomo_cubierta" class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  Plastificado brillo</li>
              </ul>
            </div>
          </div>

          <div class="rl-sobrecubierta  rl-item d-none">
            <div class="row">Sobrecubierta</div>
            <div class="row">
              <ul class="list-group list-group-timeline">
                <li id="rl_no_sobrecubierta" class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  No</li>
                <li id="rl_papel_sobrecubierta"
                  class="list-group-item list-group-timeline-primary texto-resumen-lateral">Estucado mate 170 gr
                </li>
                <li id="rl_tamanio_sobrecubierta"
                  class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  60mm</li>
                <li id="rl_acabado_sobrecubierta"
                  class="list-group-item list-group-timeline-primary texto-resumen-lateral">
                  Plastificado brillo</li>
              </ul>
            </div>
          </div>

          <div class="rl-servicios-extra  rl-item d-none">
            <div class="row">Servicios extra</div>
            <div id="rl-servicios-extra-items" class="row">

            </div>
          </div>


        </div>

        <div class='mt-2 divTiradasPrecio'></div>

      </div> <!--//.bs-stepper-header -->

      <div class="bs-stepper-content" style="position: relative;">

        <?= view("themes/vuexy/form/presupuestos/cliente/loader") ?>

        <form id="presupuesto-cliente-form" onsubmit="return false">

          <div <?= ($state == 2) ? 'hidden' : '' ?> id="datos-generales"
            class="content active dstepper-block fv-plugins-bootstrap5 fv-plugins-framework">

            <div class="row g-3">
              <?= view("themes/vuexy/form/presupuestos/cliente/items/_datosGenerales") ?>
            </div>
          </div>

          <div <?= ($state == 2) ? 'hidden' : '' ?> id="interior-libro"
            class="content fv-plugins-bootstrap5 fv-plugins-framework">
            <div class="row g-3">
              <?= view("themes/vuexy/form/presupuestos/cliente/items/_disenioInterior") ?>
            </div>
          </div>

          <div <?= ($state == 2) ? 'hidden' : '' ?> id="cubierta-libro"
            class="content fv-plugins-bootstrap5 fv-plugins-framework">
            <div class="row g-3">
              <?= view("themes/vuexy/form/presupuestos/cliente/items/_disenioCubierta") ?>
            </div>
          </div>

          <div <?= ($state == 2) ? 'hidden' : '' ?> id="direcciones-libro"
            class="content  fv-plugins-bootstrap5 fv-plugins-framework">
            <div class="row g-3">
              <?= view("themes/vuexy/form/presupuestos/cliente/items/_direcciones") ?>
            </div>
          </div>

          <div id="resumen-libro" class="content  fv-plugins-bootstrap5 fv-plugins-framework">
            <div class="row g-3">
              <?= view("themes/vuexy/form/presupuestos/cliente/items/_resumen") ?>
            </div>
          </div>


          <?= view("themes/vuexy/form/presupuestos/cliente/items/_buttons") ?>

        </form>

      </div>


    </div><!--//.wizard -->


    <div id="form_buttons" class="row col-sm-12 justify-content-center" style="display: none;">

    </div>
    <?php if ($formAction == 'edit'): ?>
      <?= view("themes/vuexy/components/chat_internal_presupuesto", data: ["modelId" => $presupuestoId, "type" => "presupuesto"]) ?>
    <?php endif; ?>
  </div><!--//.row -->
  <?= view("themes/_commonPartialsBs/_modalConfirmDialog") ?>
  <?= view("themes/_commonPartialsBs/_modalMessageDialog") ?>

  <?= $this->endSection() ?>



  <?= $this->section('css') ?>

  <link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/bs-stepper/bs-stepper.css') ?>" />
  <link rel="stylesheet"
    href="<?= site_url('themes/vuexy/vendor/libs/formvalidation/dist/css/formValidation.min.css') ?>" />
  <link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/dropzone/dropzone.css') ?>" />
  <link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/css/pages/app-chat.css') ?>">
  <link rel="stylesheet" href="<?= site_url('themes/vuexy/css/presupuestoCliente.css') ?>">
  <link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/animate-css/animate.css') ?>">
  <link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/sweetalert2/sweetalert2.css') ?>">


  <?= $this->endSection() ?>

  <?= $this->section('additionalExternalJs') ?>
  <script src="<?= site_url("themes/vuexy/vendor/libs/dropzone/dropzone.js") ?>"></script>
  <script src="<?= site_url("themes/vuexy/vendor/libs/bs-stepper/bs-stepper.js") ?>"></script>
  <script src="<?= site_url("themes/vuexy/vendor/libs/formvalidation/dist/js/FormValidation.js") ?>"></script>
  <script src="<?= site_url("themes/vuexy/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js") ?>"></script>
  <script src="<?= site_url("themes/vuexy/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js") ?>"></script>
  <script src="<?= site_url('themes/vuexy/vendor/libs/autosize/autosize.js') ?>"></script>
  <script src="<?= site_url('themes/vuexy/vendor/libs/two/two.js') ?>"></script>
  <script src="<?= site_url('themes/vuexy/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') ?>"></script>
  <script src="<?= site_url('themes/vuexy/vendor/libs/sweetalert2/sweetalert2.js') ?>"></script>

  <script type="module"
    src="<?= site_url('assets/js/safekat/pages/presupuestoCliente/presupuestoCliente.js') ?>"></script>

  <?= $this->endSection() ?>