@include('layout.header')
<!-- New CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/form.min.css') }}" class="js">

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
    .custom-button {
        display: inline-block;
        padding: 5px 10px;
        margin-right: 10px;
        background-color: #eee;
        border: 1px solid #ccc;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
    }

    .custom-button input[type="checkbox"] {
        display: none;
    }

    /* .custom-button input[type="checkbox"]:checked + .checkbox-label {
    background-color: #81a1c4;
    color: #fff;
    border: 1px solid #007bff;
} */

    .checkbox-label {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }
</style>

<style>
    .button-blinking {
        background-color: #004A7F;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: none;
        color: #FFFFFF;
        cursor: pointer;
        display: inline-block;
        font-family: Arial;
        font-size: 16px;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        -webkit-animation: glowing 1500ms infinite;
        -moz-animation: glowing 1500ms infinite;
        -o-animation: glowing 1500ms infinite;
        animation: glowing 1500ms infinite;
    }

    @-webkit-keyframes glowing {
        0% {
            background-color: #B20000;
            -webkit-box-shadow: 0 0 3px #B20000;
        }

        50% {
            background-color: #FF0000;
            -webkit-box-shadow: 0 0 40px #FF0000;
        }

        100% {
            background-color: #B20000;
            -webkit-box-shadow: 0 0 3px #B20000;
        }
    }

    @-moz-keyframes glowing {
        0% {
            background-color: #B20000;
            -moz-box-shadow: 0 0 3px #B20000;
        }

        50% {
            background-color: #FF0000;
            -moz-box-shadow: 0 0 40px #FF0000;
        }

        100% {
            background-color: #B20000;
            -moz-box-shadow: 0 0 3px #B20000;
        }
    }

    @-o-keyframes glowing {
        0% {
            background-color: #B20000;
            box-shadow: 0 0 3px #B20000;
        }

        50% {
            background-color: #FF0000;
            box-shadow: 0 0 40px #FF0000;
        }

        100% {
            background-color: #B20000;
            box-shadow: 0 0 3px #B20000;
        }
    }

    @keyframes glowing {
        0% {
            background-color: #B20000;
            box-shadow: 0 0 3px #B20000;
        }

        50% {
            background-color: #FF0000;
            box-shadow: 0 0 40px #FF0000;
        }

        100% {
            background-color: #B20000;
            box-shadow: 0 0 3px #B20000;
        }
    }
</style>
<style>
    @media (min-width: 900px) {
        .modal-dialog {
            max-width: 674px;
        }
    }

    .mr-2 {
        margin-right: 10px;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .card {
        margin-bottom: 12px;
    }

    div#ui-datepicker-div {
        background: #fff;
        /*    padding: 12px 15px 5px;*/
        border-radius: 10px;
        width: 310px;
        box-shadow: 0 5px 5px 0 rgba(44, 44, 44, 0.2);
    }

    .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
        display: flex;
        justify-content: space-between;
    }

    .payment-status.d-flex {
        align-items: center;
        width: 250px;
    }

    .select-box-hide-class select {
        display: none;
    }

    .form-control[type=file] {
        overflow: hidden;
        height: 3rem;
    }


    .choices__inner {
        border: none;
        background: inherit;
    }

    .btn_remove {
        background: #fff;
        border: 1px solid red;
        border-radius: 5px;
        padding: 3px 6px;
        color: red;
        transition: background-color 0.3s, color 0.3s;
        /* Add transition for smooth effect */
    }

    .btn_remove:hover {
        background-color: red;
        /* Change background color on hover */
        color: #fff;
        /* Change text color on hover */
    }
</style>
<title>RAV Accreditation</title>
</head>

