@extends('admin.layouts.leadManagement')
@section('title')
    Test Preparation
@endsection
@section('content')
    <div class="container-fluid detail-page">
        <p class="heading">Test Prep Students Manager</p>

        <div class="top">
            <div class="tab-list">
                <a href="javascript:;" class="tab-item active">
                    <span class="small-head">Total</span>
                    <span class="count">13</span>
                </a>
                <a href="javascript:;" class="tab-item">
                    <span class="small-head">IELTS</span>
                    <span class="count">4</span>
                </a>
                <a href="javascript:;" class="tab-item">
                    <span class="small-head">PTE</span>
                    <span class="count">5</span>
                </a>
                <a href="javascript:;" class="tab-item">
                    <span class="small-head">TOEFL</span>
                    <span class="count">0</span>
                </a>
                <a href="javascript:;" class="tab-item">
                    <span class="small-head">German</span>
                    <span class="count">0</span>
                </a>
                <a href="javascript:;" class="tab-item">
                    <span class="small-head">French</span>
                    <span class="count">0</span>
                </a>
                <a href="javascript:;" class="tab-item">
                    <span class="small-head">Duolingo</span>
                    <span class="count">0</span>
                </a>
            </div>

            <a href="javascript:;" class="add-application">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 5V19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                Add Application
            </a>
        </div>

        <div class="main-box">
            <form id="" action="{" method="" >
                <div class="dropdown-list">
                    <div class="single-dropdown">
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/search.svg" alt="search-icon">
                        <input type="text" class="input-field" placeholder="Search">
                    </div>
                    <div class="single-dropdown">
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/calendar.svg" alt="calender-icon">
                        <input class="input-field" type="text" onfocus="this.type='date'" name="" id=""
                            placeholder="Date Applied">
                    </div>
                    <div class="single-dropdown">
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/calendar.svg" alt="calender-icon">
                        <input class="input-field" type="text" onfocus="this.type='date'" name="" id=""
                            placeholder="Test Date">
                    </div>
                    <div class="single-dropdown">
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/global.svg" alt="global-icon">
                        <select name="" id="" class="select-list">
                            <option value="" disabled selected>Package Type</option>
                            <option value="">Beginner</option>
                        </select>
                    </div>
                    <div class="single-dropdown">
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/refresh-circle.svg"
                            alt="refresh-circle-icon">
                        <select name="" id="" class="select-list">
                            <option value="" disabled selected>Payment Status</option>
                            <option value="">Paid</option>
                            <option value="">Unpaid</option>
                        </select>
                    </div>
                    <div class="single-dropdown">
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/refresh-circle.svg"
                            alt="refresh-circle-icon">
                        <select name="" id="" class="select-list">
                            <option value="" disabled selected>Result Status</option>
                        </select>
                    </div>
                    <div class="single-dropdown">
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/refresh-circle.svg"
                            alt="refresh-circle-icon">
                        <select name="" id="" class="select-list">
                            <option value="" disabled selected>Booked By</option>
                        </select>
                    </div>
                    <div class="single-dropdown">
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/refresh-circle.svg"
                            alt="refresh-circle-icon">
                        <select name="" id="" class="select-list">
                            <option value="" disabled selected>Class Status</option>
                            <option value="">Online</option>
                        </select>
                    </div>
                </div>
            </form>

            <table class="table">
                <thead>
                    <th class="table-head">
                        <span class="head-name">ID</span>
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/sort-icon.svg" alt="sort-icon">
                    </th>
                    <th class="table-head">
                        <span class="head-name">Name</span>
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/sort-icon.svg" alt="sort-icon">
                    </th>
                    <th class="table-head"><span class="head-name">Test Type</span></th>
                    <th class="table-head">
                        <span class="head-name">Start Date</span>
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/sort-icon.svg" alt="sort-icon">
                    </th>
                    <th class="table-head">
                        <span class="head-name">End Date</span>
                        <img src="{{ asset('backend') }}/lead-management/images/test-prep/sort-icon.svg" alt="sort-icon">
                    </th>
                    <th class="table-head"><span class="head-name">Tutor</span></th>
                    <th class="table-head"><span class="head-name">Class Mode</span></th>
                    <th class="table-head"><span class="head-name">Package Type</span></th>
                    <th class="table-head"><span class="head-name">Total Fee</span></th>
                    <th class="table-head"><span class="head-name">Pending Fee</span></th>
                    <th class="table-head"><span class="head-name">Payment Status</span></th>
                    <th class="table-head"><span class="head-name">Remarks</span></th>
                    <th class="table-head"><span class="head-name">Action</span></th>
                </thead>

                <tbody>
                    <tr>
                        <td class="table-col">
                            <a href="javascript;;" class="student-id">235864</a>
                            <span class="date">(02/11/23)</span>
                        </td>
                        <td class="table-col">
                            <p class="name">Lalu Prasad Gaud</p>
                        </td>
                        <td class="table-col">IELTS</td>
                        <td class="table-col">02/11/23</td>
                        <td class="table-col">02/11/23</td>
                        <td class="table-col">Avnika</td>
                        <td class="table-col">ONLINE</td>
                        <td class="table-col">Beginner</td>
                        <td class="table-col">1200</td>
                        <td class="table-col">1000</td>
                        <td class="table-col"><span class="label red">Partial</span></td>
                        <td class="table-col">Application rejected due to incomplete documents</td>
                        <td class="table-col">
                            <div class="box">
                                <a href="javascript:;" class="dots" aria-label="dots-icon">
                                    <img src="{{ asset('backend') }}/lead-management/images/dots.svg" alt="dots-icon"
                                        width="100%" height="100%">
                                </a>
                                <p class="drop-box">
                                    <a target="_blank" href="javascript:;" class="company box-link">
                                        <img src="{{ asset('backend') }}/lead-management/images/edit.svg" alt="edit"
                                            width="100%" height="100%">Edit
                                    </a>
                                    <a href="javascript:;" class="wp-link box-link" aria-label="whatsapp-icon">
                                        <img src="{{ asset('backend') }}/lead-management/images/whatsapp.svg"
                                            alt="whatsapp" width="100%" height="100%">WhatsApp
                                    </a>

                                    <a href="javascript:;" class="email-link box-link" aria-label="email-icon">
                                        <img src="{{ asset('backend') }}/lead-management/images/email.svg" alt="email"
                                            width="100%" height="100%">Email
                                    </a>

                                    <a href="javascript:;" class="company box-link">
                                        <img src="{{ asset('backend') }}/lead-management/images/delete.svg"
                                            alt="delete" width="100%" height="100%">Delete
                                    </a>
                                </p>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="table-col">
                            <a href="javascript;;" class="student-id">235864</a>
                            <span class="date">(02/11/23)</span>
                        </td>
                        <td class="table-col">Lalu Prasad Gaud</td>
                        <td class="table-col">IELTS</td>
                        <td class="table-col">02/11/23</td>
                        <td class="table-col">02/11/23</td>
                        <td class="table-col">Avnika</td>
                        <td class="table-col">ONLINE</td>
                        <td class="table-col">Beginner</td>
                        <td class="table-col">1200</td>
                        <td class="table-col">1000</td>
                        <td class="table-col"><span class="label red">Partial</span></td>
                        <td class="table-col">Application rejected due to incomplete documents</td>
                        <td class="table-col">
                            <div class="box">
                                <a href="javascript:;" class="dots" aria-label="dots-icon">
                                    <img src="{{ asset('backend') }}/lead-management/images/dots.svg" alt="dots-icon"
                                        width="100%" height="100%">
                                </a>
                                <p class="drop-box">
                                    <a target="_blank" href="javascript:;" class="company box-link">
                                        <img src="{{ asset('backend') }}/lead-management/images/edit.svg" alt="edit"
                                            width="100%" height="100%">Edit
                                    </a>
                                    <a href="javascript:;" class="wp-link box-link" aria-label="whatsapp-icon">
                                        <img src="{{ asset('backend') }}/lead-management/images/whatsapp.svg"
                                            alt="whatsapp" width="100%" height="100%">WhatsApp
                                    </a>

                                    <a href="javascript:;" class="email-link box-link" aria-label="email-icon">
                                        <img src="{{ asset('backend') }}/lead-management/images/email.svg" alt="email"
                                            width="100%" height="100%">Email
                                    </a>

                                    <a href="javascript:;" class="company box-link">
                                        <img src="{{ asset('backend') }}/lead-management/images/delete.svg"
                                            alt="delete" width="100%" height="100%">Delete
                                    </a>
                                </p>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="pagination">
                <div class="page-left">
                    <select name="" id="" class="pages-list">
                        <option value="" selected>10</option>
                        <option value="">15</option>
                        <option value="">20</option>
                    </select>

                    <span class="text">Items per page</span>

                    <p class="total-page">1-10 of 200 items</p>
                </div>

                <div class="page-left">
                    <select name="" id="" class="pages-list">
                        <option value="" selected>1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                    </select>

                    <p class="total-page">of 44 pages</p>
                    <p class="btns">
                        <a href="javascript:;" class="page-btn" aria-label="arrow-left">
                            <img src="{{ asset('backend') }}/lead-management/images/test-prep/arrow-left.svg"
                                alt="arrow-left">
                        </a>
                        <a href="javascript:;" class="page-btn" aria-label="arrow-right">
                            <img src="{{ asset('backend') }}/lead-management/images/test-prep/arrow-right.svg"
                                alt="arrow-right">
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/lead-management/css/test-prep.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{ env('CRM_VERSION') }}" />
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{ env('CRM_VERSION') }}"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('backend') }}/lead-management/js/common.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script>
        $(document).ready(function() {
            $(".select-list").change(function() {
                $(this).css("color", "#24292D");
            });

            $('.select-list').click(function() {
                $(this).toggleClass("active");
            });

            $('.tab-item').click(function() {
                $('.tab-item').removeClass('active');
                $(this).addClass('active');
            });

            $(document).on("click", ".dots", function() {
                if ($(this).parent(".box").hasClass("show")) {
                    $(this).parent(".box").removeClass("show");
                    $(document).off('mouseup', onMouseUp);
                } else {
                    $(".box").removeClass("show");
                    $(this).parent(".box").toggleClass("show");
                    $(document).on('mouseup', onMouseUp);
                }
            })

            const onMouseUp = e => {
                if (!$('.box').is(e.target) // If the target of the click isn't the container...
                    &&
                    $('.box').has(e.target).length === 0) // ... or a descendant of the container.
                {
                    $('.box').removeClass('show');
                }
            }
        })
    </script>
@endsection