@php
    $badgeColors = [
        'Pending' => 'warning',
        'Reporting Manager Approved' => 'light',
        'Head Manager Accepted' => 'dark',
        'HR Approved' => 'info',
        'Account Approved' => 'primary',
        'Reporting Manager Rejected' => 'danger',
        'Head Manager Rejected' => 'danger',
        'HR Rejected' => 'danger',
        'Cancelled' => 'danger',
    ];

    $disabledStatus = in_array($resignation->status, ['Account Approved', 'Cancelled']) ? 'disabled' : '';
@endphp

@extends('admin.layouts.layouts')

@section('title', 'Details | Account Resignations')

@section('page-css')
    <style>
        dl.row {
            margin-bottom: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #f1f1f1;
        }

        dl.row:last-child {
            border-bottom: none;
        }

        dt {
            font-weight: 600;
        }

        dd {
            margin-bottom: 0;
        }

        .table-responsive th,
        td {
            white-space: nowrap;
        }

        .hidden-status {
            display: none !important;
        }

        .timeline {
            position: relative;
            margin-left: 30px;
        }

        .timeline:before {
            content: "";
            position: absolute;
            left: 6px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #dcdcdc;
        }

        .timeline-item {
            position: relative;
            padding-left: 35px;
        }

        .timeline-marker {
            position: absolute;
            left: -1px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid #fff;
            box-shadow: 0 0 0 2px #dcdcdc;
        }

        #accountApproveModal input.my-form-control {
            width: 140px;
            padding: 5px;
        }

        .section-box {
            padding: 8px 0;
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 8px;
        }

        .section-title {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 13px;
        }

        .row-item {
            display: flex;
            justify-content: space-between;
            padding: 2px 0;
            font-size: 13px;
        }

        .row-item input {
            width: 90px;
            height: 28px;
            font-size: 13px;
            padding: 2px 4px;
        }

        .small-label {
            font-weight: 500;
            color: #444;
        }

        .table-sm td,
        .table-sm th {
            padding: 3px !important;
            font-size: 13px;
        }

        .table-sm th {
            white-space: nowrap;
        }

        #accountApproveModal .table-sm thead th {
            font-size: 13px !important;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
        }

        .modern-ff-container {
            display: flex;
            gap: 20px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .modern-ff-box {
            flex: 1;
            min-width: 230px;
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            border: 1px solid #f1f1f1;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .modern-title {
            font-size: 14px;
            font-weight: 600;
            color: #444;
            margin-bottom: 10px;
            border-bottom: 1px solid #eaeaea;
            padding-bottom: 5px;
        }

        .modern-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            font-size: 13px;
        }

        .modern-row span {
            font-weight: normal;
            color: #555;
        }

        .modern-row strong {
            font-weight: 600;
            color: #000;
        }

        .final-row strong {
            font-size: 14px;
        }
    </style>
@endsection