<body class="light">

    <div class="overlay"></div>
    <!-- #END# Overlay For Sidebars -->
    @include('layout.topbar')
    <div>
        @if (Auth::user()->role == '1')
            @include('layout.sidebar')
        @elseif(Auth::user()->role == '2')
            @include('layout.siderTp')
        @elseif(Auth::user()->role == '3')
            @include('layout.sideAss')
        @elseif(Auth::user()->role == '4')
            @include('layout.sideprof')
        @endif
        @include('layout.rightbar')
    </div>

    @if (Session::flash('success'))
        <script>
            var message = "{{ session::get('success') }}";
            Swal.fire({
                position: 'center',
                icon: 'success',
                title: 'Success',
                text: message,
                showConfirmButton: false,
                timer: 3000
            })
        </script>
    @elseif(Session::has('fail'))
        <div class="alert alert-danger" role="alert">
            {{ session::get('fail') }}
        </div>
    @endif
    <section class="content">
        <div class="container-fluid">
            <div class="block-header">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <ul class="breadcrumb breadcrumb-style ">
                            <li class="breadcrumb-item">
                                <h4 class="page-title">
                                    Manage Applications
                                </h4>
                            </li>
                            <li class="breadcrumb-item bcrumb-1">
                                <a href="{{ url('/dashboard') }}">
                                    <i class="fas fa-home"></i> Home</a>
                            </li>
                            <li class="breadcrumb-item active">
                                @if (request()->path() == 'level-first')
                                    Level First
                                @elseif(request()->path() == 'level-second')
                                    Level Second
                                @elseif(request()->path() == 'level-third')
                                    Level Third
                                @elseif(request()->path() == 'level-fourth')
                                    Level Fourth
                                @endif
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row clearfix">
                <div class="col-lg-12 col-md-12">
                    <div class="card nav-tab">
                        @include('level.inner-nav')
                    </div>
                    <div>
                        <ul id="progressbar">
                            <li class="progress1 bg_green">Basic Information</li>
                            <li
                                class="progress2 bg_green @if (isset($form_step_type)) @if ($form_step_type == 'add-course' || $form_step_type == 'application-payment') bg_green @else @endif  @endif ">
                                Level Courses
                            </li>
                            <li
                                class="progress3 @if (isset($form_step_type)) @if ($form_step_type == 'application-payment') bg_green @endif  @endif">
                                Payment
                            </li>
                        </ul>
                    </div>

                    @if (count($errors) > 0)
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="card shadow-md">
                        <div class="card-header text-dark bg-white">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h4 class="card-title mt-2">Create Courses </h4>
                                </div>
                                <div>
                                    {{-- <span title="Total forms"  id="formCount" style="margin-bottom: 0px !important; cursor: default; background-color:#f09525; padding:8px 10px; border-radius:10px; color:#fff;"></span> --}}

                                    <button id="add-course-button" class="btn btn-primary btn-sm"
                                        style="margin-bottom: 0px !important;" data-toggle="tooltip"
                                        data-placement="top" title="You can create a maximum of 10 courses at one time"
                                        onclick="addNewCourse();">
                                        <i class="fa fa-plus"></i> Add More Course
                                    </button>
                                </div>
                            </div>
                        </div>
                        <form action="{{ url('/new-application-course') }}" enctype="multipart/form-data" method="post"
                            class="form">
                            @csrf
                            <input type="hidden" name="form_step_type" value="add-course">
                            <div class="body pb-0" id="courses_body">
                                <!-- level start -->
                                <div class="row clearfix" id="new_course_html">
                                    <div class="col-sm-12 text-righ">

                                        <div class="d-flex justify-content-end">
                                            <button type="button" title="Remove course form"
                                                class="btn_remove remove-course" onclick="removeCourse(this);"
                                                style="display: none;">
                                                <i class="fa fa-trash" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 create-course-left-field">
                                        <div class="form-group">
                                            <div class="form-line">
                                                <label>Course Name<span class="text-danger">*</span></label>
                                                <input type="text" placeholder="Course Name" name="course_name[]"
                                                    class="preventnumeric" maxlength="50" required>
                                            </div>
                                            @error('course_name')
                                                <div class="alert alert-danger">{{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <input type="hidden" name="application" class="content_id" readonly>

                                    <input type="hidden" name="application_id" value="{{ $applicationData->id ?? '' }}"
                                        class="form-control" readonly>


                                    <input type="hidden" placeholder="level_id" name="level_id"
                                        value="@if (isset($applicationData)) {{ $applicationData->level_id ?? '' }} @endif">


                                    <input type="hidden" name="coutry" value=" {{ $applicationData->country ?? '' }}">
                                    <input type="hidden" name="state" value=" {{ $applicationData->state ?? '' }}">
                                    <div class="col-sm-6 create-course-right-field">
                                        <div class="form-group">
                                            <div class="form-line">
                                                <label>Course Duration<span class="text-danger">*</span></label>

                                                <div class="course_group">

                                                    <span style="margin-top:10px; margin-right:5px;">Y</span>
                                                    <input type="text" placeholder="Years" name="years[]"
                                                        maxlength="4" required class="course_i nput preventalpha">

                                                    <span style="margin-top:10px; margin-right:5px;">M</span>
                                                    <input type="text" placeholder="Months" name="months[]"
                                                        maxlength="2" required class="course_input preventalpha">


                                                    <span style="margin-top:10px; margin-right:5px;">D</span> <input
                                                        type="text" maxlength="2" placeholder="Days "
                                                        name="days[]" required class="course_input preventalpha">

                                                    <span style="margin-top:10px; margin-right:5px;">H</span><input
                                                        type="number" placeholder="Hours" name="hours[]" required
                                                        class="course_input">
                                                </div>
                                            </div>
                                            @error('course_duration')
                                                <div class="alert alert-danger">{{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <div class="form-line">
                                                <label>Eligibility<span class="text-danger">*</span></label>
                                                <input type="text" placeholder="Eligibility" name="eligibility[]"
                                                    required id="eligibility">
                                            </div>
                                            @error('eligibility')
                                                <div class="alert alert-danger">{{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group" style="margin-top: 5px;">
                                            <div class="form-line">
                                                <label>Mode of Course <span class="text-danger">*</span></label>
                                                <div class="form-group default-select">

                                                    <select class="form-control select2" name="mode_of_course[1][]"
                                                        required multiple="" style="width:200px;">
                                                        <option disabled>Select Mode of Course</option>
                                                        @foreach (__('arrayfile.mode_of_course_array') as $key => $value)
                                                            <option value="{{ $value }}">
                                                                {{ $value }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            @error('mode_of_course')
                                                <div class="alert alert-danger">{{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <div class="form-line">
                                                <label>Course Brief <span class="text-danger">*</span></label>

                                                <textarea rows="4" cols="50" class="form-control" name="course_brief[]" required></textarea>
                                            </div>
                                            @error('course_brief')
                                                <div class="alert alert-danger">{{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <div class="form-line">
                                                <label>Declaration (PDF)<span class="text-danger">*</span></label>
                                                <input type="file" name="doc1[]"
                                                    class="form-control doc_1 file_size" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <div class="form-line">
                                                <label>Course Curriculum / Material / Syllabus
                                                    (PDF)<span class="text-danger">*</span></label>
                                                <input type="file" name="doc2[]"
                                                    class="form-control doc_2 file_size" required>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <div class="form-line">
                                                <label>Course Details (Excel format)<span
                                                        class="text-danger">*</span></label>
                                                <input type="file" name="doc3[]" id="payment_reference_no"
                                                    required class="form-control doc_3 file_size_exl">
                                            </div>
                                        </div>
                                    </div>
                                    @if (request()->path() == 'level-first')
                                        <input type="hidden" placeholder="level_id" name="level_id"
                                            value="{{ 1 }}">
                                    @elseif(request()->path() == 'level-second')
                                        <input type="hidden" placeholder="level_id" name="level_id"
                                            value="{{ 2 }}">
                                    @elseif(request()->path() == 'level-third')
                                        <input type="hidden" placeholder="level_id" name="level_id"
                                            value="{{ 3 }}">
                                    @elseif(request()->path() == 'level-fourth')
                                        <input type="hidden" placeholder="level_id" name="level_id"
                                            value="{{ 4 }}">
                                    @endif
                                </div>
                                @if (request()->path() == 'level-first')
                                    <input type="hidden" placeholder="level_id" name="level_id"
                                        value="{{ 1 }}">
                                @elseif(request()->path() == 'level-second')
                                    <input type="hidden" placeholder="level_id" name="level_id"
                                        value="{{ 2 }}">
                                @elseif(request()->path() == 'level-third')
                                    <input type="hidden" placeholder="level_id" name="level_id"
                                        value="{{ 3 }}">
                                @elseif(request()->path() == 'level-fourth')
                                    <input type="hidden" placeholder="level_id" name="level_id"
                                        value="{{ 4 }}">
                                @endif
                                <!-- level end -->
                            </div>


                            <div class="p-3 new-course-row">

                            </div>
                            <div class="center">
                                <button class="btn btn-primary waves-effect m-r-15 add_course">Save</button>
                            </div>
                            {{-- @endif --}}
                        </form>
                        <div class="body mt-5">
                            <div class="table-responsive">
                                <table class="table table-hover js-basic-example contact_list">
                                    <thead>
                                        <tr>
                                            <th class="center">S.No.</th>
                                            <th class="center"> Course Name </th>
                                            <th class="center"> Duration </th>
                                            <th class="center"> Eligibility </th>
                                            <th class="center"> Mode </th>
                                            <th class="center"> Brief</th>
                                            <th class="center">Payment Status</th>

                                            <th class="center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @isset($course)
                                            @foreach ($course as $k => $courses)
                                                <tr class="odd gradeX">
                                                    <td class="center">{{ $k + 1 }}</td>
                                                    <td class="center">{{ $courses->course_name }}
                                                    </td>
                                                    <td class="center course-duration-table">
                                                        years:{{ $courses->years }} <br>
                                                        Months: {{ $courses->months }} <br>
                                                        days: {{ $courses->days }} <br>
                                                        Hours: {{ $courses->hours }}
                                                    </td>
                                                    <td class="center">{{ $courses->eligibility }}
                                                    </td>
                                                    <td class="center mode-of-course-table">
                                                        [