@extends('layouts.main')
@section('title', 'Gestión de reclamos')
@section('icon', 'fa fa fa-user')

@section('content')
<meta name="csrf-token" content="{{ Session::token() }}">
<meta name="base_url" content="{{ url('/') }}">
<script src="{{asset('js/reporteEstado.js')}}" type="text/javascript"></script>

<div class="row">
    <div class='col-md-12'>
        <legend id = "titulo"><h4>Reporte Estado</h4></legend>
    </div>
    <br><br>
    <div class='row' style='padding:30px;'>
        <input type="hidden" value="{{ csrf_token() }}" id="token">
        <div class="col-md-4 col-md-offset-4">
            <div class="form-group row">
                <label for="cboProyecto_search" class="control-label col-sm-2 input-sm ">Proyecto:</label>
                <div class="col-md-8">
                    <select class='form-control input-sm' id ='cboProyecto_search' name="cboProyecto_search" style="width: 100%">
                        <option value="-1">Todos</option>
                    </select>
                </div>
            </div>
        </div>
        <div class='row'>
            <div class="col-md-5 col-md-offset-1">
                <table class="table" style="border: 1px solid #DDDDDD;" id="tblEstadoTotal">
                    <tr>
                        <th class="tg-baqh centrar">Estado</th>
                        <th class="tg-baqh centrar">2025</th>
                        <th class="tg-baqh centrar">%</th>
                        <th class="tg-baqh centrar">2024</th>
                        <th class="tg-baqh centrar">%</th>
                    </tr>
                </table>
            </div>
            <div class="col-md-5" id="reporte-estado"> </div>
        </div>
        <div class="row">
            <div class="col-md-6" style="margin-left: 60px;">
                <table class="table" style="border: 1px solid #DDDDDD;" id="tblEstadoProyecto">
                    <tr>
                        <th class="tg-baqh centrar">Proyecto</th>
                        <th class="tg-baqh centrar" colspan="2">Pendiente</th>
                        <th class="tg-baqh centrar" colspan="2">En Tramite</th>
                        <th class="tg-baqh centrar" colspan="2">En Ejecucion</th>
                        <th class="tg-baqh centrar" colspan="2">Solucionado</th>
                        <th class="tg-baqh centrar"></th>
                    </tr>
                    <tr>
                        <th class="tg-baqh centrar"></th>
                        <th class="tg-baqh centrar">Cant</th>
                        <th class="tg-baqh centrar">%</th>
                        <th class="tg-baqh centrar">Cant</th>
                        <th class="tg-baqh centrar">%</th>
                        <th class="tg-baqh centrar">Cant</th>
                        <th class="tg-baqh centrar">%</th>
                        <th class="tg-baqh centrar">Cant</th>
                        <th class="tg-baqh centrar">%</th>
                        <th class="tg-baqh centrar">Total</th>
                    </tr>
                </table>
            </div>
            <div class="col-md-5" id="reporte-estado-solucionado"> </div>
        </div>
    </div>
</div>
    
@endsection