@extends('layouts.admin')
@section('estilos')
<link href="{{ asset('assets/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css"/>
@endsection
@section('contenido')
@include('admin.proyectos.modals')

<section>
  {!!Form::open(array('autocomplete'=>'off','id'=>'form-eproy', 'enctype'=>'multipart/form-data','method'=>'PATCH'))!!}
  <div class="col-sm-12 col-sm-4">
    <label>Nombre del Proyecto o Actividad</label>
    <input type="text" class="form-control" name="nombre" value="{{$proy->pry_nombre}}" placeholder="Nombre del proyecto" onkeypress="return numerosyletras(event)">
    <label>Cliente</label>
    <input type="text" class="form-control" id="srhCli" value="{{$proy->pros_nombre}}" placeholder="Buscar un Cliente" onkeypress="return numerosyletras(event)">
    <div id="OpcCli" style="position:absolute; z-index:100; display:none;"></div>
    <input type="hidden" name="cli" id="cli" value="{{$proy->pry_cli}}">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <label>Inicio</label>
        <input type="text" name="dateini" class="form-control fecha" value="{{$proy->pry_ini}}" placeholder="Fecha de inicio" onkeypress="return false" data-date-start-date="0d">
      </div>
      <div class="col-sm-12 col-md-6">
        <label>Fin</label>
        <input type="text" name="datefin" class="form-control fecha" value="{{$proy->pry_fin}}" placeholder="Fecha de fin" onkeypress="return false" data-date-start-date="0d">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <label>Costo del Proyecto</label>
       <input type="text" class="form-control" name="costo" id="costo" 
    value="{{ number_format($proy->pry_cost, 2, '.', ',') }}" 
    placeholder="$00000.00" 
    oninput="formatearNumero(this)" 
    onblur="aplicarFormatoFinal(this)" 
    required>
      </div>
    </div>
    @if($proy->pry_recib)
    @php
        $filePath = asset('img/proyectos/' . Session::get('idEmpresa') . '/' . $proy->pry_recib);
        $fileName = basename($proy->pry_recib);
    @endphp

    <div class="mt-3">
        <div class="input-group">
        <label for="file-input">Cotización Recibida:</label>
            <div class="input-group-append">
                <a href="{{ $filePath }}" target="_blank" class="btn btn-primary">Ver Cotización</a>
            </div>
        </div>
    </div>
    @endif



    <br>
    <label>Editar Cotización</label>
    <input  name="recibo" type="file" class="file"  id="imagen-main"  value="" class="file">
    <label>Dirección web</label>
    <input type="text" class="form-control" name="url" value="{{$proy->pry_url}}" placeholder="URL del proyecto (proyectos web)" onkeypress="return numerosyletras(event)">
    <label>Descripción</label>
    <textarea class="form-control" name="descpr" rows="5" onkeypress="return validartexto(event)">{{$proy->pry_desc}}</textarea>
    <hr style="margin:10px 0px;">
    <label>Lider del proyecto</label>
    <input type="hidden" name="lider" value="{{$proy->pry_lider}}">
    <input type="text" class="form-control" id="srhlider" value="{{$cols[0]->cnt_nombres}} {{$cols[0]->cnt_apellidos}}" placeholder="Buscar lider" onkeypress="return numerosyletras(event)">
    <div id="OpcLid" style="position:absolute; z-index:100; display:none;"></div><hr>
    <button type="button" data-toggle="collapse" data-target="#dirproy" class="btn btn-primary btn-sm" style="width:300px"><i class="fas fa-map-marker-alt"></i>&nbsp;&nbsp;Dirección</button>
    <div class="row collapse" id="dirproy">
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Calle</label><span style="color: red; font-size: 1.2em;"> *</span>
        <input type="text" class="form-control" name="calle" @if($dir != '') value="{{$dir->dir_calle}}" @endif placeholder="Ingrese Calle" onkeypress="return numerosyletras(event)">
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Colonia</label><span style="color: red; font-size: 1.2em;"> *</span>
        <input type="text" class="form-control" placeholder="Ingrese Colonia" name="colonia" @if($dir != '') value="{{$dir->dir_colonia}}" @endif onkeypress="return numerosyletras(event)">
      </div>
      <div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
          <label>Número Exterior</label><span style="color: red; font-size: 1.2em;"> *</span>
          <input type="text" class="form-control"  placeholder="Numero Exterior" name="numExt" @if($dir != '') value="{{$dir->dir_ext}}" @endif onkeypress="return numerosyletras(event)">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
          <label>Número Interior</label>
          <input type="text" class="form-control"  placeholder="Numero Interior" name="numInt" @if($dir != '') value="{{$dir->dir_int}}" @endif onkeypress="return numerosyletras(event)">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
          <label>Código Postal</label><span style="color: red; font-size: 1.2em;"> *</span>
          <input type="text" class="form-control" name="cp" @if($dir != '') value="{{$dir->dir_cp}}" @endif placeholder="Codigo Postal" onkeypress="return solonumeros(event)">
        </div>
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>País</label><span class="rojo" style="color: red; font-size: 1.2em;"> *</span>
        <select class="form-control" name="pais" id="pais" onchange="getEstados(this.value, 'estad')">
          <option selected="" value="0">Seleccione...</option>
          @foreach ($paises as $ps)
          <option value="{{$ps->ps_is}}" @if($dir != '' && $dir->dir_pais == $ps->ps_is) selected @endif >{{$ps->ps_nombre}}</option>
          @endforeach
        </select>
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Estado</label><span class="rojo" style="color: red; font-size: 1.2em;"> *</span>
        <select class="form-control" id="estad" name="estad" onchange="getMunicipios(this.value, 'municipio')">
          <option value="0">Seleccione...</option>
          @if ($dir != '')
          <option value="{{$dir->dir_estado}}" selected>{{$dir->etd_nombre}}</option>
          @endif
        </select>
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Delegación / Municipio</label><span class="rojo" style="color: red; font-size: 1.2em;"> *</span>
        <select class="form-control" id="municipio" name="municipio">
          <option selected="" value="0" >Seleccione...</option>
          @if ($dir != '')
          <option value="{{$dir->dir_delegacion}}" selected>{{$dir->mnp_nombre}}</option>
          @endif
        </select>
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Ciudad</label><span style="color: red; font-size: 1.2em;"> *</span>
        <input type="text" class="form-control" name="ciudad" @if($dir != '') value="{{$dir->dir_ciudad}}" @endif placeholder="Ingrese Ciudad" onkeypress="return soloLetras(event)">
      </div>
    </div>
    <hr>
    <div class="col-sm-12 col-md-6 text-center">
      <button type="reset" class="btn btn-danger" onclick="window.history.back();" style="width:200px;"><i class="fa fa-close"></i>&nbsp;Cancelar</button>
    </div>
    <div class="col-sm-12 col-md-6 text-center">
      <button type="submit" class="btn btn-info" style="width:200px;"><i class="fa fa-save"></i>&nbsp;Guardar</button>
    </div>
  </div>
  <div class="col-sm-12 col-md-8">
    <fieldset>
      <legend>Colaboradores</legend>
      <input type="text" class="form-control" id="srhcolad" value="" placeholder="Agregar un colaborador" onkeypress="return numerosyletras(event)">
      <div id="OpcCol" style="position:absolute; z-index:100; display:none;"></div>
      <br>
      <table class="table table-responsive table-bordered table-striped" id="tcol" style="font-size:13px;">
        <thead>
          <th>Colaborador</th>
          <th></th>
        </thead>
        <tbody  id="cols">
          @foreach($cols as $k => $c)
          @if($k != 0)
          <tr id="row{{$k}}">
            <td>{{$c->cnt_nombres}} {{$c->cnt_apellidos}}</td>
            <td><button type="button" class="btn btn-danger btn-xs" title="Quitar del proyecto" onclick="delCol({{$k}})"><i class="fa fa-close"></i></button></td>
          </tr>
          @endif
          @endforeach
        </tbody>
      </table><script> var tc = tableData("tcol"); </script>
    </fieldset>
    <hr style="border-top: 2px solid #008adc;">
    <fieldset>
      <legend>
        Tareas&nbsp;
        <button type="button" class="btn btn-success btn-xs" style="float:right;width:200px" data-toggle="modal" data-target="#modal-newwork">
          <i class="fa fa-plus"></i>&nbsp;Agregar tarea
        </button>
      </legend>
      <table class="table table-responsive table-bordered table-striped" id="gar" style="font-size:13px;">
        <thead>
          <th>Tarea</th>
          <th>Encargado</th>
          <th>Inicio / Fin</th>
          <th></th>
        </thead>
        <tbody>
          @foreach($tars as $t)
          <tr id="rwt{{$t->tpy_id}}">
            <td>{{$t->tpy_nombre}}</td>
            <td>{{$t->cnt_nombres}} {{$t->cnt_apellidos}}</td>
            <td>{{$t->tpy_ini}} / {{$t->tpy_fin}}</td>
            <td>
              <i class="fa fa-pencil-alt" onclick="edtar({{$t->tpy_id}})"></i>
              <i class="fa fa-trash" onclick="deltar({{$t->tpy_id}},'{{$t->tpy_nombre}}')"></i>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
      <script> var g = tableData("gar");</script>
    </fieldset>
    <!--Gastos tabla-->
    <hr style="border-top: 2px solid #008adc;">
    <fieldset>
      <legend>
        Gastos&nbsp;
        <button type="button" class="btn btn-success btn-xs" style="float:right;width:200px" data-toggle="modal" data-target="#modal-newgas">
          <i class="fa fa-plus"></i>&nbsp;Agregar Gasto
        </button>
      </legend>
       <div class="table-responsive">
      <table class="table table-bordered table-striped" id="tgas" style="font-size:13px;">
        <thead>
          <th>Proveedor</th>
          <th>Producto</th>
          <th>Fecha de compra</th>
          <th>Sub total</th>
          <th>%Iva</th>
          <th>Total</th>
          <th></th>
        </thead>
         <tbody id="gastos">
          @foreach($gas as $g)
          <tr id="rwt{{$g->id}}">
            <td>{{ $g->proveedor->prov_nombre }}</td>
            <td>{{$g->producto}}</td>
            <td>{{$g->fecha}}</td>
            <td>${{ number_format($g->subtotal, 2, '.', ',') }}</td>
            <td>%{{$g->iva}}</td>
            <td>${{ number_format($g->total, 2, '.', ',') }}</td>
            <td>
              <i class="fa fa-pencil-alt" onclick="edgas({{$g->id}})"></i>
              <i class="fa fa-trash" onclick="delgas({{$g->id}},'{{$g->producto}}')"></i>
            </td>
          </tr>
          @endforeach
        </tbody>
         <tr style="background-color: #f7b827 !important; color:black; position: relative; font-size:14px;">
                    <td style="border: none;" colspan="2" class="text-left"></td>
                    <td style="text-align: right; border: none;">Total de Gastos:</td>
                    <td style="border: none;" id="montosiniva">$0.00</td>
                    <td  style="border: none;"id="iva">16%</td>
                    <td style="border: none;" id="montoiva" >$0.00</td>
                    <td style="border: none;" ></td>
                </tr>
      </table>
      </div>
      <script> var tg = tableData("tgas");</script>
    </fieldset>
    <!--Pagos tabla-->
    <hr style="border-top: 2px solid #008adc;">
   <fieldset>
  <legend>
    Pagos&nbsp;
    <button type="button" class="btn btn-success btn-xs" style="float:right;width:200px" data-toggle="modal" data-target="#modal-newpag">
      <i class="fa fa-plus"></i>&nbsp;Agregar Pago
    </button>
  </legend>

  <!-- Contenedor RESPONSIVO -->
  <div class="table-responsive">
    <table class="table table-bordered table-striped" id="tpg" style="font-size:13px;">
      <thead>
        <tr>
          <th>Cliente</th>
          <th>Tipo de Pago</th>
          <th>Fecha del Pago</th>
          <th>Monto</th>
          <th>% Cubierto</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="pagos">
        @php
          $metodosPago = [
            1 => 'Efectivo',
            2 => 'Transferencia',
            3 => 'Tarjeta de crédito',
            4 => 'Otro'
          ];
        @endphp

        @foreach($pag as $p) 
        <tr id="rwt{{$p->id}}">
          <td>{{ $p->cliente->pros_nombre }}</td>
          <td>{{ $metodosPago[$p->tipo_pago] ?? 'Desconocido' }}</td>
          <td>{{ $p->fecha }}</td>
          <td>${{ number_format($p->monto, 2, '.', ',') }}</td>
          <td id="%monto"></td>
          <td>
            <i class="fa fa-pencil-alt" onclick="edpag({{ $p->id }})"></i>
            <i class="fa fa-trash" onclick="delpag({{ $p->id }},'{{$p->monto}}')"></i>
          </td>
        </tr>
        @endforeach
      </tbody>
      <tr style="background-color: #f7b827 !important; color:black; position: relative;font-size:14px;">
        <td style="border: none;" colspan="2" class="text-left">Total del Proyecto: ${{ number_format($proy->pry_cost, 2, '.', ',') }}</td>
        <td style="text-align: right; border: none;">Montos Totales:</td>
        <td style="border: none;" id="totalMonto">$0.00</td>
        <td style="border: none;" id="porcentajeCubierto">0%</td>
        <td style="border: none;"></td>
      </tr>
    </table>
  </div> <!-- Fin de div.table-responsive -->

  <script> var tp = tableData("tpg");</script>
