@extends('layouts.app')
@section('title', __('report.customer') . ' - ' . __('report.supplier') . ' ' . __('report.reports'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>{{ __('report.customer')}} & {{ __('report.supplier')}} {{ __('report.reports')}}</h1>
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol> -->
</section>

<!-- Main content -->
<section class="content">

    <div class="row">
        <div class="col-md-12">
            @component('components.filters', ['title' => __('report.filters')])

                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('cg_customer_group_id', __( 'lang_v1.customer_group_name' ) . ':') !!}
                        {!! Form::select('cnt_customer_group_id', $customer_group, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'id' => 'cnt_customer_group_id']); !!}
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('type', __( 'lang_v1.type' ) . ':') !!}
                        {!! Form::select('contact_type', $types, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'id' => 'contact_type']); !!}
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('cs_report_location_id', __( 'sale.location' ) . ':') !!}
                        {!! Form::select('cs_report_location_id', $business_locations, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'id' => 'cs_report_location_id']); !!}
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('scr_contact_id', __( 'report.contact' ) . ':') !!}
                        {!! Form::select('scr_contact_id', $contact_dropdown, null , ['class' => 'form-control select2', 'id' => 'scr_contact_id', 'placeholder' => __('lang_v1.all'), 'style' => 'width:100%']); !!}
                    </div>
                </div>

                <div class="col-md-3 hide">
                    <div class="form-group">
                        {!! Form::label('scr_date_filter', __('report.date_range') . ':') !!}
                        {!! Form::text('date_range', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'id' => 'scr_date_filter', 'readonly']); !!}
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('user_filter', __( 'report.user' ) . ':') !!}
                        {!! Form::select('user_filter', $usersFilter, null , ['class' => 'form-control select2', 'id' => 'user_filter_id', 'placeholder' => __('lang_v1.all'), 'style' => 'width:100%']); !!}
                    </div>
                </div>

            @endcomponent
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            @component('components.widget', ['class' => 'box-primary'])
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="supplier_report_tbl">
                    <thead>
                        <tr>
                            <th>@lang('report.contact')</th>
                            <th>@lang('report.total_purchase')</th>
                            <th>@lang('lang_v1.total_purchase_return')</th>
                            <th>@lang('report.total_sell')</th>
                            <th>@lang('lang_v1.total_sell_return')</th>
                            <th>@lang('lang_v1.opening_balance_due')</th>
                            <th>@lang('report.total_due') &nbsp;&nbsp;<i class="fa fa-info-circle text-info no-print" data-toggle="tooltip" data-placement="bottom" data-html="true" data-original-title="{{ __('messages.due_tooltip')}}" aria-hidden="true"></i></th>
                            <th>@lang('lang_v1.due_by_user')</th>
                            <th>@lang('lang_v1.last_payment')</th>
                            <th>@lang('lang_v1.last_payment_date')</th>
                            <th>@lang('lang_v1.days_count_from_last_payment')</th>
                            <th>@lang('lang_v1.last_transaction')</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr class="bg-gray font-17 footer-total text-center">
                            <td><strong>@lang('sale.total'):</strong></td>
                            <td><span class="display_currency" id="footer_total_purchase" data-currency_symbol ="true"></span></td>
                            <td><span class="display_currency" id="footer_total_purchase_return" data-currency_symbol ="true"></span></td>
                            <td><span class="display_currency" id="footer_total_sell" data-currency_symbol ="true"></span></td>
                            <td><span class="display_currency" id="footer_total_sell_return" data-currency_symbol ="true"></span></td>
                            <td><span class="display_currency" id="footer_total_opening_bal_due" data-currency_symbol ="true"></span></td>
                            <td><span class="display_currency" id="footer_total_due" data-currency_symbol ="true"></span></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="row">
    <div class="col-md-9"> <!-- Main table column -->
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="supplier_report_tbl" aria-describedby="table-summary">
                <!-- Your existing table content -->
            </table>
        </div>
    </div>
    
    <div class="col-md-6"> <!-- Legend column -->
<section class="color-legend card" aria-labelledby="color-legend-title" style="margin-top: 0;">
    <div class="card-body">
        <div class="legend-items d-flex flex-wrap gap-2" role="list">
            <!-- Legend Item -->
            <div class="legend-item d-flex align-items-center gap-2" role="listitem">
                <span class="color-box d-flex align-items-center justify-content-center text-center fw-bold" 
                      style="background-color: #008000; width: 80px; height: 25px;">
                    <small class="text-white fw-bold m-0">@lang('lang_v1.less_than_10_days')</small>
                </span>
            </div>

            <div class="legend-item d-flex align-items-center gap-2" role="listitem">
                <span class="color-box d-flex align-items-center justify-content-center text-center fw-bold"
                      style="background-color: #40E0D0; width: 80px; height: 25px;">
                    <small class="text-dark fw-bold m-0">@lang('lang_v1.more_than_10_days')</small>
                </span>
            </div>

            <div class="legend-item d-flex align-items-center gap-2" role="listitem">
                <span class="color-box d-flex align-items-center justify-content-center text-center fw-bold"
                      style="background-color: #FF7F50; width: 80px; height: 25px;">
                    <small class="text-dark fw-bold m-0">@lang('lang_v1.more_than_15_days')</small>
                </span>
            </div>

            <div class="legend-item d-flex align-items-center gap-2" role="listitem">
                <span class="color-box d-flex align-items-center justify-content-center text-center fw-bold"
                      style="background-color: #DC143C; width: 80px; height: 25px;">
                    <small class="text-white fw-bold m-0">@lang('lang_v1.more_than_month')</small>
                </span>
            </div>

            <div class="legend-item d-flex align-items-center gap-2" role="listitem">
                <span class="color-box d-flex align-items-center justify-content-center text-center fw-bold"
                      style="background-color: #696969; width: 80px; height: 25px;">
                    <small class="text-white fw-bold m-0">@lang('lang_v1.more_than_2_month')</small>
                </span>
            </div>
        </div>
    </div>
</section>
    </div>
</div>
            @endcomponent
        </div>
    </div>
</section>
<!-- /.content -->
<style> 

/* Header row styling */
table.dataTable thead th {
    background-color: #ff4d4d; /* Red */
    color: white;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    border: 1px solid #fff;
}

/* Darker row background colors */
.due-dark-green { background-color: #008000 !important; } /* Darker green */
.due-dark-teal { background-color: #40E0D0 !important; }  /* Darker teal */
.due-dark-orange { background-color: #FF7F50 !important; } /* Darker orange */
.due-dark-red { background-color: #DC143C !important; }   /* Darker red */
.due-dark-gray { background-color: #696969 !important; }  /* Darker gray */

/* Darker text colors */
.text-danger-dark { color: #D32F2F !important; } /* Dark red */
.text-success-dark { color: #388E3C !important; } /* Dark green */

/* Optional: Add hover effects */
tr:hover {
    filter: brightness(95%);
    transition: filter 0.2s ease;
}
/* Styles for the color legend */
.color-legend {
    margin-top: 20px;
}

.legend-items {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
}

.color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 2px;
}
</style>
@endsection

@section('javascript')
    <script src="{{ asset('js/report.js?v=' . $asset_v) }}"></script>
@endsection