@extends('layouts.app2')



@section('badcome')
@endsection

@section('dynamic_css')
<style>
    @media (max-width: 768px) {
        .col {
            -ms-flex-preferred-size: 0;
            flex-basis: auto;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 100%;
        }
    }

    .card_hover .card {
        border: 0px solid white;
    }

    .card_hover .card {
        border-top: 3px solid white;
    }
</style>
@endsection

@section('content')
<div class="container mb-5">
    <h4 class="text-center mt-4"><u>DISTRICT - {{$district}} <span
                class="text-danger">({{$program->program_name}})</span></u></h4>
    <p class="text-center text-info">Designation-wise Distribution</p>
    <div class="row">
        <div class="col-md-12">
            <nav>
                <div class="nav nav-tabs md-tabs" id="nav-tab" role="tablist">
                    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                        aria-controls="nav-home" aria-selected="true">Designation Distribution District-Wise</a>
                    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
                        aria-controls="nav-profile" aria-selected="false">Block Distribution</a>

                </div>
            </nav>
            <div class="tab-content pt-5" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <table class="table table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th>Designation</th>
                                <th>Employee No.s</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($designations as $value)
                            <tr>
                                <td>{{$value->designation_name}}</td>
                                <td>{{$value->employee_count}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <div class="accordion" id="accordionExample">
                        @foreach ($blocks as $value)
                        <div class="card">
                            <div class="card-header p-0" id="">
                                {{-- <h2 class="mb-0"> --}}
                                <button class="btn btn-link block_link btn-block p-3" type="button"
                                    data-target="#{{$value->block_id}}" data-block="{{$value->block_id}}"
                                    data-program="{{$program->program_id}}"
                                    style="text-decoration: none; text-align:left;color:#fff !important;background: linear-gradient(to left,#0d7c96 0,#484f92 100%);">
                                    <b>{{$value->block_name}}</b>
                                </button>
                                {{-- </h2> --}}
                            </div>
                            <div id="{{$value->block_id}}" class="collapse" aria-labelledby="headingOne"
                                data-parent="#accordionExample">
                                <div class="card-body">
                                    <table class="table table-responsive table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Designation</th>
                                                <th>Employee No.s</th>
                                            </tr>
                                        </thead>
                                        <tbody id="designation-body{{$value->block_id}}">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">

                <table class="table table-responsive">
                    <thead>
                        <tr>
                            <th>GP Name</th>
                            <th>Designation</th>
                            <th>Employee Name</th>
                        </tr>
                    </thead>
                    <tbody id="gp-distribution-body">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    $(document).on('click', '.block_link', function () {
        var program_id = $(this).data('program');
        var collapse_id = $(this).data('block');
        $('#' + collapse_id).collapse("show");
        $.get("{{route('getBlockDistribution')}}", {
            program_id: $(this).data('program'),
            block_id: $(this).data('block')
        }, function (j) {
            console.log(j)
            var tr_designation = "";
            for (var i = 1; i < j.length; i++) {

                tr_designation += "<tr><td>" + j[i].designation +
                    "</td><td><a href='#' style='color:red;text-decoration:underline' class='gpModal' data-block='" +
                    j[i].block_id + "' data-designation='" + j[i].designation_id + "' data-program_id='"+j[i].program_id+"'>" + j[i]
                    .employee_count + "</a></td></tr>";

            }
            $('#designation-body' + collapse_id).html(tr_designation);

        });
    });
    $(document).on('click', '.gpModal', function () {
        var block_id = $(this).data('block');
        var designation_id = $(this).data('designation');
        var program_id=$(this).data('program_id');
        // console.log(block_id)
        // console.log(designation_id)
        // console.log(program_id)
        $('#myModal').modal('show');
        $.get("{{route('getGpDistribution')}}", {
            program_id: $(this).data('program_id'),
            designation_id:designation_id,
            block_id: $(this).data('block')
        }, function (j) {
      console.log(j)
console.log(j.length)
            var tr_designation = "";
            for (var i = 0; i < j.length; i++) {
                tr_designation += "<tr><td>" + j[i].gram_panchyat_name +"</td><td>" + j[i].designation_name +"</td><td>" + j[i].name +"</td></tr>";

            }
            $('#gp-distribution-body').html(tr_designation);
        });
    })
</script>
@endsection