@forelse ($protinidhis as $info)
    <tr>
        <td>{{ $loop->iteration }}</td>
        <td>
            <img height="40px" width="40px"
                src="{{ isset($info->image) ? asset(@$info->image) : 'http://via.placeholder.com/80x80' }}"
                alt="">
        </td>
        <td>
            <div class="d-flex align-items-center lh-1">
                <div>
                    <span class="d-block fw-semibold mb-1">{{ $info->first_name .' '. $info->last_name}}</span>
                    <span class="text-muted fs-12">{{ $info->email }}</span>
                </div>
            </div>
        </td>
        <td>
            {{ $info->phone }}
        </td>
        <td>
            <button data-id="{{ $info->id }}"
                class="btn-sm {{ $info->status == 1 ? 'btn-success' : 'btn-danger' }} status">{{ $info->status == 1 ? 'Active' : 'in-Active' }}</button>
        </td>
        <td>{{ @$info->division_name }}</td>
        <td>{{ @$info->city_name }}</td>
        <td>{{ @$info->upazila_name }}</td>
        <td>{{ @$info->area ?? '' }}</td>
        <td>
            <!-- Large modal -->

            <div class="modal fade bd-example-modal-lg-{{ $info->id }}" tabindex="-1" role="dialog"
                aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">

                        <div class="card card-style1 border-0">
                            <div class="card-body p-1-9 p-sm-2-3 p-md-6 p-lg-7">
                                <div class="row ">
                                    <!-- Profile Image -->
                                    <div class="col-lg-5 mb-4 mb-lg-0">
                                        <img src="{{ asset($info->image ?? 'default-avatar.png') }}"
                                            style="max-width: 260px" alt="Profile Image">
                                    </div>
                                    <!-- User Info -->
                                    <div class="col-lg-7 px-xl-10">
                                        <div
                                            class="bg-secondary d-lg-inline-block py-1-9 px-1-9 px-sm-6 mb-1-9 rounded">
                                            <h3 class="h2 text-white mb-0">{{ $info->name ?? '' }}</h3>
                                            <span class="text-primary">{{ $info->designation ?? '' }}</span>
                                        </div>
                                        <ul class="list-unstyled mb-1-9">
                                            <li class="mb-2 mb-xl-3 display-28">
                                                <span
                                                    class="display-26 text-secondary me-2 font-weight-600">Email:</span>
                                                {{ $info->email ?? '' }}
                                            </li>
                                            <li class="mb-2 mb-xl-3 display-28">
                                                <span
                                                    class="display-26 text-secondary me-2 font-weight-600">Phone:</span>
                                                {{ $info->phone ?? '' }}
                                            </li>

                                            <li class="mb-2 mb-xl-3 display-28">
                                                <span class="display-26 text-secondary me-2 font-weight-600">NID:</span>
                                                {{ $info->nid ?? '' }}
                                            </li>
                                            <li class="mb-2 mb-xl-3 display-28">
                                                <span
                                                    class="display-26 text-secondary me-2 font-weight-600">Division:</span>
                                                {{ $info->division_name ?? '' }}
                                            </li>

                                            <li class="mb-2 mb-xl-3 display-28">
                                                <span
                                                    class="display-26 text-secondary me-2 font-weight-600">Zilla:</span>
                                                {{ $info->city_name ?? '' }}
                                            </li>

                                            <li class="mb-2 mb-xl-3 display-28">
                                                <span
                                                    class="display-26 text-secondary me-2 font-weight-600">Upazila:</span>
                                                {{ $info->upazila_name ?? '' }}
                                            </li>

                                            <li class="mb-2 mb-xl-3 display-28">
                                                <span
                                                    class="display-26 text-secondary me-2 font-weight-600">Area:</span>
                                                {{ $info->area ?? '' }}
                                            </li>

                                            <li class="mb-2 mb-xl-3 display-28">
                                                <div
                                                    style="max-width: 100%; word-wrap: break-word; overflow-wrap: break-word;">
                                                    <span
                                                        class="display-26 text-secondary me-2 font-weight-600">Address:</span>
                                                    <span>{{ $info->address }}</span>
                                                </div>
                                            </li>

                                            </li>
                                            <li class="display-28">
                                                <span class="display-26 text-secondary me-2 font-weight-600">Joining
                                                    Date:</span>
                                                {{ \Carbon\Carbon::parse($info->joining_date)->format('d M, Y') }}
                                            </li>

                                            <li class="display-28">
                                                <span class="display-26 text-secondary me-2 font-weight-600">Expired
                                                    Date:</span>
                                                {{ \Carbon\Carbon::parse($info->agrement)->format('d M, Y') }}
                                            </li>

                                            <li class="display-28">
                                                <span class="display-26 text-secondary me-2 font-weight-600">CV:</span>
                                                <a target="_blank" href="{{ $info->cv ?? '#' }}">CV Downlaod</a>
                                            </li>
                                        </ul>
                                        <!-- Social Links -->

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



            <a type="button" class="btn btn-sm btn-icon btn-info" data-toggle="modal"
                data-target=".bd-example-modal-lg-{{ $info->id }}"> <i class="fa fa-eye"></i></a>
            {{-- {{ route('prothinidhis.edit', $info->id) }} --}}
            <a aria-label="anchor" href="{{ route('prothinidhis.edit', $info->id) }}"
                class="btn btn-sm btn-icon btn-success">
                <i class="fa fa-edit"></i></a>
                <form action="{{ route('prothinidhis.destroy', $info->id) }}" method="POST" onsubmit="return confirmDelete(event)" style="display: inline;">
                    @csrf
                    @method('DELETE') <!-- Laravel directive to define the DELETE method -->
                    <button type="submit" class="btn btn-icon btn-sm btn-danger">
                        <i class="fa fa-trash"></i>
                    </button>
                </form>
        </td>
    </tr>
@empty
@endforelse

<script>
    // JavaScript function to handle confirmation
    function confirmDelete(event) {
        // Show confirmation dialog
        const userConfirmed = confirm("Are you sure you want to delete this?");

        if (!userConfirmed) {
            // Prevent the form from being submitted
            event.preventDefault();
            return false;
        }
        // Allow the form to be submitted if the user confirms
        return true;
    }
</script>