@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Pilih'])
    <div class="container-fluid">

        <div class="card shadow-sm border-0">
            <div class="card-header pb-0 border-0">
                <div class="row align-items-center">
                    <div class="col-md-8 col-12 mb-3 mb-md-0">
                        <h5 class="mb-0">Daftar Lowongan Tersedia</h5>
                    </div>
                    <div class="col-md-4 col-12">
                        <form action="{{ url()->current() }}" method="GET">
                            <div class="input-group">
                                <span class="input-group-text text-body">
                                    <i class="fas fa-search" aria-hidden="true"></i>
                                </span>
                                <input type="text" name="search" class="form-control" placeholder="Cari posisi..."
                                    value="{{ request('search') }}">
                            </div>
                            <button type="submit" class="visually-hidden" aria-hidden="true" tabindex="-1">Search</button>
                        </form>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        @include('components.alert')
                    </div>
                </div>
            </div>

            <hr class="horizontal dark my-3">

            <div class="card-body pt-0">
                <div class="row">
                    @forelse ($vacancies as $vacancy)
                        @php
                            $dept = $departemen->firstWhere('id', $vacancy->id_department);
                            $deptName = $dept ? $dept->nama : 'Dept ID: ' . $vacancy->id_department;
                        @endphp
                        <div class="col-xl-4 col-md-6 mb-4">

                            <div class="card h-100 shadow-sm cursor-pointer border" data-bs-toggle="modal"
                                data-bs-target="#jobModal{{ $vacancy->id }}"
                                style="border-color:#e9ecef; transition:all 0.3s ease;"
                                onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 10px 20px rgba(0,0,0,0.1)'; this.style.borderColor='#00b7bd4f';"
                                onmouseout="this.style.transform=''; this.style.boxShadow=''; this.style.borderColor='#e9ecef';">

                                <div class="card-body p-3 d-flex flex-column">
                                    <div class="d-flex flex-wrap justify-content-between align-items-start mb-2 gap-2">
                                        <span class="badge text-xs text-wrap text-start"
                                            style="background-color:#00b7bd4f; color:#028284;">
                                            <i class="fas fa-building me-1"></i>{{ $deptName }}
                                        </span>
                                        <span class="text-xs font-weight-bold text-dark bg-gray-200 px-2 py-1 rounded">
                                            <i class="fas fa-users me-1"></i>Kuota: {{ $vacancy->kuota }}
                                        </span>
                                    </div>

                                    <div class="mt-2 mb-3">
                                        <h5 class="mb-1 text-dark">{{ $vacancy->posisi }}</h5>
                                        <p class="text-sm text-muted mb-0 mt-2 text-start"
                                            style="display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;">
                                            {{ Str::limit(strip_tags($vacancy->deskripsi), 120) }}
                                        </p>
                                    </div>

                                    <div class="mt-auto">
                                        <hr class="horizontal dark mt-0 mb-3">
                                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                                            <span class="text-xs text-muted">
                                                <i class="fas fa-clock me-1"></i>Ditambahkan:
                                                {{ \Carbon\Carbon::parse($vacancy->created_at)->format('d M Y') }}
                                            </span>
                                            <span class="text-sm font-weight-bold" style="color:#028284;">
                                                Detail <i class="fas fa-arrow-right ms-1"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Modal Detail Lowongan --}}
                        <div class="modal fade" id="jobModal{{ $vacancy->id }}" tabindex="-1" role="dialog"
                            aria-labelledby="jobModalLabel{{ $vacancy->id }}" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
                                role="document">
                                <div class="modal-content">

                                    <div class="modal-header border-0" style="background-color:#00b7bd4f;">
                                        <h5 class="modal-title" id="jobModalLabel{{ $vacancy->id }}"
                                            style="color:#028284;">
                                            Detail Lowongan
                                        </h5>
                                        <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>

                                    <div class="modal-body">
                                        <div
                                            class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-3 gap-2">
                                            <h4 class="mb-0">{{ $vacancy->posisi }}</h4>
                                            <span class="badge px-3 py-2 text-sm text-wrap text-start"
                                                style="background-color:#00b7bd4f; color:#028284;">
                                                {{ $deptName }}
                                            </span>
                                        </div>

                                        <div class="row mb-3 bg-gray-100 rounded p-3 mx-0">
                                            <div class="col-6 mb-md-0 mb-3">
                                                <span class="text-xs text-muted d-block mb-1">Total Kuota</span>
                                                <h6 class="mb-0">{{ $vacancy->kuota }} Orang</h6>
                                            </div>
                                            <div class="col-6">
                                                <span class="text-xs text-muted d-block mb-1">Terakhir Diperbarui</span>
                                                <h6 class="mb-0 text-primary">
                                                    {{ \Carbon\Carbon::parse($vacancy->updated_at)->format('d M Y') }}
                                                </h6>
                                            </div>
                                        </div>

                                        <hr class="horizontal dark">

                                        <h6 class="text-sm font-weight-bold">
                                            <i class="fas fa-align-left me-2" style="color:#028284;"></i>Deskripsi
                                            Pekerjaan:
                                        </h6>
                                        <div class="text-sm text-start text-muted" style="word-break:break-word;">
                                            {!! $vacancy->deskripsi !!}
                                        </div>

                                        <h6 class="text-sm font-weight-bold mt-4">
                                            <i class="fas fa-clipboard-check me-2" style="color:#028284;"></i>Kualifikasi
                                            Khusus:
                                        </h6>
                                        <div class="text-sm text-muted" style="word-break:break-word;">
                                            {!! $vacancy->kualifikasi !!}
                                        </div>
                                    </div>

                                    <div
                                        class="modal-footer bg-gray-100 border-0 d-flex flex-column-reverse flex-md-row justify-content-md-end gap-2">
                                        <button type="button" class="btn btn-white mb-0 w-100 w-md-auto"
                                            data-bs-dismiss="modal">Tutup</button>
                                        <form role="form" method="POST" action="{{ URL::to($url_menu) }}"
                                            id="formLamar{{ $vacancy->id }}" enctype="multipart/form-data"
                                            class="mb-0 w-100 w-md-auto">
                                            @csrf
                                            <input type="hidden" name="id_vacancy" value="{{ $vacancy->id }}">
                                            <button type="button" class="btn mb-0 w-100 text-white"
                                                style="background-color:#028284; border-color:#028284;"
                                                onmouseover="this.style.backgroundColor='#026b6c'; this.style.borderColor='#026b6c';"
                                                onmouseout="this.style.backgroundColor='#028284'; this.style.borderColor='#028284';"
                                                onclick="confirmApply(event, '{{ $vacancy->posisi }}', 'formLamar{{ $vacancy->id }}')">
                                                <i class="fas fa-paper-plane me-2"></i>Lamar Posisi Ini
                                            </button>
                                        </form>
                                    </div>

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

                    @empty
                        <div class="col-12 py-5">
                            <div class="d-flex flex-column align-items-center justify-content-center text-center px-3">
                                <div class="mb-4 d-flex align-items-center justify-content-center rounded-circle"
                                    style="width:100px; height:100px; background-color:#00b7bd4f;">
                                    <i class="fas fa-folder-open fa-3x" style="color:#028284;"></i>
                                </div>
                                <h4 class="text-dark mb-2">Belum Ada Lowongan Tersedia</h4>
                                <p class="text-muted text-sm mb-0" style="max-width:400px;">
                                    Maaf, saat ini belum ada posisi pekerjaan yang sedang dibuka. Silakan periksa kembali
                                    halaman ini secara berkala.
                                </p>
                            </div>
                        </div>
                    @endforelse
                </div>

                {{-- Pagination --}}
                @if ($vacancies->hasPages())
                    <div class="d-flex justify-content-center mt-4 mb-2 overflow-auto">
                        {{ $vacancies->withQueryString()->links('pagination::bootstrap-5') }}
                    </div>
                @endif
            </div>
        </div>

    </div>
