@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <p class="card-title">Search Contacts Table</p>

                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="display expandable-table" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Company</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Message</th>
                                        <th>Language</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($contacts as $contact)

                                            <tr>
                                                <td> {{ $contact->id }} </td>
                                                <td style="max-width: 150px;">{{ $contact->fullname }}</td>
                                                <td>{{ $contact->company }}</td>
                                                <td>{{ $contact->email }}</td>
                                                <td>{{ $contact->phone }}</td>
                                                <td style="max-width: 150px;">{{ $contact->message }}</td>
                                                <td>{{ $contact->english == 1 ? "Español" : "Inglés" }}</td>
                                                <!-- <td>{{ $contact->start_project == 1 ? "Si" : "No"}}</td>
                                                <td>{{ $contact->work_with_us == 1 ? "Si" : "No"}}</td> -->
                                                <td>{{ $contact->status == 1 ? "Listo" : "Pendiente" }}</td>
                                                <td style="display:flex;column-gap:5px">
                                                    <form action="{{ url('/contact/change-status') }}" method="POST">
                                                        @csrf
                                                        @method('PUT')
                                                        <input type="hidden" value="{{ $contact->id }}" name="id" style="display: none;">
                                                        <button class="btn btn-sm {{ $contact->status == 1 ? 'btn-danger' : 'btn-success' }}"><i class="fa {{ $contact->status == 1 ? 'fa-xmark' : 'fa-check' }}"></i></button>
                                                    </form>
                                                    <form action="{{ url('/contact/delete-contact') }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <input type="hidden" value="{{ $contact->id }}" name="id" style="display: none;">
                                                        <button class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></button>
                                                    </form>

                                                </td>
                                            </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div style="display:flex;justify-content:center">
                                {{ $contacts->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection