@extends('admin.layouts.app')
@section('title')
    {{ __('course_list') }}
@endsection

@section('content')
@error('csv_file')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card">
                <div class="block-header">
                    <div class="header">
                        <h2>
                            Course List ({{ $courses->total() }})
                        </h2>
                        <ul class="header-dropdown pt-4 list-inline">
                            <li class="list-inline-item">
                                @if (userCan('course.create'))
                                    <a href="{{ route('course.create') }}" title="Add Course" target="_blank"
                                        class="btn btn-sm bg-success">
                                        <i class="fas fa-plus"></i>
                                    </a>
                                    <a href="{{ route('course.index') }}?currencyChange" title="Update All Currency with Live Rate" class="btn btn-sm bg-danger">
                                        <i class="fas fa-money-check-alt"></i>
                                    </a>
                                    <a id="downloadButton" href="#" title="Download Sheet" target=""
                                        class="btn btn-sm bg-warning">
                                        <i class="fas fa-download"></i>
                                    </a>
                                    <a href="javascript:;" title="Update Course by Sheet" class="btn btn-sm bg-dark" data-toggle="modal" data-target="#importSheet">
                                            <i class="fas fa-upload"></i>
                                    </a>  
                                    <a href="{{ route('report') }}?where=Course" title="See Report" target="_blank"
                                        class="btn btn-sm bg-info">
                                        <i class="fas fa-file"></i>
                                    </a>
                                @endif
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="alert alert-danger d-none" id="error-message" role="alert">
                </div>
                <form id="formSubmit" action="{{ route('course.index') }}" method="GET">
                    <div class="row mt-4">
                        <div class="pull-left ml-5 ">
                            <a href="?url=null" id="url" title="Blank Url"
                                class="btn btn-warning btn-round waves-effect">
                                Blank Url
                            </a>
                            <a href="?InrAmount=null" id="InrAmount" title="Blank InrAmount"
                                class="btn btn-info btn-round waves-effect">
                                ₹ Blank
                            </a>
                            <a href="javascript:;" title="Add Course Level" class="btn btn-success btn-round waves-effect"
                                data-toggle="modal" data-target="#courseModal">
                                Add Course Level
                            </a>
                            <a href="?suggestion_data=Empty" id="suggestion_data" title="All Suggestion" class="btn btn-info btn-round waves-effect">
                                All Suggestion
                            </a>
                        </div>

                        <div class="mt-5 ml-5">
                            <div class="row clearfix d-flex">
                                <div class="form-group col-2 pr-3">
                                    <input type="text" class="form-control name" name="name"
                                        value="{{ request('name') }}" placeholder="Course Name">
                                    <small class="form-text text-muted">Filter with name</small>
                                </div>

                                <div class="form-group col-md-1 pr-3">
                                    <select class="form-control" name="deliveryMethod">
                                        <option value="" {{ request('deliveryMethod') == '' ? 'selected' : '' }}>
                                            Select Type</option>
                                        <option value="classroom"
                                            {{ request('deliveryMethod') == 'classroom' ? 'selected' : '' }}>Classroom
                                        </option>
                                        <option value="online"
                                            {{ request('deliveryMethod') == 'online' ? 'selected' : '' }}>Online</option>
                                        <option value="null" {{ request('deliveryMethod') == 'null' ? 'selected' : '' }}>
                                            Empty
                                        </option>
                                    </select>
                                    <small class="form-text text-muted">Filter with Method</small>
                                </div>


                                <div class="form-group col-md-1 pr-3">
                                    <select class="form-control" name="Currency" id="filterCurrency">
                                        <option value="" {{ request('Currency') == '' ? 'selected' : '' }}> Select
                                            Type</option>
                                        <option value="null" {{ request('Currency') == 'null' ? 'selected' : '' }}>Empty
                                        </option>
                                        @foreach ($Currency as $data)
                                            <option value="{{ $data->Currency }}"
                                                {{ request('Currency') == $Currency ? 'selected' : '' }}>{{$data->name }}({{ $data->Currency }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <small class="form-text text-muted">Filter with Currency</small>
                                </div>

                                <div class="form-group col-md-1 pr-3">
                                    <select class="form-control" name="educationType">
                                        <option value="" {{ request('educationType') == '' ? 'selected' : '' }}>
                                            Select Type</option>
                                        <option value="Part Time"
                                            {{ request('educationType') == 'Part Time' ? 'selected' : '' }}>Part Time
                                        </option>
                                        <option value="Full Time"
                                            {{ request('educationType') == 'Full Time' ? 'selected' : '' }}>Full Time
                                        </option>
                                        <option value="null" {{ request('educationType') == 'null' ? 'selected' : '' }}>
                                            Empty
                                        </option>
                                    </select>
                                    <small class="form-text text-muted">Filter with Edu Type</small>
                                </div>

                                <div class="form-group col-md-1 pr-3">
                                    <select class="form-control" name="status">
                                        <option value="" {{ request('status') == '' ? 'selected' : '' }}>Select Type
                                        </option>
                                        <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Active
                                        </option>
                                        <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>Not Active
                                        </option>
                                        <option value="null" {{ request('status') == 'null' ? 'selected' : '' }}>Empty
                                        </option>
                                    </select>
                                    <small class="form-text text-muted">Filter with status</small>
                                </div>

                                <div class="form-group col-md-2 pr-3">
                                    <select name="course_level_id" class="form-control" id="course_level_id">
                                        <option value="">Select Course Level</option>
                                        @foreach ($course_levels as $data)
                                            <option value="{{ $data->id }}"
                                                {{ request('course_level_id') == $data->id ? 'selected' : '' }}>
                                                {{ $data->name }}</option>
                                        @endforeach
                                    </select>
                                    <small class="form-text text-muted">Filter with Level</small>
                                </div>

                                <div class="form-group col-md-2 pr-3">
                                    <select name="university_id" class="form-control select2bs4" id="university">
                                        <option value="">Select University</option>
                                        @if (request()->has('university_id') && $courses->isNotEmpty())
                                            @php
                                                $selectedUniversityId = request('university_id');
                                                $selectedUniversityName = $courses[0]->university->name ?? '';
                                            @endphp
                                            <option value="{{ $selectedUniversityId }}" selected>
                                                @if ($selectedUniversityName)
                                                    {{ $selectedUniversityName }} ({{ $selectedUniversityId }})
                                                @else
                                                    Select university
                                                @endif
                                            </option>
                                        @endif
                                    </select>
                                    <small class="form-text text-muted">Filter with University</small>
                                </div>

                                <div class="form-group col-md-2 pr-3">
                                    <button type="submit" class="btn btn-primary btn-round btn-sm">Filter</button>
                                    @if (request()->all())
                                        <a href="{{ route('course.index') }}" class="btn btn-round btn-sm btn-danger">
                                            <i class="fas fa-times"></i>&nbsp; Clear
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="body table-responsive m-2">
                    <table class="table table-hover m-b-0 footable footable-1 breakpoint-lg" style="display: table;">
                        <thead>
                            <tr class="footable-header">
                                <th style="width: 1%;" class="footable-first-visible">
                                    <input type="checkbox" class="" value="" name="allselected">
                                </th>
                                @php
                                    $tableHeaders = [['title' => 'Course Name', 'style' => 'width: 15%;'], ['title' => 'Course Level', 'style' => 'width: 15%;'], ['title' => 'University', 'style' => 'width: 10%;'], ['title' => 'Fee', 'style' => 'width: 6%;'], ['title' => 'Duration', 'style' => 'width: 5%;'], ['title' => 'Method', 'style' => 'width: 5%;'], ['title' => 'Edu Type', 'style' => 'width: 7%;'], ['title' => 'Wrk Exp', 'style' => 'width: 6%;'], ['title' => 'Required Age', 'style' => 'width: 10%;'], ['title' => 'Date', 'style' => 'width: 10%;'], ['title' => 'Status', 'style' => 'width: 2%;'], ['title' => 'Action', 'style' => 'width: 12%;']];
                                @endphp

                                @foreach ($tableHeaders as $header)
                                    <th title="{{ $header['title'] }}" style="{{ $header['style'] }}">
                                        {{ $header['title'] }}
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>

                            @forelse ($courses as $course)
                                <tr>
                                    <td width="1" class="footable-first-visible">
                                        <input type="checkbox" name="selected[]" value="{{ $course->id }}">
                                        {{ $course->id }}
                                    </td>
                                    <td>{{ Str::limit($course->name, 100) }}</td>
                                    <td>{{ $course->course_level }}</td>
                                    <td>{{ @$course->university->name }}</td>
                                    <td class="left">
                                        <span>{{ $course->Currency . ' ' . $course->Amount }}</span>
                                        <br>
                                        <span class="text-green">₹ {{ $course->InrAmount }}</span>
                                    </td>
                                    <td class="right">
                                        @php
                                            $color = '';

                                            if (strtolower($course->durationUnit) == 'years') {
                                                $color = 'blue';
                                            } elseif (strtolower($course->durationUnit) == 'weeks') {
                                                $color = 'red';
                                            } elseif (strtolower($course->durationUnit) == 'months') {
                                                $color = 'yellow';
                                            } else {
                                                $color = '#FFA500'; // Default color for other units
                                            }
                                        @endphp

                                        <span class="text-{{ $color }}">
                                            {{ $course->durationValue . ' ' . $course->durationUnit }}
                                        </span>
                                    </td>
                                    <td class="left">
                                        @php
                                            $badgeColor = strtolower($course->deliveryMethod) == 'online' ? 'badge-danger' : 'badge-secondary';
                                        @endphp
                                        <label class="badge {{ $badgeColor }}">{{ $course->deliveryMethod }}</label>
                                    </td>
                                    <td class="left">{{ $course->educationType }}</td>
                                    <td class="left">
                                        <span class="badge bg-warning">Min: {{ $course->minWorkEx }}</span>
                                        <span class="badge bg-info">Max: {{ $course->maxWorkEx }}</span>
                                    </td>
                                    <td class="left">
                                        <span class="badge bg-blue">Min: {{ $course->minAge }}</span>
                                        <span class="badge bg-pink">Max: {{ $course->maxAge }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">Created:</span>
                                        {{ \Carbon\Carbon::parse($course->created)->format('d/m/Y') }}
                                        <br>
                                        <span class="badge bg-info">Modified:</span>
                                        {{ \Carbon\Carbon::parse($course->modified)->format('d/m/Y') }}
                                    </td>
                                    <td class="{{ $course->status == 1 ? 'text-green' : 'text-red' }}">
                                        {{ $course->status == 1 ? 'Active' : 'Inactive' }}
                                    </td>
                                    <td>
                                        <a href="{{ url(@$course->university->countries->url . '/universities/' . @$course->university->url . '/courses/' . @$course->url) }}"
                                            class="btn btn-sm btn-success edit-btn">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('course.edit', $course->id) }}"
                                            class="btn btn-sm btn-primary edit-btn">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        @if (userCan('course.delete'))
                                            <form action="{{ route('course.destroy', $course->id) }}" method="POST"
                                                class="d-inline" id="deleteForm{{ $course->id }}">
                                                @method('DELETE')
                                                @csrf
                                                <button type="button" class="btn btn-sm btn-danger delete-btn">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="13">
                                        No Data Found.........
                                    </td>
                                </tr>
                            @endforelse


                        </tbody>
                    </table>
                </div>
                @if ($courses->count())
                    <div class="mt-3 d-flex justify-content-center">
                        {{ $courses->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
    </div>

  
     <!-- importSheet Modal Structure -->
      <div class="modal fade" id="importSheet" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="courseModalLabel">Update Course by Sheet</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
                <form action="{{ route('course.importSheet') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="csv_file">CSV File:</label>
                        <input type="file" class="form-control-file" id="csv_file" name="csv_file" accept=".csv">
                    </div>
                    <button type="submit" class="btn btn-primary">Import</button>
                </form>
              </div>
          </div>
      </div>
  </div>

    
    <!-- courseModal Modal Structure -->
    <div class="modal fade" id="courseModal" tabindex="-1" role="dialog" aria-labelledby="courseModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="courseModalLabel">Add Course Level</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="courseLevelForm" action="{{ route('course.index') }}" method="GET">
                        @csrf
                        <div class="form-group">
                            <label for="courseInput">Enter Course:</label>
                            <select name="courseUpdate[course_level_id]" class="form-control" id="courseInput">
                                <option value="">Select Course Level</option>
                                @foreach ($course_levels as $data)
                                    <option value="{{ $data->id }}">{{ $data->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <style>
        .help {
            color: #666;
            font-size: 11px;
            font-weight: normal;
            font-family: Verdana, Geneva, sans-serif;
            display: block;
        }

        tr th {
            display: table-cell;
        }

        .btn-round {
            border-width: 1px;
            border-radius: 30px !important;
            padding: 10px 20px;
        }

        .card .header {
            border-bottom: 2px solid #868686;
        }



        .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .form-group {
            position: relative;
        }

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

        .pr-3,
        .px-3 {
            padding-right: 1rem !important;
        }

        .card .header {
            color: #000;
            padding: 20px;
            position: relative;
            box-shadow: none;
            background: #d3d7da;
        }

        .card .header .header-dropdown {
            position: absolute;
            top: 5px;
            right: 20px;
            list-style: none;
        }

        .card .body {
            font-size: 14px;
            color: #424242;
            padding: 20px;
            font-weight: 400;
        }

        .m-2 {
            margin: 0.5rem !important;
        }

        .table-responsive {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .white-text {
            color: white;
        }
    </style>
@endsection

@section('script')
    <script src="{{ asset('backend') }}/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
    <script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

    <script>
        $(document).ready(function() {

            $('#downloadButton').click(function() {
                var selectedIds = $('input[name="selected[]"]:checked').map(function() {
                    return $(this).val();
                }).get().join(',');
                if (selectedIds) {
                    var downloadUrl = "{{ route('course.downloadSheet') }}?courseids=" + selectedIds;                    
                    window.location.href = downloadUrl;
                }else{
                    alert('Please Chosse Course you want to download')
                }
            });

            $('input[name*=\'allselected\']').on('click', function() {
                $('input[name*=\'selected\']').prop('checked', this.checked);
            });

            $('.delete-btn').on('click', function() {
                var formId = $(this).closest('form').attr('id');

                Swal.fire({
                    title: "Do you want to Delete this?",
                    showDenyButton: true,
                    showCancelButton: true,
                    confirmButtonText: "Delete",
                    denyButtonText: `Don't Delete`
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#' + formId).submit();
                    } else if (result.isDenied) {
                        Swal.fire("All Safe Nothing Deleted", "", "info");
                    }
                });
            });

            $('#courseLevelForm').submit(function(e) {
                e.preventDefault();

                var newCourse = $('#courseInput option:selected').text();
                var newCourseId = $('#courseInput').val();
                var selectedCourses = $('input[name="selected[]"]:checked').map(function() {
                    return $(this).val();
                }).get();

                if (selectedCourses.length > 0 && newCourseId.trim() !== "") {
                    $.each(selectedCourses, function(index, courseId) {
                        $('#courseLevelForm').append(
                            `<input type="hidden" name="courseUpdate[courseId][]" value="${courseId}">`
                        );
                    });

                    $('#courseLevelForm').append(
                        `<input type="hidden" name="courseUpdate[course_level]" value="${newCourse}">`);

                    Swal.fire({
                        title: "Do you want to Save this?",
                        icon: 'warning',
                        showDenyButton: true,
                        showCancelButton: true,
                        confirmButtonText: "Yes, submit it!",
                        denyButtonText: `Don't Save`,
                        customClass: {
                            popup: 'white-text'
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#courseLevelForm').unbind('submit').submit();
                        } else if (result.isDenied) {
                            Swal.fire("Alright! No Changes Done", "", "info");
                        }
                    });
                } else {

                    Swal.fire({
                        title: "Error",
                        text: 'Please select at least one course and ensure the course level is not blank before submitting.',
                        icon: 'error',
                        customClass: {
                            popup: 'white-text'
                        },
                    });
                }
            });

            $("#university").select2({
                theme: "bootstrap4",
                ajax: {
                    url: "{{ route('course.getUniversityId') }}",
                    type: "GET",
                    data: function(params) {
                        return {
                            term: params.term,
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    id: item.id,
                                    text: `${item.name} (${item.id})`,
                                };
                            }),
                        };
                    },
                },
            });
        });
    </script>
@endsection