@php
    $from = isset($experience->period_from) ? date('d-m-Y', strtotime($experience->period_from)) : null;
    $to = isset($experience->period_to) ? date('d-m-Y', strtotime($experience->period_to)) : null;
@endphp

<div class="work_experience_details" data-index="{{ $index }}">
    {{-- Remove button (only show for rows after 0) --}}
    @if ($index > 0)
        <div class="row mt-3">
            <div class="col-md-12 text-right">
                <button type="button" class="btn btn-danger btn-sm remove-work-row">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
        </div>
    @endif

    <div class="row">
        {{-- Employer Name --}}
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("employer_name_$index", 'Employer Name', ['class' => 'form-label']) !!}
                {!! Form::text('employer_name[]', old("employer_name.$index", $experience->employer_name ?? ''), [
                    'id' => "employer_name_$index",
                    'class' => 'form-control',
                    'placeholder' => 'Enter Employer Name',
                ]) !!}
            </div>
        </div>

        {{-- Location --}}
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("location_$index", 'Location', ['class' => 'form-label']) !!}
                {!! Form::text('location[]', old("location.$index", $experience->employer_location ?? ''), [
                    'id' => "location_$index",
                    'class' => 'form-control',
                    'placeholder' => 'Enter Location',
                ]) !!}
            </div>
        </div>

        {{-- Starting Salary --}}
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("starting_salary_$index", 'Starting Salary', ['class' => 'form-label']) !!}
                {!! Form::text('starting_salary[]', old("starting_salary.$index", $experience->starting_salary ?? ''), [
                    'id' => "starting_salary_$index",
                    'class' => 'form-control amount',
                    'placeholder' => 'Enter Starting Salary',
                ]) !!}
            </div>
        </div>

        {{-- Leaving Salary --}}
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("leaving_salary_$index", 'Leaving Salary', ['class' => 'form-label']) !!}
                {!! Form::text('leaving_salary[]', old("leaving_salary.$index", $experience->leaving_salary ?? ''), [
                    'id' => "leaving_salary_$index",
                    'class' => 'form-control amount',
                    'placeholder' => 'Enter Leaving Salary',
                ]) !!}
            </div>
        </div>

        {{-- Starting Designation --}}
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("starting_designation_$index", 'Starting Designation', ['class' => 'form-label']) !!}
                {!! Form::text(
                    'starting_designation[]',
                    old("starting_designation.$index", $experience->starting_designation ?? ''),
                    [
                        'id' => "starting_designation_$index",
                        'class' => 'form-control',
                        'placeholder' => 'Enter Starting Designation',
                    ],
                ) !!}
            </div>
        </div>

        {{-- Leaving Designation --}}
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("leaving_designation_$index", 'Leaving Designation', ['class' => 'form-label']) !!}
                {!! Form::text(
                    'leaving_designation[]',
                    old("leaving_designation.$index", $experience->leaving_designation ?? ''),
                    [
                        'id' => "leaving_designation_$index",
                        'class' => 'form-control',
                        'placeholder' => 'Enter Leaving Designation',
                    ],
                ) !!}
            </div>
        </div>

        {{-- From Date --}}
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("from_date_$index", 'From Date', ['class' => 'form-label']) !!}
                {!! Form::text('from_date[]', old("from_date.$index", $from ?? ''), [
                    'id' => "from_date_$index",
                    'class' => 'form-control fromDate',
                    'placeholder' => 'Select From Date',
                    'autocomplete' => 'off',
                ]) !!}
            </div>
        </div>

        {{-- To Date --}}
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("to_date_$index", 'To Date', ['class' => 'form-label']) !!}
                {!! Form::text('to_date[]', old("to_date.$index", $to ?? ''), [
                    'id' => "to_date_$index",
                    'class' => 'form-control toDate',
                    'placeholder' => 'Select To Date',
                    'autocomplete' => 'off',
                ]) !!}
            </div>
        </div>

        {{-- Reason For Leaving --}}
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label("leaving_reason_$index", 'Reason For Leaving', ['class' => 'form-label']) !!}
                {!! Form::text('leaving_reason[]', old("leaving_reason.$index", $experience->leaving_reason ?? ''), [
                    'id' => "leaving_reason_$index",
                    'class' => 'form-control',
                    'placeholder' => 'Enter Reason For Leaving',
                ]) !!}
            </div>
        </div>
    </div>
</div>