@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center mb-3">


            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                            data-bs-target="#home-tab-pane" type="button" role="tab"
                            aria-controls="home-tab-pane" aria-selected="true">Company Details
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab"
                            data-bs-target="#profile-tab-pane" type="button" role="tab"
                            aria-controls="profile-tab-pane" aria-selected="false">Shipping Info
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab"
                            data-bs-target="#contact-tab-pane" type="button" role="tab"
                            aria-controls="contact-tab-pane" aria-selected="false">Packing Slips
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab"
                            data-bs-target="#contact-tab-pane" type="button" role="tab"
                            aria-controls="contact-tab-pane" aria-selected="false">Contacts
                    </button>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel"
                        aria-labelledby="home-tab" tabindex="0">1
                </div>
                <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel"
                        aria-labelledby="profile-tab" tabindex="0">2
                </div>
                <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel"
                        aria-labelledby="contact-tab" tabindex="0">3
                </div>
                <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel"
                        aria-labelledby="disabled-tab" tabindex="0">4
                </div>
            </div>


            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col">
                                <div class="d-flex flex-row-reverse gap-2">
                                    <button class="btn btn-sm btn-danger" title="Remove a customer..."
                                            data-bs-toggle="modal" data-bs-target="#deleteCustomerModal">
                                        <x-bi-trash-fill/>
                                    </button>

                                    <button class="btn btn-sm btn-outline-secondary"
                                            title="Edit customer..."
                                            data-bs-toggle="modal"
                                            data-bs-target="#editCustomerModal">
                                        <x-bi-pencil-fill/>
                                    </button>

                                    <div class="mx-auto"></div>
                                    <div> Details</div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="card-body">
                        {{--                        {{ $customer->company_name }} <br>--}}
                        {{--                        {{ $customer->shipping_address }} <br>--}}

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

        <div class="row justify-content-center mb-3">
            <div class="col-md-8">
                <div class="card">

                    <div class="card-header">
                        <div class="row">
                            <div class="col">
                                <div class="d-flex flex-row-reverse gap-2">
                                    <button class="btn btn-sm btn-danger" title="Remove a contact..."
                                            data-bs-toggle="modal" data-bs-target="#deleteContactModal">
                                        <x-bi-trash-fill/>
                                    </button>


                                    <button class="btn btn-sm btn-primary" href="{{route('contacts.create')}}"
                                            title="Create new contact..." data-bs-toggle="modal"
                                            data-bs-target="#createContactModal">
                                        <x-bi-person-plus-fill/>
                                    </button>

                                    <div class="mx-auto"></div>
                                    <div> Contacts</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-12">

                                @if(sizeof($contacts) !== 0)

                                    <table class="table table-hover">
                                        <thead>
                                        <tr class="border-bottom border-black">
                                            <th scope="col">Name</th>
                                            <th scope="col">Email</th>
                                            <th scope="col">Phone</th>
                                            <th scope="col">Notes</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach ($contacts as $contact)
                                            <tr>
                                                <td>{{ $contact->first_name . ' ' . $contact->last_name }}</td>
                                                <td>{{ $contact->email }}</td>
                                                <td>{{ $contact->phone }}</td>
                                                <td>{{ $contact->notes }}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>

                                @else
                                    No contact information registered for this customer.
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Customer Modal -->
    @include('customers.edit-modal')

    <!-- Delete Customer Modal -->
    @include('customers.delete-single-modal')

    <!-- Create Contact Modal -->
    @include('contacts.create-modal')

    <!-- Delete Contact Modal -->
    @include('contacts.delete-modal')
@endsection