</fieldset>
  </div>
  {!!Form::close()!!}
  <br><br><br><br><br>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/es.js"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker.es.min.js') }}"></script>
<script type="text/javascript" src="{{asset('js/estados.js')}}"></script>
<script type="text/javascript" src="{{asset('js/proyectos.js')}}"></script>
<script type="text/javascript">
var idp = {{$proy->pry_id}};
var co = null;
  $('.fecha').datepicker({
    autoclose: true,
    format: 'yyyy-mm-dd',
    language:'es',
    orientation: "bogom auto",
    startDate: null,
  });
  

  $(document).ready(function () {
    $(".file").fileinput({
        language: "es",
        showCaption: false,
        showUpload: false,
        browseLabel: "Seleccionar Archivo",
        browseIcon: "<i class='fa fa-file'></i>",
        browseClass: "btn btn-primary",
        showRemove: false,
        allowedFileExtensions: ["jpg", "png", "jpeg", "pdf"],
        previewFileType: ['image', 'pdf'],
    });

    // Mostrar vista previa en el div al seleccionar un nuevo archivo
    $("#file-input").on("change", function (event) {
        let file = event.target.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function (e) {
                let filePreview = $("#file-preview");
                let fileType = file.type;

                if (fileType.includes("image")) {
                    filePreview.html(`<img src="${e.target.result}" alt="Imagen" class="img-fluid" style="max-width: 100%; height: auto;">`);
                } else if (fileType.includes("pdf")) {
                    filePreview.html(`<embed src="${e.target.result}" type="application/pdf" width="100%" height="500px">`);
                }
            };
            reader.readAsDataURL(file);
        }
    });
    });
