@extends('layouts.dashboard.app')

@section('content')

    <style>
        /* Style the select element */
        select {
            font-size: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: white;
        }
    </style>

    <div class="content-wrapper">

        <section class="content-header">

            <section class="col-md-12">
                <ul class="breadcrumb mt-2">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard.welcome') }}">
                            <i class="fa fa-dashboard"></i> @lang('site.home')</a></li>
                    <li class="breadcrumb-item active"><i
                            class="fa fa-file-text-o"></i> @lang('site.commission_system')</a></li>
                </ul>
            </section>

            <div class="container">

                <section class="content">
                    <div class="row">
                        <div class="box-body">
                            <div class="col-md-12">
                                <h4 class="text-red text-bold text-center margin" style="background-color:white">ملحوظة
                                    : كل البيانات يتم جلبها بالربط
                                    مع {{\App\Models\Integration::where("is_selected", 1)->first()->getSelectedName()}}
                                    من قاعدة البيانات
                                    ({{\App\Models\Integration::where("is_selected", 1)->first()->db_name}})</h4>
                            </div>
                        </div>


                        <div class="col-md-12">
                            <div class="box box-solid">
                                <div class="box-header with-border" data-widget="collapse">
                                    <h3 class="box-title text-teal">نظام العمولة - اهداف المبيعات - <span class="text-red">تحت التجربة</span></h3>
                                    <div class="box-tools pull-right">
                                        <button type="button" class="btn btn-box-tool text-teal">
                                            <span class="label text-black">عرض المزيد</span>
                                            {{--                                                <i class="fa fa-minus"></i>--}}
                                            {{--                                                <span id="loading"><span class="fa fa-minus"></span></span>--}}
                                        </button>
                                    </div>
                                </div>

                                <div class="box-body">

                                    <div class="box-body" {{--style="display: flex;justify-content: center;"--}}>
                                        <div class="col-lg-3 col-xs-12">
                                            <label style="font-size: 20px;" for="year_id">السنة</label>
                                            <select name="year_id" id="year_id">
                                                @foreach($years as $year)
                                                    <option class="text-green"
                                                            value="{{$year}}" {{ $year == (isset($selectedYear)? $selectedYear : now()->format('Y'))? 'selected' : '' }}>{{$year}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-2 col-xs-12">
                                            <label style="font-size: 20px;" for="month_id">الشهر</label>
                                            <select name="month_id" id="month_id">
                                                @foreach($months as $month)
                                                    <option
                                                        value="{{$month}}" {{ $month == (isset($selectedMonth)? $selectedMonth : now()->format('m'))? 'selected' : '' }}>{{$month}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                </div>

                                <div class="box-footer text-center" style="">

                                    <div class="box-body" {{--style="display: flex;justify-content: center;"--}}>

                                        @if(auth()->user()->hasPermission('read_targets'))

                                            <div class="col-lg-3 col-xs-12">
                                                <a type="button" class="target-details" id="target-details"
                                                   data-url="{{ route('dashboard.commissions.module',["module"=>"targets"]) }}"
                                                   data-token="{{ csrf_token() }}"
                                                   data-id=""
                                                   data-method="post"
                                                >
                                                    <div class="btn btn-block btn-primary bg-teal margin">
                                                        <i class="fa fa-list"></i>
                                                        <span>@lang('اهداف المبيعات')</span>
                                                    </div>
                                                </a>
                                            </div>

                                            <div class="col-lg-3 col-xs-12">
                                                <a type="button" class="target-details" id="target-details"
                                                   data-url="{{ route('dashboard.commissions.module',["module"=>"targetsTypes"]) }}"
                                                   data-token="{{ csrf_token() }}"
                                                   data-id=""
                                                   data-method="post"
                                                >
                                                    <div class="btn btn-block btn-primary bg-teal margin">
                                                        <i class="fa fa-list"></i>
                                                        <span>@lang('انواع الاهداف')</span>
                                                    </div>
                                                </a>
                                            </div>
                                        @else
                                            <div class="col-lg-3 col-xs-12">
                                                <a class="btn btn-block btn-primary bg-teal margin disabled">
                                                    <i class="fa fa-list"></i>
                                                    <span>@lang('اهداف المبيعات')</span>
                                                </a>
                                            </div>

                                            <div class="col-lg-3 col-xs-12">
                                                <a class="btn btn-block btn-primary bg-teal margin disabled">
                                                    <i class="fa fa-list"></i>
                                                    <span>@lang('انواع الاهداف')</span>
                                                </a>
                                            </div>
                                        @endif

                                        @if(auth()->user()->hasPermission('read_commissions'))

                                            <div class="col-lg-3 col-xs-12">
                                                <a type="button" class="target-details" id="target-details"
                                                   data-url="{{ route('dashboard.commissions.module',["module"=>"commission"]) }}"
                                                   data-token="{{ csrf_token() }}"
                                                   data-id=""
                                                   data-method="post"
                                                >
                                                    <div class="btn btn-block btn-primary bg-teal margin">
                                                        <i class="fa fa-list"></i>
                                                        <span>@lang('حساب العمولة')</span>
                                                    </div>
                                                </a>
                                            </div>

                                        @else

                                            <div class="col-lg-3 col-xs-12">
                                                <a class="btn btn-block btn-primary bg-teal margin disabled">
                                                    <i class="fa fa-list"></i>
                                                    <span>@lang('حساب العمولة')</span>
                                                </a>
                                            </div>

                                        @endif

                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="box box-solid">
                                <div class="box-header with-border">
                                    <h3 class="box-title text-primary">التفاصيل</h3>
                                    <div class="box-tools pull-right">
                                    </div>
                                </div>

                                <div class="box-body">
                                    <div class="col-md-12">
                                        <div class="form-group" id="display-data-area">
                                            <div id="target-details-list"
                                                {{--                                                 style="display: flex; justify-content: center;"--}}
                                            >
                                                <h3 class="box-title text-primary">لايوجد بيانات للعرض</h3>

                                            </div><!-- end of order product list -->

                                        </div>
                                    </div>
                                </div>
                                <div id="overlay" class="overlay" style="display: none">
                                    <i class="fa fa-refresh fa-spin text-green"></i>
                                </div>
                                {{--                                <div class="box-footer text-center" style="">--}}
                                {{--                                     <h5 href="javascript:void(0)" class="uppercase">@lang('site.comingSoon')</h5>--}}
                                {{--                                </div>--}}

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

        </section>

    </div><!-- end of content wrapper -->


@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
        });//end of document ready

        let target_details = $('.target-details');
        let upload__inputfile = $('.upload__inputfile');
        let overlay = $('#overlay');

        target_details.on('click', function (e) {
            e.preventDefault();

            overlay.css('display', 'flex');

            let main_url = $(this).data('url');
            let token = $(this).data('token');
            let id = $(this).data('id');
            let year = $(this).data('year') || (new Date()).getFullYear();
            let month = $(this).data('month') || (new Date()).getMonth() + 1;

            let main_data = new FormData();
            main_data.append('id', id);
            main_data.append('year', year);
            main_data.append('month', month);
            main_data.append('_token', token);
            let main_method = 'post';
            updateMainViewData(main_url,main_method,main_data);
        });

        $("#year_id").change(function () {
            target_details.data('year', $(this).val());
            upload__inputfile.data('year', $(this).val());
        });

        $("#month_id").change(function () {
            target_details.data('month', $(this).val());
            upload__inputfile.data('month', $(this).val());
        });

        function updateMainViewData(main_url, main_method, main_data) {
            $.ajax({
                url: main_url,
                method: main_method,
                data: main_data,
                processData: false,
                contentType: false,
                success: function (data) {

                    overlay.css('display', 'none');
                    $('#target-details-list').empty().append(data);
                    let my_element = document.getElementById("display-data-area");

                    my_element.scrollIntoView({
                        behavior: "smooth",
                        block: "start",
                        inline: "nearest"
                    });
                },
                error: function (xhr, status, error) {
                    overlay.css('display', 'none');
                }
            })
        }

    </script>
@endpush