@extends('layouts.admin')

@section('content')
    <div class="page-header text-uppercase week-detail">
        <ul class="list-unstyled space-list m-0">
            <li>
                <p>{{ __('week-report.title') }}</p>
            </li>
            <li>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('common.home') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('week-report.sales_week') }}</li>
                    </ol>
                </nav>
            </li>
        </ul>
    </div>
    <div class="admin-area-col week-detail">
        <div class="rows">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <ul class="list-inline justified-header bordered-header">
                        <li>
                            <p class="m-0 font-medium">{{ __('week-report.details') }}</p>
                        </li>
                        <li>
                            <div class="datatable-custom-actions">
                                <ul class="list-inline">
                                    {{-- <li class="list-inline-item">
                                   <div class="d-table-search position-relative">
                                       <input type="text" class="form-control custom-field-grey font12 italic-style" placeholder="Please Search...">
                                        <img class="position-absolute left-center left-10" src="../assets/images/icons/field-search-icon.png" alt="">
                                    </div>
                                </li>
                                <li class="list-inline-item">
                                    <a href="#"><img src="{{ asset('assets/images/icons/pdf-icon.png')}}" alt=""></a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="#"><img src="{{ asset('assets/images/icons/excel-icon.png')}}" alt=""></a>
                                </li> --}}
                                    <li class="list-inline-item">
                                        <div class="d-table-calendar-picker position-relative">
                                            <input type='text' id='dtPicker1'
                                                class="form-control custom-field font12 dtPicker"
                                                value="{{ $currentWeek['from'] . ' - ' . $currentWeek['to'] }}"
                                                data-url="{{ route('admin.sale-by-days') }}" data-target="week-sales" />
                                            <img class="position-absolute right-center right-10"
                                                src="{{ asset('assets/images/icons/calender-picker-icon.png') }}"
                                                alt="">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div id="week-sales">
                    @include('admin.week-report.sales-details')
                </div>
            </div>
        </div>
        <div class="row mt-3 week-detail">
            <div class="col-xs-12 col-sm-6">
                <div class="round-white-bg box-shadow">
                    <div class="d-block">
                        <ul class="list-inline justified-header bordered-header">
                            <li>
                                <p class="m-0 font-medium">{{ __('week-report.top_branch') }}</p>
                            </li>
                            <li>
                                <div class="d-table-calendar-picker position-relative float-right" style="width: 170px;">
                                    <input type='text' id='dtPicker2' class="form-control custom-field font12 dtPicker2"
                                        value="{{ $currentWeek['from'] . ' - ' . $currentWeek['to'] }}"
                                        data-url="{{ route('admin.top-branches') }}" data-target="top-branches" />
                                    <img class="position-absolute right-center right-10"
                                        src="{{ asset('assets/images/icons/calender-picker-icon.png') }}" alt="">
                                    <input type="hidden" name="current_dt" id="current_dt" value="">
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div id="top-branches">
                        @include('admin.week-report.top-branch')
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6">
                <div class="round-white-bg box-shadow">
                    <div class="d-block">
                        <ul class="list-inline justified-header bordered-header">
                            <li>
                                <p class="m-0 font-medium">{{ __('week-report.last_week_top_branch') }}</p>
                            </li>
                            <li>
                                <div class="d-table-calendar-picker position-relative float-right" style="width: 170px;">
                                    <input type='text' id='dtPicker3' class="form-control custom-field font12 dtPicker3"
                                        value="{{ $lastWeek['from'] . ' - ' . $lastWeek['to'] }}"
                                        data-url="{{ route('admin.top-branches') }}" data-target="last-week-branches" />
                                    <img class="position-absolute right-center right-10"
                                        src="{{ asset('assets/images/icons/calender-picker-icon.png') }}" alt="">

                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="last-week-branches">
                        @include('admin.week-report.last-week-top-branch')
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script>
        $(document).ready(function() {
            moment.locale('en', {
                week: {
                    dow: 1
                } // Monday is the first day of the week
            });
            //Get the value of Start and End of Week
            $("#dtPicker1,#dtPicker2,#dtPicker3").datetimepicker({
                format: 'DD-MM-YYYY',
                //defaultDate: new Date()
            });

            //Get the value of Start and End of Week
            $('#dtPicker1,#dtPicker2,#dtPicker3').on('dp.change', function(e) {
                var value = $(this).val();
                // console.log(value);
                var firstDate = moment(value, "DD-MM-YYYY").day(1).format("DD-MM-YYYY");
                var lastDate = moment(value, "DD-MM-YYYY").day(7).format("DD-MM-YYYY");
                //console.log(firstDate + " - " + lastDate);
                $(this).val(firstDate + " - " + lastDate);
                $("#current_dt").val(firstDate + " - " + lastDate);
                let route = $(this).data("url");
                let htmlDiv = $(this).data('target');
                ajaxFire(route, {
                    from: firstDate,
                    to: lastDate
                }, function(htmlResponse) {
                    let res = (htmlResponse);
                    // console.log(res);
                    $('#' + htmlDiv).html(res);
                });
            });

            var dt =
                '{{ dateFormat($currentWeek['from'], 'd-m-Y') . ' - ' . dateFormat($currentWeek['to'], 'd-m-Y') }}';
            $("#dtPicker1,#dtPicker2").val(dt);



            $('#dtPicker1').on('focus', function(e) {
                var cDt = $("#current_dt").val();
                $(this).val((cDt != "") ? cDt : dt);
            });
        });
    </script>
@endsection