@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Separation Request').' #'.$row->id)

@push('css')
<style>
    .separation-show .page-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.15rem; }
    .separation-show .card { border: 1px solid #e9ecef; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
    .separation-show .card-header { padding: 0.85rem 1.15rem; background: #f8f9fb; border-bottom: 1px solid #e9ecef; }
    .separation-show .meta-label { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 0.15rem; }
    .separation-show .meta-value { font-size: 0.95rem; margin-bottom: 0.85rem; }
    .separation-show .sig-preview { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end; }
    .separation-show .sig-item { text-align: center; min-width: 120px; }
    .separation-show .sig-item img { display: block; margin: 0 auto 6px; object-fit: contain; border: 1px solid #e9ecef; border-radius: 4px; background: #fff; padding: 4px; }
    .separation-show .sig-caption { font-size: 0.8rem; color: #495057; }
    .separation-show .action-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; }
    .sep-stage-stepper {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        padding: 18px 12px 14px;
        background: #fff;
        border: 1px solid #edf0f6;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
        margin-bottom: 1rem;
    }
    .sep-stage {
        flex: 1 1 110px;
        text-align: center;
        position: relative;
        padding: 0 8px;
        min-width: 96px;
    }
    .sep-stage:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 15px;
        left: calc(50% + 18px);
        width: calc(100% - 36px);
        height: 2px;
        background: #e2e8f0;
        z-index: 0;
    }
    .sep-stage.done:not(:last-child)::after { background: #22c55e; }
    .sep-stage.active:not(:last-child)::after {
        background: linear-gradient(90deg, #7367f0 0%, #e2e8f0 100%);
    }
    .sep-stage.rejected:not(:last-child)::after { background: #f87171; }
    .sep-stage-dot {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        background: #f1f5f9;
        color: #64748b;
        border: 2px solid #e2e8f0;
        position: relative;
        z-index: 1;
    }
    .sep-stage.active .sep-stage-dot {
        background: #7367f0;
        color: #fff;
        border-color: #7367f0;
        box-shadow: 0 0 0 4px rgba(115, 103, 240, .14);
    }
    .sep-stage.done .sep-stage-dot {
        background: #22c55e;
        color: #fff;
        border-color: #22c55e;
    }
    .sep-stage.rejected .sep-stage-dot {
        background: #ef4444;
        color: #fff;
        border-color: #ef4444;
    }
    .sep-stage-label {
        margin-top: 8px;
        font-size: 11px;
        font-weight: 700;
        color: #64748b;
        line-height: 1.3;
    }
    .sep-stage.active .sep-stage-label { color: #7367f0; }
    .sep-stage.done .sep-stage-label { color: #166534; }
    .sep-stage.rejected .sep-stage-label { color: #b91c1c; }
    .sep-stage-sub {
        margin-top: 2px;
        font-size: 11px;
        color: #94a3b8;
        line-height: 1.25;
        word-break: break-word;
    }
    .sep-stage.active .sep-stage-sub { color: #64748b; }
    .sep-stage.done .sep-stage-sub { color: #4b5563; }
</style>
@endpush

@section('content')
@php
    $staff = $row->staff;
    $typeLabel = \App\Models\StaffSeparationRequest::separationTypeLabel($row->separation_type ?? $row->kind);
    $statusBadge = match ($row->status) {
        'pending' => 'badge-warning',
        'confirmed' => 'badge-success',
        'reinstated' => 'badge-primary',
        'rejected' => 'badge-secondary',
        default => 'badge-light',
    };
@endphp
<div class="container-fluid separation-show">
    <div class="d-flex flex-wrap justify-content-between align-items-start mb-3">
        <div>
            <h1 class="page-title">{{ __('Separation Request') }} #{{ $row->id }}</h1>
            <p class="text-muted mb-0 small">{{ $typeLabel }} · {{ $staff?->user?->name ?? '—' }}</p>
        </div>
        <div class="action-btns mt-2 mt-md-0">
            <a href="{{ route('admin.staff.separation.index') }}" class="btn btn-light">{{ __('Back') }}</a>
            <a href="{{ route('admin.staff.separation.print', $row->id) }}" class="btn btn-primary" target="_blank" rel="noopener">
                <i class="fas fa-print"></i> {{ __('Print Application') }}
            </a>
            @if($row->status === 'confirmed')
                <a href="{{ route('admin.staff.separation.final_clearance.branch', $row->id) }}" class="btn btn-outline-primary">
                    নমুনা-১৫
                </a>
                @if($row->finalClearanceForm?->hasBranchData())
                    <a href="{{ route('admin.staff.separation.final_clearance.branch.print', $row->id) }}" class="btn btn-outline-secondary" target="_blank" rel="noopener">
                        <i class="fas fa-print"></i> নমুনা-১৫
                    </a>
                @endif
                @php
                    $canSeeHo = \App\Models\StaffFinalClearanceForm::canViewHeadOfficeClearance($row->finalClearanceForm);
                    $canEditHo = \App\Models\StaffFinalClearanceForm::canEditHeadOfficeClearance();
                @endphp
                @if($canEditHo || $canSeeHo)
                    <a href="{{ route('admin.staff.separation.final_clearance.head_office', $row->id) }}" class="btn btn-outline-primary">
                        নমুনা-১৫/১
                    </a>
                @endif
                @if($row->finalClearanceForm?->hasHeadOfficeData() && $canSeeHo)
                    <a href="{{ route('admin.staff.separation.final_clearance.head_office.print', $row->id) }}" class="btn btn-outline-secondary" target="_blank" rel="noopener">
                        <i class="fas fa-print"></i> নমুনা-১৫/১
                    </a>
                @endif
                <a href="{{ route('admin.staff.separation.settlement_checklist', $row->id) }}" class="btn btn-outline-dark">
                    {{ __('Settlement Checklist') }}
                </a>
                @if($row->settlementChecklist)
                    <a href="{{ route('admin.staff.separation.settlement_checklist.print', $row->id) }}" class="btn btn-outline-secondary" target="_blank" rel="noopener">
                        <i class="fas fa-print"></i> {{ __('Print Checklist') }}
                    </a>
                @endif
                @if($row->finalSettlement)
                    <a href="{{ route('admin.staff.separation.na_dabi_nama', $row->id) }}" class="btn btn-outline-success" target="_blank" rel="noopener">
                        {{ __('No-Demand Certificate') }}
                    </a>
                @else
                    @can('User-edit')
                        @if(! empty($pendingReinstate))
                            <a class="btn btn-outline-success" href="{{ route('approval.center') }}">
                                {{ __('Reinstate pending') }}: {{ user_display_label($pendingReinstate->currentApprover) }}
                            </a>
                        @else
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#reinstateModal">
                                <i class="mdi mdi-account-reactivate"></i>
                                {{ $workflowEnabled ? __('Send for Reinstate Approval') : __('Reinstate') }}
                            </button>
                        @endif
                    @endcan
                @endif
            @endif
        </div>
    </div>

    @if(session('message'))
        <div class="alert alert-success">{{ session('message') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    @if($row->status === 'reinstated')
        <div class="alert alert-success">
            <strong><i class="mdi mdi-account-check"></i> {{ __('Reinstate Approved') }}</strong>
            — {{ __('This employee is active again. Offboarding actions (clearance / settlement / reinstate) are closed.') }}
            @if($row->reinstated_at)
                <div class="small mt-1">
                    {{ __('Reinstated on') }}: {{ $row->reinstated_at->format('d M Y, h:i A') }}
                    @if($row->reinstatedBy)
                        · {{ $row->reinstatedBy->name }}
                    @endif
                </div>
            @endif
            @if($row->reinstate_remark)
                <div class="small mt-1" style="white-space:pre-wrap;">{{ $row->reinstate_remark }}</div>
            @endif
        </div>
    @endif

    @if(! empty($approvalStages))
        <div class="sep-stage-stepper">
            @foreach($approvalStages as $stage)
                <div class="sep-stage @if(($stage['state'] ?? '') === 'done') done @elseif(($stage['state'] ?? '') === 'active') active @elseif(($stage['state'] ?? '') === 'rejected') rejected @endif">
                    <div class="sep-stage-dot">
                        @if(($stage['state'] ?? '') === 'done')
                            <i class="mdi mdi-check"></i>
                        @elseif(($stage['state'] ?? '') === 'rejected')
                            <i class="mdi mdi-close"></i>
                        @else
                            {{ $loop->iteration }}
                        @endif
                    </div>
                    <div class="sep-stage-label">{{ $stage['label'] }}</div>
                    @if(! empty($stage['sub']))
                        <div class="sep-stage-sub">{{ $stage['sub'] }}</div>
                    @endif
                </div>
            @endforeach
        </div>
    @endif

    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header"><strong>{{ __('Request Details') }}</strong></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="meta-label">{{ __('Separation Type') }}</div>
                            <div class="meta-value">{{ $typeLabel }}</div>
                            <div class="meta-label">{{ __('Application Date') }}</div>
                            <div class="meta-value">{{ $row->application_date?->format('Y-m-d') ?? '—' }}</div>
                            <div class="meta-label">{{ __('Last Working Date') }}</div>
                            <div class="meta-value">{{ $row->last_working_date?->format('Y-m-d') ?? '—' }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="meta-label">{{ __('Status') }}</div>
                            <div class="meta-value">
                                @if($row->status === 'reinstated')
                                    <span class="badge badge-primary">{{ __('Reinstate Approved') }}</span>
                                @else
                                    <span class="badge {{ $statusBadge }}">{{ ucfirst($row->status) }}</span>
                                @endif
                            </div>
                            <div class="meta-label">{{ __('Created By') }}</div>
                            <div class="meta-value">{{ $row->createdBy?->name ?? '—' }}</div>
                            <div class="meta-label">{{ __('Decided By') }}</div>
                            <div class="meta-value">
                                {{ $row->confirmedBy?->name ?? '—' }}
                                @if($row->confirmed_at)
                                    <span class="text-muted small">({{ $row->confirmed_at->format('Y-m-d H:i') }})</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="meta-label">{{ __('Reason') }}</div>
                    <div class="meta-value" style="white-space:pre-wrap;">{{ $row->reason ?: '—' }}</div>
                    @if($row->employee_remark)
                        <div class="meta-label">{{ __('Employee Note') }}</div>
                        <div class="meta-value" style="white-space:pre-wrap;">{{ $row->employee_remark }}</div>
                    @endif
                    @if($row->admin_remark)
                        <div class="meta-label">{{ __('Admin Note') }}</div>
                        <div class="meta-value" style="white-space:pre-wrap;">{{ $row->admin_remark }}</div>
                    @endif
                    @if($row->status === 'reinstated')
                        <div class="meta-label">{{ __('Reinstated By') }}</div>
                        <div class="meta-value">
                            {{ $row->reinstatedBy?->name ?? '—' }}
                            @if($row->reinstated_at)
                                <span class="text-muted small">({{ $row->reinstated_at->format('Y-m-d H:i') }})</span>
                            @endif
                        </div>
                        @if($row->reinstate_remark)
                            <div class="meta-label">{{ __('Reinstate Remark') }}</div>
                            <div class="meta-value" style="white-space:pre-wrap;">{{ $row->reinstate_remark }}</div>
                        @endif
                    @endif
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header"><strong>{{ __('Employee Signature & Seal') }}</strong></div>
                <div class="card-body">
                    @if($signatureUrl || $sealUrl)
                        <div class="sig-preview">
                            @if($signatureUrl)
                                <div class="sig-item">
                                    <img src="{{ $signatureUrl }}" alt="{{ __('Signature') }}" style="width:{{ $sigW }}px;height:{{ $sigH }}px;">
                                    <div class="sig-caption">{{ __('Signature') }}</div>
                                </div>
                            @endif
                            @if($sealUrl)
                                <div class="sig-item">
                                    <img src="{{ $sealUrl }}" alt="{{ __('Seal') }}" style="width:{{ $sealW }}px;height:{{ $sealH }}px;">
                                    <div class="sig-caption">{{ __('Seal') }}</div>
                                </div>
                            @endif
                        </div>
                    @else
                        <p class="text-muted mb-0">{{ __('No signature or seal uploaded for this employee.') }}</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header"><strong>{{ __('Employee') }}</strong></div>
                <div class="card-body">
                    <div class="meta-label">{{ __('Name') }}</div>
                    <div class="meta-value">{{ $staff?->user?->name ?? '—' }}</div>
                    <div class="meta-label">{{ __('SID') }}</div>
                    <div class="meta-value">{{ $staff?->displaySid() ?? '—' }}</div>
                    <div class="meta-label">{{ __('Designation') }}</div>
                    <div class="meta-value">{{ $staff?->designation?->name ?? '—' }}</div>
                    <div class="meta-label">{{ __('Department') }}</div>
                    <div class="meta-value">{{ $staff?->department?->name ?? '—' }}</div>
                    <div class="meta-label">{{ __('Branch') }}</div>
                    <div class="meta-value">{{ $staff?->warehouse?->name ?? '—' }}</div>
                    <div class="meta-label">{{ __('Joining Date') }}</div>
                    <div class="meta-value">{{ $staff?->joing_date?->format('Y-m-d') ?? '—' }}</div>
                    <div class="meta-label">{{ __('Mobile') }}</div>
                    <div class="meta-value">{{ $staff?->mobile_no ?? '—' }}</div>
                </div>
            </div>

            @if($workflowEnabled && $row->status === 'pending')
                <div class="alert alert-info mb-0">
                    {{ __('This request is pending approval. Use Approval Center to decide.') }}
                </div>
            @endif
        </div>
    </div>
</div>

@can('User-edit')
    @if($row->status === 'confirmed' && ! $row->finalSettlement)
        <div class="modal fade" id="reinstateModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <form method="post" action="{{ route('admin.staff.separation.reinstate', $row->id) }}">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('Reinstate Employee') }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}">&times;</button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-2">
                                {{ __('This will reactivate the employee login and staff record after a confirmed resignation/separation was withdrawn.') }}
                            </p>
                            @if($workflowEnabled)
                                <p class="small text-info mb-2">
                                    {{ __('Approval workflow is ON. Configure hierarchy for request type “Staff Separation Reinstate”. If a chain exists, this goes to Approval Center; otherwise it auto-approves.') }}
                                </p>
                            @endif
                            <p class="small text-muted mb-3">
                                {{ __('Pending asset offboard tasks will be cancelled. Final payslip and clearance documents remain for history. Not allowed after final settlement.') }}
                            </p>
                            <div class="form-group mb-0">
                                <label>{{ __('Reinstate remark (optional)') }}</label>
                                <textarea name="reinstate_remark" class="form-control" rows="3" maxlength="2000"
                                          placeholder="{{ __('e.g. Resignation withdrawn by employee; management approved reinstatement.') }}"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-success">
                                {{ $workflowEnabled ? __('Submit for Approval') : __('Reinstate') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif
@endcan
@endsection