</script>
<script>
    const EMPRESA_ID = "{{ Session::get('idEmpresa') }}"; // PHP procesa el valor de la sesión
    const BASE_URL = "{{ url('') }}/"; // PHP procesa la URL base correctamente
</script>
<script type="text/javascript">
  var prvs = ;
</script>
<script>
$(document).ready(function() {
    function calcularDesdeSubtotal() {
        let subtotal = parseFloat($('#subtotal').val()) || 0;
        let iva = parseFloat($('#iva').val()) || 0;

        let montoIva = (subtotal * iva) / 100;
        let total = subtotal + montoIva;

        $('#total').val(total.toFixed(2));
    }

    function calcularDesdeTotal() {
        let total = parseFloat($('#total').val()) || 0;
        let iva = parseFloat($('#iva').val()) || 0;

        if (iva > 0) {
            let subtotal = total / (1 + (iva / 100));
            $('#subtotal').val(subtotal.toFixed(2));
        }
    }

    // Si el usuario cambia el subtotal, recalcula el total
    $('#subtotal, #iva').on('input', calcularDesdeSubtotal);

    // Si el usuario cambia el total, recalcula el subtotal
    $('#total').on('input', calcularDesdeTotal);
});
</script>

<script>
$(document).ready(function() {
    function calcularDesdeSubtotal() {
        let subtotal = parseFloat($('#edit_subtotal').val()) || 0;
        let iva = parseFloat($('#edit_iva').val()) || 0;

        let montoIva = (subtotal * iva) / 100;
        let total = subtotal + montoIva;

        $('#edit_total').val(total.toFixed(2));
    }

    function calcularDesdeTotal() {
        let total = parseFloat($('#edit_total').val()) || 0;
        let iva = parseFloat($('#edit_iva').val()) || 0;

        if (iva > 0) {
            let subtotal = total / (1 + (iva / 100));
            $('#edit_subtotal').val(subtotal.toFixed(2));
        }
    }

    // Si el usuario cambia el subtotal, recalcula el total
    $('#edit_subtotal, #edit_iva').on('input', calcularDesdeSubtotal);

    // Si el usuario cambia el total, recalcula el subtotal
    $('#edit_total').on('input', calcularDesdeTotal);
});
</script>

