@extends('newDashboard.index')

@section('css')
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">
    <style>

        /* Spinner styles */
        .spinner {

            width: 5em;
            height: 5em;
            border: 0.5em solid rgba(0, 0, 0, 0.1);
            border-left-color: #8daf21;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 99999999999999999999999999999999999999999999999;
            /*   margin-left:260px; */
        }

        .spinner-layer {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            width: 100vw !important;
            height: 100vh !important;
            background: #f2edf3;
            z-index: 99999999999999999999999999999999999999999999999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;
        }

        /* Spinner animation */
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .custom-card {
            border-radius: 50%;
            height: 300px;
            width: 300px
        }

        .custom-card .card-body {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            flex-direction: column;
        }

        p {
            font-family: Cairo, sans-serif;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #8daf21 !important;
            color: white !important;
            padding: 10px !important;
            display: inline-flex !important;
            justify-content: center !important;
            align-items: center !important;
            align-content: center !important;
            gap: 10px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
            top: unset !important;
            font-size: 14px;
        }

        .border-radius-16 {
            border-radius: 16px;
        }
    </style>
@endsection

@section('main-content')
    <div class="spinner-layer d-none ">
        <div class="spinner"></div>
        <p class="fs-3">{{__('messages.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('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-3 ">
                        <div class="border-radius-16" id="sales-chart"></div>
                    </div>
                    <div class="col-md-3">
                        <div class="border-radius-16" id="purchases-chart"></div>
                    </div>
                    <div class="col-md-3 ">
                        <div class="border-radius-16" id="cost-of-goods-solid-chart"></div>
                    </div>
                    <div class="col-md-3">
                        <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-6 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>
            </div>

            <div id="products-details">

            </div>
        </div>
    </div>
    <div class="spinner-layer d-none ">
        <div class="spinner"></div>
        <p class="fs-3">{{__('messages.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>
        const translation = {
            "Total Sales": "{{__("Total Sales")}}",
            "Products Analytical": "{{__("Products Analytical")}}",
            "Top Best-Selling Products": "{{__("Top Best-Selling Products")}}",
            "Top Most Profitable Products": "{{__("Top Most Profitable Products")}}",
            "Amount": "{{__("Amount")}}",
            "Quantities": "{{__("Quantities")}}",
            "Total Purchases By Date": "{{__("Total Purchases By Date")}}",
            "Total Purchases": "{{__("Total Purchases")}}",
            "Total Profit And Loss": "{{__("Total Profit And Loss")}}",
            "Cost Of Good Sold": "{{__("Cost Of Good Sold")}}",
            "Total Sales By Date": "{{__("Total Sales By Date")}}",
            "Profits": "{{__("Profits")}}",
            "Alneam Analytical System": "{{__("Alneam Analytical System")}}",
            "Warehouses Occupancy Rate": "{{__("Warehouses Occupancy Rate")}}",
        };
    </script>
    <script src="{{ asset('metronic/js/pages/analytical.js') }}"></script>

@endsection