@extends('layout')

@section('h4-page', __('Customer'))
<style>
    p {
        margin-bottom: 5px !important;
        margin-top: 5px !important;
    }
</style>

@section('contents')
    <div class="row layout-top-spacing">
        <div class="col-12 mb-md-0 mb-4">
            <div class="mb-3">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">x</button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 text-white">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            {{-- info & summery --}}
            <div class="container-xxl">
                <div class="row align-items-stretch">
                    <div class="col-12 col-md-8  ps-0">
                        <div class="d-flex justify-content-between div-card h-100">
                            <div class="d-flex">
                                <div class="me-2 d-flex align-items-center justify-content-center">
                                    <img src="{{ @$main->pathImageAsset() }}" alt="logo"
                                        style="width: auto; height: 100px;" class="rounded-circle">
                                </div>
                                <div class="m-auto">
                                    <p><span class="fw-bold">{{ __('Account Name') }} :</span> {{ @$main->fullname() ?? '-' }}</p>
                                    <p><span class="fw-bold">{{ __('Date of Birth') }} :</span>
                                        {{ @$main->birthday ? date('d-m-Y', strtotime(@$main->birthday ?? '-')) : '' }}</p>
                                    <p><span class="fw-bold">{{ __('Tel') }} :</span> {{ @$main->tel ?? '-' }}</p>
                                    <p><span class="fw-bold">{{ __('Email') }} :</span> {{ @$main->email ?? '-' }}</p>
                                    <p><span class="fw-bold">{{ __('Create Date') }} :</span>
                                        {{ date('d-m-Y', strtotime(@$main->created_at ?? '-')) }}
                                    </p>
                                </div> 
                            </div>
                            <div>
                                <button class="btn btn-address" data-bs-toggle="offcanvas" data-bs-target="#addressOverlay"
                                    aria-controls="addressOverlay">{{ __('Address') }}</button>
                            </div>

                            <!-- Overlay ด้านข้าง -->
                            <div class="offcanvas offcanvas-end" tabindex="-1" id="addressOverlay"
                                aria-labelledby="addressOverlayLabel">
                                <div class="offcanvas-header border-bottom-address  pb-1">
                                    <h5 class="offcanvas-title " id="addressOverlayLabel">{{ __('Address') }}</h5>
                                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                                        aria-label="Close"></button>
                                </div>
                                <div class="offcanvas-body">
                                    @foreach (@$main->address as $key => $item)
                                    <div class="border-bottom-address  pb-1">
                                        <p><span class="fw-bold"> {{ @$item->fullname }}</span> |
                                            <span>{{ @$item->phone }}</span></p>
                                        <p class="text-address text-wrap">{{ @$item->fullAddress() }}</p>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4 ps-0">
                        <div class="d-flex gap-2 h-100">
                            <div class="div-card p-3  w-50 h-100">
                                <img src="{{ asset('img/Icon-total.png') }}" alt="logo"
                                    style="width: 50px; height: 50px;" class="rounded-circle">
                                <h3 class="text-total-header mt-2">{{ number_format(@$count) }}</h3>
                                <p class="text-total">{{ __('Total Order') }}</p>
                            </div>
                            <div class="div-card p-3  w-50 h-100">
                                <img src="{{ asset('img/Icon-total-sale.png') }}" alt="logo"
                                    style="width: 50px; height: 50px;" class="rounded-circle">
                                <h3 class="text-total-header mt-2">฿ {{ number_format(@$sum, 2) }}</h3>
                                <p class="text-total">{{ __('Total Sale') }}</p>
                            </div>
                        </div>

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



            {{-- search --}}
            <div class="card mb-3 mt-3">
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <div class="" style="position: relative">
                                    <label for="" class="form-label">{{ __('Search') }}</label>
                                    <input class="form-control" type="search" id="searchInput"
                                        placeholder="{{ __('Search') }}" value="{{ request()?->search ?? '' }}">
                                    <div style="position: absolute; top: 1rem; right: 1rem; cursor: pointer;">
                                        {{-- <span class="input-group-append" onclick="searchInput()">
                                                <i class="fa fa-search"></i>
                                            </span> --}}
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="status_booking">{{ __('SelectStatus') }}</label>
                                <select class="form-select" aria-label="Default select example" id="status_booking"
                                    name="status_booking" onchange="searchInput()">
                                    <option value="">ALL</option>
                                    <option value="WAIT_PAYMENT" @if (request()?->status_booking == 'WAIT_PAYMENT') selected @endif>
                                        WAIT_PAYMENT</option>
                                    <option value="PENDING" @if (request()?->status_booking == 'PENDING') selected @endif>PENDING
                                    </option>
                                    <option value="PICKUP" @if (request()?->status_booking == 'PICKUP') selected @endif>PICKUP</option>
                                    <option value="PROCESSING" @if (request()?->status_booking == 'PROCESSING') selected @endif>PROCESSING
                                    </option>
                                    <option value="SHIPPING" @if (request()?->status_booking == 'SHIPPING') selected @endif>SHIPPING
                                    </option>
                                    <option value="DELIVERY" @if (request()?->status_booking == 'DELIVERY') selected @endif>DELIVERY
                                    </option>
                                    <option value="SUCCESS" @if (request()?->status_booking == 'SUCCESS') selected @endif>SUCCESS
                                    </option>
                                    <option value="CANCEL" @if (request()?->status_booking == 'CANCEL') selected @endif>CANCEL</option>
                                </select>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            {{-- Order --}}
            <div class="table-responsive h-100">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('OrderNo') }}</th>
                            <th>{{ __('OrderDate') }}</th>
                            <th>{{ __('RiderName') }}</th>
                            <th>{{ __('Priority') }}</th>
                            <th class="text-center">{{ __('Status') }}</th>
                            <th class="text-end">{{ __('Total') }}</th>
                            <th class="text-center">{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse (@$orders as $key => $item)
                            <tr>
                                <td class="text-center">
                                    {{ $orders->currentPage() > 1 ? $orders->perPage() * $orders->currentPage() - $orders->perPage() + $key + 1 : $key + 1 }}
                                </td>
                                <td>{{ $item->no }}</td>
                                <td>{{ $item->date }}</td>
                                <td>
                                    @if (
                                        $item->status_booking == App\Enums\OrderStatusEnums::PICKUP ||
                                            $item->status_booking == App\Enums\OrderStatusEnums::PROCESSING)
                                        {{ $item?->rider?->fullname() ?? '' }}
                                    @elseif (
                                        $item->status_booking == App\Enums\OrderStatusEnums::SHIPPING ||
                                            $item->status_booking == App\Enums\OrderStatusEnums::DELIVERY ||
                                            $item->status_booking == App\Enums\OrderStatusEnums::SUCCESS)
                                        {{ $item?->riderSend?->fullname() ?? '' }}
                                    @endif
                                </td>
                                <td>
                                    {{ $item->getPriority() }}
                                </td>
                                <td class="text-center">
                                    <span
                                        class="@if ($item->status_booking == App\Enums\OrderStatusEnums::SUCCESS) order_status_success @elseif($item->status_booking == App\Enums\OrderStatusEnums::CANCEL) order_status_cancel @elseif(
                                            $item->status_booking == App\Enums\OrderStatusEnums::PICKUP ||
                                                $item->status_booking == App\Enums\OrderStatusEnums::SHIPPING) order_statsu_sending @else order_status_warning @endif">{{ $item->getStatus() }}</span>
                                </td>
                                <td class="text-end">
                                    {{ number_format($item->total_price, 2) }}
                                </td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-light-info dropdown-toggle"
                                            data-bs-toggle="dropdown" data-popper-placement="top-end" aria-expanded="false">
                                            {{ __('manage') }}
                                        </button>
                                        
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item"
                                                    href="{{ route('order.edit', $item->id) }}">{{ __('edit') }}</a>
                                            </li>
                                            @if (
                                                $item->status_booking != App\Enums\OrderStatusEnums::WAIT_PAYMENT &&
                                                    $item->status_booking != App\Enums\OrderStatusEnums::CANCEL)
                                                <li><a class="dropdown-item"
                                                        href="{{ route('taxinvoice.create', ['ref_id' => $item->id]) }}">{{ __('create taxinvoice') }}</a>
                                                </li>
                                            @endif
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center">{{ __('NoDataFound') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="d-flex justify-content-end pb-0">
                    {{ @$orders->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                </div>
            </div>

        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $("#searchInput").keyup(function(event) {
            if (event.keyCode === 13) {
                searchInput()
            }
        });

        function searchInput() {
            const search = $('#searchInput').val();
            const status = $('#status_booking').val();
            window.location.href = `{{ route('customers.show', @$main->id) }}?search=${search}&status_booking=${status}`;
        }
    </script>
@endsection