@extends('layouts.app')
@section('content')
    <div class="container-fluid">
        <x-dashboard.breadcumb :title="$title" />

        <div class="row">
            <div class="col-md-3">
                @include('coursefinder::program.partials.filter')
            </div>
            <div class="col-md-9">
                <div class="card">
                    <div class="card-body">
                        <div class="row justify-content-between align-items-center g-2">
                            <div class="col-sm-auto">
                                <h5 class="card-title mb-0">Explore Programs</h5>
                            </div>
                            <div class="col-sm-auto ms-auto">
                                <div class="list-grid-nav hstack gap-1">
                                    <a href="{{ route('program.create') }}" class="btn btn-sm btn-primary float-end">Add</a>

                                    <button type="button" id="dropdownMenuLink1" data-bs-toggle="dropdown"
                                        aria-expanded="false"
                                        class="btn btn-sm btn-soft-info btn-icon material-shadow-none fs-14"><i
                                            class="ri-more-2-fill"></i></button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1" style=""
                                        data-popper-placement="bottom-start">
                                        <li><a class="dropdown-item" href="{{ route('program.import') }}"
                                                data-bs-toggle="modal" data-bs-target="#myModal">Import</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                    </div>
                </div>


                @forelse ($programs as $item)
                    <div class="card product ribbon-box material-shadow border shadow-none">
                        <div class="card-body bg-white">
                            <div class="ribbon {{ $item->status == 1 ? 'ribbon-success' : 'ribbon-danger' }} round-shape fs-6 fw-normal"
                                style="z-index:999">
                                {{ config('constants.page_status_options')[$item->status] }}</div>
                            <div class="row gy-3">
                                <div class="col-sm-auto align-self-center">
                                    <div class="avatar-xl bg-light flex-shrink-0 rounded p-1">
                                        <img src="{{ $item->institution?->image }}" alt="Institution Logo"
                                            style="height: 115px; width:100%; object-fit:contain; object-position:center; mix-blend-mode:multiply;">
                                    </div>
                                </div>
                                <div class="col-sm">
                                    <h2 class="fs-16 text-primary">
                                        <a class="link-primary link-underline-opacity-0"
                                            href="{{ route('program.show', $item->id) }}">
                                            {{ $item->title }}
                                        </a>
                                    </h2>

                                    <h5 class="fs-13">
                                        <a href="{{ $item->program_url }}" class="text-dark link-underline-opacity-0"
                                            target="_blank">
                                            <p class="text-muted">{{ $item->institution?->title }}</p>
                                        </a>
                                    </h5>

                                    <ul class="list-inline d-flex flex-wrap gap-2">
                                        <li class="list-inline-item">
                                            Code: <span class="fw-medium">{{ !empty($item->code) ? $item->code : 'N/A' }}
                                            </span>
                                        </li>

                                        <li class="list-inline-item">
                                            Fee: <span class="fw-medium">{{ !empty($item->fee) ? $item->fee : 'N/A' }}
                                            </span>
                                        </li>

                                        <li class="list-inline-item">
                                            Scholarship: <span
                                                class="fw-medium">{{ !empty($item->scholarship) ? $item->scholarship : 'N/A' }}
                                            </span>
                                        </li>

                                        <li class="list-inline-item">
                                            Program: <span
                                                class="fw-medium">{{ !empty($item->programlevel?->title) ? $item->programlevel?->title : 'N/A' }}
                                            </span>
                                        </li>

                                        <li class="list-inline-item">
                                            Duration: <span
                                                class="fw-medium">{{ !empty($item->year) ? $item->year : 'N/A' }}
                                            </span>
                                        </li>

                                        @if (!empty($item->psw))
                                            <li class="list-inline-item">
                                                PSW: <span class="fw-medium">{{ !empty($item->psw) ? $item->psw : 'N/A' }}
                                                </span>
                                            </li>
                                        @endif



                                        @if (!empty($item->coop?->title))
                                            <li class="list-inline-item">
                                                COOP: <span
                                                    class="fw-medium">{{ !empty($item->coop?->title) ? $item->coop?->title : 'N/A' }}
                                                </span>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                                <div class="col-sm-auto">
                                    <div class="text-lg-end">
                                        @foreach ($item->tests as $index => $test)
                                            <div class="d-flex">
                                                <div class="flex-shrink-0">
                                                    <i class="ri-checkbox-circle-fill text-primary"></i>
                                                </div>
                                                <div class="ms-2 flex-grow">
                                                    <span class="text-muted">{{ $test->title }}:</span>
                                                    {{ $test->pivot?->min_score }}
                                                    ({{ $test->pivot?->band_score }})
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- card body -->
                        <div class="card-footer">
                            <div class="row align-items-center gy-3">
                                <div class="col-sm">
                                    <div class="d-flex my-n1 align-items-center flex-wrap">
                                        <div class="me-5">
                                            <div>
                                                @if (!empty($item->intakes))
                                                    <span class="fs-12">Intake:</span>
                                                    @forelse ($item->intakes as $value)
                                                        <span class="fs-13 text-muted mb-0 text-center"><span
                                                                class="badge bg-success p-2">{{ $intakeOptions[$value] }}</span></span>
                                                    @empty
                                                        <span class="fs-13 text-muted mb-0 text-center"><span
                                                                class="badge bg-danger p-2">N/A</span></span>
                                                    @endforelse
                                                @endif

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

                                <div class="col-sm-auto">
                                    <div class="d-flex align-items-center text-muted gap-3">

                                        <a href="{{ route('program.show', $item->id) }}" class="link-secondary fs-20 ms-5"
                                            data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom"
                                            data-bs-original-title="View">
                                            <i class="ri-eye-line align-middle"></i>
                                        </a>

                                        <a href="{{ route('program.edit', $item->id) }}" class="link-primary fs-20"
                                            data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom"
                                            data-bs-original-title="Edit">
                                            <i class="ri-pencil-line align-middle"></i>
                                        </a>

                                        <a class="link-danger fs-20 remove-btn" data-bs-toggle="modal"
                                            href="javascript:void(0)" data-link="{{ route('program.destroy', $item->id) }}"
                                            data-id="{{ $item->id }}">
                                            <i class="ri-delete-line align-middle"></i>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end card footer -->
                    </div>
                @empty
                    <h4 class="my-5 text-center">No results found...</h4>
                @endforelse
                {{ $programs->links() }}
            </div>
        </div>
    </div>

    <div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="false"
        style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">Program Import</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <form action="{{ route('program.import') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="form-group">
                                    <div class="form-control-wrap mb-1">
                                        <input class="form-control" id="formFileLg" type="file" name="file"
                                            accept=".xlsx, .xls, .csv" required>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary btn-md float-right mt-3">Upload</button>
                            </form>
                        </div>
                        <div class="col-lg-6">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title">Sample Sheet</h5>
                                    <p class="card-text text-danger">Note: Do not change sheet header.
                                    </p>
                                    <a href="{{ asset('samples/CourseSample.xlsx') }}"
                                        class="btn btn-secondary btn-md">Download
                                        Sample</a>
                                </div>
                            </div>
                        </div>

                    </div>

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
@endsection
@push('js')
    <script>
        $('body').on('click', '.remove-btn', function(e) {
            e.preventDefault();
            let url = $(this).data('link');
            let id = $(this).data('id');
            var that = $(this);
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            id: id
                        },
                        success: function(response) {
                            that.closest('.card').remove();
                            toastr.success('Remove');

                        },
                        error: function(xhr, status, error) {
                            console.error(xhr.responseText);
                        }
                    });
                }
            });
        });

        $(document).on('change', '.countryDropdown', function() {
            const selectedCountryId = $(this).val();
            const url = '{{ route('institution.getInstitutionsByCountry') }}' + '?country_id=' +
                selectedCountryId;
            $('.institutionDropdown').empty();

            $.get(url, function(response) {
                $('.institutionDropdown').append($('<option>', {
                    value: '',
                    text: 'Select',
                }));
                $.each(response.data, (index, institution) => {
                    $('.institutionDropdown').append($('<option>', {
                        value: institution.id,
                        text: institution.title,
                    }));
                });
            }).fail(function(error) {
                console.error("Error fetching institutions:", error);
            });
        });
    </script>
@endpush