<?= $this->extend('layouts/main') ?>

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

<div id="cost-sections">
        <div class="container pt-5 pb-5 text-center container-box-c">
            <?php
            $action = base_url().'/home/contractar';
            if($isPressupost)
                $action = base_url().'/pressupostos/editarPressupost/'.$pressupost->id_pressupost.'/'.$pressupost->seccio_id_pressupost;
            ?>
           <form id="form-resum" method="post" action="<?= $action ?>" enctype="multipart/form-data">
                <div class="project-info-section">
                    <?php if(session('success')): ?>
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Felicitats!</strong> <?= session('success') ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    <?php endif; ?>
                    <?php if(session('error')): ?>
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <strong>Errror!</strong> <?= session('error') ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    <?php endif; ?>
                    <div class="section-option-total container-medium">
                        <?php if(session('logoClient') != NULL): ?>
                        <img class="logoClientResum" src="<?= base_url().session('logoClient') ?>" width="100">
                        <?php endif; ?>
                        <?php if($isPressupost): ?>
                        <img class="logoClientResum" src="<?= base_url().$pressupost->logo_client ?>" width="100">
                        <?php endif; ?>
                        <h2 class="title-cost">Pressupost</h2>
                        <!--<p class="subtitle-cost">
                            El preu final és:
                        </p>-->
                        <?php
                        $iva = 21;
                        $totalIva = 0;
                        $totalIva += ($total * $iva / 100);
                        $superTotal = ($total+$totalIva);
                        ?>
                        <h3 class="title-cost title-total"><?= session('nomClient') ?></h3>
                        <div class="separator"></div>
                        <ul class="info-client-resum">
                            <li>
                                <b>Nº Pressupost:</b> #<?= session('codiPresu'); ?>
                            </li>
                            <li>
                                <b>Data:</b> <?= date('d-m-Y') ?>
                            </li>
                        </ul>
                        <!--<br>
                        <div class="input-group mb-3 input-medium">
                            <label for="exampleInputEmail1" class="form-label">Introduïu el vostre correu electrònic aquí</label>
                            <span class="input-group-text" id="basic-addon1">
                                <span class="material-icons">
                                    <span class="material-icons">email</span>
                                </span>
                            </span>
                            <input type="email" class="form-control" placeholder="hola@hola.cat" aria-label="Username" aria-describedby="basic-addon1" value="">
                        </div>-->
                    </div>
                    <div class="section-option-total section-option-total-last container-large">
                        <h3 class="title-cost">Resum</h3>
                        <br>
                        <div class="result-list-c">
                            <h4 class="title-result-c">Descripció</h4>
                            <div class="result-c">
                                <span style="display:none">1</span>
                                <ul class="result-li-w">
                                    <?php $s = 0;for($i=0;$i<=count($unics);$i++): ?>
                                    <?php if(!empty($unics[$i][0])): ?>
                                    <li class="result-li-c" data-id="<?= $unics[$i][0]->id_seccio_opcio ?>" data-opcio="<?= $seccionsId[$s] ?>">
                                        <h5><?= $unics[$i][0]->nom_opcio ?>: <b><?= $unics[$i][0]->nom_mod ?> <?= (!empty($opcionsRange[$unics[$i][0]->id_mod][0]))?'('.$opcionsRange[$unics[$i][0]->id_mod][0].')':''; ?> <small style="font-weight:normal">(<i><?= $unics[$i][0]->preu_mod ?>€</i>)</small></b></h5>
                                        <?php if($unics[$i][0]->desc_resum_mod): ?>
                                        <p>
                                            <?= $unics[$i][0]->desc_resum_mod ?>
                                        </p>
                                        <?php endif; ?>
                                        <?php if($unics[$i][0]->desc_resum_opcio && !$unics[$i][0]->img_mod): ?>
                                        <div class="desc-resum">
                                        <?= $unics[$i][0]->desc_resum_opcio ?>
                                        </div>
                                        <?php elseif($unics[$i][0]->desc_resum_opcio && $unics[$i][0]->img_mod): ?>
                                        <?php
                                        $url = 'javascript:void(0);';
                                        $target = '_self';
                                        if($unics[$i][0]->url_mod){
                                            $url = $unics[$i][0]->url_mod;
                                            $target = '_blank';
                                        }
                                        ?>
                                        <div class="row row-img">
                                            <div class="col-md-3 col-img">
                                                <div class="imgModRes">
                                                    <a href="<?= $url ?>" target="<?= $target ?>">
                                                        <img src="<?= base_url().$unics[$i][0]->img_mod ?>" class="img-thumbnail">
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="col-md-9 col-img-desc">
                                                <div class="desc-resum desc-resum-img">
                                                <?= $unics[$i][0]->desc_resum_opcio ?>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="clear-b"></div>
                                        <?php else: ?>
                                        <div class="imgModRes">
                                            <a href="<?= $url ?>" target="<?= $target ?>">
                                                <img src="<?= base_url().$unics[$i][0]->img_mod ?>" class="img-thumbnail">
                                            </a>
                                        </div>
                                        <?php endif; ?>
                                        <?php
                                        $id = $unics[$i][0]->id_opcio;
                                        if(!empty($comentarisOpcio[0][$id])):
                                        ?>
                                        <div class="desc-resum">
                                            <h6><i>Comentaris:</i></h6>
                                            <i>
                                                <?= $comentarisOpcio[0][$id] ?>
                                            </i>
                                        </div>
                                        <?php endif; ?>
                                    </li>
                                    <?php endif; $s++; endfor; ?>
                                    <?php
                                    if(!empty($multiple)):
                                    for($i=0;$i<=count($opcions);$i++):
                                    $hasResum = false;
                                    if(!empty($opcions[$i])):
                                    $modsArr = get_mods($opcions[$i]->id_opcio);
                                    $modsArr2 = [];
                                    if($modsArr[0]->desc_resum_mod)
                                        $hasResum = true;
                                    $mods = [];
                                    $modsLine = [];
                                    for($x=0;$x<=count($modsArr);$x++){
                                        if(!empty($modsArr[$x])){
                                            foreach($multiple as $ml){
                                                if($modsArr[$x]->id_mod == $ml){
                                                    $arr = [
                                                        'nom' => $modsArr[$x]->nom_mod,
                                                        'preu' => $modsArr[$x]->preu_mod
                                                    ];
                                                    array_push($modsLine, $arr);
                                                    array_push($mods, $modsArr[$x]->nom_mod);
                                                    array_push($modsArr2, $modsArr[$x]);
                                                }
                                            }
                                        }
                                    }
                                    //$mods = implode(', ', $mods);
                                    if($hasResum === false):
                                        $md = '';
                                        $mdTotal = 0;
                                        for($m=0;$m<=count($modsLine);$m++){
                                            if(!empty($modsLine[$m]['nom'])){
                                                $md .= $modsLine[$m]['nom'].' <small style="font-weight:normal">(<i>'.$modsLine[$m]['preu'].'€</i>)</small>, ';
                                                $mdTotal = ($mdTotal+floatval($modsLine[$m]['preu']));
                                            }
                                        }
                                    ?>
                                    <li class="result-li-c" data-id="<?= $opcions[$i]->id_seccio_opcio ?>" data-opcio="<?= (!empty($seccionsId[$s]))?$seccionsId[$s]:''; ?>">
                                        <h5><?= $opcions[$i]->nom_opcio ?>: <b><?= substr_replace($md ,"", -2); ?></b></h5>
                                        <?php if($opcions[$i]->desc_resum_opcio): ?>
                                        <div class="desc-resum">
                                            <?= $opcions[$i]->desc_resum_opcio ?>
                                        </div>
                                        <small style="font-weight:normal">Total: <i><?= $mdTotal ?>€</i></small>
                                        <?php endif; ?>
                                        <?php
                                        $id = $opcions[$i]->id_opcio;
                                        if(!empty($comentarisOpcio[0][$id])):
                                        ?>
                                        <div class="desc-resum">
                                            <h6><i>Comentaris:</i></h6>
                                            <i>
                                                <?= $comentarisOpcio[0][$id] ?>
                                            </i>
                                        </div>
                                        <?php endif; ?>
                                    </li>
                                    <?php else: ?>
                                    <li class="result-li-c" data-id="<?= $opcions[$i]->id_seccio_opcio ?>" data-opcio="<?= (!empty($seccionsId[$s]))?$seccionsId[$s]:''; ?>">
                                        <h5><?= $opcions[$i]->nom_opcio ?>:</h5>
                                        <ul class="mod-resum">
                                            <?php $mdTotal = 0; foreach($modsArr2 as $modRes): $mdTotal = $mdTotal+floatval($modRes->preu_mod); ?>
                                            <li>
                                                <b><?= $modRes->nom_mod ?> <small style="font-weight:normal">(<i><?= $modRes->preu_mod ?>€</i>)</small></b>
                                                <p>
                                                <?= $modRes->desc_resum_mod ?>
                                                </p>
                                            </li>
                                            <?php endforeach; ?>
                                        </ul>
                                        <small style="font-weight:normal">Total: <i><?= $mdTotal ?>€</i></small>
                                        <?php if($opcions[$i]->desc_resum_opcio): ?>
                                        <div class="desc-resum">
                                        <?= $opcions[$i]->desc_resum_opcio ?>
                                        </div>
                                        <?php endif; ?>
                                        <?php
                                        $id = $opcions[$i]->id_opcio;
                                        if(!empty($comentarisOpcio[0][$id])):
                                        ?>
                                        <div class="desc-resum">
                                            <h6><i>Comentaris:</i></h6>
                                            <i>
                                                <?= $comentarisOpcio[0][$id] ?>
                                            </i>
                                        </div>
                                        <?php endif; ?>
                                    </li>
                                    <?php endif; ?>
                                    <?php endif; endfor; $s++; endif; ?>
                                    <?php if($seccio[0]->pagines_seccio): ?>
                                    <li class="result-li-c">
                                        <h5>Pàgines: <b><?= $pagines ?></b></h5>
                                        <div class="desc-resum">
                                        A la fase de disseny del lloc web, es definirán el número de pàgines a crear i/o dissenyar. *En el cas que l’empresa vulgui ampliar el nº de pàgines un cop acceptat el pressupost inicial, es valoraran a banda del pressupost.
                                        </div>
                                        <?php if($comentarisPagines): ?>
                                        <div class="desc-resum">
                                            <h6><i>Comentaris:</i></h6>
                                            <i>
                                                <?= $comentarisPagines ?>
                                            </i>
                                        </div>
                                        <?php endif; ?>
                                    </li>
                                    <?php endif; ?>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="section-option-total-last container-large transfer-opts-w">
                        <div class="transfer-opts">
                            <h5>Mètode de Pagament</h5>
                            <ul class="mod-resum">
                                <li>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="radio" name="pagament" role="switch" id="transferencia" value="Transferència Bancària" <?= (isset($pressupost->pagament_pressupost) && $pressupost->pagament_pressupost == 'Transferencia')?'checked':'checked'; ?>>
                                        <label class="form-check-label" for="transferencia">Transferència Bancària </label>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="radio" name="pagament" role="switch" id="targeta" value="Targeta de Crèdic" <?= (isset($pressupost->pagament_pressupost) &&$pressupost->pagament_pressupost == 'Targeta de Crèdic')?'checked':''; ?>>
                                        <label class="form-check-label" for="targeta">Targeta de Crèdic </label>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="radio" name="pagament" role="switch" id="paypal" value="Paypal" <?= (isset($pressupost->pagament_pressupost) &&$pressupost->pagament_pressupost == 'Paypal')?'checked':''; ?>>
                                        <label class="form-check-label" for="paypal">Paypal </label>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="radio" name="pagament" role="switch" id="altres" value="Altres" <?= (isset($pressupost->pagament_pressupost) &&$pressupost->pagament_pressupost == 'Altres')?'checked':''; ?>>
                                        <label class="form-check-label" for="altres">Altres </label>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="section-option-total-last container-large transfer-opts-w">
                        <div class="transfer-opts">
                            <h6 style="color:#838383;"><b>Base:</b> <?= $total ?>€</h6>
                        </div>
                        <div class="transfer-opts">
                            <h6 style="color:#838383;"><b>Total IVA:</b> <?= $totalIva ?>€</h6>
                        </div>
                        <div class="transfer-opts">
                            <h5><b>Import Total:</b> <span id="preuTotal"><?= $superTotal ?></span>€</h5>
                        </div>
                        <hr>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="lopd" role="switch" id="lopd" value="100">
                            <label class="form-check-label" for="lopd"><small>Afegir <b>LOPD</b></small> </label>
                        </div>
                    </div>
                    <h4 class="title-cost">Condicions Generals</h4>
                    <br>
                    <div class="result-legal container-large">
                        <ul>
                            <li>
                                El present pressupost té una validesa de 30 dies naturals a partir de la data que figura en el mateix.
                            </li>
                            <li>
                                En cas que el projecte quedi aturat durant més de 45 dies per part del client, sense que faciliti el material necessari per a finalitzar el projecte, es procedirà a facturar la part del procediment fins a la data. Si es reprèn el projecte, es realitzarà un nou pressupost corresponent a les noves tasques a realitzar.
                            </li>
                            <li>
                                El material necessari per part del client serà entregat, amb els formats prèviament definits per part de Grafix
                            </li>
                            <li>
                                Qualsevol modificació del material requerit per part de l’empresa, es facturarà a banda del pressupost, en hores de treball.
                            </li>
                            <li>
                                En cas d’una modificació del pressupost original, es realitzarà un nou pressupost o es facturarà en hores de treball depenent de la valoració de la modificació a realitzar.
                            </li>
                            <li>
                                A l’inici del projecte s'emetrà una factura del 60% de l’import del pressupost del projecte, com a provisió de fons dels serveis a realitzar. Una vegada acabat el projecte, es facturarà l’altre 40 % restant.
                            *en el cas que el projecte inclogui allotjament extern a Grafix, s’enviaran els arxius del projecte un cop abonat el 100% del pressupost del projecte.
                            </li>
                            <li>
                                Grafix no es fa responsable de les possibles incidències dels recursos externs, en el cas que s’utilitzin en el projecte.
                            </li>
                            <li>
                                En el cas de canvis de la normativa legal, posteriors al projecte, Grafix no es farà responsable del manteniment ni actualització dels textos, sempre que no estigui prèviament definit en el pressupost original.
                            *Es recomanable concertar el servei de manteniment/pack d’hores, per tal de tindre la web constantment actualitzada.
                            </li>
                            <li>
                                Grafix  garanteix la confidencialitat del projecte durant tot el procediment de desenvolupament.
                            </li>
                        </ul>
                    </div>
                    <br>
                    <div class="section-option-total-last container-large transfer-opts-w dades-client">
                        <h4 class="title-result-c">Dades Client</h4>
                        <ul class="dades-c-list">
                            <?php if($isPressupost): ?>
                            <li>
                                <b>Nom:</b> <?= $pressupost->nom_client ?>
                            </li>
                            <li>
                                <b>Email:</b> <?= $pressupost->email_client ?>
                            </li>
                            <li>
                                <b>Telèfon:</b> <?= $pressupost->tel_client ?>
                            </li>
                            <li>
                                <b>CIF/NIF:</b> <?= $pressupost->cif_client ?>
                            </li>
                            <?php else: ?>
                                <li>
                                <b>Nom:</b> <?= session('nomClient') ?>
                            </li>
                            <li>
                                <b>Email:</b> <?= session('emailClient') ?>
                            </li>
                            <li>
                                <b>Telèfon:</b> <?= session('telClient') ?>
                            </li>
                            <li>
                                <b>CIF/NIF:</b> <?= session('cifClient') ?>
                            </li>
                            <?php endif; ?>
                        </ul>
                    </div>
                    <div class="acceptance container-medium">
                        <div class="form-check form-switch check-l">
                            <input class="form-check-input" type="checkbox" role="switch" id="checAcceptancePubli" required>
                            <label class="form-check-label label-accept label-accept-b" for="checAcceptancePubli" style="display:block">Accepto que un cop entregat el projecte, Grafix es reserva el dret a utilitzar-lo per a usos publicitaris (web, xarxes socials, mostra de projectes realitzats, entre altres).</label>
                        </div>
                        <div class="form-check form-switch check-l">
                            <input class="form-check-input" type="checkbox" role="switch" id="checAcceptance" required>
                            <label class="form-check-label label-accept" for="checAcceptance">He llegit i accepto les condicions generals d'aquest pressupost </label>
                        </div>
                        <br>
                        <h3 class="title-cost">Signatura</h3>
                        <canvas class="canvas-signature" id="signature"></canvas>
                        <button type="button" class="btn-reset" title="Esborrar">
                            <i class="material-icons">refresh</i>
                        </button>
                        <input type="hidden" name="firma" id="signature-input">
                        <input type="hidden" name="resum" id="resum-input">
                        <input type="hidden" name="items" id="resum-items" value="<?= $allItems ?>">
                        <input type="hidden" name="preu" value="<?= intval($total) ?>">
                        <input type="hidden" name="seccioId" value="<?= session('seccioId'); ?>">
                        <input type="hidden" name="boxTotal" value='<?= $boxTotal ?>'>
                        <input type="hidden" name="comentaris" value='<?= json_encode($comentarisOpcio) ?>'>
                        <!--<div class="signature" style="width: 300px;height:100px;border:1px solid #1dbfb9;border-radius:5px;background:#fff;margin:0 auto"></div>-->
                        <button id="btn-form-submit" type="button" class="btn btn-primary btn-step btn-medium-c"><span class="material-icons">done</span> DESAR PRESSUPOST</button>
                        <br><br>
                        <a href="javascript:history.go(-1)" class="btn btn-light btn-sm"><span class="material-icons" style="position: relative;top: 3px;font-size: 15px;">arrow_back</span> Tornar enrere</a>
                    </div>
                </div>
           </form>
        </div>
    </div>

