@extends('layouts.app')

@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/data-table.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/analytical.css') }}">
@endpush

@section('content')
    <div class="spinner-layer d-none ">
        <div class="spinner"></div>
        <p class="fs-3">{{__('Processing')}}</p>
    </div>
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i>
                </span> {{ __('Analytical System') }}
            </h3>
        </div>
        <form id="search-form" action="{{route('dashboard.analytical.data')}}" method="POST">
            @csrf
            <div class="bg-white  rounded p-3">
                <div class="row">
                    <div class="col-12">
                        <div class="row m-0 text-end">
                            <div class="col-md-6">
                                <button id="search-by-date" class="btn btn-primary" disabled>{{__("By Date")}}</button>
                                <button id="search-by-quarter" class="btn btn-primary">{{__("By Quarter")}}</button>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex justify-content-end">
                                    <button type="button" id="print"
                                            class="btn btn-primary">{{__("Print")}}</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 p-3">
                            <label>{{__("Analytical Print Details (Will Shown In Print Mode)")}}</label>
                            <textarea id="analytical_print_details" class="form-control" rows="5"></textarea>
                        </div>
                    </div>

                    <div class="row m-0 p-0 mt-3 " id="from-to-filter">
                        <div class="col-md-6">
                            <label>{{__("From")}}</label>
                            <input type="date" class="form-control" name="date_from">
                        </div>
                        <div class="col-md-6">
                            <label>{{__("To")}}</label>
                            <input type="date" class="form-control" name="date_to">
                        </div>
                    </div>
                    <div class="row m-0 p-0 mt-3 d-none " id="quarter-filter">
                        <div class="col-md-6">
                            <label>{{__("Year")}}</label>
                            <input type="number" min="2000" max="3000" value="{{now()->year}}" class="form-control"
                                    name="year">
                        </div>
                        <div class="col-md-6">
                            <label>{{__("Quarter")}}</label>
                            <select class="select2" name="quarter">
                                <option value="1">{{__("First Quarter")}}</option>
                                <option value="2">{{__("Second Quarter")}}</option>
                                <option value="3">{{__("Third Quarter")}}</option>
                                <option value="4">{{__("Fourth Quarter")}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 mt-3">
                        <label>{{__("Products")}}</label>
                        <select multiple class="select2" name="products[]">
                            @foreach($products as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 mt-2">
                        <div class="d-flex align-items-center gap-2">
                            <input id="show-products-statics" class="form-check-input" type="checkbox"
                                    name="show-products-statics" value="1">
                            <label for="show-products-statics">{{__("Show Products Statics")}}</label>
                        </div>
                    </div>
                    <div class="col-12 mt-3 text-center mt-5">
                        <button class="btn btn-primary">{{__("Search")}}</button>
                    </div>
                </div>
            </div>
        </form>
        <div id="print-area">
            <div class="  rounded mt-5">
                <div class="row">
                    <div class="col-md-6  mb-2">
                        <div class="border-radius-16" id="sales-chart"></div>
                    </div>
                    <div class="col-md-6 mb-2">
                        <div class="border-radius-16" id="purchases-chart"></div>
                    </div>
                    <div class="col-md-12 mb-2">
                        <div class="border-radius-16" id="production-chart"></div>
                    </div>
                    <div class="col-md-6 mb-2 ">
                        <div class="border-radius-16" id="cost-of-goods-solid-chart"></div>
                    </div>
                    <div class="col-md-6 mb-2">
                        <div class="border-radius-16" id="profit-chart"></div>
                    </div>
                    <div class="col-md-12 mt-4">
                        <div class="border-radius-16" id="best-10-products-sold"></div>
                    </div>
                    <div class="col-md-6 mt-4 ">
                        <div class="border-radius-16" id="sales-by-date"></div>
                    </div>
                    <div class="col-md-6 mt-4">
                        <div class="border-radius-16" id="purchase-by-date"></div>
                    </div>
                    <div class="col-md-12 mt-4">
                        <div class="border-radius-16" id="top-10-most-profitable-products"></div>
                    </div>
                    <div class="col-md-12 mt-4 ">
                        <div class="border-radius-16" id="profits-by-date"></div>
                    </div>
                    <div class="col-md-6 mt-4 ">
                        <div class="border-radius-16" id="warehouses-occupancy-rate"></div>
                    </div>
                    <div class="col-md-6 mt-4 ">
                        <div class="border-radius-16" id="warehouses-occupancy-rate-for-production"></div>
                    </div>
                </div>
            </div>

            <div id="products-details">

            </div>
        </div>
    </div>
    <div class="spinner-layer d-none ">
        <div class="spinner"></div>
        <p class="fs-3">{{__('Processing')}}</p>
    </div>
@endsection

@section('scripts')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/variwide.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script src="https://code.highcharts.com/modules/variable-pie.js"></script>
    <script src="{{ asset('assets/js/pages/analytical.js') }}"></script>
@endsection