@include('include.datatable-css')

<div class="row">
    <div class="col-md-12 text-end">
        <input id="dateRangeEle-1" class='dateRangeEle status-ele cursor-pointer text-center rounded' type="text" size="40" data-bs-toggle="tooltip" title="Select date range">
    </div>
</div>

<div class="dt-responsive table-responsive">
    <table id="simpletable" class="table table-striped table-bordered nowrap">
        <thead>
            <tr>
                <th>Photo</th>
                <th>Title</th>
                <th>Price</th>
                <th>Trial Price</th>
                <th>Type</th>
                <th>From Day</th>
                <th>To Day</th>
                <th>Status</th>
                <th>Created On</th>
                <th>Action</th>
            </tr>
        </thead>
        @foreach ($packages as $package)
            <tbody>
                <tr>
                    <td>
                        @if ($package->thumbnail != NULL)
                            @if (Storage::exists($package->thumbnail))
                                <img class="rounded rounded-circle" src="{{ asset(Storage::url($package->thumbnail)) }}" alt="photo">
                            @else
                                <img class="rounded rounded-circle" src="{{ asset('assets/images/emptyImage.jpg') }}" alt="photo">
                            @endif
                        @else
                            <img class="rounded rounded-circle" src="{{ asset('assets/images/emptyImage.jpg') }}" alt="photo">
                        @endif
                    </td>
                    <td>
                        {{ Str::limit($package->title, 50, ' ...') }}
                    </td>
                    <td>
                        ${{ number_format($package->price, 2) }}
                    </td>
                    <td>
                        ${{ number_format($package->trial_price, 2) }}
                    </td>
                    <td>
                        {{ $package->type }}
                    </td>
                    <td>
                        {{ $package->from_day }}
                    </td>
                    <td>
                        {{ $package->to_day }}
                    </td>
                    <td>
                        @if ($package->active == '1')
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Active</span>
                        @endif
                    </td>
                    <td>{{ $package->created_at }}</td>
                    <td>
                        <a href="{{ route('package-settings', ['package' => $package->id]) }}" class="avtar avtar-xs btn-link-secondary btn-pc-default" data-bs-toggle="tooltip" data-bs-original-title="Details">
                            <i class="ti ti-settings f-18"></i>
                        </a>

                        <a href="{{ route('package-items', ['package' => $package->id]) }}" class="avtar avtar-xs btn-link-secondary btn-pc-default" data-bs-toggle="tooltip" data-bs-original-title="Items">
                            <i class="ti ti-package f-18"></i>
                        </a>

                        <span data-bs-toggle="tooltip" data-bs-original-title="Remove">
                            <a href="javascript:void(0)" role="button" data-bs-toggle="modal" data-bs-target="#confirmModal{{$package->id}}-tab-1" class="avtar avtar-xs btn-link-danger btn-pc-default">
                                <i class="ti ti-trash f-18"></i>
                            </a>
                        </span>
                    </td>
                </tr>

                <div id="confirmModal{{$package->id}}-tab-1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle{{$package->id}}-tab-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title text-danger" id="confirmModalTitle{{$package->id}}-tab-1">Remove Package</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p>Are you sure to remove this package?</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-success" data-bs-dismiss="modal">No</button>
                                <a role="button" onclick="deletePackage(this, {{ $package->id }})" class="btn btn-danger text-white" data-bs-dismiss="modal">Yes</a>
                            </div>
                        </div>
                    </div>
                </div>
            </tbody>
        @endforeach
    </table>
</div>

@include('include.datatable')

<script>
    new DateRangePicker('dateRangeEle-1',
        {
            timePicker: true,
            opens: 'left',
            ranges: {
                'Today': [moment().startOf('day'), moment().endOf('day')],
                'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
                'This Month': [moment().startOf('month').startOf('day'), moment().endOf('month').endOf('day')],
            },
            locale: {
                format: "YYYY-MM-DD HH:mm:ss",
            }
        },
        function (start, end) {
            let url = "{{ route('packages') }}";

            start = start.format('YYYY-MM-DD HH:mm:ss');
            end = end.format('YYYY-MM-DD HH:mm:ss');

            location.href = url + '?startDate=' + start + '&endDate=' + end + '&tab=1';
        }
    );
</script>