@extends('layouts.panel.app')

@push('link')
    <style>
        .disponible::before,
        .apartado::before,
        .vendido::before {
            content: "";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 15px;
            margin-right: 6px;
        }

        .disponible::before {
            background-color: #59A12F;
        }
        .apartado::before {
            background-color: #DDC54F;
        }
        .vendido::before {
            background-color: #C72020;
        }
        .pointer-none {
            pointer-events: none;
            cursor: pointer;
        }
    </style>
@endpush

@section('content')
    <!-- Header -->
    @include('includes.panel.header')

    <!-- Page content -->
    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
				<div class="card">
				<!-- Card header -->
					<div class="card-header border-0">
                        <div class="row justify-content-end">
                            <div class="col-6">
                                <h3>Leyenda</h3>

                                <ul class="list-unstyled">
                                    <li class="disponible d-inline-block mr-3"><small>Disponible</small></li>
                                    <li class="apartado d-inline-block mr-3"><small>Apartado</small></li>
                                    <li class="vendido d-inline-block"><small>Vendido</small></li>
                                </ul>
                                
                            </div>
                            {{--<div class="col-6 text-right"><button class="btn btn-success pt-2 pb-2" data-toggle="modal" data-target="#mdAdd"><i class="fas fa-percent mr-2"></i>Porcentaje Vendido</button></div>--}}
                        </div>
					</div>
                    <!-- Light table -->
					<div class="table-responsive pb-3">
						<table class="table align-items-center table-flush" id="dataTable" data-order='[[ 0, "asc" ]]' data-paging='false'>
							<thead class="thead-light">
								<tr>
									{{-- <th width="20px">
                                    </th> --}}
									<th scope="col" class="sort" data-sort="manzana"># Manzana</th>
									<th scope="col" class="sort" data-sort="lote">Tipo</th>
									<th scope="col" class="sort" data-sort="m2">Mtrs<sup>2</sup></th>
									<th scope="col" class="text-center">Acciones</th>
									<th scope="col" class="text-center">Estado</th>
								</tr>
							</thead>
							<tbody class="list">
								@if ((isset($resp)) && (count($resp) > 0))
                                    @foreach ($resp as $num => $row)
                                        <tr>
                                            {{-- <td>
                                                <input type="checkbox" class="" id="" value="{{ $row -> id }}"> <span style="opacity:0;">{{ $row -> id}}</span>
                                            </td> --}}
                                            <td>Manzana <b>#{{ $row -> manzana }} LT {{ $row -> lote }} </b></td>
                                            <td>{{ $row -> tlo }}</td>
                                            <td>{{ $row -> m2 }}</td>
                                            <td class="text-center">
                                                <button onclick="mdEdit({{$num}})" class="btn btn-info btn-sm"><i class="fas fa-edit mr-2"></i> Editar</button>
                                            </td>
                                            <td class="text-center acciones-{{$row -> id}}">
                                                <button class="btn btn-success btn-sm border-0" style="background-color: #59A12F;" onclick="cambiar_status({{$row -> id}}, 1)"> @if ($row -> status == 1) <i class="fas fa-circle"></i> @else <i class="far fa-circle"></i> @endif </button>
                                                <button class="btn btn-warning btn-sm border-0" style="background-color: #DDC54F;" onclick="cambiar_status({{$row -> id}}, 2)"> @if ($row -> status == 2) <i class="fas fa-circle"></i> @else <i class="far fa-circle"></i> @endif </button>
                                                <button class="btn btn-danger btn-sm border-0" style="background-color: #C72020;" onclick="cambiar_status({{$row -> id}}, 3)"> @if ($row -> status == 3) <i class="fas fa-circle"></i> @else <i class="far fa-circle"></i> @endif </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
							</tbody>
						</table>
					</div>
				</div>
			</div>
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" id="mdEdit">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="{{route('panel.lotificacion.update')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Editar <span id="tlo_lote"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body pt-0">
                        <input type="hidden" name="id" id="idx" required>
                        <p>Haga clic en el cuadro para subir la nueva imagen para reemplazar desde el ordenador o si lo prefiere puede arrastrar y soltar en el cuadro de portada:</p>
                        <div class="row">
                            <div class="col-12 mb-4">
                                <label for="portada">Portada <span class="text-danger">*</span></label>
                                <div class="inputE">
                                    {{-- <input type="file" name="portada" class="dropifyE" data-height="250" data-allowed-file-extensions="png jpg jpeg" data-max-file-size="2M" data-default-file="" requied /> --}}
                                </div>
                                <small>Medidas recomendadas: 250px x 150px, solo se aceptan jpg, jpeg y png<br> Peso máximo soportado 1Mb.</small>
                            </div>
                            <div class="col-12 col-md-6 mb-4">
                                <label for="manzana"># Manzana <span class="text-danger">*</span></label>
                                <input type="text" name="manzana" id="manzana" disabled class="form-control" required>
                            </div>
                            <div class="col-12 col-md-6 mb-4">
                                <label for="lote">Lote <span class="text-danger">*</span></label>
                                <input type="text" name="lote" id="lote" disabled class="form-control" required>
                            </div>
                            <div class="col-12 mb-4">
                                <label for="m2">Metros<sup>2</sup> <span class="text-danger">*</span></label>
                                <input type="text" name="m2" id="m2" class="form-control" required>
                            </div>
                            <div class="col-12 col-md-6 mb-4">
                                <label for="precio_x_m2_con">Precio x m<sup>2</sup> <b class="text-primary">contado</b> <span class="text-danger">*</span></label>
                                <input type="text" name="precio_x_m2_con" id="precio_x_m2_con" class="form-control" required>
                            </div>
                            <div class="col-12 col-md-6 mb-4">
                                <label for="precio_x_m2_12m">Precio x m<sup>2</sup> <b class="text-primary">12 meses</b> <span class="text-danger">*</span></label>
                                <input type="text" name="precio_x_m2_12m" id="precio_x_m2_12m" class="form-control" required>
                            </div>
                            <div class="col-12 col-md-6 mb-4">
                                <label for="precio_x_m2_24m">Precio x m<sup>2</sup> <b class="text-primary">24 meses</b> <span class="text-danger">*</span></label>
                                <input type="text" name="precio_x_m2_24m" id="precio_x_m2_24m" class="form-control" required>
                            </div>
                            <div class="col-12 col-md-6 mb-4">
                                <label for="precio_x_m2_36m">Precio x m<sup>2</sup> <b class="text-primary">36 meses</b> <span class="text-danger">*</span></label>
                                <input type="text" name="precio_x_m2_36m" id="precio_x_m2_36m" class="form-control" required>
                            </div>
                            <div class="col-12 col-md-6 mb-4">
                                <label for="precio_x_m2_48m">Precio x m<sup>2</sup> <b class="text-primary">48 meses</b> <span class="text-danger">*</span></label>
                                <input type="text" name="precio_x_m2_48m" id="precio_x_m2_48m" class="form-control" required>
                            </div>
                            <div class="col-12 col-md-6 mb-4">
                                <label for="precio_x_m2_60m">Precio x m<sup>2</sup> <b class="text-primary">60 meses</b> <span class="text-danger">*</span></label>
                                <input type="text" name="precio_x_m2_60m" id="precio_x_m2_60m" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-default"><i class="fas fa-save mr-2"></i> Guardar</button>
                        {{-- @can(PermissionKey::SimposioGallery['permissions']['update']['name'])
                        @endcan --}}
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal" tabindex="-1" role="dialog" id="mdAdd">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="{{route('panel.lotificacion.porcentaje')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    {{-- Este valor se cambia en base a la etapa --}}
                    <input type="hidden" name="id" value="1">

                    <div class="modal-header">
                        <h5 class="modal-title">Agregar nuevo porcentaje vendido</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body pt-0">
                        <p>Rellene el cuadro para subir y actualizar el porcentaje vendido de lotificación</p>
                        <div class="row">
                            <div class="col-12 mb-4">
                                <label for="portada">Porcentaje <span class="text-danger">*</span></label>
                                <input type="text" name="porcentaje" id="porcentaje" class="form-control" required placeholder="10% vendido" value="{{$etapa -> porcentaje}}" >
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-default"><i class="fas fa-save mr-2"></i> Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script type="text/javascript">
        alertify.set('notifier','position', 'top-right');
        const all = @json($resp);

        function mdEdit(idx) {
            let index = all[idx];

            document.getElementById('idx').value = index['id'];
            document.getElementById('tlo_lote').innerHTML = index['tlo'];
            document.getElementById('manzana').value = index['manzana'];
            document.getElementById('lote').value = index['lote'];
            document.getElementById('m2').value = index['m2'];
            document.getElementById('precio_x_m2_con').value = index['precio_x_m2_con'];
            document.getElementById('precio_x_m2_12m').value = index['precio_x_m2_12m'];
            document.getElementById('precio_x_m2_24m').value = index['precio_x_m2_24m'];
            document.getElementById('precio_x_m2_36m').value = index['precio_x_m2_36m'];
            document.getElementById('precio_x_m2_48m').value = index['precio_x_m2_48m'];
            document.getElementById('precio_x_m2_60m').value = index['precio_x_m2_60m'];

            let contenedor = document.querySelector('.inputE');
                if(contenedor.querySelector('.dropify-wrapper')){
                    contenedor.querySelector('.dropify-wrapper').remove();
                }

            let input = document.createElement('input');
                input.classList.add('dropifyE');
                input.type = 'file';
                input.name = 'portada';
                input.setAttribute('data-height', '250');
                input.setAttribute('data-allowed-file-extensions', 'png jpg jpeg');
                input.setAttribute('data-max-file-size', '2M');
                input.setAttribute('data-default-file', PATH + index['portada']);

            contenedor.appendChild(input);

            $('.dropifyE').dropify();
            $('#mdEdit').modal('show');
        }

        function cambiar_status (id, status) {
            axios.post(PATH + "admin/lotificacion/changestatus", {
                id: id,
                status: status
            })
            .then(function (response) {
                document.querySelectorAll(".acciones-"+ id +" .btn").forEach(btn => {
                    btn.innerHTML = '<i class="far fa-circle"></i>';
                });

                if (status == 1) document.querySelector(".acciones-"+ id + ' .btn-success').innerHTML = '<i class="fas fa-circle"></i>';
                if (status == 2) document.querySelector(".acciones-"+ id + ' .btn-warning').innerHTML = '<i class="fas fa-circle"></i>';
                if (status == 3) document.querySelector(".acciones-"+ id + ' .btn-danger').innerHTML = '<i class="fas fa-circle"></i>';

                alertify.notify('Hecho!', 'success', 2);
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    </script>
    {{-- <script type="text/javascript" src="{{mix('panel/js/lotificacion.js')}}"></script> --}}
@endpush