@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></h2>
            </div>
        </div>

        <!-- Tabs row -->
        <div class="row justify-content-center mb-3">
            <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">
                        <button class="nav-link link-dark {{$tab == null ? 'active' : ''}}" id="details-tab"
                                data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab"
                                aria-controls="details" aria-selected="{{$tab == null ? 'true' : 'false'}}">
                            <x-bi-list-ul/>
                            Customers
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link link-dark {{$tab == 'shipping' ? 'active' : ''}}" id="shipping-tab"
                                data-bs-toggle="tab" data-bs-target="#shipping" type="button" role="tab"
                                aria-controls="shipping" aria-selected="{{$tab == 'shipping' ? 'true' : 'false'}}">
                            <x-bi-box-fill/>
                            Orders
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link link-dark {{$tab == 'packing' ? 'active' : ''}}" id="packing-tab"
                                data-bs-toggle="tab" data-bs-target="#packing" type="button" role="tab"
                                aria-controls="packing" aria-selected="{{$tab == 'packing' ? 'true' : 'false'}}">
                            <x-bi-card-text/>
                            Packing Slips
                        </button>
                    </li>
                    {{--                    <li class="nav-item" role="presentation">--}}
                    {{--                        <button class="nav-link link-dark {{$tab == 'contacts' ? 'active' : ''}}" id="contacts-tab"--}}
                    {{--                                data-bs-toggle="tab" data-bs-target="#contacts" type="button" role="tab"--}}
                    {{--                                aria-controls="contacts" aria-selected="{{$tab == 'contacts' ? 'true' : 'false'}}">--}}
                    {{--                            <x-bi-people-fill/>--}}
                    {{--                            Contacts--}}
                    {{--                        </button>--}}
                    {{--                    </li>--}}
                </ul>

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

    </div>
@endsection()

@section('content')
    <div class="container">
        <div class="row justify-content-center mb-3">
            <div class="col">
                <div class="d-flex flex-row gap-2">
                    <button class="btn btn-primary" title="Create new customer..."
                            data-bs-toggle="modal"
                            data-bs-target="#createCustomerModal">
                        <x-bi-person-plus-fill/>
                        Create entry
                    </button>

                    <div class="vr"></div>

                    <div class="d-inline-flex gap-2">
                        <input type="text" class="form-control" placeholder="Search..."
                                name="" id="">
                        <button class="btn btn-outline-primary">
                            <x-bi-search/>
                        </button>
                    </div>

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

                    <button class="btn btn-danger" title="Delete customer..."
                            data-bs-toggle="modal"
                            data-bs-target="#deleteCustomerModal">
                        <x-bi-trash-fill/>
                        Delete entry
                    </button>
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col">
                @if(sizeof($customers) !== 0)
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr class="border-bottom border-black">
                            <th scope="col">Company Name</th>
                            <th scope="col">Internal Name</th>
                            <th scope="col">Shipping Address</th>
                            <th scope="col">Billing Address</th>
                            <th scope="col">Phone</th>
                            <th scope="col">View</th>
                        </tr>
                        </thead>

                        <tbody>

                        @foreach($customers as $customer)
                            <tr>
                                <td> {{$customer->company_name}} </td>
                                <td><code>{{$customer->internal_name}}</code></td>
                                <td> {{$customer->shipping_address}} </td>
                                <td> {{$customer->billing_address}} </td>
                                <td class="text-nowrap"> {{$customer->phone}} </td>
                                <td class="align-top">
                                    <a class="btn btn-sm btn-outline-secondary"
                                            href="{{route('customers.show', [$customer->id, 'tab'=>'details'])}}">
                                        <x-bi-arrow-right/>
                                    </a>
                                </td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>

                @else()
                    No customer data.
                @endif
            </div>
        </div>
    </div>

    <!-- Create Customer Modal -->
    @include('partials.customers.create-modal')

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

@endsection