@section('content')
    {{-- Account Approve Modal --}}
    <div class="modal fade" id="accountApproveModal" tabindex="-1" role="dialog" aria-labelledby="accountApproveModalLabel"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="max-width: 650px;">
            <div class="modal-content border-0 shadow-lg rounded-3">
                <div class="modal-header bg-primary text-white py-2">
                    <h5 class="modal-title" id="accountApproveModalLabel">
                        <i class="fa fa-exchange-alt"></i> Change Resignation Status
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <form method="POST" id="account-approve-form">
                    @csrf
                    <input type="hidden" id="hidden-status">

                    <div class="modal-body">
                        @php
                            $salaryAmount = $resignation->salary_amount ?? 0;
                            $totalRecoveryAmount = 0;
                        @endphp

                        <div class="section-box">
                            <div class="row-item">
                                <span class="small-label">Tentative F&F:</span>
                                <strong>{{ date('d-m-Y', strtotime($resignation->tentative_date)) }}</strong>

                                <span class="small-label" style="margin-left: 10px;">Final Exit:</span>
                                <strong>{{ date('d-m-Y', strtotime($resignation->final_exit_date)) }}</strong>
                            </div>
                        </div>
                        <div class="section-box">
                            <div class="section-title">Total Recovery</div>
                            @if (isset($resignation->otherAmounts))
                                @foreach ($resignation->otherAmounts as $otherAmount)
                                    @php $totalRecoveryAmount += $otherAmount->amount ?? 0; @endphp
                                    <div class="row-item">
                                        <span>{{ $otherAmount->title ?? '' }}</span>
                                        <strong>{{ number_format($otherAmount->amount ?? 0, 2) }}</strong>
                                    </div>
                                @endforeach
                            @endif

                            @if (isset($resignation->otherAmounts) && count($resignation->otherAmounts) > 0)
                                <div class="row-item">
                                    <span>Actual Recovery</span>
                                    <input type="text" id="actual_recovery" name="actual_recovery"
                                        class="form-control my-form-control amount" value="0"
                                        placeholder="Enter Actual Recovery" onkeyup="calculateAmount()"
                                        data-parsley-required="true"
                                        data-parsley-required-message="Please enter actual recovery amount."
                                        data-parsley-errors-container="#actual_recovery_error">
                                </div>
                                <div class="error text-right" id="actual_recovery_error"></div>

                                <div class="row-item">
                                    <span>Remaining</span>
                                    <strong
                                        class="remain-recovery-txt">{{ number_format($totalRecoveryAmount, 2) }}</strong>
                                </div>
                            @else
                                <div class="row-item">
                                    <span class="text-muted">No any recovery is pending.</span>
                                </div>
                            @endif
                        </div>
                        <div class="section-box">
                            <div class="section-title">Other Deduction</div>
                            <div class="row-item">
                                <span>Deduction</span>
                                <input type="text" id="other_deduction" name="other_deduction"
                                    class="form-control my-form-control amount" value="0" placeholder="Enter Deduction"
                                    onkeyup="calculateAmount()" data-parsley-required="true"
                                    data-parsley-required-message="Please enter other deduction."
                                    data-parsley-errors-container="#other_deduction_error">
                            </div>
                            <div class="error text-right" id="other_deduction_error"></div>
                        </div>
                        <div class="section-box">
                            <div class="section-title">Final Settlement</div>
                            <div class="row-item">
                                <span>Salary</span>
                                <strong>{{ number_format($salaryAmount, 2) }}</strong>
                            </div>
                            <div class="row-item">
                                <span>Remaining Recovery</span>
                                <strong>- <span
                                        class="remain-recovery-txt">{{ number_format($totalRecoveryAmount, 2) }}</span></strong>
                            </div>
                            <div class="row-item">
                                <span>Other Deduction</span>
                                <strong>- <span id="other-ded-text">0</span></strong>
                            </div>
                            <div class="row-item" style="font-size:14px;">
                                <span><strong>F&F Amount</strong></span>
                                <strong
                                    id="final-amt-text">{{ number_format($salaryAmount - $totalRecoveryAmount, 2) }}</strong>
                            </div>
                        </div>

                        <input type="hidden" id="salary_amount" value="{{ $salaryAmount }}">
                        <input type="hidden" name="total_recovery_amount" id="total_recovery_amount"
                            value="{{ $totalRecoveryAmount }}">
                        <input type="hidden" name="remaining_recovery_amount" id="remaining_recovery_amount">
                        <input type="hidden" name="final_amount" id="final_amount" name="final_amount">

                        <div class="section-box">
                            <div class="row">
                                <div class="col-md-6">
                                    <label style="font-size:13px;">Final F&F Date <span class="text-danger">*</span></label>
                                    <input type="text" name="final_f_and_f_date" id="final_f_and_f_date"
                                        class="form-control date" placeholder="Select Final F&F Date"
                                        data-parsley-required="true"
                                        data-parsley-required-message="Please select final f&f date.">
                                </div>
                                <div class="col-md-6">
                                    <label style="font-size:13px;">Payment Mode <span class="text-danger">*</span></label>
                                    <select name="payment_mode" id="payment_mode" class="form-control"
                                        data-parsley-required="true"
                                        data-parsley-required-message="Please select payment mode.">
                                        <option value="">Select Payment Mode</option>
                                        <option value="Online">Online</option>
                                        <option value="Cash">Cash</option>
                                    </select>
                                </div>
                                <div class="col-md-12 mt-2">
                                    <label style="font-size:13px;">Reason <span class="text-danger">*</span></label>
                                    <textarea name="reason" class="form-control" rows="3" style="font-size:13px;" placeholder="Enter Reason"
                                        data-parsley-required="true" data-parsley-required-message="Please enter reason."></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="section-box">
                            <div class="section-title">Employee Asset History</div>
                            <table class="table table-sm table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Asset</th>
                                        <th>Remarks</th>
                                        <th>Takeover By</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($inventoryItems as $inventoryItem)
                                        @php $lastHistory = $inventoryItem->assetInventoryItemHistories->first(); @endphp
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $inventoryItem->assetInventory->asset->name ?? '' }}
                                                ({{ $inventoryItem->serial_no ?? '-' }})
                                            </td>
                                            <td>{{ $lastHistory->reason ?? '-' }}</td>
                                            <td>
                                                @if ($lastHistory)
                                                    <strong>{{ $lastHistory->editor->name ?? '' }}</strong><br>
                                                    <small>{{ $lastHistory->updated_at->format('d-m-Y h:i:s A') }}</small>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>


                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">
                            <i class="fa fa-times"></i> Cancel
                        </button>
                        <button type="submit" id="save-btn" class="btn btn-primary btn-sm">
                            <i class="fa fa-save"></i> Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Edit History Modal --}}
    <div class="modal fade" id="editHistoryModal" tabindex="-1" role="dialog" aria-labelledby="editHistoryModalLabel"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document" style="max-width: 600px;">
            <div class="modal-content border-0 shadow-lg rounded-3">
                <div class="modal-header bg-primary text-white py-2">
                    <h5 class="modal-title" id="editHistoryModalLabel">
                        <i class="fa fa-exchange-alt"></i> Edit Details
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div id="modal-content"></div>
            </div>
        </div>
    </div>

    <div class="page-header">
        <h3 class="page-title">
            Account Resignations
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item">
                    <a href="{{ route('account-resignations.index') }}">Account Resignations</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Details</li>
            </ol>
        </nav>
    </div>

    <div class="container py-4">
        {{-- Details --}}
        <div class="card shadow-sm rounded border-0 mb-4">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                <h6 class="mb-0 fw-bold">Details</h6>
                <a href="{{ route('account-resignations.index') }}" class="btn btn-primary btn-sm">
                    <i class="fa fa-arrow-left"></i> Back
                </a>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Employee</dt>
                            <dd class="col-sm-8">{{ $resignation->employee->employee_name ?? '-' }}</dd>
                        </dl>
                    </div>

                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Type</dt>
                            <dd class="col-sm-8">{{ $resignation->type ?? '-' }}</dd>
                        </dl>
                    </div>

                    @if ($resignation->type == 'Other')
                        <div class="col-md-6">
                            <dl class="row">
                                <dt class="col-sm-4">Other Type</dt>
                                <dd class="col-sm-8">{{ $resignation->other_type ?? '-' }}</dd>
                            </dl>
                        </div>
                    @endif

                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Notice Type</dt>
                            <dd class="col-sm-8">{{ $resignation->resignation_notice_type ?? '-' }}</dd>
                        </dl>
                    </div>

                    @if ($resignation->resignation_notice_type == 'Notice Period')
                        <div class="col-md-6">
                            <dl class="row">
                                <dt class="col-sm-4">No. Of Days</dt>
                                <dd class="col-sm-8">{{ $resignation->no_of_days ?? '-' }}</dd>
                            </dl>
                        </div>
                    @endif

                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Reason</dt>
                            <dd class="col-sm-8">{{ nl2br($resignation->reason ?? '') }}</dd>
                        </dl>
                    </div>

                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Created Date</dt>
                            <dd class="col-sm-8">
                                {{ $resignation->created_at->format('d-m-Y h:i A') ?? '' }}
                                <strong>({{ $resignation->createdBy->name ?? '-' }})</strong>
                            </dd>
                        </dl>
                    </div>

                    @if (!empty($resignation->updated_by))
                        <div class="col-md-6">
                            <dl class="row">
                                <dt class="col-sm-4">Updated Date</dt>
                                <dd class="col-sm-8">
                                    {{ $resignation->updated_at->format('d-m-Y h:i A') ?? '' }}
                                    <strong>({{ $resignation->updatedBy->name ?? '-' }})</strong>
                                </dd>
                            </dl>
                        </div>
                    @endif

                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-4">Status</dt>
                            <dd class="col-sm-8" id="status-content">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-{{ $badgeColors[$resignation->status] ?? '' }}"
                                        {{ $disabledStatus }}>
                                        {{ $resignation->status }}
                                    </button>
                                    <button type="button"
                                        class="btn btn-{{ $badgeColors[$resignation->status] ?? '' }} dropdown-toggle dropdown-toggle-split"
                                        id="changeStatus" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false" {{ $disabledStatus }}>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="changeStatus">
                                        <h5 class="dropdown-header">Change Status</h5>

                                        <a class="dropdown-item change-status {{ $resignation->status == 'HR Approved' ? '' : 'hidden-status' }}"
                                            href="javascript:void(0)" data-status="Account Approved"
                                            data-old-status="{{ $resignation->status }}">
                                            Account Approve
                                        </a>
                                    </div>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {{-- Resignation Timeline --}}
        <div class="card shadow-sm rounded border-0 mb-4">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0 fw-bold">Resignation Timeline</h5>
            </div>
            <div class="card-body" id="timeline-content">
                @include('admin.team_resignation_request.timeline_content', compact('resignation'))
            </div>
        </div>

        {{-- Resignation History --}}
        <div class="card shadow-sm rounded border-0 mb-4">
            <div class="card-header bg-dark text-white">
                <h6 class="mb-0 fw-bold">Resignation History</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="table-responsive pb-4">
                        <div class="col-md-12 px-4">
                            <table class="table table-bordered" id="histories-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Status</th>
                                        <th>Remark</th>
                                        <th>Action On</th>
                                        <th>Action By</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        let resignationId = "@json($resignation->id)";
        let ajaxHistoryRoute = "{{ route('resignations.ajax-histories') }}";
        let cancelResignationRoute = "{{ route('my-resignation.cancel') }}";
        let changeStatusRoute = "{{ route('team-resignation-request.status') }}";
        let historyFormDetails = "{{ route('resignations.histories.form-details') }}";
        let historyUpdateRoute = "{{ route('resignations.histories.update') }}";
    </script>
    <script src="{{ asset('assets/js/admin/resignation.js') }}"></script>
@endsection