@extends('layouts.app')

@section('header')
    <div class="container-fluid bg-light pt-3">

        <!-- Customer company name row -->
        <div class="row justify-content-center pb-2">
            <div class="col-3"></div>
            <div class="col">
                <h2>{{$customer->company_name}}</h2>
            </div>
        </div>

        <!-- Tabs row -->
        <div class="row justify-content-center">
            <div class="col-3 border-bottom"></div>
            <div class="col-6 p-0">

                <ul class="nav nav-fill nav-tabs" id="customer-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link link-dark {{$tab == 'details' ? 'active' : ''}}" id="details-tab"
                                href="{{route('customers.show', [$customer, 'tab'=>'details'])}}" type="button"
                                role="tab"
                                aria-controls="details" aria-selected="{{$tab == 'details' ? 'true' : 'false'}}">
                            <x-bi-list-ul/>
                            Overview
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link link-dark {{$tab == 'shipping' ? 'active' : ''}}" id="shipping-tab"
                                href="{{route('customers.show', [$customer, 'tab'=>'shipping'])}}" type="button"
                                role="tab"
                                aria-controls="shipping" aria-selected="{{$tab == 'shipping' ? 'true' : 'false'}}">
                            <x-bi-box-fill/>
                            Shipping Info
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link link-dark {{$tab == 'packing' ? 'active' : ''}}" id="packing-tab"
                                href="{{route('customers.show', [$customer, 'tab'=>'packing'])}}" type="button"
                                role="tab"
                                aria-controls="packing" aria-selected="{{$tab == 'packing' ? 'true' : 'false'}}">
                            <x-bi-card-text/>
                            Packing Slips
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link link-dark {{$tab == 'contacts' ? 'active' : ''}}" id="contacts-tab"
                                href="{{route('customers.show', [$customer, 'tab'=>'contacts'])}}" type="button"
                                role="tab"
                                aria-controls="contacts" aria-selected="{{$tab == 'contacts' ? 'true' : 'false'}}">
                            <x-bi-people-fill/>
                            Contacts
                        </a>
                    </li>
                </ul>

            </div>
            <div class="col border-bottom"></div>
        </div>

    </div>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center my-3">
            <div class="tab-content">

                <!-- Overview tab -->
                @include('partials.customers.show.overview-tab')

                <!-- Shipping Info tab -->
                @include('partials.customers.show.shipping-info-tab')

                <!-- Packing Slips tab -->
                @include('partials.customers.show.packing-slips-tab')

                <!-- Contacts tab -->
                @include('partials.customers.show.contacts-tab')

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

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

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

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

    <!-- Create Packing Slip Modal -->
    @include('partials.packing-slips.create-modal')

    <!-- Create Shipping Entry Modal -->
    @include('partials.shipping-entries.create-modal')


    @if($errors->any())
        {{ implode('', $errors->all('<div>:message</div>')) }}
    @endif

@endsection