@extends('admin.layout.app')
@section('title','Dashboard')
@push('headerscript')
    <link href="{{asset('theme/plugins/morris/morris.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('theme/plugins/bootstrap-daterangepicker/daterangepicker.css')}}" rel="stylesheet"
          type="text/css">
    <link href="{{asset('theme/plugins/bootstrap-sweetalert/sweet-alert.css')}}" rel="stylesheet" type="text/css">

    <link href="{{asset('theme/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}" rel="stylesheet">
    <style>
        .table {
            background-color: #f3f3f3db;
            box-shadow: 0px 4px 5px #888;
            border-right: 10px;
            margin-bottom: 0px;
        }

        .page-title-box {
            background-color: white !important;
        }

        .max_height300 {
            max-height: 170px;
            overflow: auto;
        }

        .table-bordered > thead > tr > th {
            border-bottom-width: 2px;
            position: sticky;
            top: 0;
            background: #F0F0F0;
            padding: 0 8px;
        }

        .card-box {
            border: 2px solid #ffffff;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            background-clip: padding-box;
            margin-bottom: 20px;
            background-color: #f5f5f5;
        }

        .button_color {
            color: #006666;
            border-color: #006666;
            width: 156px;
            transition: background-color 0.5s ease, color 0.5s ease;

        }

        .button_color:hover {
            background: #006666;
            color: #fff;
        }

        .new-box-shadow {
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            border: 1px solid #ddd;
        }

    </style>
