@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Fee Mangements</title>

@include('datepicker')

@section('main-content')
    <link rel="stylesheet" href="{{ asset('assets/css/pop_up_with_image.css') }}" />

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <style>
        .edit:hover {
            color: #fff !important;
            background-color: blue !important;
            border-color: #696cff !important;
            border-radius: 5px !important;
        }

        .delete:hover {
            color: #fff !important;
            background-color: #E3242B !important;
            border-color: #E3242B !important;
            border-radius: 5px !important;
        }

        .dtbl_dropdown .dataTables_length {
            width: 65px;
        }

        .dtbl_dropdown .dataTables_length label {
            width: 100%;
        }

        table.dataTable thead .sorting_asc {
            background-image: none !important;
        }

        table.dataTable thead .sorting {
            background-image: none !important;
        }

        #student_select {
            display: inline-block !important;
            width: auto !important;
            margin-left: 5px;
            border-color: #697a8d;
        }

        .addFullWidth {
            width: 100%;
        }

        .cp_img_div {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .cp_prev_img {
            max-width: 76%;
            flex: 0 0 76%;
        }

        .cp_imgList {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .card_prev_img {
            border-radius: 5px;
            border: 2px solid #ddd;
            padding: 10px;
            object-fit: contain;
            max-height: 420px;
        }

        #image_list img {
            height: 85px;
            width: 100px;
            border-radius: 5px;
            cursor: pointer;
            border: 2px solid #ddd;
            object-fit: cover;
            padding: 3px;
        }

        .close {
            color: #aaaaaa;
            float: right;
            font-size: 23px;
            font-weight: bold;
            position: absolute;
            top: -9px;
            right: -9px;
            background-color: #fff;
            width: 23px;
            height: 23px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            box-shadow: 0px 0px 9px 0px #0000006b;
        }
    </style>
        <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:15%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Parent deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>
    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl container-p-y row">
            <div class="col-6">
                <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Records /</span> Fee Under Review</h4>
            </div>
            <div class="col-6 text-white text-end">
                <a class="btn btn-info" href="{{ url('/acceptedPayments') }}">Accepted Payments</a>
                <a class="btn btn-danger" href="{{ url('/rejectedPayments') }}">Rejected Payments</a>
            </div>
            <!-- Basic Bootstrap Table -->
            <div class="card ms-3 pb-3 mb-2">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 style="padding: 1.5rem 0.5rem;">Fee Under Review</h5>
                </div>
                @include('components.datefilter')
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <table class="table" id="services">
                        <thead>
                            <tr>
                                <th >Student<br />Name</th>
                                <th>Class<br />Name</th>
                                <th>Amount<br />Paid</th>
                                <th>Transaction<br />Date</th>
                                <th>View</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (isset($data) && count($data) != 0)
                                @foreach ($data as $key => $detail)
                                    <tr id="row_{{ $detail->id }}">
                                        {{-- <td>{{ $key+1 }}</td> --}}
                                        <td class="name{{ $detail->id }}">
                                            {{ ucwords($detail->student->first_name) . ' ' . ucwords($detail->student->last_name) }}
                                        </td>
                                        <td class="name{{ $detail->id }}">{{ ucwords($detail->class_name) }}</td>
                                        <td class="name{{ $detail->id }}">
                                            {{ ucwords($review_fee_arr[$detail->id]->amountpaid) }}
                                        </td>
                                        <td>{{ dateformatter($review_fee_arr[$detail->id]->created_at) ?? 'N.A.' }}</td>
                                        <td>