@extends('layouts.app')
<style>
    .pd-b-0{
        padding-bottom: 0px !important;
    }
    .container{
        width:auto !important;
        background: #fff;
    }
    #workOrderChart {
    max-width: 100%;
    overflow-x: auto;
}
</style>
@section('title')
    {{ $ApplicationName }} -> Dashboard
@stop


@section('top-bar')
    @include('includes.top-bar')
@stop

@section('left-sidebar')
@include('includes.sub-contracting-left-sidebar')
@stop

@section('content')

    <section class="content">
        <div class="container-fluid">
            <div class="block-header">
                <h2>DASHBOARD</h2>
            </div>

            <div class="container">
                <div class="row m-t-20">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="info-box hover-expand-effect">
                        <div class="icon">
                            <i class="fas fa-minus-square"></i>
                        </div>
                        <div class="content">
                            <div class="text">
                                <h4>Total Work Order Amount {{$transaction->systemSettingCurrency()}}</h4>
                            </div>
                            <div class="number count-to" data-from="0" data-to="{{ $total_work_order_amount }}" data-speed="1000" data-fresh-interval="0">
                            </div>
                        </div>
                        <div data-toggle="modal" data-target="#myModal" class="bank-icon-model">
                            <i id="eye1" class="fa fa-eye"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="info-box hover-expand-effect">
                        <div class="icon">
                            <i class="fas fa-minus-square"></i>
                        </div>
                        <div class="content">
                            <div class="text">
                                <h4>Total Advance Amount {{$transaction->systemSettingCurrency()}}</h4>
                            </div>
                            <div class="number count-to" data-from="0" data-to="{{ $total_advance_amount }}" data-speed="1000" data-fresh-interval="0">
                            </div>
                        </div>
                        <div data-toggle="modal" data-target="#myModal1" class="bank-icon-model">
                            <i id="eye2" class="fa fa-eye"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="info-box hover-expand-effect">
                        <div class="icon">
                            <i class="fas fa-minus-square"></i>
                        </div>
                        <div class="content">
                            <div class="text">
                                <h4>Total Bill Amount {{$transaction->systemSettingCurrency()}}</h4>
                            </div>
                            <div class="number count-to" data-from="0" data-to="{{ $total_bill_amount }}" data-speed="1000" data-fresh-interval="0">
                            </div>
                        </div>
                        <div data-toggle="modal" data-target="#myModal2" class="bank-icon-model">
                            <i id="eye3" class="fa fa-eye"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="info-box hover-expand-effect">
                        <div class="icon">
                            <i class="fas fa-minus-square"></i>
                        </div>
                            <div class="content">
                                <div class="text">
                                    <h4>Total Retention Amount {{$transaction->systemSettingCurrency()}}</h4>
                                </div>
                                <div class="number count-to" data-from="0" data-to="{{ $total_retention_amount }}" data-speed="1000" data-fresh-interval="0">
                            </div>
                            <div data-toggle="modal" data-target="#myModal3" class="bank-icon-model">
                            <i id="eye4" class="fa fa-eye"></i>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row charts">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="card p-b-10 m-t-10">
                        <canvas id="workOrderChart" style="max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal" id="workOrderModal">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Work Order</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="modal1" class="table table-hover">
                    <thead>
                    <tr>
                        <th style="text-align: left !important">#</th>
                        <th style="text-align: left !important">Work Order Name</th>
                        <th style="text-align: left !important">Total Amount {{$transaction->systemSettingCurrency()}}</th>
                    </tr>
                    </thead>
                    <tbody>
                        @foreach($work_orders as $work_order)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $work_order->work->name ?? '-' }}</td>
                                <td style="text-align: right;">{{ $work_order->total_amount }}</td>
                            </tr>
                        @endforeach
                        <th>
                            <td style="font-weight: bolder">Total : {{ $total_work_order_amount }} {{$transaction->systemSettingCurrency()}} </td>

                        </th>
                    </tbody>
                </table>
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
    </div>


