@extends('admin.layouts.app')

<style>
    #date-range {
        background-color: #fff;
        border: 1px solid #aaa;
    }
</style>
@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item active"><a href="{{ route('admin.credits.index') }}">@lang('admin.credits')</a>
                    </li>
                </ol>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">@lang('admin.credits')</h4>
                        <a class="btn btn-success" href="{{ route('admin.credits.create') }}">@lang('admin.create')</a>
                    </div>
                    <div class="card-body">
                        <!-- Add a form for filtering -->
                        <form method="get" action="" class="d-flex">
                            @csrf
                            <div class="input-group me-2">
                                <input type="text" class="form-control" name="keyword"
                                    value="{{ request()->input('keyword') }}" placeholder="@lang('user.search')...">
                            </div>
                            <div class="input-group me-2">
                                <select class="form-select" name="business_id" aria-label="Filter by Business Name">
                                    <option value="">Select Business</option>
                                    @foreach($businesses as $business)
                                        <option value="{{ $business->id }}" {{ request()->input('business_id') == $business->id ? 'selected' : '' }}>
                                            {{ $business->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="input-group me-2">
                                <input type="text" class="form-control" id="date-range" name="date_range"
                                    value="{{ request()->input('date_range') }}"readonly>
                                <button type="button" class="btn btn-secondary"
                                    onclick="clearDateRange()">@lang('admin.clear')</button>

                            </div>
                            <button type="submit" class="btn btn-primary">@lang('admin.filter')</button>
                        </form>

                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>@lang('admin.business_name')</th>
                                        <th>@lang('admin.user')</th>
                                        <th>@lang('admin.amount')</th>
                                        <th>@lang('admin.datetime')</th>
                                        <th>@lang('admin.comment')</th>
                                        <th>@lang('admin.created_at')</th>
                                    </tr>
                                </thead>
                                <tbody id="creditTableBody">
                                    @foreach ($credits as $credit)
                                        <tr>
                                            <td>{{ $credit->business->name ?? '' }}</td>
                                            <td>{{ $credit->user->name ?? '' }}</td>
                                            <td>{{ $credit->amount }}</td>
                                            <td>{{ $credit->datetime }}</td>
                                            <td>{{ $credit->comment }}</td>
                                            <td>{{ $credit->created_at }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $credits->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>
    <script>
        $(document).ready(function() {

            $('#date-range').daterangepicker({
                autoUpdateInput: false,
                timePicker: true,
                locale: {
                    format: 'DD/MM/YYYY h:mm A'
                },
                timePickerIncrement: 30,
                showDropdowns: true
            });

            $('#date-range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY h:mm A') + ' - ' + picker.endDate.format(
                    'DD/MM/YYYY h:mm A'));
            });

        });

        function clearDateRange() {
            document.getElementById('date-range').value = '';
        }
    </script>
@endpush