@extends('backend.layouts.app')

@section('content')
    <div class="app-main__inner">
        <div class="app-page-title">
            @if (session('message'))
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        showToast("{!! session('message') !!}", "{{ session('class') }}");
                    });
                </script>
            @endif
            <div class="page-title-wrapper">
                <div class="page-title-heading">
                    <div class="page-title-icon">
                        <i class="pe-7s-medal icon-gradient bg-tempting-azure"></i>
                    </div>
                    <div>
                        Packages
                        <div class="page-title-subheading"></div>
                    </div>
                </div>
                <div class="page-title-actions">
                    {{-- <button type="button" data-toggle="tooltip" title="Example Tooltip" data-placement="bottom"
                            class="btn-shadow mr-3 btn btn-dark">
                            <i class="fa fa-star"></i>
                        </button> --}}
                </div>
            </div>
        </div>
        <div class="main-card mb-3 card">
            <div class="card-body">
                <div class="section-body">
                    <div class="row locateMenu col-12 col-md-6 mx-auto">
                        <a href="{{ route('packages.create') }}" class="btn btn-prodriver btn-icon icon-left btn mx-auto col-12 col-md-6">
                            <i class="far fa-user"></i> Add New Package
                        </a>
                        
                    </div>

                    <table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered  dtr-inline collapsed">
                        <thead>
                            <tr>
                                <th class="text-center">Name</th>
                                <th class="text-center">Short Name</th>
                                <th class="text-center">Price</th>
                                <th class="text-center">Stats</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>


                        @foreach ($packages as $package)
                            <tr role="row" class="odd" id="{{ $package->id }}">
                                <td class="align-middle sorting_1"><a href="#">{{ $package->name }}</a></td>
                                <td class="align-middle">{{ $package->shortname }}</td>
                                <td class="align-middle">{{ $package->price }}</td>
                                <td class="align-middle">{{ $package->status == '1' ? 'Active': 'In-Active' }}</td>
                                <td>
                                    <div class="btn-group dropleft">
                                        <button type="button" class="btn btn-sm btn-prodriver dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions</button>
                                        <div class="dropdown-menu dropleft">
                                            <a class="dropdown-item edit" href="{{ route('packages.edit', $package->id) }}">Edit Package</a>
                                            <div class="dropdown-divider deleteCourse"></div>
                                            <a class="dropdown-item remove" data-id="{{ $package->id }}" href="#">Delete Package</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                        
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('.remove').on('click', function() {
            let id = $(this).data('id');
            let url = "{{ route('packages.destroy', '~') }}";
            url = url.replace('~', id);
            $.ajax({
                url: url,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function(deleted) {
                    console.log(deleted);
                    if (!deleted.error) {
                        $('#'+id).remove();
                        showToast("Data deleted successfully.", "success");
                    } else {
                        showToast("Something went wrong. Data not deleted.", "danger");
                    }
                },
                error: function(error) {
                    showToast("Something went wrong. Data not deleted.", "danger");
                } 
            });
        });
    </script>
@endsection