@extends('admin.layouts.master')

@section('title', $titleText)

@section('content')
<div class="pc-container"><div class="pc-content">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">{{ $titleText }}</h4>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.reports.export', ['report' => $reportKey, 'format' => 'csv']) }}" id="btn-export-csv" class="btn btn-success">تصدير CSV</a>
            <a href="{{ route('admin.reports.export', ['report' => $reportKey, 'format' => 'pdf']) }}" id="btn-export-pdf" class="btn btn-danger">تصدير PDF</a>
        </div>
    </div>

    <div class="card mb-3"><div class="card-body">
        <div class="row g-2 align-items-end">
            <div class="col-md-2"><label class="form-label">من تاريخ</label><input type="date" id="from_date" class="form-control"></div>
            <div class="col-md-2"><label class="form-label">إلى تاريخ</label><input type="date" id="to_date" class="form-control"></div>

            <div class="col-md-2">
                <label class="form-label">العميل</label>
                <select id="customer_id" class="form-select"><option value="">الكل</option>@foreach($customers as $customer)<option value="{{ $customer->id }}">{{ $customer->name_ar }}</option>@endforeach</select>
            </div>
            <div class="col-md-2">
                <label class="form-label">المورد</label>
                <select id="supplier_id" class="form-select"><option value="">الكل</option>@foreach($suppliers as $supplier)<option value="{{ $supplier->id }}">{{ $supplier->name_ar }}</option>@endforeach</select>
            </div>
            <div class="col-md-2">
                <label class="form-label">الحساب</label>
                <select id="payment_account_id" class="form-select"><option value="">الكل</option>@foreach($accounts as $account)<option value="{{ $account->id }}">{{ $account->name_ar }}</option>@endforeach</select>
            </div>
            <div class="col-md-2">
                <label class="form-label">المنتج</label>
                <select id="product_id" class="form-select"><option value="">الكل</option>@foreach($products as $product)<option value="{{ $product->id }}">{{ $product->name_ar }}</option>@endforeach</select>
            </div>
            <div class="col-md-2">
                <label class="form-label">المخزن</label>
                <select id="warehouse_id" class="form-select"><option value="">الكل</option>@foreach($warehouses as $warehouse)<option value="{{ $warehouse->id }}">{{ $warehouse->name_ar }}</option>@endforeach</select>
            </div>
            <div class="col-md-2"><button id="btn-filter" class="btn btn-primary w-100">تحديث</button></div>
        </div>
    </div></div>

    <div class="card"><div class="card-body">
        <table id="report-table" class="table table-striped table-bordered w-100">
            <thead>
                <tr>
                    @foreach($columns as $label)
                        <th>{{ $label }}</th>
                    @endforeach
                </tr>
            </thead>
        </table>
    </div></div>
</div></div>
@endsection

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script>
$(function () {
    const reportKey = '{{ $reportKey }}';
    const columns = @json(array_keys($columns)).map(function(key){ return {data:key}; });

    const table = $('#report-table').DataTable({
        ajax: {
            url: '{{ url('admin/reports/data') }}/' + reportKey,
            data: function (d) {
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
                d.customer_id = $('#customer_id').val();
                d.supplier_id = $('#supplier_id').val();
                d.payment_account_id = $('#payment_account_id').val();
                d.product_id = $('#product_id').val();
                d.warehouse_id = $('#warehouse_id').val();
            }
        },
        columns: columns,
        language: { url: '//cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        order: [[0, 'desc']]
    });

    function exportUrl(format) {
        const params = $.param({
            from_date: $('#from_date').val(),
            to_date: $('#to_date').val(),
            customer_id: $('#customer_id').val(),
            supplier_id: $('#supplier_id').val(),
            payment_account_id: $('#payment_account_id').val(),
            product_id: $('#product_id').val(),
            warehouse_id: $('#warehouse_id').val()
        });

        return '{{ url('admin/reports/export') }}/' + reportKey + '/' + format + '?' + params;
    }

    $('#btn-filter').on('click', function () {
        table.ajax.reload();
        $('#btn-export-csv').attr('href', exportUrl('csv'));
        $('#btn-export-pdf').attr('href', exportUrl('pdf'));
    });
});
</script>
@endsection