@extends('layouts.master')

@section('content')

    <div class="container-xxl">

        <x-breadcrumb model="Partners"></x-breadcrumb>

        <div class="card">

            <div class="card-body">
  <div class="d-flex justify-content-end mb-3">
                <a href="{{ route('admin.partners.export') }}" class="btn btn-primary">
                    Export Partners
                </a>
            </div>
                <div class="table-responsive no-wrap">
                    <table class="table" id="datatable">

                        <x-table.header :headers="['name', 'email', 'Received on',  'visibility', 'Actions']"/>

                        <tbody>
                        @forelse ($partner as $contact)
                            <tr>
                                <td>{{$loop->iteration}}</td>
                                <x-table.td>{{$contact->name}}</x-table.td>
                                <x-table.td>{{$contact->email}}</x-table.td>
                                <x-table.td>{{ $contact->created_at->toDateString() }}</x-table.td>
                                <x-table.td>{{$contact->seen ? 'viewed' : 'not viewed'}}</x-table.td>
                                <td style="width:150px">
                                    <div class="actions d-flex">
                                        <a href="#" class="btn btn-sm btn-default" title="View" data-bs-toggle="modal" data-bs-target="#viewContact{{$contact->id}}" data-contact-id="{{$contact->id}}">
                                            <i class='bx bx-show-alt'></i>
                                        </a>
                                        <x-table.delete_btn route-destroy="{{route('admin.partners.destroy', $contact->id ) }}"/>
                                    </div>
                                </td>
                            </tr>

                            <div class="modal fade" id="viewContact{{$contact->id}}" tabindex="-1" style="display: none;" aria-hidden="true">
                                <div class="modal-dialog modal-xl" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Partner Detail</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body"></div>
                                    </div>
                                </div>
                            </div>
                        @empty
                        @endforelse

                        </tbody>

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

@endsection

@push('custom_js')
    <script>
        $(document).on('show.bs.modal', '.modal', function (event) {
            let button = $(event.relatedTarget);
            let contactId = button.data('contact-id');
            let modal = $(this);

            let url = "{{route('admin.partners.show', ':id')}}".replace(':id', contactId);

            $.ajax({
                url: url,
                type: 'get',
                dataType: 'html',
                success: function (response) {
                    modal.find('.modal-body').html(response);
                }
            });
        });
    </script>

    @include('_helpers.datatable')
    @include('_helpers.swal_delete')
@endpush