@extends('layouts.app')

@section("user-image")
    <img src="{{ $user->gambar_profile_url }}" onerror="this.src = `{{ asset('images/hipp.jpeg') }}`" alt="profile" />
@endsection

@section("user")
    <div class="user-name">{{ $user->name }}</div>
    <div class="user-level">{{ $user->role_name }}</div>
@endsection

@section('menu')
    <li class="nav-item"><a href="{{ route('home') }}" class=""><i class="fa-solid fa-house"></i>Home</a></li>
    <li class="nav-item"><a href="{{ route('mitra.info') }}" class="active"><i class="fa-solid fa-circle-info"></i>Informasi Mitra</a></li>
    <li class="nav-item"><a href="{{ route('pengaturan.index') }}"><i class="fa-solid fa-gear"></i>Pengaturan</a></li>
    <li class="nav-item"><a href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();"><i class="fa-solid fa-power-off"></i>Keluar</a></li>

    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
        @csrf
    </form>
@endsection

@section('body')
    <div class="content border">
        <div class="fw-bold">Informasi kerjasama mitra</div>
        <div class="panel">
            <div class="row mb-1">
                <label for="mitra" class="col-md-4 col-form-label">1. Masukkan nama mitra:</label>
                <div class="col-sm-6">
                    <select name="mitra" id="mitra" class="form-select mitra"></select>
                </div>
            </div>

            <div class="row mb-3">
                <label for="nama" class="col-md-4 col-form-label">2. Jumlah pembimbing mitra:</label>
                <div class="col-sm-6 pt-2">
                    <span class="jumlah">0</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(function() {
            // dropdown mitra
            $('.mitra').select2({
                ajax: {
                    url: '{{ route("mitra.list_dropdown_pembimbing") }}',
                    dataType: 'json',
                    data: function (params) {
                        var query = {
                            search: params.term,
                        }
                        return query;
                    },
                    processResults: function (data) {
                        const response = data.data
                        const result = response.map(function(item) {
                            return {
                                id: item.id,
                                text: item.nama_mitra,
                                ...item
                            }
                        })

                        return {
                            results: result
                        };
                    }
                },
            })

            // on nama admin changed
            $('.mitra').on("select2:select", function(e) { 
                const data = e.params.data;

                $('.jumlah').text(data.list_pembimbing_count)
            });
        })
    </script>
@endsection