@extends('layouts.appv2')

@section('content')

        @if ($message = Session::get('success'))
            <div class="alert alert-success" role="alert">
                {{ $message }}
            </div>
        @endif

        @if ($message = Session::get('error'))
            <div class="alert alert-danger" role="alert">
                {{ $message }}
            </div>
        @endif

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

{{-- Table index start --}}


	
<h3>Contract Details</h3>  

	<div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
		<div class="card-header">

					<div class="form-group row">
						
						<label for="employee_company_id" class="col-sm-2 col-form-label">Name</label>
						<div class="col-sm-4">
							<span type="text" readonly="" class="form-control-plaintext col-form-label font-weight-bold" value="">{{ $employee->employee_first_name }}</span>
						</div>

						<label for="employee_office_id" class="col-sm-2 col-form-label">Designation</label>
						<div class="col-sm-4">
							<span type="text" readonly="" class="form-control-plaintext col-form-label font-weight-bold" value="">{{ $employees->designation->designation_name ?? 'N/A' }}</span>
						</div>
					 </div>
					 
					 <div class="form-group row">
					
						<label for="employee_company_id" class="col-sm-2 col-form-label">Grade</label>
						<div class="col-sm-4">
							<span type="text" readonly="" class="form-control-plaintext col-form-label font-weight-bold" value="">{{ $employee->grade->grade_name ?? 'N/A' }}</span>
						</div>

						<label for="employee_office_id" class="col-sm-2 col-form-label">Department</label>
						<div class="col-sm-4">
							<span type="text" readonly="" class="form-control-plaintext col-form-label font-weight-bold" value="">{{ $employee->department->department_name ?? 'N/A'}}</span>
						</div>
					 </div>
					 
					 <div class="form-group row">
						<label for="employee_company_id" class="col-sm-2 col-form-label">Joined</label>
						<div class="col-sm-4">
							<span id="employee_joined_at" class="form-control-plaintext col-form-label font-weight-bold">
                            {{ \Carbon\Carbon::parse( $employee->employee_joined_at)->format('d M Y') }}
							</span>
						</div>

						<label for="employee_office_id" class="col-sm-2 col-form-label">Length Of Services</label>
						<div class="col-sm-4">
							<span id="length_of_services" class="form-control-plaintext col-form-label font-weight-bold"></span>
						</div>
					</div>


			
		</div>
		<div class="card-body">
        <a href="#" style="width:100%;" class="btn btn-info mb-3 ml-0" data-toggle="modal" data-target="#contractModal">Renew Contract</a>

					<div class="table-responsive">
					  <table class="table  table-hover table-sm mb-0 table-bordered text-center">
                        <thead  class="thead-dark">
                            <tr>
                                <th>No</th>
                                <th>Year</th>
                                <th>Contract ID</th>
                                <th>Contract Start</th>
                                <th>Contract End</th>
                                <th>AL</th>
                                <th>Carried Forward</th>
                                <th>Total AL</th>
                                <th>ML</th>
                                <th>RL</th>
                                <th>Attachment</th>
                                <th>Contract Create On</th>
                            </tr>
                        </thead>
                        <tbody>
                        @php $no = 0; @endphp
                        @if($employee->contract->isNotEmpty())
                            @foreach($employee->contract as $contract)
                                <tr>
                                    <td>{{ ++$no }}</td>
                                    <td></td>
                                    <td></td>
                                    <td>{{ \Carbon\Carbon::parse($contract->contract_start_at)->format('d M Y') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($contract->contract_end_at)->format('d M Y') }}</td>
                                    <td>{{ $contract->AL }}</td>
                                    <td></td>
                                    <td>Total AL</td>
                                    <td>{{ $contract->ML }}</td>
                                    <td>{{ $contract->RL }}</td>
                                    <td>
                                        @if($contract->attachment)
                                            <a href="{{ asset('documentstaff/' . $contract->attachment) }}" class="btn btn-primary">Download</a>
                                        @else
                                            <button class="btn btn-secondary" onclick="alert('There is no file uploaded.');">Download</button>
                                        @endif
                                    </td>
                                    <td>{{ \Carbon\Carbon::parse($contract->contract_created_at ?? '')->format('d M Y') }}</td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="12">No contracts available for this employee.</td>
                            </tr>
                        @endif
                        </tbody>
					  </table>
					</div>
				     
		</div>
	</div>


            <div class="modal fade" id="contractModal" tabindex="-1" role="dialog" aria-labelledby="contractModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="contractModalLabel">Renew Contract</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- Form inside the modal -->
                            <form action="{{ route('employees.renewcontract', $employee->employee_id) }}" enctype="multipart/form-data" method="POST">
                                @csrf
                                <div class="form-group">
                                    <label for="contract_duration">Employee Name</label>
                                    <input type="text" class="form-control" id="" style="border-radius: 10px;" readonly value="{{ $employee->employee_first_name }}">
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="name">Contract Start On :</label>
                                        <div class="form-line">
                                            <input type="date" class="form-control" id="" name="contract_start_at" style="border-radius: 10px;" value="employee_dob" placeholder="##/#/####" required>                                                        
                                        </div>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="name">Contract End On :</label>
                                        <div class="form-line">
                                            <input type="date" class="form-control" id="" name="contract_end_at" style="border-radius:px;" value="" placeholder="##/#/####" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-2">
                                        <label for="contract_duration">AL</label>
                                        <input type="text" class="form-control" id="" style="border-radius: 10px;" name="AL" required>
                                    </div>

                                    <div class="form-group col-md-2">
                                        <label for="contract_duration">EL</label>
                                        <input type="text" class="form-control" id="" style="border-radius: 10px;" name="EL" required>
                                    </div>

                                    <div class="form-group col-md-2">
                                        <label for="contract_duration">ML</label>
                                        <input type="text" class="form-control" id="" style="border-radius: 10px;" name="ML" required>
                                    </div>

                                    <div class="form-group col-md-2">
                                        <label for="contract_duration">RL</label>
                                        <input type="text" class="form-control" id="" style="border-radius: 10px;" name="RL" required>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="contract_duration">Carry Forward</label>
                                        <input type="text" class="form-control" id="" style="border-radius: 10px;" name="" required>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-12">
                                        <label for="">Attachment</label>
                                        <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="customFile" name="attachment">
                                            <label class="custom-file-label" for="customFile">Choose file</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- You can add more fields as needed -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Submit Renewal</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