<div class="modal" id="advanceAmountModal">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Advance Amount</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="modal2" class="table table-hover">
                    <thead>
                    <tr>
                        <th style="text-align: left !important">#</th>
                        <th style="text-align: left !important">Contractor Name</th>
                        <th style="text-align: left !important">Advance Amount{{$transaction->systemSettingCurrency()}}</th>
                    </tr>
                    </thead>
                    <tbody>
                        
                        @foreach($advance_slips as $advance_slip)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $advance_slip->contractor->name ?? '-' }}</td>
                                <td style="text-align: right;">{{ $advance_slip->advance_slip_amount }}</td>
                            </tr>
                        @endforeach
                        <th>
                            <td style="font-weight: bolder">Total : {{ $total_advance_amount }} {{$transaction->systemSettingCurrency()}} </td>

                        </th>
                    </tbody>
                </table>
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="billModal">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bill</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                    <table id="modal3" class="table table-hover">
                    <thead>
                    <tr>
                        <th style="text-align: left !important">#</th>
                        <th style="text-align: left !important">Contractor Name</th>
                        <th style="text-align: left !important">BILL Amount {{$transaction->systemSettingCurrency()}}</th>
                    </tr>
                    </thead>
                    <tbody>
                        
                        @foreach($contractor_bills as $contractor_bill)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $contractor_bill->contractor->name ?? '-' }}</td>
                                <td style="text-align: right;">{{ $contractor_bill->total_bill_amount }}</td>
                            </tr>
                        @endforeach
                        <th>
                            <td style="font-weight: bolder">Total : {{ $total_bill_amount }} {{$transaction->systemSettingCurrency()}} </td>

                        </th>
                    </tbody>
                </table>
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="retentionModal">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Retention</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                         <table id="modal4" class="table table-hover">
                            <thead>
                            <tr>
                                <th style="text-align: left !important">#</th>
                                <th style="text-align: left !important">Contractor Name</th>
                                <th style="text-align: left !important">Retention Amount {{$transaction->systemSettingCurrency()}}</th>
                            </tr>
                            </thead>
                            <tbody>
                                
                                @foreach($work_orders as $work_order)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $work_order->contractor->name ?? '-' }}</td>
                                        <td style="text-align: right;">{{ $work_order->retention_money }}</td>
                                    </tr>
                                @endforeach
                                <th>
                                    <td style="font-weight: bolder">Total : {{ $total_retention_amount }} {{$transaction->systemSettingCurrency()}} </td>

                                </th>
                            </tbody>
                        </table>
                        </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>               
    </div>
@stop

@push('include-js')
    <!-- Jquery CountTo Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/jquery-countto/jquery.countTo.js') }}"></script>

    <!-- Morris Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/raphael/raphael.min.js') }}"></script>
    <script src="{{ loadAsset('asset/plugins/morrisjs/morris.js') }}"></script>

    <!-- ChartJs -->
    <script src="{{ loadAsset('asset/plugins/chartjs/Chart.bundle.js') }}"></script>

    <!-- Flot Charts Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.js') }}"></script>
    <script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.resize.js') }}"></script>
    <script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.pie.js') }}"></script>
    <script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.categories.js') }}"></script>
    <script src="{{ loadAsset('asset/plugins/flot-charts/jquery.flot.time.js') }}"></script>
    <script src="{{ loadAsset('asset/js/pages/index.js') }}"></script>

    <!-- Sparkline Chart Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/jquery-sparkline/jquery.sparkline.js') }}"></script>
    {{--<script src="{{ loadAsset('asset/js/pages/ui/modals.js') }}"></script>--}}
    <script src="{{ loadAsset('asset/plugins/autosize/autosize.js') }}"></script>

    <!-- Moment Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/momentjs/moment.js') }}"></script>

    <!-- Bootstrap Material Datetime Picker Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>

    <script src="{{ loadAsset('asset/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>

    <script src="{{ loadAsset('asset/js/pages/forms/basic-form-elements.js') }}"></script>
    <!-- Autosize Plugin Js -->


    <script>
        $(document).ready(function(){
        mapWorkOrderChart();
        });

        function mapWorkOrderChart() 
        {
            const WorkOrder = @json($work_orders);
            const workOrderData = {};

            WorkOrder.forEach(bill => {
                const contractorName = bill.contractor.name;
                const workOrderName = bill.work.name;
                if (!workOrderData[contractorName]) {
                    workOrderData[contractorName] = [];
                }
                workOrderData[contractorName].push(workOrderName);
            });

            const contractorNames = Object.keys(workOrderData);
            const workCounts = Object.values(workOrderData).map(arr => arr.length);

            const ctx = document.getElementById('workOrderChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: contractorNames, 
                    datasets: [{
                        label: 'Work Orders Count',
                        data: workCounts,
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    indexAxis: 'y',
                    scales: {
                        x: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
        $(document).ready(function () {
            $('#eye1').on('click', function () {

                $('#workOrderModal').modal('show');
            });
            $('#eye2').on('click', function () {

                $('#advanceAmountModal').modal('show');
            });
            $('#eye3').on('click', function () {

                $('#billModal').modal('show');
            });
            $('#eye4').on('click', function () {

                $('#retentionModal').modal('show');
            });
        });

        @if(Session::has('success'))
            toastr["success"]('{{ Session::get('success') }}');
        @endif

                @if(Session::has('error'))
            toastr["error"]('{{ Session::get('error') }}');
        @endif

                @if ($errors->any())
                @foreach ($errors->all() as $error)
            toastr["error"]('{{ $error }}');
        @endforeach
        @endif

    </script>

    {{--All datagrid --}}
    <script src="{{ loadAsset('asset/js/dataTable.js')  }}"></script>
    <script>
        BaseController.init();
    </script>
@endpush