@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">Contacts from landing pages</p>
                <div class=" d-flex justify-end">
                        {{-- @if(Request::path() == "contact")
                            <a class="btn btn-primary" href="{{ url('/trash-contact') }}"><i class="fa fa-trash"></i> Papelera</a>
                        @else
                            <a class="btn btn-primary" href="{{ url('/contact') }}"><i class="fas fa-arrow-circle-left"></i> Activos</a>
                        @endif --}}
                </div>
                </br>
                <div class="row">
                    <div class="col-12 d-flex justify-content-center align-items-end">
                        <!-- filtros select con la distintas landings -->
                        <div class="col-4 d-flex ml-auto mb-2 justify-content-center">
                            <div class="col-6 d-flex justify-content-center">
                                <label class="ml-auto pt-2">Filter by landing</label>
                            </div>
                            <div class="col-6 d-flex justify-content-center align-items-center">
                                <select class="form-control w-100 h-100" name="landing" id="landing">
                                    <option value="">All</option>
                                    @foreach($landings as $landing)
                                        <option value="{{ $landing->landing }}">{{ $landing->landing }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="campaing-contacts-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>Landing</th>
                                        <th>Date</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 class="text-truncate">{{ $contact->email }}</td>
                                            <td>{{ $contact->phone }}</td>
                                            <td class="switch-truncate text-truncate"  data-toggle="tooltip" data-placement="bottom" title="Click to expand" style="max-width: 150px;">{{ $contact->message }}</td>
                                            <td>{{ $contact->source }}</td>
                                            <td>{{ date('d-M-y', strtotime($contact->created_at)) }}</td>
                                            <td style="display:flex;column-gap:5px">
                                                <!-- visitar url-->
                                                <a href="{{ $contact->landing_url }}" target="_bank" class="btn btn-primary btn-sm"><i class="fas fa-eye"></i></a>
                                                <!-- eliminar -->
                                                <form action="{{ url('/campaign-delete-contact') }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                                                    <input type="hidden" name="id" value="{{ $contact->id }}">
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {{-- <div style="display:flex;justify-content:center">
                                {{ $contacts->links() }}
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

    $('.switch-truncate').css('cursor', 'pointer');
    $('.switch-truncate').click(function() {
        $(this).toggleClass('text-truncate');
        $(this).hasClass('text-truncate') ? $(this).tooltip('show') : $(this).tooltip('hide');
    });

    $("#landing").change(function() {
        let landing = $(this).val().toLowerCase();
        let tr = $('#campaing-contacts-table tbody tr');
        tr.each(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(landing) > -1)
        });
    });


</script>

@endsection