@extends('layouts.app')
@section('title', trans('contracts.title'))

@section('content')
    @php $auth = request()->user(); @endphp
    <div class="content">
        <x-content.header title="{{ __('contracts.title') }}" >
            <x-slot:headerRight>
                @can('create', App\Models\Contract::class)
                    <a href="{{route('users.contracts.create', $user->id)}}" class="btn-secondary-base"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
                @endcan
            </x-slot:headerRight>
        </x-content.header>
        <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
            <thead>
                <tr>

                    <th>{{trans('forms.lbl_employee')}}</th>
                    <th >{{trans('forms.lbl_start_date')}}</th>
                    <th>{{trans('forms.lbl_end_date')}}</th>
                    <th>{{trans('forms.lbl_description')}}</th>
                    <th>{{trans('forms.lbl_status')}}</th>
                    <th>{{trans('forms.lbl_contract_agreement')}}</th>
                    @if($auth->hasAnyPermission(['access settings']))
                        <th>{{trans('title.action')}}</th>
                    @endif
                </tr>
            </thead>
        </table>
	</div>
    <div class="modal fade" id="contract-view" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">{{ __('contracts.title') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aia-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body overflow-x-auto">
                    <table id="contractDetails" class="table-custom-striped w-full" style="width: 100%;">
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-tertiary-base" data-dismiss="modal">{{ trans('menu.btn-close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer-script')

	<script type="text/javascript">
        $.fn.modal.Constructor.prototype._enforceFocus = function() {};

        PDDataTable({
            url: "{{ route('users.contracts.index', $user->id) }}",
            columns:[
                { data: 'user.name', name: 'name'},
				{ data: 'start_date', name: 'start_date' },
				{ data: 'end_date', name: 'end_date' },
				{ data: 'description', name: 'description' },
                { data: 'active', name: 'active' },
				{ data: 'assets', name: 'assets' },
                @if($auth->hasAnyPermission(['access settings']))
                    { data: 'action', name: 'action', orderable: false, searchable : false, className : 'text-right' }
                @endif
            ],
            order : [0, 'asc']
        });


        $("div.toolbar").on("click", ".dropdown-item", function(){
            $("div.toolbar").find(".dropdown-item").removeClass('active');
            $(this).addClass("active");
            PDTable.page.len( $(this).text() ).draw();
        })

        $(document).on('click', '#view-contract', function () {
            const contractId = $(this).data('contract-id');

            if (!contractId) {
                alert('Invalid contract ID.');
                return;
            }

            // Clear previous data
            $('#contractDetails').empty();

            // Show loading indicator
            $('#contractDetails').html('<p class="text-gray-500">Loading contract details...</p>');

            // Fetch contract details via AJAX
            $.ajax({
                url: `/get-historical-contracts/${contractId}`, // Update with your actual API route
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    if (response.success && response.contracts.length > 0) {
                        displayContracts(response.contracts, response.contractFormFields);
                    } else {
                        $('#contractDetails').html('<p class="text-red-500">No contracts found.</p>');
                    }
                },
                error: function () {
                    $('#contractDetails').html('<p class="text-red-500">Failed to fetch contract details.</p>');
                }
            });

            $('#contract-view').modal('show');
        });

        // Function to display multiple contracts in a table
        function displayContracts(contractsData, contractFormFields) {
            
            let tableHtml = '<thead><tr><th class="border p-2">#</th>';
            const translations = @json(__('forms'));
            contractFormFields.forEach(key => {
                let keyTrans = translations[key] !== undefined ? translations[key] : 'forms.' + key;
                tableHtml += `<th class="border p-2 text-center">${keyTrans}</th>`;
            });
            tableHtml += '</tr></thead>';

            tableHtml += '<tbody>';
            contractsData.forEach((contract, index) => {
                tableHtml += `<tr id="contract-${contract['id']}" class="text-center ${contract['as_of_date'] ? '!bg-custom-orange-50 hover:!bg-custom-orange-100':'hover:!bg-custom-gray-100'}"><td class="border p-2">${index + 1}</td>`;
                contractFormFields.forEach(key => {
                    let value = contract[key];
                    let keyTrans = translations[key] !== undefined ? translations[key] : 'forms.' + key;
                    let formattedValue = (key in contract) ? value || '' : '-';

                    if(key == 'workinghours'){
                        formattedValue = contract["workinghours_html"];
                    }
                    if(['yes', 'no'].includes(formattedValue)){
                        formattedValue = translations['lbl_' + formattedValue];
                    }

                    tableHtml += `<td class="border p-2 !text-center relative group 
                                ${ ((key in contract) && !['relation', 'contract_type_name', 'applied_at', 'created_by_user', 'created_at_parsed', 'action'].includes(key)) ? 'bg-custom-orange-100' : '' }">
                                ${formattedValue}
                                
                                <!-- Key Tooltip (Hidden by Default, Shown on Hover) -->
                                <span class="td-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 text-custom-orange-600 text-xs bg-custom-orange-50 rounded p-1 w-32 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                                    ${keyTrans}
                                </span>
                            </td>`;
                });

                tableHtml += '</tr>';
            });

            tableHtml += '</tbody>';

            $('#contractDetails').html(tableHtml);
        }
        
        $(document).on("click", "#contractDetails td", function (event) {
            let tooltip = $(this).find(".td-tooltip");
            $(".td-tooltip").addClass("opacity-0");
            tooltip.removeClass("opacity-0");
            setTimeout(() => {
                tooltip.addClass("opacity-0");
            }, 2000);
        });

    </script>

@endsection