@extends('frontend.inner')

@php
    $sections = \App\Models\faculty::profileSections();
    $firstSectionField = array_key_first($sections);
@endphp

@section('page_title', $staffInfo->name)

@push('styles')
    <style>
        .faculty-photo {
            width: 120px;
            height: 140px;
            object-fit: cover;
            border: 1px solid #ddd;
            margin-bottom: 15px;
        }

        .faculty-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

        .faculty-tabs button {
            border: 0;
            padding: 10px 18px;
            border-radius: 6px;
            background: #0b2942;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
        }

        .faculty-tabs button.active,
        .faculty-tabs button:hover {
            background: #f4a024;
            color: #222;
        }

        .faculty-info-table td {
            padding: 8px 10px;
        }

        .faculty-info-table td:first-child {
            width: 280px;
            font-weight: 600;
        }

        .faculty-section-panel {
            display: none;
            padding: 15px 0;
        }

        .faculty-section-panel.active {
            display: block;
        }
    </style>
@endpush

@section('inner')

    @if($staffInfo->photo)
        <img src="{{ asset('storage/' . $staffInfo->photo) }}" class="faculty-photo" alt="{{ $staffInfo->name }}">
    @endif

    <div class="faculty-tabs">
        @foreach ($sections as $field => $label)
            <button type="button" class="faculty-tab-btn {{ $field === $firstSectionField ? 'active' : '' }}"
                data-target="panel-{{ $field }}">{{ $label }}</button>
        @endforeach
    </div>

    <table class="table table-bordered faculty-info-table">
        <tbody>
            <tr>
                <td>Name</td>
                <td>: <strong>{{ $staffInfo->name }}</strong></td>
            </tr>
            <tr>
                <td>Designation</td>
                <td>: {{ $staffInfo->designation }}</td>
            </tr>
            @if($staffInfo->staff_id)
                <tr>
                    <td>Staff ID</td>
                    <td>: {{ $staffInfo->staff_id }}</td>
                </tr>
            @endif
            @if($staffInfo->qualification)
                <tr>
                    <td>Qualification</td>
                    <td>: {{ $staffInfo->qualification }}</td>
                </tr>
            @endif
            @if($staffInfo->experience)
                <tr>
                    <td>Experience</td>
                    <td>: {{ $staffInfo->experience }}</td>
                </tr>
            @endif
            @if($staffInfo->mobile)
                <tr>
                    <td>Contact No</td>
                    <td>: {{ $staffInfo->mobile }}</td>
                </tr>
            @endif
            @if($staffInfo->biodata)
                <tr>
                    <td>Bio Data</td>
                    <td>: <a href="{{ asset('storage/' . $staffInfo->biodata) }}" target="_blank">Download</a></td>
                </tr>
            @endif
        </tbody>
    </table>

    @foreach ($sections as $field => $label)
        <div id="panel-{{ $field }}" class="faculty-section-panel {{ $field === $firstSectionField ? 'active' : '' }}">
            <h5 style="color:#990000;font-weight:bold;">{{ $label }}</h5>
            @if(!empty($staffInfo->$field))
                {!! $staffInfo->$field !!}
            @else
                <p class="text-muted">No information available.</p>
            @endif
        </div>
    @endforeach

@endsection

@push('scripts')
    <script>
        (function () {
            var buttons = document.querySelectorAll('.faculty-tab-btn');
            buttons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    buttons.forEach(function (b) { b.classList.remove('active'); });
                    document.querySelectorAll('.faculty-section-panel').forEach(function (p) { p.classList.remove('active'); });
                    btn.classList.add('active');
                    document.getElementById(btn.dataset.target).classList.add('active');
                });
            });
        })();
    </script>
@endpush