@include('include.datatable-css')

<div class="dt-responsive table-responsive">
    <table id="simpletable" class="table table-striped table-bordered nowrap">
        <thead>
            <tr>
                <th>Title</th>
                <th>Alias</th>
                <th>Rank</th>
                <th>Status</th>
                <th>Date & Time</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($package_types as $packageType)
                <tr>
                    <td>{{ $packageType->title }}</td>
                    <td>{{ $packageType->alias }}</td>
                    <td>{{ $packageType->rank }}</td>
                    <td>
                        @if ($packageType->active == '1')
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Active</span>
                        @endif
                    </td>
                    <td>{{ $packageType->created_at }}</td>
                    <td>
                        <div id="confirmModal{{$packageType->id}}-tab-3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle{{$packageType->id}}-tab-3" 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{{$packageType->id}}-tab-3">Remove Package Type</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 type?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-success" data-bs-dismiss="modal">No</button>
                                        <a role="button" onclick="deleteRecord(this, {{ $packageType->id }})" class="btn btn-danger text-white" data-bs-dismiss="modal">Yes</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <a href="{{ route('edit-package-type', ['packageType' => $packageType->id]) }}" class="avtar avtar-xs btn-link-success btn-pc-default" data-bs-toggle="tooltip" data-bs-original-title="Edit">
                            <i class="ti ti-edit-circle 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{{$packageType->id}}-tab-3" class="avtar avtar-xs btn-link-danger btn-pc-default">
                                <i class="ti ti-trash f-18"></i>
                            </a>
                        </span>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

@include('include.datatable')
@include('include.filters-common-js-part')
@include('include.datatable-date-range-selector-js', ['url' => 'package-types'])