@extends('layout.mainlayout')
@section('content')
    <div class="page-wrapper cardhead">
        <div class="content container-fluid">

            @component('components.breadcrumb')
                @slot('title')
                    Overseas Resource List
                @endslot
            @endcomponent

            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">All Overseas Resource Data</h4>
                            <p class="card-text">
                                List of all overseas employees/resources. You can edit, view or delete any record. Please
                                proceed carefully.
                            </p>
                        </div>
                        <div class="card-body">

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

                            <div class="table-responsive custom-table">
                                <table class="table" id="OverseasResourceTable">
                                    <thead>
                                        <tr>

                                            <th>Full Name</th>
                                            <th>Professional Email</th>
                                            <th>Phone</th>
                                            <th>Region</th>
                                            <th>Country</th>
                                            <th>City</th>
                                            <th>Team</th>
                                            <th>Type</th>
                                            <th>Project</th>
                                            <th>DOJ</th>
                                            <th>CED</th>
                                            <th>Per Day Cost</th>
                                            <th>Resource Type</th>
                                            <th>Status</th>

                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($allOverseasResources as $OverseasResource)
                                            <tr>
                                                <td>{{ $OverseasResource->first_name }} {{ $OverseasResource->last_name }}
                                                </td>
                                                <td>{{ $OverseasResource->professional_email }}</td>
                                                <td>{{ $OverseasResource->phone }}</td>
                                                <td>{{ optional($OverseasResource->regionDetails)->name }}</td>
                                                <td>{{ optional($OverseasResource->countryDetails)->name }}</td>
                                                <td>{{ $OverseasResource->city ?? '' }}</td>
                                                <td>{{ optional($OverseasResource->teamDetails)->name }}</td>
                                                <td>{{ optional($OverseasResource->resourceJobStatusDetails)->name }}</td>
                                                <td>{{ optional($OverseasResource->projectDetails)->name }}</td>
                                                <td>{{ $OverseasResource->doj ? \Carbon\Carbon::parse($OverseasResource->doj)->format('Y-m-d') : '' }}
                                                </td>
                                                <td>{{ $OverseasResource->ced ? \Carbon\Carbon::parse($OverseasResource->ced)->format('Y-m-d') : '' }}
                                                </td>
                                                <td>{{ $OverseasResource->per_day_cost }}</td>
                                                <td>{{ optional($OverseasResource->resourceTypeDetails)->name }}</td>
                                                <td>{{ optional($OverseasResource->resourceStatusDetails)->name }}</td>



                                                <td class="d-flex gap-1 flex-wrap">

                                                    @can('update-overseas-resource')
                                                        <a href="{{ route('edit-overseas-resource', $OverseasResource->id) }}"
                                                            class="btn btn-sm btn-success">
                                                            Edit
                                                        </a>
                                                    @endcan

                                                    @can('overseas-resource-details')
                                                        <a href="{{ route('overseas-resource-details', $OverseasResource->id) }}"
                                                            class="btn btn-sm btn-info">
                                                            View Profile
                                                        </a>
                                                    @endcan

                                                    @can('overseas-contract-create')
                                                        <button type="button" class="btn btn-sm btn-warning"
                                                            data-modal-src="{{ route('overseas.contract-extension.modal', $OverseasResource->id) }}"
                                                            data-bs-toggle="modal" data-bs-target="#contractExtensionModal">
                                                            Contract Extension
                                                        </button>
                                                    @endcan

                                                    @can('delete-overseas-resource')
                                                        <a href="{{ route('delete-overseas-resource', $OverseasResource->id) }}"
                                                            class="btn btn-sm btn-danger"
                                                            onclick="return confirm('Are you sure you want to delete this resource?')">
                                                            Delete
                                                        </a>
                                                    @endcan

                                                </td>

                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    {{-- Contract Extension Modal Shell --}}
    <div class="modal fade" id="contractExtensionModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" id="contractExtensionModalContent">
                <div class="p-4 text-center">Loading...</div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        initDataTableWithFilters('OverseasResourceTable');
    </script>

    <script>
        document.addEventListener('click', function(e) {
            const btn = e.target.closest('[data-modal-src]');
            if (!btn) return;

            const url = btn.getAttribute('data-modal-src');
            const target = document.getElementById('contractExtensionModalContent');

            if (!url || !target) return;

            target.innerHTML = '<div class="p-4 text-center">Loading...</div>';

            fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(r => r.text())
                .then(html => {
                    target.innerHTML = html;
                })
                .catch(() => {
                    target.innerHTML =
                        '<div class="p-4 text-danger">Failed to load contract extension form.</div>';
                });
        });
    </script>
@endpush