@extends('operations.layout.mainlayout')
@include('operations.sales.sales-styles')
@section('content')
        <style>
            .totals-separator {
                height: 1px;
                background-color: #E2E8F0;
                margin: 8px 0;
            }
            
            .totals-row {
                margin-top: 8px;
            }
            
            .totals-row .type-col {
                color: #1C1C1C !important;
            }
            
            .totals-row .type-col:before {
                display: none;
            }

            .select2-container {
                width: 100% !important;
            }

            .select2-container .select2-selection--single,
            .select2-container .select2-selection--multiple {
                height: 38px !important;
                border: none !important;
                border-radius: 6px !important;
                background-color: #F5F7FA !important;
                display: flex !important;
                align-items: center !important;
                padding: 0 8px !important;
                flex-wrap: nowrap !important;
            }

            .export-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 35px;
                padding: 0 12px;
                background: linear-gradient(135deg, #ba395e 0%, #e35a80 100%);
                color: white;
                border: none;
                border-radius: 6px;
                font-weight: 500;
                transition: all 0.3s ease;
                box-shadow: 0 4px 6px rgba(186, 57, 94, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
                position: relative;
                overflow: hidden;
            }

            .export-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 7px 14px rgba(186, 57, 94, 0.25), 0 3px 6px rgba(0, 0, 0, 0.08);
                filter: brightness(1.05);
                color: white;
            }

            .export-btn:active {
                transform: translateY(1px);
                box-shadow: 0 4px 6px rgba(186, 57, 94, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
            }

            .export-btn::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 5px;
                height: 5px;
                background: rgba(255, 255, 255, 0.5);
                opacity: 0;
                border-radius: 100%;
                transform: scale(1, 1) translate(-50%);
                transform-origin: 50% 50%;
            }

            .export-btn:focus:not(:active)::after {
                animation: ripple 1s ease-out;
            }

            @keyframes ripple {
                0% {
                    transform: scale(0, 0);
                    opacity: 0.5;
                }
                20% {
                    transform: scale(25, 25);
                    opacity: 0.5;
                }
                100% {
                    opacity: 0;
                    transform: scale(40, 40);
                }
            }

            .export-icon {
                margin-right: 8px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .export-text {
                font-size: 14px;
                letter-spacing: 0.5px;
            }

            .select2-container .select2-selection--single .select2-selection__rendered {
                color: #1C1C1C !important;
                line-height: 38px !important;
                padding-left: 4px !important;
                font-size: 14px !important;
                font-weight: normal !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                width: calc(100% - 20px) !important;
            }

            .select2-container--default .select2-selection--single .select2-selection__arrow {
                height: 36px !important;
                position: absolute !important;
                top: 1px !important;
                right: 8px !important;
                width: 20px !important;
            }

            .select2-container--default .select2-selection--single .select2-selection__arrow b {
                border-color: #64748B transparent transparent transparent !important;
                border-width: 5px 4px 0 4px !important;
            }

            .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
                border-color: transparent transparent #64748B transparent !important;
                border-width: 0 4px 5px 4px !important;
            }

            .select2-dropdown {
                border: 1px solid #E2E8F0 !important;
                border-radius: 6px !important;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
                background-color: #fff !important;
            }

            .select2-container--default .select2-search--dropdown .select2-search__field {
                border: 1px solid #E2E8F0 !important;
                border-radius: 4px !important;
                padding: 6px !important;
                font-size: 14px !important;
            }

            .select2-container--default .select2-results__option {
                padding: 8px 12px !important;
                font-size: 14px !important;
                color: #1C1C1C !important;
            }

            .select2-container--default .select2-results__option--highlighted[aria-selected] {
                background-color: #F8FAFC !important;
                color: #1C1C1C !important;
            }

            .select2-container--default .select2-results__option[aria-selected=true] {
                background-color: #EDF2F7 !important;
                color: #1C1C1C !important;
            }

            .select2-container--default.select2-container--focus .select2-selection--single,
            .select2-container--default.select2-container--focus .select2-selection--multiple {
                border-color: #E2E8F0 !important;
                outline: 0 !important;
            }

            .select2-container--default.select2-container--open .select2-selection--single,
            .select2-container--default.select2-container--open .select2-selection--multiple {
                border-color: #E2E8F0 !important;
                border-radius: 6px !important;
            }

            .d-flex .select-wrapper {
                width: 180px !important;
                flex: 0 0 auto !important;
            }

            .d-flex .date-range-picker {
                width: 180px !important;
                flex: 0 0 auto !important;
            }

            .gap-10 {
                gap: 10px !important;
            }

            .select2-container--default .select2-selection--single .select2-selection__placeholder {
                color: #64748B !important;
            }

            .select-wrapper .select2-container {
                height: 38px !important;
            }

            /* Sales Forecast Progress Styles */
            .forecast-progress {
                background: #F8FAFC;
                border-radius: 8px;
                padding: 16px;
                margin-top: 20px;
            }

            .progress-status {
                color: #64748B;
                font-size: 14px;
                margin-bottom: 8px;
                font-weight: 500;
            }

            .progress {
                background-color: #E2E8F0;
                border-radius: 4px;
                overflow: hidden;
            }

            .progress-bar {
                background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
                transition: width 0.3s ease;
            }

            .month-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 12px;
                margin-top: 16px;
            }

            .month-item {
                display: flex;
                align-items: center;
                padding: 8px 12px;
                background: white;
                border-radius: 6px;
                border: 1px solid #E2E8F0;
                transition: all 0.3s ease;
            }

            .month-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 8px;
                background-color: #E2E8F0;
                transition: background-color 0.3s ease;
            }

            .month-name {
                flex: 1;
                font-size: 13px;
                color: #1C1C1C;
            }

            .month-status {
                font-size: 12px;
                color: #64748B;
                margin-left: 8px;
            }

            .month-item[data-status="loading"] {
                border-color: #3B82F6;
                background-color: #F0F7FF;
            }

            .month-item[data-status="loading"] .month-dot {
                background-color: #3B82F6;
                animation: pulse 1s infinite;
            }

            .month-item[data-status="loading"] .month-status {
                color: #3B82F6;
            }

            .month-item[data-status="complete"] {
                border-color: #10B981;
                background-color: #F0FDF4;
            }

            .month-item[data-status="complete"] .month-dot {
                background-color: #10B981;
            }

            .month-item[data-status="complete"] .month-status {
                color: #10B981;
            }

            @keyframes pulse {
                0% { transform: scale(1); opacity: 1; }
                50% { transform: scale(1.2); opacity: 0.7; }
                100% { transform: scale(1); opacity: 1; }
            }
        </style>
        <div class="container-fluid">
            <div class="row g-4">
                <div class="col-12 col-lg-4">
                    <div class="card polar-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-5" style="width: 104%">
                                <h5 class="card-title">Out Patient Sales</h5>
                                <div class="d-flex gap-10">
                                    <div class="select-wrapper">
                                        <input type="text" class="form-control date-range-picker" id="outPatientDateRange" placeholder="Select Date Range">
                                    </div>
                                    <div class="select-wrapper">
                                        <select class="custom-select" id="outPatientBranch">
                                            <option value="">Branch</option>
                                            @foreach($branches as $branch)
                                                <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4">
                                    <div class="chart-container">
                                        <div class="chart-loader"><div class="loader"></div></div>
                                        <div id="outPatientChart" class="pie-chart" style="height: 150px; width: 100%;"></div>
                                    </div>
                                    <div class="total-amount" id="outPatientTotal"></div>
                                </div>
                                <div class="col-8">
                                    <h6 class="quantity-title">Quantity</h6>
                                    <div class="quantity-header">
                                        <span>Type</span>
                                        <div class="d-flex">
                                            <span style="width: 20%;">QTY</span>
                                            <span style="width: 26.666667%;">Sales</span>
                                            <span style="width: 26.666667%;">Tax</span>
                                            <span style="width: 26.666667%;">Total</span>
                                        </div>
                                    </div>
                                    <div class="quantity-list" id="outPatientQuantity" style="height: 200px; overflow-y: auto;"></div>
                                </div>
                            </div>
                            <div id="outPatientBarChart" class="bar-chart"></div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-4">
                    <div class="card polar-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-5" style="width: 104%">
                                <h5 class="card-title">B2B Sales / Credit</h5>
                                <div class="d-flex gap-10">
                                    <div class="select-wrapper">
                                        <input type="text" class="form-control date-range-picker" id="b2bCreditDateRange" placeholder="Select Date Range">
                                    </div>
                                    <div class="select-wrapper">
                                        <select class="custom-select" id="b2bCreditBranch">
                                            <option value="">Client</option>
                                            @foreach($companies as $user)
                                                <option value="{{$user->ID}}">{{$user->COMPANY_NAME}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4">
                                    <div class="chart-container">
                                        <div class="chart-loader"><div class="loader"></div></div>
                                        <div id="b2bCreditChart" class="pie-chart" style="height: 150px; width: 100%;"></div>
                                    </div>
                                    <div class="total-amount" id="b2bCreditTotal"></div>
                                </div>
                                <div class="col-8">
                                    <h6 class="quantity-title">Quantity</h6>
                                    <div class="quantity-header">
                                        <span>Type</span>
                                        <div class="d-flex">
                                            <span style="width: 20%;">QTY</span>
                                            <span style="width: 26.666667%;">Sales</span>
                                            <span style="width: 26.666667%;">Tax</span>
                                            <span style="width: 26.666667%;">Total</span>
                                        </div>
                                    </div>
                                    <div class="quantity-list" id="b2bCreditQuantity" style="height: 200px; overflow-y: auto;"></div>
                                </div>
                            </div>
                            <div id="b2bCreditBarChart" class="bar-chart"></div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-4">
                    <div class="card polar-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-5" style="width: 104%">
                                <h5 class="card-title">B2B Sales Cash</h5>
                                <div class="d-flex gap-10">
                                    <div class="select-wrapper">
                                        <input type="text" class="form-control date-range-picker" id="b2bCashDateRange" placeholder="Select Date Range">
                                    </div>
                                    <div class="select-wrapper">
                                        <select class="custom-select" id="b2bCashBranch">
                                            <option value="">Client</option>
                                            @foreach($companies as $user)
                                                <option value="{{$user->ID}}">{{$user->COMPANY_NAME}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-4">
                                    <div class="chart-container">
                                        <div class="chart-loader"><div class="loader"></div></div>
                                        <div id="b2bCashChart" class="pie-chart" style="height: 150px; width: 100%;"></div>
                                    </div>
                                    <div class="total-amount" id="b2bCashTotal"></div>
                                </div>
                                <div class="col-8">
                                    <h6 class="quantity-title">Quantity</h6>
                                    <div class="quantity-header">
                                        <span>Type</span>
                                        <div class="d-flex">
                                            <span style="width: 20%;">QTY</span>
                                            <span style="width: 26.666667%;">Sales</span>
                                            <span style="width: 26.666667%;">Tax</span>
                                            <span style="width: 26.666667%;">Total</span>
                                        </div>
                                    </div>
                                    <div class="quantity-list" id="b2bCashQuantity" style="height: 200px; overflow-y: auto;"></div>
                                </div>
                            </div>
                            <div id="b2bCashBarChart" class="bar-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sales Forecast -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="card-title">Sales Forecast</h5>
                            <div class="d-flex gap-10">
                                <div class="select-wrapper d-none">
                                    <input type="text" class="form-control date-range-picker" id="salesForecastDateRange" placeholder="Select Date Range">
                                </div>
                                <div class="select-wrapper">
                                    <select class="custom-select" id="salesForecastBranch">
                                        <option value="">Client</option>
                                        @foreach($branches as $branch)
                                            <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-8">
                                <div id="salesForecastChart"></div>
                            </div>
                            <div class="col-4">
                                <div class="d-flex justify-content-between gap-3">
                                    <div class="donut-wrapper" style="width: 33.33%">
                                        <div id="outPatientForecastChart"></div>
                                        <div class="text-center mt-2">
                                            {{--<p class="mb-0" style="font-size: 12px; color: #1C1C1C; font-weight: 500;">Out Patient Sales</p>--}}
                                        </div>
                                    </div>
                                    <div class="donut-wrapper" style="width: 33.33%">
                                        <div id="b2bCreditForecastChart"></div>
                                        <div class="text-center mt-2">
                                            {{--<p class="mb-0" style="font-size: 12px; color: #1C1C1C; font-weight: 500;">B2B Credit</p>--}}
                                        </div>
                                    </div>
                                    <div class="donut-wrapper" style="width: 33.33%">
                                        <div id="b2bCashForecastChart"></div>
                                        <div class="text-center mt-2">
                                            {{--<p class="mb-0" style="font-size: 12px; color: #1C1C1C; font-weight: 500;">B2B Cash</p>--}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sales Per Hour -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="card-title">Sales Per Hour</h5>
                            <div class="d-flex gap-10">
                                <div class="select-wrapper">
                                    <input type="text" class="form-control date-range-picker" id="salesPerHourDateRange" placeholder="Select Date Range">
                                </div>
                                <div class="select-wrapper">
                                    <select class="custom-select" id="salesPerHourType">
                                        <option value="">All Sales</option>
                                        <option value="outpatient">Out Patient</option>
                                        <option value="b2b_credit">B2B Credit</option>
                                        <option value="b2b_cash">B2B Cash</option>
                                    </select>
                                </div>
                                <div class="select-wrapper">
                                    <select class="custom-select" id="salesPerHourBranch">
                                        <option value="">Branch</option>
                                        @foreach($branches as $branch)
                                            <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <button id="exportSalesPerHour" class="btn export-btn btn-sm">
                                    <span class="export-icon"><i class="fas fa-file-export"></i></span>
                                    <span class="export-text">Export</span>
                                </button>
                            </div>
                        </div>
                        <div id="salesPerHourChart"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Year Over Year Growth -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card yoy-growth-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <h5 class="card-title mb-0">Year Over Year Growth</h5>
                            <div class="d-flex gap-2">
                                <div class="select-wrapper">
                                    <select class="custom-select" id="yoyBranch">
                                        <option value="">All Branches</option>
                                        @foreach($branches as $branch)
                                            <option value="{{ $branch->ID }}">{{ $branch->NAME_EN }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="select-wrapper">
                                    <select class="custom-select" id="yoySalesType">
                                        <option value="">All Sales</option>
                                        <option value="outpatient">Outpatient</option>
                                        <option value="b2b_cash">B2B Cash</option>
                                        <option value="b2b_credit">B2B Credit</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="chart-container">
                            <div class="chart-loader">
                                <div class="loader"></div>
                            </div>
                            <div id="yoyGrowthChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Charts -->
        <div class="row g-4">
            <div class="col-12 col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="card-title">B2B Sales vs Target</h5>
                            <div class="d-flex gap-10">
                                <div class="select-wrapper">
                                    <input type="text" class="form-control date-range-picker" id="b2bTargetDateRange" placeholder="Select Date Range">
                                </div>
                                <div class="select-wrapper">
                                    <select class="custom-select select2" id="b2bTargetAccountManagers" multiple="multiple">
                                        @foreach($account_managers as $manager)
                                            <option value="{{$manager->ID}}">{{$manager->USERNAME}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div id="salesVsTargetChart"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="card-title">Sales vs Cost</h5>
                            <div class="d-flex gap-10">
                                <div class="select-wrapper">
                                    <input type="text" class="form-control date-range-picker" id="salesVsCostDateRange" placeholder="Select Date Range">
                                </div>
                                <div class="select-wrapper">
                                    <select class="custom-select" id="salesVsCostBranch">
                                        <option value="">Client</option>
                                        @foreach($branches as $branch)
                                            <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div id="salesVsCostChart"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="card-title">Best Performing Tests</h5>
                            <div class="d-flex gap-10">
                                <div class="select-wrapper">
                                    <input type="text" class="form-control date-range-picker" id="bestTestsDateRange" placeholder="Select Date Range">
                                </div>
                                <div class="select-wrapper">
                                    <select class="custom-select" id="bestTestsBranch">
                                        <option value="">Client</option>
                                        @foreach($branches as $branch)
                                            <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div id="bestTestSalesChart"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="card-title">Best Package Sales</h5>
                            <div class="d-flex gap-10">
                                <div class="select-wrapper">
                                    <input type="text" class="form-control date-range-picker" id="bestPackagesDateRange" placeholder="Select Date Range">
                                </div>
                                <div class="select-wrapper">
                                    <select class="custom-select" id="bestPackagesBranch">
                                        <option value="">Client</option>
                                        @foreach($branches as $branch)
                                            <option value="{{$branch->ID}}">{{$branch->NAME_EN}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div id="bestPackageSalesChart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="/js/moment.min.js"></script>
<script src="/warehouse_components/js/apexcharts.min.js"></script>
<link rel="stylesheet" href="/bower_components/admin-lte/plugins/select2/css/select2.min.css">
<script src="/bower_components/admin-lte/plugins/select2/js/select2.min.js"></script>
@include('operations.sales.sales-js')