@extends('layouts.master')
@section('title', $title)

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}"/>
@endsection

@section('content')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.dashboard'), 'url' => route('admin.landing')],
            ['data' => $title, 'url' => null],
        ],
    ])

    <div class="card mb-4">
        <div class="card-body">
            <form id="filter_form" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">{{ trans('admin.duration') }}</label>
                    <div class="input-group">
                        <input type="text" name="date_from" id="date_from" class="form-control flatpickr" value="{{ request('date_from') }}" placeholder="{{ trans('admin.from_date') }}"/>
                        <input type="text" name="date_to" id="date_to" class="form-control flatpickr" value="{{ request('date_to') }}" placeholder="{{ trans('admin.to_date') }}"/>
                    </div>
                </div>

                @if(isset($filters))
                    @if(in_array('client', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.client') }}</label>
                            <select name="client_id" id="client_id" class="form-select select2-ajax" data-url="{{ route('admin.app_users_list', ['role' => 'client']) }}">
                                <option value="">{{ trans('admin.all') }}</option>
                            </select>
                        </div>
                    @endif

                    @if(in_array('provider', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.provider') }}</label>
                            <select name="provider_id" id="provider_id" class="form-select select2-ajax" data-url="{{ route('admin.app_users_list', ['role' => 'provider']) }}">
                                <option value="">{{ trans('admin.all') }}</option>
                            </select>
                        </div>
                    @endif

                    @if(in_array('user', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.user') }}</label>
                            <select name="user_id" id="user_id" class="form-select select2-ajax" data-url="{{ route('admin.app_users_list') }}">
                                <option value="">{{ trans('admin.all') }}</option>
                            </select>
                        </div>
                    @endif

                    @if(in_array('service', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.service') }}</label>
                            <select name="service_id" id="service_id" class="form-select select2-ajax" data-url="{{ route('admin.services_list') }}">
                                <option value="">{{ trans('admin.all') }}</option>
                            </select>
                        </div>
                    @endif

                    @if(in_array('status', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.status') }}</label>
                            <select name="status" id="status" class="form-select select2">
                                <option value="">{{ trans('admin.all') }}</option>
                                @foreach($statuses ?? [] as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    @if(in_array('type', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.type') }}</label>
                            <select name="type" id="type" class="form-select select2">
                                <option value="">{{ trans('admin.all') }}</option>
                                @foreach($types ?? [] as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    @if(in_array('name', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.search_name') }}</label>
                            <input type="text" name="name" id="name" class="form-control" placeholder="{{ trans('admin.name') }}">
                        </div>
                    @endif

                    @if(in_array('phone', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.phone') }}</label>
                            <input type="text" name="phone" id="phone" class="form-control" placeholder="{{ trans('admin.phone') }}">
                        </div>
                    @endif

                    @if(in_array('order_id', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.order_id') }}</label>
                            <input type="number" name="order_id" id="order_id" class="form-control" placeholder="{{ trans('admin.order_id') }}">
                        </div>
                    @endif

                    @if(in_array('method', $filters))
                        <div class="col-md-2">
                            <label class="form-label">{{ trans('admin.method') }}</label>
                            <select name="method" id="method" class="form-select select2">
                                <option value="">{{ trans('admin.all') }}</option>
                                @foreach($methods ?? [] as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                @endif

                <div class="col-12 text-end">
                    <button type="submit" class="btn btn-primary">{{ trans('admin.filter') }}</button>
                    <button type="submit" name="export" value="1" class="btn btn-label-success">{{ trans('admin.export') }}</button>
                    <a href="{{ url()->current() }}" class="btn btn-label-secondary">{{ trans('admin.reset') }}</a>
                </div>
            </form>
        </div>
    </div>

    <div class="row" id="summary_cards">
        @foreach($data as $index => $item)
            <div class="col-md-{{ $item['grid'] }} col-sm-6 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-2">
                            <div class="avatar me-3">
                                <span class="avatar-initial rounded bg-label-primary"><i class="ti ti-chart-bar ti-sm"></i></span>
                            </div>
                            <h6 class="mb-0">{{ $item['label'] }}</h6>
                        </div>
                        <h4 class="mb-1" id="summary_value_{{ $index }}">{{ is_numeric($item['value']) ? (fmod($item['value'], 1) !== 0.0 ? number_format($item['value'], 2) : number_format($item['value'])) : $item['value'] }}</h4>
                        @if(isset($item['action_btn']) && $item['action_btn'])
                            <button type="button" class="btn btn-sm btn-primary mt-2 view-list-btn" data-bs-toggle="modal" data-bs-target="#listModal">{{ trans('admin.view_list') }}</button>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Modal -->
    <div class="modal fade" id="listModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-dialog-centered">
            <div class="modal-content p-3 p-md-5">
                <div class="modal-body">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-4">
                        <h3 class="mb-2">{{ trans('admin.subscribed_providers') }}</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="listTable">
                            <thead>
                                <tr>
                                    <th>{{ trans('admin.name') }}</th>
                                    <th>{{ trans('admin.phone') }}</th>
                                    <th>{{ trans('admin.action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(isset($columns))
    <div class="card">
        <div class="card-datatable table-responsive pt-0">
            <table class="datatable table table-bordered table-striped">
                <thead>
                <tr>
                    @foreach($columns as $col)
                        <th>{{ $col['title'] }}</th>
                    @endforeach
                </tr>
                </thead>
            </table>
        </div>
    </div>
    @endif
@endsection

@section('vendor-script')
    <script src="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
@endsection

@section('page-script')
    <script>
        $(document).ready(function () {
            flatPickerInitialization($('.flatpickr'), false, 'Y-m-d');

            $('.select2').each(function () {
                var element = $(this);
                element.select2({
                    placeholder: element.attr('placeholder'),
                    dropdownParent: element.parent()
                });
            });

            $('.select2-ajax').each(function () {
                var element = $(this);
                element.select2({
                    placeholder: element.attr('placeholder'),
                    dropdownParent: element.parent(),
                    ajax: {
                        url: element.data('url'),
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                term: params.term,
                                page: params.page
                            };
                        },
                        processResults: function (data, params) {
                            params.page = params.page || 1;
                            return {
                                results: data.data,
                                pagination: {
                                    more: (params.page < data.last_page)
                                }
                            };
                        },
                        cache: true
                    }
                });
            });
        });

        $('#listModal').on('shown.bs.modal', function () {
            if ($.fn.DataTable.isDataTable('#listTable')) {
                $('#listTable').DataTable().ajax.reload();
                return;
            }
            $('#listTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: window.location.href,
                    data: function(d) {
                        d.subscribed_providers_list = 1;
                    }
                },
                columns: [
                    {data: 'name', name: 'name'},
                    {data: 'phone', name: 'phone'},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
                responsive: true
            });
        });

        function updateReportSummary(summary) {
            summary.forEach(function (item, index) {
                let value = item.value;
                if ($.isNumeric(value)) {
                    value = parseFloat(value);
                    value = (value % 1 !== 0)
                        ? value.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})
                        : value.toLocaleString('en-US');
                }
                $('#summary_value_' + index).text(value);
            });
        }

        $('#filter_form').on('submit', function (e) {
            e.preventDefault();
            const formData = $(this).serialize();
            const submitButton = $(document.activeElement);

            if (submitButton.attr('name') === 'export' && submitButton.val() === '1') {
                window.location.href = window.location.pathname + '?' + formData + '&export=1';
            } else {
                datatable.draw();
            }
        });
    </script>
    @if(isset($columns))
        @include('layouts._datatable', [
            'url' => url()->current(),
            'header' => $title,
            'columns' => array_map(function($col) {
                return ['data' => $col['data'], 'name' => $col['name'] ?? $col['data'], 'orderable' => $col['orderable'] ?? true, 'searchable' => $col['searchable'] ?? true];
            }, $columns),
            'filters' => [
                'date_from' => '#date_from',
                'date_to' => '#date_to',
                'status' => '#status',
                'type' => '#type',
                'name' => '#name',
                'phone' => '#phone',
                'client_id' => '#client_id',
                'provider_id' => '#provider_id',
                'service_id' => '#service_id',
                'order_id' => '#order_id',
                'method' => '#method',
                'user_id' => '#user_id',
            ]
        ])
    @endif
@endsection