@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.subscriptions.index') }}">@lang('admin.subscriptions')</a>
                    </li>
                </ol>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">@lang('admin.subscriptions')</h4>
                        <a class="btn btn-success" href="{{ route('admin.subscriptions.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.plan_name')</th>
                                        <th>@lang('admin.start_date')</th>
                                        <th>@lang('admin.expire_date')</th>
                                        <th>@lang('admin.price')</th>
                                        <th>@lang('admin.created_at')</th>
                                        <th>@lang('admin.actions')</th>
                                    </tr>
                                </thead>
                                <tbody id="subscriptionTableBody">
                                    @foreach ($subscriptions as $subscription)
                                        <tr>
                                            <td>{{ $subscription->business->name ?? '' }}</td>
                                            <td>{{ $subscription->plan_name }}</td>
                                            <td>{{ $subscription->start_date }}</td>
                                            <td>{{ $subscription->expire_date }}</td>
                                            <td>{{ $subscription->price }}</td>
                                            <td>{{ $subscription->created_at }}</td>
                                            <td>
                                                <div class="d-flex">
                                                    <a href="{{ route('admin.subscriptions.edit', ['subscription' => $subscription->id]) }}"
                                                        class="btn btn-primary shadow btn-xs sharp me-1">
                                                        <i class="fa fa-pencil"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-danger shadow btn-xs sharp"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#deleteModal_{{ $subscription->id }}"><i
                                                            class="fa fa-trash"></i></button>
                                                </div>
                                            </td>
                                        </tr>
                                        <!-- Modal -->
                                        <div class="modal fade" id="deleteModal_{{ $subscription->id }}">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">@lang('admin.delete')</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">@lang('admin.delete_message')</div>
                                                    <div class="modal-footer">
                                                        <form
                                                            action="{{ route('admin.subscriptions.destroy', $subscription->id) }}"
                                                            method="post" class="" id="delete_modal">
                                                            @method('delete')
                                                            @csrf

                                                            <button type="submit"
                                                                class="btn btn-success waves-effect">@lang('admin.confirm')</button>
                                                            <button type="button" class="btn btn-danger waves-effect"
                                                                data-dismiss="modal">@lang('admin.cancel')</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $subscriptions->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