@endpush
@push('headerscript')
@endpush
@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-title-box">
                        <div class="row">
                            <div class="col-md-6 col-xs-6">
                                <h4 style="font-weight: bold">Dashboard Summary </h4>
                            </div>
                            <div class="col-md-6 col-xs-6 text-right">
                                <div class="m-t-10">
                                    <a href="{{route('admin.dashboard')}}"><b>Go To Sweet Dashboard</b> <i
                                            class="mdi mdi-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @can('dashboard')
                        {{-- Filters --}}
                        <div class="row m-b-15 ">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-6 col-sm-12">
                                        <label for="from_date">From Date</label>
                                        <input type="text" name="from_date" id="from_date"
                                               value="{{date('d-m-Y')}}"
                                               class="form-control datepicker" autocomplete="off">
                                    </div>
                                    <div class="col-md-6 col-sm-12">
                                        <label for="to_date">To Date</label>
                                        <input type="text" name="to_date" id="to_date"
                                               value="{{date('d-m-Y')}}"
                                               class="form-control datepicker" autocomplete="off">
                                    </div>
                                </div>
                                <div class="row m-b-15">
                                    <h5 class="m-b-10 m-l-10" style="font-weight: bold">Workshop Overview</h5>
                                    <div class="col-md-4 col-sm-12">
                                        <label for="technician_id">Technician</label>
                                        {!! Form::select("technician_id", [''=>'Select Technician']+$technician, old("technician_id"), ['class'=>'form-control select2', 'required', 'id'=>'technician_id'] ) !!}

                                    </div>
                                    <div class="col-md-4 col-sm-12">
                                        <label for="supervisor_id">Supervisor</label>
                                        {!! Form::select("supervisor_id", [''=>'Select Supervisor']+$supervisor, old("supervisor_id"), ['class'=>'form-control select2', 'required', 'id'=>'supervisor_id'] ) !!}

                                    </div>
                                    <div class="col-md-4 col-sm-12">
                                        <label for="master_search">WorkShop Search</label>
                                        <input type="text" name="master_search" id="master_search" value=""
                                               class="form-control"
                                               autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6   col-sm-12 m-t-30">
                             <div class="row">
                                <div class="col-md-4  col-xs-6 ">
                                    <a href="{{route('job-appointment.create')}}" title="Create Inspection"
                                       class="btn button_color btn-rounded active m-t-5 m-l-10 fontBold">
                                        <span id="">Appointments</span>
                                    </a>
                                </div>
                                <div class="col-md-4  col-xs-6">
                                    <a href="{{route('inspection.create')}}" title="Create Inspection"
                                       class="btn button_color btn-rounded active m-t-5 m-l-10 fontBold">
                                        <span id="">Inspections</span>
                                    </a>
                                </div>
                                <div class="col-md-4  col-xs-6">
                                    <a href="{{route('estimation.create')}}" title="Create Estimation"
                                       class="btn button_color btn-rounded active m-t-5 m-l-10 fontBold">
                                        <span id="">Estimations</span>
                                    </a>
                                </div>
                                <div class="col-md-4  col-xs-6">
                                    <a href="{{route('job-card.create')}}" title="Create Job Card"
                                       class="btn button_color btn-rounded active m-t-5 m-l-10 fontBold">
                                        <span id="">Job Cards</span>
                                    </a>
                                </div>
                                <div class="col-md-4  col-xs-6">
                                    <a href="{{route('billing-job-card.index')}}" title="Invoices"
                                       class="btn button_color btn-rounded active m-t-5 m-l-10 fontBold">
                                        <span id="">Workshop Invoice</span>
                                    </a>
                                </div>
                                <div class="col-md-4  col-xs-6">
                                    <a href="{{route('reports.index')}}" title="Create Estimation"
                                       class="btn button_color btn-rounded active m-t-5 m-l-10 fontBold">
                                        <span id="">Reports</span>
                                    </a>
                                </div>
                                <div class="col-md-4  col-xs-6">
                                    <a href="{{route('purchase-order.create')}}" title="Create Estimation"
                                       class="btn button_color btn-rounded active m-t-5 m-l-10 fontBold">
                                        <span id="">Purchase Order</span>
                                    </a>
                                </div>
                                <div class="col-md-4  col-xs-6">
                                    <a href="{{route('purchase-invoice.create')}}" title="Create Job Card"
                                       class="btn button_color btn-rounded active m-t-5 m-l-10 fontBold">
                                        <span id="">Purchase Invoice</span>
                                    </a>
                                </div>
                                <div class="col-md-4  col-xs-6">
                                    <a href="{{route('sales-invoice.index')}}" title="Invoices"
                                       class="btn button_color btn-rounded active m-t-5 m-l-10 m-r-10 fontBold">
                                        <span id="">Sales Invoice</span>
                                    </a>
                                </div>
                                </div>
                            </div>


                        </div>
                        <div class="raw" id="dashboardData"></div>
                    @endcan
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footerscript')
    <script src="{{asset('theme/plugins/bootstrap-sweetalert/sweet-alert.min.js')}}"></script>
    <script src="{{asset('theme/plugins/moment/moment.js')}}"></script>
    <script src="{{asset('theme/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>
    <script src="{{asset('theme/plugins/morris/morris.min.js')}}"></script>
    <script src="{{asset('theme/plugins/raphael/raphael-min.js')}}"></script>
    <script src="{{asset('theme/plugins/select2/js/select2.full.js')}}"></script>
    <script src="{{asset('theme/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
    <script src="{{asset('theme/plugins/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('theme/plugins/datatables/dataTables.bootstrap.js')}}"></script>
    <script>
        $(document).ready(function () {
            DashboardData();
        })
        $('#from_date,#to_date,#technician_id,#supervisor_id,#master_search').on('change', function () {
            DashboardData();
        });

        function DashboardData() {
            let from_date = $('#from_date').val();
            let to_date = $('#to_date').val();
            let technician_id = $('#technician_id').val();
            let supervisor_id = $('#supervisor_id').val();
            let master_search = $('#master_search').val();
            $.ajax({
                url: '{{route('getDashboardDataByAjax')}}',
                type: 'GET',
                data: {
                    from_date: from_date,
                    to_date: to_date,
                    technician_id: technician_id,
                    supervisor_id: supervisor_id,
                    master_search: master_search,
                },
                success: function (response) {
                    $('#dashboardData').html(response);
                }
            })
        }
    </script>
@endpush