@extends('layouts.app')
@section('title', __('report.summary_by_locations_report'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">{{ __('report.summary_by_locations_report')}}</h1>
</section>

  <div class="row no-print">
            <div class="col-md-3">
                <div class="input-group">
                    <span class="input-group-addon bg-light-blue"><i class="fa fa-map-marker"></i></span>
                    <select class="form-control select2" id="summary_location_id">
                        @foreach ($business_locations_filter as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
       
            <div class="col-md-2">
                <div class="form-group pull-right">
                    <div class="input-group">
                        <button type="button" class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-sm" id="summary_date_filter">
                            <span>
                                <i class="fa fa-calendar"></i> {{ __('messages.filter_by_date') }}
                            </span>
                            <i class="fa fa-caret-down"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

<!-- Main content -->
<section class="content">
    <div class="row">
        @foreach($locations as $location)
        <div class="col-md-6 col-lg-4 location-card" data-location-id="{{ $location->id }}">
            @component('components.widget')
            @slot('title')
            <div class="flex items-start gap-3">
                <!-- Icon -->
                <div class="mt-1">
                    <i class="fas fa-store text-primary-600 text-xl"></i>
                </div>

                <!-- Text content stacked vertically -->
                <div class="flex flex-col">
                    <div class="flex items-center gap-2">
                        <h3 class="text-lg font-semibold text-gray-800">{{ $location->name }}</h3>
                    </div>

                    @if($location->landmark)
                        <div class="flex items-center gap-1 mt-1">
                            <i class="fas fa-map-marker-alt text-gray-400 text-xs"></i>
                            <span class="text-xs text-gray-500">{{ $location->landmark }}</span>
                        </div>
                    @endif
                </div>
            </div>
        @endslot
                
                <div class="space-y-4">
                    <!-- Sales Card -->
                    <div class="bg-white rounded-lg shadow-xs p-4 border border-gray-100">
                        <div class="flex justify-between items-center mb-2">
                            <h4 class="font-medium text-gray-600">{{ __('report.sales_summary') }}</h4>
                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
                                <i class="fas fa-chart-line mr-1"></i> {{ __('report.summary') }}
                            </span>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span class="text-gray-600">{{ __('report.total_sell') }}:</span>
                                <span class="font-medium">@format_currency($location_data[$location->id]['total_sell_exc_tax'])</span>
                            </div>
                            <div class="flex justify-between text-red-500">
                                <span>{{ __('lang_v1.total_sales_return') }}:</span>
                                <span>-@format_currency($location_data[$location->id]['total_sell_return_exc_tax'])</span>
                            </div>
                            <div class="border-t border-gray-100 my-1"></div>
                            <div class="flex justify-between font-semibold text-green-600">
                                <span>{{ __('report.net_sales') }}:</span>
                                <span>@format_currency($location_data[$location->id]['total_sell'])</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Payments Card -->
                    <div class="bg-white rounded-lg shadow-xs p-4 border border-gray-100">
                        <div class="flex justify-between items-center mb-2">
                            <h4 class="font-medium text-gray-600">{{ __('lang_v1.payments') }}</h4>
                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
                                <i class="fas fa-credit-card mr-1"></i> {{ __('report.transactions') }}
                            </span>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex justify-between">
                                <span class="text-gray-600">{{ __('lang_v1.total_payments_transaction') }}:</span>
                                <span class="font-medium text-blue-600">@format_currency($location_data[$location->id]['total_payments'])</span>
                            </div>
                            @if(isset($location_data[$location->id]['payments_by_method']) && !empty($location_data[$location->id]['payments_by_method']))
                                  @foreach($location_data[$location->id]['payments_by_method'] as $method => $amount)
                                        @if($amount > 0)
                                            <div class="flex justify-between text-xs">
                                                <span class="text-gray-500 capitalize">
                    {{ __('lang_v1.total_payments_transaction_from') }} 
                    {{ __('lang_v1.' . $method) }}:
                </span>
                                                <span class="font-medium">@format_currency($amount['total_payments'])</span>
                                            </div>
                                        @endif
                                    @endforeach
                            @endif
                            <div class="flex justify-between">
                                <span class="text-gray-600">{{ __('lang_v1.total_credit') }}</span>
                                <span class="font-medium text-orange-600">@format_currency($location_data[$location->id]['total_due'])</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Profit Card (Conditional) -->
                    @if(auth()->user()->can('profit_loss_report.view'))
                    <div class="bg-white rounded-lg shadow-xs p-4 border border-gray-100">
                        <div class="flex justify-between items-center mb-2">
                            <h4 class="font-medium text-gray-600">{{ __('lang_v1.profit_summary') }}</h4>
                            <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">
                                <i class="fas fa-coins mr-1"></i> {{ __('lang_v1.gross_profit') }}
                            </span>
                        </div>
                        
                        <div class="text-center py-2">
                            <span class="text-2xl font-bold text-purple-600">
                                د.ع {{ number_format($location_data[$location->id]['gross_profit'], 2, '.', ',') }}
                            </span>
                        </div>
                    </div>
                    @endif

                    <div class="bg-white rounded-lg shadow-xs p-4 border border-gray-100">
                        <div class="flex justify-between items-center mb-2">
                           
                            <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">
                                <i class="fas fa-money-bill-wave mr-1"></i> {{ __('report.total_expense') }}:
                            </span>
                                <span class="text-xl font-bold text-red-600">
                                @format_currency($location_data[$location->id]['total_sr_expenses'])
                            </span>
                        </div>
                        <div class="text-center py-2">
                        
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-xs p-4 border border-gray-100">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-xs @if($location_data[$location->id]['total_sr_expenses_minus_total_payments'] >= 0) bg-green-100 text-green-800 @else bg-red-100 text-red-800 @endif px-2 py-1 rounded-full">
                        <i class="fas fa-calculator mr-1"></i> {{ __('lang_v1.total_payments_transaction') }} - {{ __('report.total_expense') }} = 
                    </span>
                       <span class="text-2xl font-bold @if($location_data[$location->id]['total_sr_expenses_minus_total_payments'] >= 0) text-green-600 @else text-red-600 @endif">
                        @format_currency($location_data[$location->id]['total_sr_expenses_minus_total_payments'])
                    </span>
                </div>
               
              
            </div>
                </div>
            @endcomponent
        </div>
        @endforeach
    </div>
</section>

@endsection

@section('javascript')
    <script src="{{ asset('js/report.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('js/payment.js?v=' . $asset_v) }}"></script>
<script>
$(document).ready(function () {
    initFilters();
    initDateRangePicker(); // Only once

    function initFilters() {
        if ($('.select2').length) {
            $('.select2').select2();
        }

        $('#summary_location_id').off('change').on('change', function () {
            var selected = $(this).val();
            if (selected === '') {
                $('.location-card').show();
            } else {
                $('.location-card').each(function () {
                    var cardLocationId = $(this).data('location-id');
                    $(this).toggle(cardLocationId == selected);
                });
            }
        });
    }

    function initDateRangePicker() {
        if ($('#summary_date_filter').length) {
            $('#summary_date_filter').daterangepicker(
                $.extend(true, {}, dateRangeSettings, {
                    startDate: moment(),
                    endDate: moment()
                }),
                onDateRangeChanged // 🔁 use named handler
            );

            // Show default text
            $('#summary_date_filter span').html(
                moment().format(moment_date_format) + ' ~ ' + moment().format(moment_date_format)
            );
        }
    }

    function onDateRangeChanged(start, end) {
        $('#summary_date_filter span').html(
            start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
        );

        // Call the refresh function with new dates
        refreshReportData(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
    }

    function refreshReportData(startDate, endDate) {
        var locationId = $('#summary_location_id').val();
        $('.content').css('opacity', '0.5');

        $.ajax({
            url: '/reports/summary-by-locations-report',
            type: 'GET',
            data: {
                location_id: locationId,
                start_date: startDate,
                end_date: endDate
            },
            success: function(response) {
                var newContent = $('<div>').html(response).find('.content').html();
                $('.content').html(newContent).css('opacity', '1');

                // Re-initialize select2 only (do NOT reinitialize daterangepicker)
                initFilters();
            },
            error: function() {
                alert('{{ __("messages.something_went_wrong") }}');
                $('.content').css('opacity', '1');
            }
        });
    }
});


</script>
    <style>
        .location-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .shadow-xs {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .border-gray-100 {
            border-color: #f3f4f6;
        }
        .bg-primary-100 {
            background-color: #e0e7ff;
        }
        .text-primary-600 {
            color: #4f46e5;
        }
         /* تحسين الخطوط الأساسية */
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
    }
    
    /* عناوين البطاقات */
    .font-medium, h4 {
        font-weight: 600 !important;
        font-size: 15px;
    }
    
    /* الأرقام المهمة */
    .font-semibold, .font-bold {
        font-weight: 700 !important;
    }
    
    /* الأرقام الكبيرة */
    .text-2xl {
        font-size: 1.5rem !important;
        letter-spacing: 0.5px;
    }
    
    /* تحسين بطاقات الموقع */
    .location-card .widget {
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        border-radius: 10px;
        overflow: hidden;
    }
    
    /* تحسين العناوين الرئيسية */
    .widget-title h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2d3748;
    }
    
    /* تحسين النصوص الصغيرة */
    .text-xs {
        font-size: 0.75rem !important;
        letter-spacing: 0.3px;
    }
    
    /* تحسين التباين للأرقام */
    .text-blue-600, .text-green-600, .text-red-600, .text-purple-600 {
        font-weight: 600;
    }
    
    /* تحسين المسافات بين العناصر */
    .space-y-4 > * + * {
        margin-top: 1.25rem;
    }
    
    /* تحسين حدود البطاقات */
    .border-gray-100 {
        border: 1px solid #e2e8f0 !important;
    }

    /* تخصيص ألوان الأيقونات */
.fa-store { color: #4f46e5; } /* أيقونة الموقع - أزرق */
.fa-map-marker-alt { color: #ef4444; } /* أيقونة الموقع الجغرافي - أحمر */
.fa-chart-line { color: #3b82f6; } /* أيقونة المبيعات - أزرق فاتح */
.fa-credit-card { color: #10b981; } /* أيقونة المدفوعات - أخضر */
.fa-coins { color: #8b5cf6; } /* أيقونة الأرباح - بنفسجي */
.fa-money-bill-wave { color: #ef4444; } /* أيقونة المصروفات - أحمر */
.fa-calculator { color: #06b6d4; } /* أيقونة الحاسبة - سماوي */

/* تحسين حجم ومظهر الأيقونات */
.fa, .fas, .far, .fab {
    font-size: 1em;
    margin-right: 5px;
    vertical-align: middle;
}

/* أيقونات البطاقات */
.card-icon {
    font-size: 1.2em;
    margin-right: 8px;
}

/* أيقونات العناوين */
.widget-icon {
    font-size: 1.5em;
    margin-right: 10px;
    color: #4f46e5;
}
    </style>
@endsection