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

@section('content')
    @section('css')
        <style>
            .collapsed .collapse-tr {
                display: none;
            }

            .table-custom th,
            .table-custom td {
                vertical-align: middle !important;
                text-align: center;
            }

            .table-custom tbody tr:nth-child(even) {
                background-color: #f9f9f9;
            }

            .table-custom thead th {
                position: sticky;
                top: 0;
                background-color: #f1f1f1;
                z-index: 1;
            }

            .table-custom .highlight-customer {
                background-color: #e6ffed;
                color: #2dce89;
                font-weight: bold;
            }

            .collapse-icon {
                cursor: pointer;
                color: #007bff;
                transition: transform 0.3s ease;
            }

            .collapse-icon.rotate {
                transform: rotate(180deg);
            }

            .table-bordered>tbody>tr>td, 
            .table-bordered>tbody>tr>th, 
            .table-bordered>tfoot>tr>td, 
            .table-bordered>tfoot>tr>th, 
            .table-bordered>thead>tr>td, 
            .table-bordered>thead>tr>th {
                border: 1px solid #efefef;
            }
        </style>
    @endsection

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>{{ __('report.customer_ledger')}}</h1>
    </section>

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

        <div class="row">
            <div class="col-md-12">
                @component('components.filters', ['title' => __('report.filters')])
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('contact_id', __('lang.customers') . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-user"></i>
                                </span>
                                {!! Form::select('contact_id', $contact_dropdown, $request['contact_id']??null, ['class' => 'form-control select2', 'id' => 'contact_id', 'style' => 'width: 100%;']); !!}
                            </div>
                        </div>
                    </div>
                    
                    @includeIf('locations::layouts.location_filter', ['col' => 4])

                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('sales_person_id', __('lang.users') . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-user"></i>
                                </span>
                                {!! Form::select('sales_person_id',  $users, $request['sales_person_id']??null, ['class' => 'form-control select2', 'style' => 'width: 100% !important;']); !!}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('location_id', __( 'sale.location' ) . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <!-- <i class="fa fa-user"></i> -->
                                </span>
                                {!! Form::select('location_id', $business_locations, $request['location_id']??null, ['class' => 'form-control select2', 'style' => 'width: 100% !important;']); !!}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('date_range', __('report.date_range') . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-user"></i>
                                </span>
                                {!! Form::text('date_range', $request['date_range']??null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'id' => 'scr_date_filter', 'readonly', 'style' => 'width: 100% !important;']); !!}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('customer_group_id', __( 'lang_v1.customer_group_name' ) . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <!-- <i class="fa fa-user"></i> -->
                                </span>
                                {!! Form::select('customer_group_id', $customer_group, $request['customer_group_id']??null, ['class' => 'form-control select2', 'style' => 'width: 100% !important;']); !!}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        {!! Form::label('tag_ids', __('lang.tags') . ':') !!}
                        <!-- زرار تحديد الكل -->
                        <button type="button"  class="btn btn-success btn-xs select_tags"><i class="fa fa-check" id="select_tags" style="font-size: 10px;"></i></button>
                        <!-- زرار إلغاء التحديد -->
                        <button type="button"  class="btn btn-danger btn-xs deselect_tags"><i class="fa fa-times" id="deselect_tags" style="font-size: 10px;"></i></button>
                        <div class="form-group">
                            {!! Form::select('tag_ids[]', getTags(), $request['tag_ids']??null , ['class' => 'form-control select', 'id' => 'tag_id', 'multiple' => 'multiple', 'style' => 'width: 100% !important;']) !!}
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="balance_type">@lang('lang.balance_type'):</label>
                            {!! Form::select(
                                'balance_type',
                                [
                                    'balance' => __('lang.balance'),
                                    'not_balance' => __('lang.not_balance'),
                                ],
                                'balance',
                                ['class' => 'form-control', 'id' => 'balance_type', 'placeholder' => __('lang.all')],
                            ) !!}
                        </div>
                    </div>

                @endcomponent
            </div>
        </div>

        <!-- Summary -->
        <div class="row">
            <div class="col-sm-12">
                @component('components.widget', ['title' => __('report.summary')])
                    <table class="table no-border">
                        <tr>
                            <td><h4 class="mb-0 mt-0 text-success">@lang('report.total_debit')</h4></td>
                            <td><h4 class="mb-0 mt-0 text-danger">@lang('report.total_credit')</h4></td>
                            <td><h4 class="mb-0 mt-0 text-primary">@lang('report.total_due')</h4></td>
                        </tr>
                        <tr>
                            <td><h3 class="mb-0 mt-0 text-success" id="final_debit"></h3></td>
                            <td><h3 class="mb-0 mt-0 text-danger" id="final_credit"></h3></td>
                            <td><h3 class="mb-0 mt-0 text-primary" id="final_due"></h3></td>
                        </tr>
                    </table>
                @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-custom" id="ledger_master_tbl">
                            <thead>
                                <tr>
                                    <th>@lang('lang.customer')</th>
                                    <th>@lang('account.debit')</th>
                                    <th>@lang('account.credit')</th>
                                    <th>@lang('report.total_due')</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                @endcomponent
            </div>
        </div>
    </section>
    <!-- /.content -->

@endsection

@section('javascript')
    <script src="{{ asset('js/report.js?v=' . time()) }}"></script>
    <script src="{{ asset('modules/locations/js/app.js?v=' . time()) }}"></script>

    <script type="text/javascript">
        $(document).on('click', '.toggle-tr', function(){
            $(this).closest('tbody').toggleClass('collapsed');
            var html = $(this).closest('tbody').hasClass('collapsed') ? 
            '<i class="fas fa-arrow-circle-right"></i>' : '<i class="fas fa-arrow-circle-down"></i>';
            $(this).find('.collapse-icon').html(html);
        })
    </script>

    <script>
        let ledger_master_tbl;

        $(function(){
            if ($('#scr_date_filter').length === 1) {
                $('#scr_date_filter').daterangepicker(
                    dateRangeSettings,
                    function(start, end) {
                    $('#scr_date_filter').val(
                        start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
                    );
                    if (typeof ledger_master_tbl !== 'undefined') {
                        ledger_master_tbl.ajax.reload();
                    }
                    }
                );

                $('#scr_date_filter').on('cancel.daterangepicker', function() {
                    $(this).val('');
                    if (typeof ledger_master_tbl !== 'undefined') {
                    ledger_master_tbl.ajax.reload();
                    }
                });
            }

            ledger_master_tbl = $('#ledger_master_tbl').DataTable({
                processing: true,
                serverSide: true,
                deferRender: true,
                searching: false,
                ajax: {
                    url: "{{ route('reports.ledger.data') }}",
                    data: function(d){
                        const $inp = $('#scr_date_filter');
                        const drp  = $inp.data('daterangepicker');
                        if ($inp.val() && drp) {
                            d.start_date = drp.startDate.format('YYYY-MM-DD');
                            d.end_date   = drp.endDate.format('YYYY-MM-DD');
                        } else {
                            d.start_date = null;
                            d.end_date   = null;
                        }

                        d.contact_id        = $('#contact_id').val();
                        d.sales_person_id   = $('#sales_person_id').val();
                        d.location_id       = $('#location_id').val();
                        d.customer_group_id = $('#customer_group_id').val();
                        d.tag_ids           = $('#tag_id').val();
                        d.state_id          = $('#state_id').val();
                        d.city_id           = $('#city_id').val();
                        d.balance_type      = $('#balance_type').val();
                    }
                },
                columnDefs: [
                    { targets: [0], orderable: false, searchable: false, className: 'dt-control', defaultContent: '' },
                    { targets: [1,2,3], className: 'text-right' }
                ],
                columns: [
                    { data: 'name', name: 'name' },
                    { data: 'total_debit', name: 'total_debit' },
                    { data: 'total_credit', name: 'total_credit' },
                    { data: 'total_due', name: 'total_due' },
                ],
                rowCallback: function(row, data){
                    // حوّل الصف لصف ملخص (toggle-tr) بنفس الستايل
                    $(row).addClass('summary-row toggle-tr')
                            .attr('data-contact', data.contact_id)
                            .html(`
                                <td colspan="1" class="highlight-customer text-start dt-control">
                                <span class="collapse-icon"><i class="fas fa-arrow-circle-right"></i></span>
                                    ${data.name}
                                </td>
                                <td class="text-success dt-control">${data.total_debit}</td>
                                <td class="text-danger dt-control">${data.total_credit}</td>
                                <td class="text-primary dt-control">${data.total_due}</td>
                            `);
                },
                drawCallback: function(settings) {
                    if (settings.json && settings.json.footer_totals) {
                    const f = settings.json.footer_totals;
                    $('#final_debit').text(f.final_debit);
                    $('#final_credit').text(f.final_credit);
                    $('#final_due').text(f.final_due);
                    }
                }
            });

            $(document).on('change', '#contact_id, #sales_person_id, #location_id, #customer_group_id, #tag_id, #balance_type', function(){
                ledger_master_tbl.ajax.reload();
            });

            $('#ledger_master_tbl tbody').on('click', 'td.dt-control', function () {
                const tr = $(this).closest('tr');
                const row = ledger_master_tbl.row(tr);

                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    const r = row.data();
                    const contactId = r.contact_id ?? r.id; // اتأكد إن الـ API بيرجع contact_id

                    const childId = `child-ledger-${contactId}`;
                    row.child(`
                        <div class="p-2">
                            <table class="table table-sm table-striped w-100 inner-ledger" id="${childId}">
                                <thead>
                                    <tr>
                                        <th>@lang('lang.sales_person')</th>
                                        <th>@lang('lang_v1.date')</th>
                                        <th>@lang('purchase.ref_no')</th>
                                        <th>@lang('lang_v1.type')</th>
                                        <th>@lang('sale.location')</th>
                                        <th>@lang('sale.payment_status')</th>
                                        <th>@lang('account.debit')</th>
                                        <th>@lang('account.credit')</th>
                                        <th>@lang('lang.due')</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    `).show();
                    tr.addClass('shown');

                    initInnerLedgerTable(`#${childId}`, r);
                }
            });

            function initInnerLedgerTable(selector, parentRowData){
                const drp = $('input#scr_date_filter').data('daterangepicker');
                $(selector).DataTable({
                    processing: true,
                    serverSide: true,
                    deferRender: true,
                    searching: false,
                    ajax: {
                        url: "{{ route('reports.ledger.rows') }}",
                        data: function(d){
                            d.contact_id      = parentRowData.contact_id ?? parentRowData.id;
                            d.start_date      = drp.startDate.format('YYYY-MM-DD');
                            d.end_date        = drp.endDate.format('YYYY-MM-DD');
                            d.location_id     = $('#location_id').val();
                            d.sales_person_id = $('#sales_person_id').val();
                        }
                    },
                    columnDefs: [
                        { targets: [6,7,8], className: 'text-right' }
                    ],
                    columns: [
                        { data: 'sales_person', name: 'sales_person' },
                        { data: 'date_formatted', name: 'date' },
                        {
                            data: null, name: 'ref_no',
                            render: function(row){
                                if (row.transaction_type === 'sell') {
                                return `<a data-href="/sells/${row.transaction_id}" href="#" data-container=".view_modal" class="btn-modal">${row.ref_no}</a>`;
                                } else if (row.transaction_type === 'sell_return') {
                                const pid = row.return_parent_id || row.transaction_id;
                                return `<a data-href="/sell-return/${pid}" href="#" data-container=".view_modal" class="btn-modal">${row.ref_no}</a>`;
                                }
                                return row.ref_no || '';
                            }
                        },
                        { data: 'transaction_type', name: 'transaction_type' },
                        { data: 'location', name: 'location' },
                        { data: 'payment_status', name: 'payment_status' },
                        { data: 'debit_formatted', name: 'debit' },
                        { data: 'credit_formatted', name: 'credit' },
                        { data: 'balance_formatted', name: 'balance' },
                    ]
                });
            }
        });

    </script>
@endsection