<script>
jQuery(document).ready(function($) {
  //
  var empty = false;
  $('.btn-reset').click(function(e){
    e.preventDefault();
      cntx.fillRect(0, 0,  canvas.width, canvas.height);
      empty = false;
  });
  //
  $('#btn-form-submit').on('click', function(e){
      console.log(empty);
      e.preventDefault();
      var mycanvas = document.getElementById('signature');
      if(empty == true) {
        var img = mycanvas.toDataURL("image/png");
        anchor = document.getElementById("signature-input");
        $(anchor).val(img);
        
        var resum = $('.result-li-w').html();
        $('#resum-input').val(resum);
        setTimeout(function(e){
            $('#form-resum').submit();
        }, 1000);

      }else{
        alert('La signatura és obligatoria');
        return false;
      }
  });

var preuTotal = parseFloat($('#preuTotal').text());
$('#lopd').on('change', function(){
    var lopd = 0;
    if($(this).is(':checked')){
        lopd = parseFloat($(this).val());
        $('#preuTotal').text(preuTotal+lopd);
    }else{
        $('#preuTotal').text(preuTotal);
    }
});

$(".result-li-w .result-li-c").sort(sort_li).appendTo('.result-li-w');
function sort_li(a, b) {
    return ($(b).data('opcio')) < ($(a).data('opcio')) ? 1 : -1;
}
$(".result-li-w .result-li-c").sort(sort_li).appendTo('.result-li-w');
function sort_li(a, b) {
    return ($(b).data('id')) < ($(a).data('id')) ? 1 : -1;
}

    //SIGNATURA CANVAS
    var clic=false;
    var x = "";
    var y = "";
    var canvas=document.getElementById("signature");
    fitToContainer(canvas);

    var cntx = canvas.getContext("2d");
    cntx.lineCap = 'round';
    cntx.lineWidth = 1;
    cntx.fillStyle = "white";
    cntx.fillRect(0, 0, canvas.width, canvas.height);

    function fitToContainer(canvas){
    canvas.style.width ='300px';
    canvas.style.height='100px';
    canvas.width  = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    }

    canvas.addEventListener("mousedown", function (canvas) {
    clic=true;
    cntx.save();
    x = canvas.pageX-this.offsetLeft;
    y = canvas.pageY-this.offsetTop;
    }, false);

    canvas.addEventListener("mouseup", function (canvas) {
    clic=false;
    }, false);

    $(document).click(function(){
    clic=false;
    });

    canvas.addEventListener("mousemove", function (canvas) {
        canvas.preventDefault();
    if(clic==true){
        cntx.beginPath();
        cntx.moveTo(canvas.pageX-this.offsetLeft,canvas.pageY-this.offsetTop);
        cntx.lineTo(x, y);
        cntx.stroke();
        x = canvas.pageX-this.offsetLeft;
        y = canvas.pageY-this.offsetTop;
        empty = true;
    }
    }, false);

    canvas.addEventListener("touchstart", function (e) {
        mousePos = getTouchPos(canvas, e);
        var touch = e.touches[0];
        var mouseEvent = new MouseEvent("mousedown", {
            clientX: touch.pageX,
            clientY: touch.pageY
        });
        canvas.dispatchEvent(mouseEvent);
    }, false);

    canvas.addEventListener("touchend", function (e) {
        var mouseEvent = new MouseEvent("mouseup", {});
        canvas.dispatchEvent(mouseEvent);
    }, false);

    canvas.addEventListener("touchmove", function (e) {
        e.preventDefault();
        var touch = e.touches[0];
        var mouseEvent = new MouseEvent("mousemove", {
            clientX: touch.pageX,
            clientY: touch.pageY
        });
        canvas.dispatchEvent(mouseEvent);
    }, false);

    // Get the position of a touch relative to the canvas
    function getTouchPos(canvasDom, touchEvent) {
        var rect = canvasDom.getBoundingClientRect();
        return {
            x: touchEvent.touches[0].pageX - rect.left,
            y: touchEvent.touches[0].pageY - rect.top
        };
    }
});
</script>

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