@extends('backend.layouts.app')
<style>
    .card-custom {
        background-color: #b6de8f !important;
        margin: 10px 5px;
    }
</style>

@section('content')
    <div class="app-main__inner">
        <div class="app-page-title d-flex justify-content-between align-items-center">
            <div class="page-title-wrapper">
                @if (session('message'))
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            showToast("{{ session('message') }}", "{{ session('class') }}");
                        });
                    </script>
                @endif

                <div class="page-title-heading">
                    <div class="page-title-icon">
                        <i class="pe-7s-car icon-gradient bg-mean-fruit"></i>
                    </div>
                    <div class="d-flex flex-column">
                        <span>Dashboard</span>
                        <div class="page-title-subheading">
                            Welcome to admin dashboard.
                        </div>
                    </div>
                </div>
            </div>
            <a href="{{ route('dashboard') }}">
                <button class="btn-shadow  btn btn-prodriver"> <i class="fa fa-arrow-left fa-w-20"></i> Back </button>
            </a>
        </div>
    </div>

    <div class="tabs-animation">
        <div class="row">
            <div class="col-md-12 col-lg-6 col-xl-7">
                <div class="main-card ml-3 card">
                    @if (empty(Request()->type))
                        <div class="border-top bg-light card-header">
                            <div class="actions-icon-btn mx-auto">
                                <div>
                                    <div role="group" class="btn-group-lg btn-group nav">
                                        <button type="button" data-toggle="tab" href="#tab-content-income"
                                            class="btn-pill pl-3 btn btn-focus active">Courses</button>
                                        <button type="button" data-toggle="tab" href="#tab-content-expenses"
                                            class="btn-pill pr-3 btn btn-focus">Students</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="card-body">
                        <div class="tab-content {{ !empty(Request()->type) ? 'd-none' : '' }}" id="tb-cntnt">
                            <div class="tab-pane fade active show" id="tab-content-income" role="tabpanel">
                                <h5 class="menu-header-title">Latest Courses</h5>
                                <!--<h6 class="menu-header-subtitle opacity-6">Total performance for this month</h6>-->
                                <div class="mt-3 row">
                                    @foreach ($getCourse as $course)
                                        <div class="col-sm-12 col-md-6 p-0">
                                            <div
                                                class="card-border mb-sm-3 mb-md-0 border-light no-shadow card card-custom">
                                                <a href="{{ route('courses.show', $course->id) }}"
                                                    class="text-decoration-none text-dark">
                                                    <div class="widget-content">
                                                        <div class="widget-content-outer">
                                                            <div class="widget-content-wrapper">
                                                                <div class="col-lg-12 col-sm-12 text-center">
                                                                    <div class="widget-heading">
                                                                        <strong>{{ $course->courseCode }}</strong>
                                                                    </div>
                                                                    <div class="widget-heading text-muted font-weight-bold">
                                                                        Course Type : {{ ucfirst($course->type) }}</div>
                                                                    <div class="widget-heading font-weight-bold small">
                                                                        Students Enrolled :
                                                                        {{ $course->studentsEnrolled->count() }}</div>
                                                                    <div class="widget-heading font-weight-bold small">
                                                                        Instructor :
                                                                        {{ ucfirst($course->instructor->name) }}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                    <p class="">
                                        {{$getCourse->links('pagination::bootstrap-5')}}
                                    </p>
                                </div>
                            </div>
                           
                            <div class="tab-pane fade" id="tab-content-expenses" role="tabpanel">
                                <h5 class="menu-header-title">Students</h5>
                                <div class="mt-3 row">
                                    @foreach ($getStudents as $student)
                                        <div class="col-sm-12 col-md-6 p-0">
                                            <div
                                                class="card-border mb-sm-3 mb-md-0 border-light no-shadow card card-custom">
                                                <a href="{{ route('students.show', $student->id) }}"
                                                    class="text-decoration-none text-dark">
                                                    <div class="widget-content">
                                                        <div class="widget-content-outer">
                                                            <div class="widget-content-wrapper">
                                                                <div class="col-lg-12 col-sm-12 text-center">
                                                                    <div class="widget-heading">
                                                                        <strong>{{ $student->lastname }}
                                                                            {{ $student->firstname }}</strong>
                                                                    </div>
                                                                    <div class="widget-heading text-muted font-weight-bold">
                                                                        Course :
                                                                        {{ ucfirst($student->course?->courseCode) }}</div>
                                                                    <div class="widget-heading font-weight-bold small">
                                                                        Lessions Completed : {{ $student->carlessions->count() }}</div>
                                                                    <div class="widget-heading font-weight-bold small">Not
                                                                        Certified</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                    <p class="">
                                        {{$getStudents->links('pagination::bootstrap-5')}}
                                    </p>
                                </div>
                            </div>
                        </div>
                        @php($typeArray = ['pending', 'expiring', 'active', 'readytocertify', 'unverify-less', 'prev-course', 'course-inprogress', 'finished-inclass', 'seven-days', 'last-month', 'uninvoiced'])
                        <div class="" id="studentList"
                            style="{{ in_array(Request()->type, $typeArray) ? '' : 'display: none;' }}">
                            <h5 class="menu-header-title">
                                @if (Request()->type == 'expiring')
                                    Expiring Students
                                @elseif (Request()->type == 'pending')
                                    Pending Students
                                @elseif (Request()->type == 'readytocertify')
                                    Ready To Certify
                                @elseif (Request()->type == 'unverify-less')
                                    Un-Approved Lessions
                                @elseif (Request()->type == 'prev-course')
                                    Last Year Courses
                                @elseif (Request()->type == 'course-inprogress')
                                    Courses In Progress
                                @elseif (Request()->type == 'finished-inclass')
                                    Courses In Progress
                                @elseif (Request()->type == 'seven-days')
                                    Last Seven Days
                                @elseif (Request()->type == 'last-month')
                                    Last Month
                                @elseif (Request()->type == 'uninvoiced')
                                    Un-Invoiced
                                @else
                                    Active Students
                                @endif
                            </h5>

                            @php($incarlessions = 0)

                            <div class="mt-3 row">

                                <div class="table-responsive">
                                    @if (Request()->type == 'unverify-less' ||
                                            Request()->type == 'seven-days' ||
                                            Request()->type == 'last-month' ||
                                            Request()->type == 'uninvoiced')
                                        <table id="studentsTable" class="table table-striped table-bordered"
                                            style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>Student Name</th>
                                                    <th>Instructor Name</th>
                                                    @if (Request()->type == 'seven-days' || Request()->type == 'last-month' || Request()->type == 'uninvoiced')
                                                        <th>Date</th>
                                                        <th>Time</th>
                                                    @else
                                                        <th>Account Paid</th>
                                                        <th>Actions</th>
                                                    @endif
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($lessions as $key => $lession)
                                                    <tr>
                                                        <td>{{ $lession->student?->fullname() }}</td>
                                                        <td>{{ $lession->instructor?->fullname() }}</td>
                                                        @if (Request()->type == 'seven-days' || Request()->type == 'last-month' || Request()->type == 'uninvoiced')
                                                            <td>{{ $lession->date }}</td>
                                                            <td>{{ date('h:i A', strtotime($lession->start_time)) }}</td>
                                                        @else
                                                            <td>{{ $lession->amount > 0 ? 'Yes' : 'No' }}</td>
                                                            <td>
                                                                <a href="{{ route('approve-lession', $lession->id) }}">
                                                                    <button class="btn btn-prodriver" type="button">
                                                                        Approve
                                                                    </button>
                                                                </a>
                                                                <a href="{{ route('decline-lession', $lession->id) }}">
                                                                    <button class="btn btn-prodriver" type="button">
                                                                        Decline
                                                                    </button>
                                                                </a>
                                                            </td>
                                                        @endif
                                                    </tr>
                                                    <!-- Add more rows as needed -->
                                                @empty
                                                    <tr>
                                                        <td colspan="4"> No Data Found.</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    @elseif (Request()->type == 'prev-course' || Request()->type == 'course-inprogress' || Request()->type == 'finished-inclass')
                                        <table id="studentsTable" class="table table-striped table-bordered"
                                            style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>Course Code</th>
                                                    <th>Type</th>
                                                    <th>Students Enrolled</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($courses as $key => $course)
                                                    <tr id="{{ $course->id }}">
                                                        <td>{{ $course->courseCode }}</td>
                                                        <td>{{ $course->type }}</td>
                                                        <td>{{ $course->studentsEnrolled->count() }}</td>
                                                        <td>
                                                            <div class="dropdown">
                                                                <button class="btn btn-prodriver dropdown-toggle"
                                                                    type="button"
                                                                    id="dropdownMenuButton{{ $key }}"
                                                                    data-bs-toggle="dropdown" aria-haspopup="true"
                                                                    aria-expanded="false">
                                                                    Action
                                                                </button>
                                                                <div class="dropdown-menu"
                                                                    aria-labelledby="dropdownMenuButton{{ $key }}">
                                                                    <a class="dropdown-item remove"
                                                                        data-url="{{ route('courses.destroy', $course->id) }}"
                                                                        data-id="{{ $course->id }}">Delete</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="4"> No Data Found.</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    @else
                                        <table id="studentsTable" class="table table-striped table-bordered"
                                            style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>Student Name</th>
                                                    <th>Course</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($students as $key => $student)
                                                    <tr>
                                                        <td>{{ $student->firstname }} {{ $student->lastname }}</td>
                                                        <td>{{ $student->course->courseCode }}</td>
                                                        <td>
                                                            <div class="dropdown">
                                                                <!-- The button contains an anchor tag for the clickable link -->
                                                                <button class="btn btn-prodriver dropdown-toggle"
                                                                    type="button"
                                                                    id="dropdownMenuButton{{ $key }}"
                                                                    data-bs-toggle="dropdown" aria-haspopup="true"
                                                                    aria-expanded="false">
                                                                    Action
                                                                </button>
                                                                <div class="dropdown-menu"
                                                                    aria-labelledby="dropdownMenuButton{{ $key }}">
                                                                    <!-- Add your dropdown menu items here -->
                                                                    <a class="dropdown-item"
                                                                        href="{{ route('students.show', $student->id) }}">View
                                                                        Profile</a>
                                                                    <a class="dropdown-item"
                                                                        href="{{ route('extra.students.generateCertificate', $student->id) }}">Generate 
                                                                        Certificate</a>                                                                    
                                                                </div>
                                                            </div>
                                                            {{-- @endif --}}
                                                        </td>
                                                    </tr>
                                                    <!-- Add more rows as needed -->
                                                @empty
                                                    <tr>
                                                        <td colspan="3"> No Data Found.</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="main-card card ml-3 mt-3">
                    <div class="card-body">
                        <div class="tab-content " id="tb-cntnt">
                            <div class="tab-pane fade active show" id="tab-content-income" role="tabpanel">
                                <div class="d-flex align-items-center">
                                    <h5 class="menu-header-title">Pending Payments </h5>
                                    <small class="text-muted ml-2">(To be Verified)</small>
                                </div>
                                <!--<h6 class="menu-header-subtitle opacity-6">Total performance for this month</h6>-->
                                <div class="mt-3 row">

                                    <table id="pendingPayments" class="display" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Student Name</th>
                                                <th>Type / Amount</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Your table data goes here -->
                                            @forelse ($pendingPyaments as $payment)
                                                <tr id="{{ $payment->id }}">
                                                    <td>{{ $payment->first_name }} {{ $payment->last_name }}</td>
                                                    <td>{{ $payment->payment_type }} For {{ $payment->mc_gross }}</td>
                                                    <td>  
                                                        <button class="btn btn-prodriver">
                                                            <a class="text-decoration-none" href="{{route('payment.approve', [$payment->student_id, $payment->id])}}">Approve</a>
                                                        </button>
                                                        <button class="btn btn-danger remove" data-id="{{ $payment->id }}" data-url="{{ route('payment.delete', $payment->id) }}">Delete</button>
                                                    </td>
                                                </tr>
                                            @empty
                                                {{-- <tr>
                                                    <td colspan="3"> There are not payments to verify. </td>
                                                </tr> --}}
                                            @endforelse
                                        </tbody>
                                    </table>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-12 col-lg-6 col-xl-5">
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h6 class="menu-header-title text-capitalize text-primary mb-2">
                            Students
                        </h6>
                        <div class="border-light card-border scroll-area-sm card">
                            <div class="scrollbar-container d-flex justify-content-center align-items-center">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item p-0">
                                        <div class="widget-content p-0">
                                            <div class="text-center">
                                                <div class="col-sm-12 col-lg-12 row text-center m-0">
                                                    <div class="col-sm-4">
                                                        <a href="{{ route('dashboard') }}?type=pending" class="link">
                                                            <div class="widget-heading">Accounts Pending</div>
                                                            <div class="widget-subheading mt-1 opacity-10">
                                                                <div class="badge badge-pill badge-primary">
                                                                    {{ $pending ?? 0 }}
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <a href="{{ route('dashboard') }}?type=expiring" class="link">
                                                            <div class="widget-heading">Expiring</div>
                                                            <div class="widget-subheading mt-1 opacity-10">
                                                                <div class="badge badge-pill badge-primary">
                                                                    {{ $expiring ?? 0 }}
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <a href="{{ route('dashboard') }}?type=readytocertify"
                                                            class="link">
                                                            <div class="widget-heading">Ready to certify</div>
                                                            <div class="widget-subheading mt-1 opacity-10">
                                                                <div class="badge badge-pill badge-primary">
                                                                    {{ $readyToCertify ?? 0 }}</div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-12 mt-3">
                                                        <div class="widget-subheading mt-1 opacity-10">
                                                            <div class="badge badge-pill badge-warning">
                                                                <button type="button" id="LicenToVerifyBtn"
                                                                    instName={{ Auth()->user()->name }}
                                                                    class="btn btn-default text-white">Licenses To
                                                                    Verify</button>
                                                            </div>
                                                            <div class="badge badge-pill badge-success">
                                                                <button type="button" id="verifiedLicBtn"
                                                                    instName={{ Auth()->user()->name }}
                                                                    class="btn btn-default text-white">Verified
                                                                    Licenses</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12 mt-3">
                                                        <div class="widget-subheading mt-1 opacity-10">
                                                            <a href="{{ route('dashboard') }}?type=active">
                                                                <div
                                                                    class="d-flex justify-content-center align-items-center">
                                                                    <span
                                                                        class="border bg-dark text-white text-center d-flex justify-content-center flex-column p-2 rounded">
                                                                        <em class="fa fa-users"></em>
                                                                    </span>
                                                                    <span class="ml-2">
                                                                        <strong>{{ $activeSt }}</strong>
                                                                        <span
                                                                            class="text-muted ml-1">Students(Active)</span>
                                                                    </span>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h6 class="menu-header-title text-capitalize text-primary mb-2">
                            Courses (prev year)
                        </h6>
                        <div class="border-light card-border scroll-area-sm card">
                            <div class="scrollbar-container">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <div class="widget-content p-0">
                                            <div class="d-flex justify-content-center align-items-center">
                                                <div class="col-sm-12 col-lg-12 row text-center mt-3">
                                                    <div class="col-sm-4 ">
                                                        <a href="{{ route('dashboard') }}?type=prev-course">
                                                            <div class="widget-heading">Courses Registering</div>
                                                            <div class="widget-subheading mt-1 opacity-10">
                                                                <div class="badge badge-pill badge-primary">
                                                                    {{ $lastYearCourses ?? 0 }}</div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-4 ">
                                                        <a href="{{ route('dashboard') }}?type=course-inprogress">
                                                            <div class="widget-heading">Courses In-Progress</div>
                                                            <div class="widget-subheading mt-1 opacity-10">
                                                                <div class="badge badge-pill badge-primary">
                                                                    {{ $coursesInP ?? 0 }}</div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-4 ">
                                                        <a href="{{ route('dashboard') }}?type=course-inprogress">
                                                            <div class="widget-heading">Finished In-Class</div>
                                                            <div class="widget-subheading mt-1 opacity-10">
                                                                <div class="badge badge-pill badge-primary">
                                                                    {{ $coursesFinished }}</div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-12 mt-3">
                                                        <div class="widget-subheading mt-1 opacity-10">
                                                            <a href="{{ route('dashboard') }}?type=active">
                                                                <div
                                                                    class="d-flex justify-content-center align-items-center">
                                                                    <span
                                                                        class="border bg-dark text-white text-center d-flex justify-content-center flex-column p-2 rounded">
                                                                        <em class="fa fa-graduation-cap"></em>
                                                                    </span>
                                                                    <span class="ml-2">
                                                                        <strong>{{ $coursesInP ?? 0 }}</strong>
                                                                        <span class="text-muted ml-1">Course
                                                                            (Active)</span>
                                                                    </span>
                                                                </div>
                                                            </a>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h6 class="menu-header-title text-capitalize text-primary">
                            In-Car Lessons (course)
                        </h6>
                        <div class="border-light card-border scroll-area-sm card">
                            <div class="py-3">
                                <ul class="list-group list-group-flush">
                                    <li class="py-4">
                                        <div class="widget-content p-0">
                                            <div class="d-flex justify-content-center align-items-center">
                                                <div class="col-sm-12 col-lg-12 row text-center">
                                                    <div class="col-sm-4 ">
                                                        <a href="{{ route('dashboard') }}?type=unverify-less">
                                                            <div class="widget-heading">Lessons To Verify</div>
                                                            <div class="widget-subheading mt-1 opacity-10">
                                                                <div class="badge badge-pill badge-primary">
                                                                    {{ $lessionsToApprove?->count() }}</div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-4 ">
                                                        <a href="{{ route('dashboard') }}?type=seven-days">
                                                            <div class="widget-heading">Lessons Last 7 Days</div>
                                                            <div class="widget-subheading mt-1 opacity-10">
                                                                <div class="badge badge-pill badge-primary">
                                                                    {{ $lastSevenDays }}</div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-4 ">
                                                        <a href="{{ route('dashboard') }}?type=last-month">
                                                            <div class="widget-heading">Lessons Last Month</div>
                                                            <div class="widget-subheading mt-1 opacity-10">
                                                                <div class="badge badge-pill badge-primary">
                                                                    {{ $lastMonth }}</div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-12 mt-3">
                                                        <div class="widget-subheading mt-1 opacity-10">
                                                            <a href="{{ route('dashboard') }}?type=uninvoiced">
                                                                <div
                                                                    class="d-flex justify-content-center align-items-center">
                                                                    <span
                                                                        class="border bg-dark text-white text-center d-flex justify-content-center flex-column p-2 rounded">
                                                                        <em class="fa fa-file"></em>
                                                                    </span>
                                                                    <span class="ml-2">
                                                                        <strong>{{ $uninvoiced ?? 0 }}</strong>
                                                                        <span class="text-muted ml-1">Uninvoiced
                                                                            Lessons</span>
                                                                    </span>
                                                                </div>
                                                            </a>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    @push('custom_scripts')
        <script>

            $(document).ready(function () {
                $('#pendingPayments').DataTable({
                    "language": {
                        "emptyTable": "No Payments to verify."
                    }
                });
            });
            
            $('#LicenToVerifyBtn').click(function() {
                let instId = $(this).attr('instId') || '';
                $.ajax({
                    url: "{{ route('unverified.licenses') }}?instructor_id=" + instId,
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.error) {
                            showToast(response.message, response.class);
                            return;
                        }
                        $('#Lictoverify').modal('show');
                        $('#exampleModalLongTitle').text('Unverified Licenses')
                        $('#verifiedLiceContainer').empty().html(response.html);
                    },
                    error: function(error) {
                        console.log(error);
                        showToast(response.message, response.class);
                    }
                })
            });
            $('#verifiedLicBtn').click(function() {
                let instId = $(this).attr('instId') || '';
                $.ajax({
                    url: "{{ route('verified.licenses') }}?instructor_id=" + instId,
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.error) {
                            showToast(response.message, response.class);
                            return;
                        }
                        $('#Lictoverify').modal('show');
                        $('#exampleModalLongTitle').text('Verified Licenses')
                        $('#verifiedLiceContainer').empty().html(response.html);
                    },
                    error: function(error) {
                        console.log(error);
                        showToast(response.message, response.class);
                    }
                })
            });

            $('#Lictoverify').on('hidden.bs.modal', function(e) {
                // do something...
                console.log('adsf');
            });

            $('#verifiedClose').on('click', function() {
                $('#Lictoverify').modal('hide');
            });

            $(document).on('click', '.approveLice', function() {
                let student_id = $(this).attr('studentId');
                let orignalText = $(this).text();
                $(this).append(
                    '<div id="spin" class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Approving...</span></div>'
                );
                $(this).prop('disabled', true);
                var mainEle = $(this);
                $.ajax({
                    url: "{{ route('approve.license') }}?student_id=" + student_id,
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        console.log(response);
                        if (!response.error) {
                            mainEle.removeProp('disabled')
                            mainEle.text('Approved');
                            showToast(response.message, response.class);
                            return;
                        }
                        showToast(response.message, response.class);
                    },
                    error: function(error) {
                        console.log(error);
                    }

                })
            });
        </script>

        <script>
            $('.remove').on('click', function() {
                let id = $(this).data('id');
                let url = $(this).data('url');

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.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");
                            }
                        });
                    } else {
                        Swal.fire("Cancelled", "Your data is safe :)", "error");
                    }
                });
            }); // click
        </script>
    @endpush
@endsection