@extends('layout.mainlayout')

@section('content')
<div class="page-wrapper cardhead">
    <div class="content container-fluid">
        @component('components.breadcrumb')
            @slot('title')
                Probation Actions
            @endslot
        @endcomponent

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card border-0 mb-3">
            <div class="card-body">
                <label class="form-label mb-2">Search Employee</label>
                <select id="resource_id" class="form-control select2">
                    <option value="">Select employee</option>
                    @foreach ($resources as $resource)
                        <option value="{{ $resource->id }}">
                            {{ trim($resource->first_name . ' ' . $resource->last_name) }} | {{ $resource->employee_code }} | {{ $resource->professional_email }}
                        </option>
                    @endforeach
                </select>
                <div id="probationLoadError" class="alert alert-danger mt-3 d-none mb-0"></div>
            </div>
        </div>

        <div id="probationDetailsCard" class="card border-0 d-none">
            <div class="card-header">
                <h5 class="mb-0">Probation Details</h5>
            </div>
            <div class="card-body">
                <div class="row g-3 mb-4">
                    <div class="col-md-3"><small class="text-muted d-block">Employee</small><strong id="detailName">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Employee Code</small><strong id="detailCode">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Email</small><strong id="detailEmail">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Status</small><strong id="detailStatus">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Designation</small><strong id="detailDesignation">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Manager</small><strong id="detailManager">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Team</small><strong id="detailTeam">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">DOJ</small><strong id="detailDoj">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Base Days</small><strong id="detailBaseDays">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Extension Days</small><strong id="detailExtensionDays">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Due Date</small><strong id="detailDueDate">-</strong></div>
                    <div class="col-md-3"><small class="text-muted d-block">Days Left</small><strong id="detailRemainingDays">-</strong></div>
                    <div class="col-md-4"><small class="text-muted d-block">Last Action By</small><strong id="detailActionBy">-</strong></div>
                    <div class="col-md-4"><small class="text-muted d-block">Last Action At</small><strong id="detailActionAt">-</strong></div>
                    <div class="col-md-4"><small class="text-muted d-block">Remarks</small><strong id="detailRemarks">-</strong></div>
                </div>

                <div class="row g-3">
                    <div class="col-lg-6">
                        <form method="POST" id="completeForm" class="border rounded p-3 h-100">
                            @csrf
                            <h6 class="mb-3">Complete Probation</h6>
                            <div class="mb-3">
                                <label class="form-label">Remarks</label>
                                <textarea name="remarks" class="form-control" rows="3" placeholder="Completion remarks"></textarea>
                            </div>
                            <button type="submit" class="btn btn-success">Mark Completed</button>
                        </form>
                    </div>
                    <div class="col-lg-6">
                        <form method="POST" id="extendForm" class="border rounded p-3 h-100">
                            @csrf
                            <h6 class="mb-3">Extend Probation</h6>
                            <div class="mb-3">
                                <label class="form-label">Extension Days</label>
                                <input type="number" name="extension_days" class="form-control" min="1" max="365" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Remarks</label>
                                <textarea name="remarks" class="form-control" rows="3" placeholder="Extension remarks"></textarea>
                            </div>
                            <button type="submit" class="btn btn-warning">Extend</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const resourceSelect = document.getElementById('resource_id');
const detailsCard = document.getElementById('probationDetailsCard');
const loadError = document.getElementById('probationLoadError');
const probationShowUrlTemplate = @json(route('probation.show', ['resource' => '__RESOURCE__']));

function setText(id, value) {
    document.getElementById(id).textContent = value ?? '-';
}

function hideProbationError() {
    loadError.classList.add('d-none');
    loadError.textContent = '';
}

function showProbationError(message) {
    loadError.textContent = message;
    loadError.classList.remove('d-none');
}

function loadProbationDetails(id) {
    if (!id) {
        detailsCard.classList.add('d-none');
        hideProbationError();
        return;
    }

    hideProbationError();
    const showUrl = probationShowUrlTemplate.replace('__RESOURCE__', id);

    fetch(showUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
        .then(async (r) => {
            if (!r.ok) {
                throw new Error(`Request failed with status ${r.status}`);
            }
            return r.json();
        })
        .then(data => {
            setText('detailName', data.employee_name);
            setText('detailCode', data.employee_code);
            setText('detailEmail', data.email);
            setText('detailStatus', data.probation_status);
            setText('detailDesignation', data.designation_name);
            setText('detailManager', data.manager_name);
            setText('detailTeam', data.team_name);
            setText('detailDoj', data.doj);
            setText('detailBaseDays', data.base_days ? `${data.base_days} days` : 'N/A');
            setText('detailExtensionDays', `${data.extension_days || 0} days`);
            setText('detailDueDate', data.due_date);
            setText('detailRemainingDays', data.remaining_days);
            setText('detailActionBy', data.last_action_by);
            setText('detailActionAt', data.last_action_at);
            setText('detailRemarks', data.remarks || 'N/A');

            document.getElementById('completeForm').action = data.complete_url;
            document.getElementById('extendForm').action = data.extend_url;

            detailsCard.classList.remove('d-none');
        })
        .catch((error) => {
            detailsCard.classList.add('d-none');
            showProbationError(error.message || 'Unable to load probation details.');
        });
}

document.addEventListener('DOMContentLoaded', function () {
    resourceSelect.addEventListener('change', function () {
        loadProbationDetails(this.value);
    });

    if (window.jQuery) {
        window.jQuery('#resource_id').on('change', function () {
            loadProbationDetails(this.value);
        });
    }
});
</script>
@endpush