@endsection

@push('css')
    <style>
        .pagination {
            gap: 5px;
        }

        .pagination-custom-wrapper nav .d-sm-flex>div:first-child,
        .pagination-custom-wrapper nav p.small.text-muted {
            display: none !important;
        }

        .pagination-custom-wrapper nav .d-sm-flex {
            justify-content: center !important;
        }

        .pagination-custom-wrapper nav .d-sm-flex>div:last-child {
            margin: 0 auto;
        }

        .page-link {
            border-radius: 50% !important;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            margin: 0;
        }

        .page-item:not(.active):not(.disabled) .page-link {
            border: 1px solid #e9ecef;
            background-color: #fff;
            color: #344767;
        }

        .page-item:not(.active):not(.disabled) .page-link:hover {
            background-color: #00b7bd4f;
            color: #028284;
        }

        .page-item.active .page-link {
            background-color: #028284;
            border-color: #028284;
            color: #fff;
            box-shadow: 0 4px 6px rgba(2, 130, 132, 0.2);
        }

        .page-item.disabled .page-link {
            border: 1px solid #e9ecef;
            background-color: #fff;
            color: #6c757d;
        }
    </style>
@endpush

@push('js')
    <script>
        function confirmApply(event, jobName, formId) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Lamaran',
                text: `Apakah Anda yakin ingin melamar untuk posisi ${jobName}?`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Lamar Sekarang',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6c757d',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Memproses Lamaran...',
                        text: 'Mohon tunggu sebentar.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,   
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                            document.getElementById(formId).submit();
                        }
                    });
                }
            });
        }
    </script>
@endpush