{{-- Table index end --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const joinedAtField = document.getElementById('employee_joined_at');
    const lengthOfServiceField = document.getElementById('length_of_services');

    if (joinedAtField && lengthOfServiceField) {
        const joinedAtText = joinedAtField.textContent.trim();

        // Ensure the joinedAtText is a valid date
        if (joinedAtText && joinedAtText !== 'N/A') {
            const joinedAt = new Date(joinedAtText);
            const today = new Date();

            // Calculate the difference
            let years = today.getFullYear() - joinedAt.getFullYear();
            let months = today.getMonth() - joinedAt.getMonth();
            let days = today.getDate() - joinedAt.getDate();

            // Adjust for negative months/days
            if (months < 0) {
                years -= 1;
                months += 12;
            }
            if (days < 0) {
                const previousMonth = new Date(today.getFullYear(), today.getMonth(), 0);
                months -= 1;
                days += previousMonth.getDate();
            }

            // Display the length of service
            lengthOfServiceField.textContent = `${years} Years, ${months} Months, ${days} Days`;
        } else {
            lengthOfServiceField.textContent = 'N/A';
        }
    }
});

</script>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap DatePicker JS -->
    <script src="https://cdn.jsdelivr.net/npm/bs5-datepicker@1.2.0/dist/js/bootstrap-datepicker.min.js"></script>
@endsection