<script>
function calcularTotales() {
    let totalMonto = 0;
    let totalProyecto = parseFloat("{{$proy->pry_cost}}".replace(/[^0-9.-]+/g, "")) || 0;

    document.querySelectorAll("#pagos tr").forEach(row => { 
        if (row.cells.length > 3) {
            let monto = row.cells[3].innerText.replace(/[^0-9.-]+/g, "").trim();
            monto = parseFloat(monto) || 0;
            totalMonto += monto;

            let porcentajeMonto = totalProyecto > 0 ? (monto / totalProyecto) * 100 : 0;
            row.cells[4].innerText = `${porcentajeMonto.toFixed(2)}%`;
        }
    });

    let porcentajeCubierto = totalProyecto > 0 ? (totalMonto / totalProyecto) * 100 : 0;

    document.getElementById("totalMonto").innerText = `$${totalMonto.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
    document.getElementById("porcentajeCubierto").innerText = `${porcentajeCubierto.toFixed(2)}%`;
}

document.addEventListener("DOMContentLoaded", calcularTotales);

function calcularTotales2() {
    let subtotal = 0;
    
    document.querySelectorAll("#gastos tr").forEach(row => {
        let cols = row.getElementsByTagName("td");
        if (cols.length > 5) {
            let sub = parseFloat(cols[3].innerText.replace(/[^0-9.-]+/g, "")) || 0;
            subtotal += sub;
        }
    });

    let ivaPercentage = 16;
    let ivaAmount = (subtotal * ivaPercentage) / 100;
    let total = subtotal + ivaAmount;

    document.getElementById("montosiniva").innerText = `$${subtotal.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
    document.getElementById("montoiva").innerText = `$${total.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
}

document.addEventListener("DOMContentLoaded", function () {
    calcularTotales2();
});


function formatearNumero(input) {
    let valor = input.value;

    // Elimina caracteres no numéricos excepto el punto decimal
    valor = valor.replace(/[^0-9.]/g, "");

    // Asegurar que solo haya un punto decimal
    let partes = valor.split(".");
    if (partes.length > 2) {
        valor = partes[0] + "." + partes.slice(1).join("");
    }

    // Formatear número con comas, pero sin aplicarlas mientras se escribe
    let num = parseFloat(valor);
    if (!isNaN(num)) {
        input.dataset.rawValue = valor; // Guardar el valor sin formato
    }

    // Solo actualizar si el usuario terminó de escribir (evento "blur")
}

function aplicarFormatoFinal(input) {
    let valor = input.dataset.rawValue || input.value;

    let num = parseFloat(valor);
    if (!isNaN(num)) {
        input.value = num.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
}


</script>





@endsection