@extends('layouts.app')

@section('content')

<style>
    .table-responsive{
        overflow-x: scroll !important;
    }

</style>
<div class="page-info">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('/home'); }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ url('/products'); }}">Listado realeases clientes</a></li>
            <li class="breadcrumb-item active" aria-current="page">Proyección</li>
        </ol>
    </nav>
    <div class="page-options">
    </div>
</div>

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Proyección</h1>
            </div>
            <div class="col-sm-6">
                <a class="btn btn-secondary float-right" href="{{ route('users.index') }}">
                    Regresar
                </a>
            </div>
        </div>
    </div>
</section>

<div class="main-wrapper">
    <div class="row">
        <div class="col">
            <div class="card">
                @include('flash::message')

                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a 
                                id="tab-projection"
                                class="nav-link active" 
                                href="#" 
                                onclick="changeTap('projection')"
                                >PT Proyección 
                            </a>
                        </li>
                        <li class="nav-item">
                            <a 
                                id="tab-production"
                                class="nav-link" 
                                href="#"
                                onclick="changeTap('production')"
                                >PT Producción 
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="card-body" id="table-projection">
                    <div class="row">
                        <div class="col">
                            <div>
                                @include('customers_releases.tabla_mrp')
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body" id="table-production" style="display: none">
                    <div class="row">
                        <div class="col">
                            <div>
                                @include('customers_releases.tabla_mrp_produccion') 
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection


@push('page_scripts')
<script>
        $(document).ready(function(){

            "use strict";
            ajustarTabla();
        });

        function ajustarTabla(){
            let sidebar_hegith = $('.page-sidebar').width();
            let main_height = $('.main-wrapper').width();

            // $('.main-wrapper').css('width', `${main_height - (sidebar_hegith + 100)}px`);
            $('.main-wrapper').css('width', 'auto');
            console.log(sidebar_hegith, main_height);
            $('#sidebar-state').click(function() {
                if ($('.page-sidebar').hasClass('open')) {
                    $('.page-sidebar').removeClass('open');
                    // $('.main-wrapper').css('width', `${main_height - (sidebar_hegith + 100)}px`);
                    $('.main-wrapper').css('width', 'auto');
                } else {
                    $('.page-sidebar').addClass('open');
                    $('.main-wrapper').css('width', `100%`);
                    console.log('entra 2');
                }
            });
        }

        function changeTap(selector){
            
            $('#table-production').hide();
            $('#table-projection').hide();
            
            $('#tab-production').removeClass('active');
            $('#tab-projection').removeClass('active');
            
            $('#table-' + selector).show();
            $('#tab-' + selector).addClass('active');


            console.log('entramos ' + selector);

        }

</script>
@endpush