@extends('layouts.base')

@section('title', 'KPI - Consommation Beton')


@section('actions')
    <button data-toggle="modal" data-target="#production-modal" class="btn btn-primary waves-effect waves-light">
        <span class="btn-label"><i class="fa fa-plus"></i></span>Ajouter
    </button>

    <div id="production-modal" class="modal fade" tabindex="-1" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Details</h4>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="form-group">
                            <input type="week" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="" class="form-control-label">Conso 2I</label>
                            <input type="number" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="">Autres travaux</label>
                            <input type="number" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="">Autres travaux</label>
                            <input type="number" class="form-control">
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                    <button onclick="$('#production-form').submit()" type="button" class="btn btn-danger waves-effect waves-light">Créer</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')

    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div id="education_fields" class=" m-t-20"></div>
                <form class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <input type="week" class="form-control" id="Schoolname" name="Schoolname" placeholder="School Name">
                        </div>
                    </div>
                    <div class="col-md-12 text-center">
                        <div class="form-group">
                            <button class="btn btn-primary btn-md btn-block" type="button">Filtrer</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="card card-body">
        <div class="printableArea">
            <hr>
            <h3 class="text-center"><b>CONSOMMATION BETON PAR SECTION /  SEMAINE 33 </b></h3>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive m-t-40" style="clear: both;">
                        <table class="table table-hover" style="border-collapse:collapse;">
                            <thead class="text-white bg-primary border border-primary">
                            <tr>
                                <th class="align-middle">Section</th>
                                <th class="text-center align-middle">Béton prévue</th>
                                <th class="text-center align-middle">Beton realisé</th>
                                <th class="text-center align-middle">Tx Réalisé</th>
                                <th class="text-center align-middle">Ecart</th>
                            </tr>
                            </thead>
                            <tbody class="border border-primary">
                            <tr>
                                <td class="align-middle">Maçonnerie</td>
                                <td class="text-center align-middle">823 177</td>
                                <td class="text-center align-middle">790262</td>
                                <td class="text-center align-middle">96%</td>
                                <td class="text-center align-middle">32 915</td>
                            </tr>
                            <tr class="bg bg-dark">
                                <td class="align-middle text-white font-weight-bold">Total</td>
                                <td class="text-center align-middle text-white font-weight-bold">823 177</td>
                                <td class="text-center align-middle text-white font-weight-bold">790262</td>
                                <td class="text-center align-middle text-white font-weight-bold">96%</td>
                                <td class="text-center align-middle text-white font-weight-bold">32 915</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="col-md-12">
                    <table class="table table-hover" style="border-collapse:collapse;">
                        <thead class="text-white bg-primary border border-primary">
                        <tr>
                            <th class="align-middle">Observation</th>
                        </tr>
                        </thead>
                        <tbody class="border border-primary">
                        <tr>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="card card-body">
        <div class="printableArea1">
            <hr>
            <h3 class="text-center"><b>CONSOMMATION BETON PAR CENTRALE /  SEMAINE 33 </b></h3>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive m-t-40" style="clear: both;">
                        <table class="table table-hover" style="border-collapse:collapse;">
                            <thead class="text-white bg-success border border-primary">
                            <tr>
                                <th class="align-middle"></th>
                                <th class="text-center align-middle">Volume(kg)</th>
                                <th class="text-center align-middle">Volume(m3)</th>
                                <th class="text-center align-middle">% Part</th>
                            </tr>
                            </thead>
                            <tbody class="border border-primary">
                            <tr>
                                <td class="align-middle">Centrale</td>
                                <td class="text-center align-middle">823 177</td>
                                <td class="text-center align-middle">(c'est égale à = volume en kg/2400)</td>
                                <td class="text-center align-middle">96%</td>
                            </tr>
                            <tr class="bg bg-dark">
                                <td class="align-middle text-white font-weight-bold ">Total</td>
                                <td class="text-center align-middle text-white font-weight-bold">823 177</td>
                                <td class="text-center align-middle text-white font-weight-bold">(c'est égale à = volume en kg/2400)</td>
                                <td class="text-center align-middle text-white font-weight-bold">96%</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="col-md-12">
                    <table class="table table-hover" style="border-collapse:collapse;">
                        <thead class="text-white bg-success border border-primary">
                        <tr>
                            <th class="align-middle">Observation</th>
                        </tr>
                        </thead>
                        <tbody class="border border-primary">
                        <tr>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="card card-body">
        <div class="printableArea2">
            <div class="row">
                <div class="col-md-6">
                    <table class="table table-hover" style="border-collapse:collapse;">
                        <thead class="text-white bg-danger border border-danger">
                        <tr>
                            <th class="align-middle" colspan="2">Perte </th>
                        </tr>
                        </thead>
                        <tbody class="border border-danger">
                        <tr>
                            <td>30 679</td>
                            <td>1,7%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-6">
                    <table class="table table-hover" style="border-collapse:collapse;">
                        <thead class="text-white bg-warning border border-warning">
                        <tr>
                            <th class="align-middle">Cible</th>
                        </tr>
                        </thead>
                        <tbody class="border border-warning">
                        <tr class="text-center">
                            <td>1,00%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('javascripts')
    <script>

        $(function() {
            $("#print").click(function() {
                var mode = 'iframe'; //popup
                var close = mode == "popup";
                var options = {
                    mode: mode,
                    popClose: close
                };
                $("div.printableArea").printArea(options);
            });
        });
    </script>

@endsection