@extends('layout')

@section('h4-page', __('orderListManage'))

@section('contents')
    <style>
        .table thead {
            color: #ffffff;
        }

        .table thead tr th {
            background: #ffffff;
        }

        .table-striped>tbody>tr:nth-of-type(odd)>* {
            --bs-table-bg-type: #F3F6FF;
        }

        .table-striped>tbody>tr:nth-of-type(even)>* {
            --bs-table-bg-type: #f9fbff;
        }

        .table tbody tr td {
            line-height: 30px;
            height: 30px;
        }

        .imgoverlap {
            display: flex;
            justify-content: center;
            width: 90px;
            height: 90px;
            object-fit: cover;
            /* position: absolute; */
            top: 0px;
            left: 0px;
            background: transparent;
        }

        .img-1 {
            z-index: 10;
            /* opacity: 0.5; */
            border-radius: 10px;
        }

        .img-2 {
            z-index: 20;
            top: -5px;
            left: -5px;
            opacity: 0.8;
            border-radius: 10px;
        }

        .img-3 {
            z-index: 30;
            top: -10px;
            left: -10px;
            border-radius: 10px;
        }

        .div-absolute-header {
            position: absolute;
            top: -40px;
        }

        .relativeImg {
            position: relative;
            height: 100px;
            top: 1rem;

        }

        /* modal image */

        .row>.column {
            padding: 0 8px;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        .column {
            float: left;
            width: 25%;
        }

        /* The Modal (background) */
        .modal-data {
            display: none;
            position: fixed;
            z-index: 3000;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
            border: none;
        }

        /* Modal Content */
        .modal-data>.modal-content {
            position: relative;
            margin: auto;
            padding: 0;
            width: 90%;
            height: 70%;
            max-width: 1200px;
            border: none;
            background: transparent;
        }

        /* The Close Button */
        .close {
            color: white;
            position: absolute;
            top: 10px;
            right: 25px;
            font-size: 35px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #999;
            text-decoration: none;
            cursor: pointer;
        }

        .mySlides {
            display: none;
        }

        .mySlides img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 15px;
            background: transparent;
        }

        .mySlides2 {
            display: none;
        }

        .mySlides2 img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 15px;
            background: transparent;
        }

        .mySlides3 {
            display: none;
        }

        .mySlides3 img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 15px;
            background: transparent;
        }

        .cursor {
            cursor: pointer;
        }

        /* Next & previous buttons */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -50px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            -webkit-user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        img {
            margin-bottom: -4px;
        }

        .caption-container {
            text-align: center;
            background-color: black;
            padding: 2px 16px;
            color: transparent;
        }

        .demo {
            opacity: 0.6;
        }

        .active,
        .demo:hover {
            opacity: 1;
        }

        img.hover-shadow {
            transition: 0.3s;
        }

        .hover-shadow:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .modal-content {
            background: white;
        }

        .modal>.modal-content {
            background: white;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        .card-body-ul {
            padding: 1.5rem;
        }

        p,
        span {
            color: #242424;
            margin: 0;
            padding: 5px 0;
            font-size: 15px;
            font-weight: 500;
        }


        .name-riderreceive {
            color: #1792BF;
        }

        .select-rider {
            padding: 5px;
            width: 50%
        }

        hr {
            margin: 5px 0px;
            border-top: 1.5px solid #AFAFAF;
        }

        .text-green {
            color: #58A21C;
            font-weight: bold;
        }

        /* end modal image */
    </style>
    <div class="row layout-top-spacing">
        <div class="col-12 mb-md-0 mb-4">
            <div>
                @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"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div>
                    <form action="{{ route('order.update', @$main->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="form-group ps-0 mb-2">
                            @if (@$main->status_booking == App\Enums\OrderStatusEnums::PICKUP)
                                <div class="btn btn-primary btn-generate" id="generaterider"
                                    onclick="generateRider('{{ @$main->rider_id }}')">
                                    {{ __('Generate Link to Rider') }}
                                </div>
                            @elseif(@$main->status_booking == App\Enums\OrderStatusEnums::SHIPPING && @$main->service_type == 'DELIVERY')
                                <div class="btn btn-primary btn-generate" id="generaterider"
                                    onclick="generateRider('{{ @$main->rider_id_send }}')">
                                    {{ __('Generate Link to Rider') }}
                                </div>
                            @endif
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-5">
                                <div class="card">
                                    <ul class="card-body-ul">
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <p class="fw-bold">{{ __('OrderNo') }} :</p>
                                                <p class="text-end">{{ @$main->no }}</p>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 ">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <p class="fw-bold">{{ __('Status') }} :</p>
                                                <p
                                                    class=" @if ($main->status_booking == App\Enums\OrderStatusEnums::SUCCESS) order_status_success @elseif($main->status_booking == App\Enums\OrderStatusEnums::CANCEL) order_status_cancel @elseif(
                                                        $main->status_booking == App\Enums\OrderStatusEnums::PICKUP ||
                                                            $main->status_booking == App\Enums\OrderStatusEnums::SHIPPING) order_statsu_sending @else order_status_warning @endif">
                                                    {{ $main->getStatus() }}</p>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 ">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <p class="fw-bold">{{ __('OrderDate') }} :</p>
                                                <p class="text-end">{{ @$main->date }}</p>
                                            </div>
                                        </li>

                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <p class="fw-bold">{{ __('AccountName') }} :</p>
                                                <p class="text-end">{{ @$main->account?->fullname() }}</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="card mt-2">
                                    <ul class="card-body-ul">
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span
                                                    class="fw-bold  {{ @$main->rider_id ? 'text-dark' : 'name-riderreceive' }}">{{ __('RiderReceive') }}:
                                                </span><span>{{ @$main->rider?->fullname() }}</span>
                                                @if (@$main->status_booking == App\Enums\OrderStatusEnums::PENDING)
                                                    <select name="rider_id" id="rider_id"
                                                        class="form-control select-rider">
                                                        <option value="" class="text-center">---Select Rider---
                                                        </option>
                                                        @foreach (@$riders ?? [] as $key => $item)
                                                            <option value="{{ $item->id }}"
                                                                @if (@$main->rider_id == $item->id) selected @endif>
                                                                {{ $item->fullname() . ' : ' . $item->getMapOrder() }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                @endif
                                            </div>
                                        </li>
                                        @if (@$main->service_type != 'RECEIVE')
                                            <li class="list-group-item border-0 px-0">
                                                <div
                                                    class="form-group ps-0 d-flex justify-content-between align-items-center">


                                                    @if (@$main->riderSend)
                                                        <span class="fw-bold ">{{ __('RiderSend') }}
                                                            :
                                                        </span>
                                                        <span>{{ @$main->riderSend?->fullname() ?? '-' }}</span>
                                                    @elseif (@$main->status_booking == App\Enums\OrderStatusEnums::PROCESSING)
                                                        <span class="fw-bold name-riderreceive">{{ __('RiderSend') }}
                                                            :
                                                        </span>
                                                    @endif

                                                    @if (@$main->status_booking == App\Enums\OrderStatusEnums::PROCESSING)
                                                        <select name="rider_id_send" id="rider_id_send"
                                                            class="form-control select-rider">
                                                            <option value="" class="text-center">---Select Rider---
                                                            </option>
                                                            @foreach (@$riders ?? [] as $key => $item)
                                                                <option value="{{ $item->id }}"
                                                                    @if (@$main->rider_id_send == $item->id) selected @endif>
                                                                    {{ $item->fullname() }}</option>
                                                            @endforeach
                                                        </select>
                                                    @endif
                                                </div>
                                            </li>
                                        @endif

                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('ServiceType') }} :
                                                </span><span>{{ @$main->service_type == 'DELIVERY' ? __('delivery') : __('getSelf') }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 ">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('LevelUrgency') }} :
                                                </span><span>{{ @$main->getPriority() }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('DeliveryType') }} :
                                                </span><span>{{ @$main->type_keep_delivery }}</span>
                                            </div>
                                        </li>
                                        <hr>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('ReceiveDate') }} :
                                                </span><span>{{ date('Y-m-d H:i', strtotime(@$main->receive_datetime)) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 ">
                                                <p class="fw-bold">{{ __('ReceiveAddress') }} :
                                                </p>
                                                @if (@$main->receive_address_order)
                                                    <p>
                                                        {{ @$main->receive_address_order }}
                                                    </p>
                                                @endif

                                            </div>
                                        </li>

                                        @if (@$main->receive_remark)
                                            <li class="list-group-item border-0 px-0">
                                                <div class="form-group ps-0 ">
                                                    <p class="fw-bold">{{ __('ReceiveRemark') }} :
                                                    </p>
                                                    <p>{{ @$main->receive_remark }}</p>

                                                </div>
                                            </li>
                                        @endif
                                        <hr>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('SendDate') }} :
                                                </span><span>{{ date('Y-m-d H:i', strtotime(@$main->send_datetime)) }}</span>
                                                {{-- <span><i class="fa-solid fa-pen" data-bs-toggle="modal"
                                                        data-bs-target="#exampleModal"></i></span> --}}
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 ">
                                                <p class="fw-bold">{{ __('SendAddress') }} : </p>
                                                @if(@$main->service_type == 'DELIVERY')
                                                    @if (@$main->send_address_order)
                                                        <p>
                                                            {{ @$main->send_address_order }}</p>
                                                    @endif
                                                @else
                                                <p>{{ __('getSelf') }}</p>
                                                @endif
                                            </div>
                                        </li>

                                        @if (@$main->send_remark)
                                            <li class="list-group-item border-0 px-0">
                                                <div class="form-group ps-0 ">
                                                    <p class="fw-bold">{{ __('SendRemark') }} :
                                                    </p>
                                                    <p>{{ @$main->send_remark }}</p>
                                                </div>
                                            </li>
                                        @endif
                                        <hr>
                                        @if (@$main->remark)
                                            <li class="list-group-item border-0 px-0">
                                                <div class="form-group ps-0 ">
                                                    <p class="fw-bold">{{ __('Remark') }} :
                                                    </p>
                                                    <p>{{ @$main->remark }}</p>
                                                </div>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                                <div class="card mt-2">
                                    @php
                                        $option_shipping = json_decode(@$main->option_shipping);
                                        $option_shipping = @$option_shipping ? (float) $option_shipping[0]->price : 0;
                                        $total_service =
                                            @$main->total_price -
                                                @$option_shipping -
                                                @$main->shipping_price +
                                                @$main->promotion_price ??
                                            0;
                                        $total = $total_service + @$main->shipping_price + @$option_shipping ?? 0;
                                        $total_after_discount = $total - @$main->promotion_price ?? 0;
                                        $vat = ($total_after_discount * 7) / 107;
                                        $total_excluded_vat = $total_after_discount - $vat;
                                    @endphp
                                    <ul class="card-body-ul">
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('Total Price') }} :
                                                </span><span class="text-end">{{ number_format($total_service, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('Shipping Cost') }} :
                                                </span><span
                                                    class="text-end">{{ number_format(@$main->shipping_price, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('Urgent Cost') }} :
                                                </span><span
                                                    class="text-end">{{ number_format(@$option_shipping, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('Total') }}
                                                </span><span class="text-end">{{ number_format($total, 2) }}</span>
                                            </div>
                                        </li>
                                        <hr>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex  justify-content-between align-items-start">
                                                <span class="fw-bold w-75">{{ __('Discount') }}: @if (@$main->redeem_code_id)
                                                        ({{ @$main->redeemCode?->detail }})
                                                    @endif
                                                </span><span class="text-end text-danger text-nowrap">-
                                                    {{ number_format(@$main->promotion_price, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('After Discount') }}
                                                </span><span
                                                    class="text-end">{{ number_format($total_after_discount, 2) }}</span>
                                            </div>
                                        </li>
                                        <hr>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('Total Excluded VAT') }}
                                                </span><span
                                                    class="text-endr">{{ number_format($total_excluded_vat, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="fw-bold">{{ __('VAT 7%') }}
                                                </span><span class="text-end">{{ number_format(@$vat, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0 d-flex justify-content-between align-items-center">
                                                <span class="text-green">{{ __('Total') }} :
                                                </span><span
                                                    class="text-end text-green">{{ number_format(@$main->total_price, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 d-none">
                                            <div class="form-group ps-0">
                                                <span class="fw-bold">{{ __('Price LevelUrgency') }} :
                                                    @php
                                                        $option_shipping = json_decode(@$main->option_shipping);
                                                    @endphp
                                                </span><span>{{ @$option_shipping ? number_format($option_shipping[0]->price, 2) : nuber_format(0, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 d-none">
                                            <div class="form-group ps-0">
                                                <span class="fw-bold">{{ __('ShippingPrice') }} :
                                                </span><span>{{ number_format(@$main->shipping_price ?? 0, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 d-none">
                                            <div class="form-group ps-0">
                                                <span class="fw-bold">{{ __('PromotionPrice') }} :
                                                </span><span>{{ number_format(@$main->promotion_price ?? 0, 2) }}</span>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 d-none">
                                            <div class="form-group ps-0">
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 d-none">
                                            <div class="form-group ps-0">
                                                <span class="fs-3 fw-bold text-success">{{ __('TotalPrice') }} :
                                                </span><span
                                                    class="fs-3 fw-bold text-success">{{ number_format(@$main->total_price ?? 0, 2) }}</span>
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                                <div class="card mt-2">
                                    <ul class="card-body-ul">
                                        <li class="list-group-item border-0 px-0 ">
                                            <div class="form-group ps-0 mb-2">
                                                <div>
                                                    <p class="fw-bold mb-3">{{ __('Customer') }}</p>
                                                    @if (count(@$main->getImageAccount) > 0)
                                                        <div class="d-flex align-items-center flex-wrap gap-2">

                                                            @foreach (@$main->getImageAccount as $key => $item)
                                                                @if ($key <= 2)
                                                                    <div class="imgoverlap img-{{ $key + 1 }}">
                                                                        {{-- <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                            alt=""
                                                                            style=" height: 90px; border-radius: 10px; width:90px; object-fit:cover;"
                                                                            onclick="openModal('myModal', {{ $key + 1 }})"> --}}
                                                                        <img src="{{ $item->pathImage() }}"
                                                                            alt=""
                                                                            style="height: 90px; border-radius: 10px; width:90px; object-fit:cover;"
                                                                            onclick="openModal('myModal', {{ $key + 1 }})">
                                                                    </div>
                                                                @endif
                                                            @endforeach

                                                        </div>
                                                    @else
                                                        <div class="d-flex align-items-center flex-wrap gap-2 ">
                                                            <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt=""
                                                                style=" height: 90px; border-radius: 10px; width:90px; object-fit:cover;">
                                                        </div>
                                                    @endif

                                                </div>
                                            </div>
                                            <div class="form-group ps-0 mb-2">
                                                <div>
                                                    <p class="fw-bold mb-3">{{ __('RiderReceive') }}</p>
                                                    @if (count(@$main->attachmentOrderPickup) > 0)
                                                        <div class="d-flex align-items-center flex-wrap gap-2">
                                                            @foreach (@$main->attachmentOrderPickup as $key => $item)
                                                                @if ($key <= 2)
                                                                    <div class="imgoverlap img-{{ $key + 1 }}">
                                                                        <img src="{{ $item->pathImage() }}"
                                                                            alt=""
                                                                            style="height: 90px; border-radius: 10px; width:90px; object-fit:cover;"
                                                                            onclick="openModal('rider' , {{ $key + 1 }})">
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        <div class="d-flex align-items-center flex-wrap gap-2 ">
                                                            <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt="" style=" height: 90px;border-radius: 10px;">
                                                        </div>
                                                    @endif
                                                </div>

                                                <div class="form-group ps-0 mb-2">
                                                    <div>
                                                        <p class="fw-bold mb-3">{{ __('RiderSend') }}</p>
                                                        @if (count(@$main->attachmentOrderShipping) > 0)
                                                            <div class="d-flex align-items-center flex-wrap gap-2">
                                                                @foreach (@$main->attachmentOrderShipping as $key => $item)
                                                                    <div class="imgoverlap img-{{ $key + 1 }}">
                                                                        <img src="{{ $item->pathImage() }}"
                                                                            alt=""
                                                                            style="height: 90px; border-radius: 10px; width:90px; object-fit:cover;"
                                                                            onclick="openModal('riderSend' , {{ $key + 1 }})">
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        @else
                                                            <div class="d-flex align-items-center flex-wrap gap-2 ">
                                                                <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                    alt="avatar"
                                                                    style="height: 90px; border-radius: 10px; width:90px; object-fit:cover;">
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                                {{-- <div class="form-group ps-0 mb-5">
                                                <div class="relativeImg">
                                                    <div class="div-absolute-header">
                                                        <span class="fw-bold">{{ __('Customer') }}</span>
                                                    </div>
                                                    @if (count(@$main->getImageAccount) > 0)
                                                        <div class="row">
                                                            @foreach (@$main->getImageAccount as $key => $item)
                                                                @if ($key <= 2)
                                                                    <div class="imgoverlap img-{{ $key + 1 }}">
                                                                        <img src="{{ $item->pathImage() }}"
                                                                            alt="" height="90" width="90"
                                                                            @if ($key == count(@$main->getImageAccount) - 1 || $key == 2) onclick="openModal('myModal')" @endif>
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        <div class="row ">
                                                                <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt="image"
                                                                style="width: 150px; height: 90px; object-fit: contain; ">
                                                        </div>
                                                    @endif
                                                </div>
                                            </div> --}}
                                                {{-- <div class="relativeImg">
                                                    <div class="div-absolute-header">
                                                        <span class="fw-bold">{{ __('RiderReceive') }}</span>
                                                    </div>
                                                    @if (count(@$main->attachmentOrderPickup) > 0)
                                                        <div class="row">
                                                            @foreach (@$main->attachmentOrderPickup as $key => $item)
                                                                @if ($key <= 2)
                                                                    <div class="imgoverlap img-{{ $key + 1 }}">
                                                                        <img src="{{ $item->pathImage() }}"
                                                                            alt="" height="90" width="90"
                                                                            @if ($key == count(@$main->attachmentOrderPickup) - 1 || $key == 2) onclick="openModal('rider')" @endif>
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        <div class="d-flex align-items-center flex-wrap gap-2">
                                                            <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt=""
                                                                style=" height: 90px; ">
                                                                <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt=""
                                                                style=" height: 90px;">
                                                                <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt=""
                                                                style=" height: 90px; ">
                                                                <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt=""
                                                                style=" height: 90px;">
                                                                <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt=""
                                                                style=" height: 90px; ">
                                                                <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt=""
                                                                style=" height: 90px;">
                                                        </div>
                                                    @endif
                                                </div> --}}
                                                {{-- <div class="form-group ps-0 mb-5">
                                                <div class="relativeImg">
                                                    <div class="div-absolute-header">
                                                        <span class="fw-bold">{{ __('RiderSend') }}</span>
                                                    </div>
                                                    @if (count(@$main->attachmentOrderShipping) > 0)
                                                        <div class="row">
                                                            @foreach (@$main->attachmentOrderShipping as $key => $item)
                                                                <div class="imgoverlap img-{{ $key + 1 }}">
                                                                    <img src="{{ $item->pathImage() }}" alt=""
                                                                        height="90" width="90"
                                                                        @if ($key == count(@$main->attachmentOrderShipping) - 1 || $key == 2) onclick="openModal('riderSend')" @endif>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        <div class="row">
                                                            <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                                alt=""
                                                                style="width: 150px; height: 90px; object-fit: contain;">
                                                        </div>
                                                    @endif
                                                </div>
                                            </div> --}}
                                        </li>
                                    </ul>
                                </div>
                                <div class="d-flex flex-wrap align-items-end justify-content-between pt-3">
                                    <div>
                                        @if (
                                            @$main->status_booking != App\Enums\OrderStatusEnums::CANCEL &&
                                                @$main->status_booking != App\Enums\OrderStatusEnums::PICKUP &&
                                                @$main->status_booking != App\Enums\OrderStatusEnums::SHIPPING &&
                                                @$main->status_booking != App\Enums\OrderStatusEnums::SUCCESS &&
                                                @$main->status_booking != App\Enums\OrderStatusEnums::WAIT_PAYMENT)
                                            <button class="btn btn-success" type="submit">{{ __('save') }}</button>
                                        @elseif(@$main->status_booking == App\Enums\OrderStatusEnums::SHIPPING && @$main->service_type == 'RECEIVE')
                                            <button class="btn btn-success" type="submit">{{ __('save') }}</button>
                                        @else
                                            @if (!$main->riderConfirme() && $main->status_booking == App\Enums\OrderStatusEnums::PICKUP)
                                                <div class="btn btn-primary"
                                                    onclick="confirmRider('{{ @$main->orderRider()?->id }}')">
                                                    {{ __('ConfirmRider') }}
                                                </div>
                                            @elseif ($main->status_booking != App\Enums\OrderStatusEnums::PICKUP)
                                            @else
                                                <span class="text-success"> : {{ _('RiderConfirmSuccess') }}</span>
                                            @endif
                                            @if (@$main->service_type != 'RECEIVE')
                                                @if (!$main->riderConfirmeSend() && $main->status_booking == App\Enums\OrderStatusEnums::SHIPPING)
                                                    <div class="btn btn-primary"
                                                        onclick="confirmRider('{{ @$main->orderRiderSend()?->id }}')">
                                                        {{ __('ConfirmRider') }}
                                                    </div>
                                                @elseif ($main->status_booking != App\Enums\OrderStatusEnums::SHIPPING)
                                                @else
                                                    <span class="text-success"> : {{ _('RiderConfirmSuccess') }}</span>
                                                @endif
                                            @endif
                                        @endif
                                        <a href="{{ route('order.index') }}"
                                            class="btn bg-gradient-success">{{ __('back') }}</a>
                                    </div>
                                    @if (
                                        @$main->status_booking != App\Enums\OrderStatusEnums::CANCEL &&
                                            @$main->status_booking != App\Enums\OrderStatusEnums::SUCCESS)
                                        <div>
                                            <div class="btn btn-danger" onclick="deleteItem('{{ @$main->id }}')">
                                                {{ __('Cancel Order') }}
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <div>
                                    {{-- @if (@$main->status_booking != App\Enums\OrderStatusEnums::CANCEL && @$main->status_booking != App\Enums\OrderStatusEnums::SUCCESS)
                                        <li class="list-group-item border-0 px-0">
                                            <div class="btn btn-danger" onclick="deleteItem('{{ @$main->id }}')">
                                                {{ __('Cancel') }}
                                            </div>
                                        </li>
                                    @endif --}}
                                </div>

                            </div>
                            {{-- <div class="card pt-5 pb-5 ps-5 pe-5 h-100 d-none">
                                <ul class="list-group">
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            @if (@$main->status_booking == App\Enums\OrderStatusEnums::PICKUP)
                                                <div class="btn btn-primary" id="generaterider"
                                                    onclick="generateRider('{{ @$main->rider_id }}')">
                                                    {{ __('Generate') }}
                                                </div>
                                            @elseif(@$main->status_booking == App\Enums\OrderStatusEnums::SHIPPING && @$main->service_type == 'DELIVERY')
                                                <div class="btn btn-primary" id="generaterider"
                                                    onclick="generateRider('{{ @$main->rider_id_send }}')">
                                                    {{ __('Generate') }}
                                                </div>
                                            @endif
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold fs-3">{{ __('OrderNo') }} : </span><span
                                                class="fs-3">{{ @$main->no }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('OrderDate') }} :
                                            </span><span>{{ @$main->date }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span for="status_booking" class="fw-bold">{{ __('Status') }} : </span>
                                            <span
                                                class="@if ($main->status_booking == App\Enums\OrderStatusEnums::SUCCESS) order_status_success @elseif($main->status_booking == App\Enums\OrderStatusEnums::CANCEL) order_status_cancel @elseif(
                                                    $main->status_booking == App\Enums\OrderStatusEnums::PICKUP ||
                                                        $main->status_booking == App\Enums\OrderStatusEnums::SHIPPING) order_statsu_sending @else order_status_warning @endif">{{ $main->getStatus() }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('AccountName') }} :
                                            </span><span>{{ @$main->account?->fullname() }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('RiderReceive') }}:
                                            </span><span>{{ @$main->rider?->fullname() }}</span>
                                            @if (@$main->status_booking == App\Enums\OrderStatusEnums::PENDING)
                                                <select name="rider_id" id="rider_id" class="form-control">
                                                    <option value="">---Select Rider---</option>
                                                    @foreach (@$riders ?? [] as $key => $item)
                                                        <option value="{{ $item->id }}"
                                                            @if (@$main->rider_id == $item->id) selected @endif>
                                                            {{ $item->fullname() . ' : ' . $item->getMapOrder() }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @endif
                                        </div>
                                    </li>
                                    @if (@$main->service_type != 'RECEIVE')
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <span class="fw-bold">{{ __('RiderSend') }} :
                                                </span><span>{{ @$main->riderSend?->fullname() }}</span>
                                                @if (@$main->status_booking == App\Enums\OrderStatusEnums::PROCESSING)
                                                    <select name="rider_id_send" id="rider_id_send" class="form-control">
                                                        <option value="">---Select Rider---</option>
                                                        @foreach (@$riders ?? [] as $key => $item)
                                                            <option value="{{ $item->id }}"
                                                                @if (@$main->rider_id_send == $item->id) selected @endif>
                                                                {{ $item->fullname() }}</option>
                                                        @endforeach
                                                    </select>
                                                @endif
                                            </div>
                                        </li>
                                    @endif
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('ServiceType') }} :
                                            </span><span>{{ @$main->service_type == 'DELIVERY' ? __('delivery') : __('getSelf') }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('ReceiveDate') }} :
                                            </span><span>{{ date('Y-m-d H:i', strtotime(@$main->receive_datetime)) }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('ReceiveAddress') }} :
                                            </span><span>{{ @$main->receive_address_order }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('ReceiveRemark') }} :
                                            </span><span>{{ @$main->receive_remark }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('SendDate') }} :
                                            </span><span>{{ date('Y-m-d H:i', strtotime(@$main->send_datetime)) }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('SendAddress') }} : </span><span>
                                                {{ @$main->send_address_order }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('SendRemark') }} :
                                            </span><span>{{ @$main->send_remark }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('Remark') }} :
                                            </span><span>{{ @$main->remark }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('LevelUrgency') }} :
                                            </span><span>{{ @$main->getPriority() }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('DeliveryType') }} :
                                            </span><span>{{ @$main->type_keep_delivery }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('Price LevelUrgency') }} :
                                                @php
                                                    $option_shipping = json_decode(@$main->option_shipping);
                                                @endphp
                                            </span><span>{{ @$option_shipping ? number_format($option_shipping[0]->price, 2) : nuber_format(0, 2) }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('ShippingPrice') }} :
                                            </span><span>{{ number_format(@$main->shipping_price ?? 0, 2) }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">{{ __('PromotionPrice') }} :
                                            </span><span>{{ number_format(@$main->promotion_price ?? 0, 2) }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fs-3 fw-bold text-success">{{ __('TotalPrice') }} :
                                            </span><span
                                                class="fs-3 fw-bold text-success">{{ number_format(@$main->total_price ?? 0, 2) }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0 pt-5">
                                        <div class="form-group ps-0 mb-5">
                                            <div class="relativeImg">
                                                <div class="div-absolute-header">
                                                    <span class="fw-bold">{{ __('Customer') }}</span>
                                                </div>
                                                @if (count(@$main->getImageAccount) > 0)
                                                    <div class="row">
                                                        @foreach (@$main->getImageAccount as $key => $item)
                                                            @if ($key <= 2)
                                                                <div class="imgoverlap img-{{ $key + 1 }}">
                                                                    <img src="{{ $item->pathImage() }}" alt=""
                                                                        height="90" width="90"
                                                                        @if ($key == count(@$main->getImageAccount) - 1 || $key == 2) onclick="openModal('myModal')" @endif>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <div class="row">
                                                        <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                            alt=""
                                                            style="width: 150px; height: 90px; object-fit: contain;">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="form-group ps-0 mb-5">
                                            <div class="relativeImg">
                                                <div class="div-absolute-header">
                                                    <span class="fw-bold">{{ __('RiderReceive') }}</span>
                                                </div>
                                                @if (count(@$main->attachmentOrderPickup) > 0)
                                                    <div class="row">
                                                        @foreach (@$main->attachmentOrderPickup as $key => $item)
                                                            @if ($key <= 2)
                                                                <div class="imgoverlap img-{{ $key + 1 }}">
                                                                    <img src="{{ $item->pathImage() }}" alt=""
                                                                        height="90" width="90"
                                                                        @if ($key == count(@$main->attachmentOrderPickup) - 1 || $key == 2) onclick="openModal('rider')" @endif>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <div class="row">
                                                        <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                            alt=""
                                                            style="width: 150px; height: 90px; object-fit: contain;">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="form-group ps-0 mb-5">
                                            <div class="relativeImg">
                                                <div class="div-absolute-header">
                                                    <span class="fw-bold">{{ __('RiderSend') }}</span>
                                                </div>
                                                @if (count(@$main->attachmentOrderShipping) > 0)
                                                    <div class="row">
                                                        @foreach (@$main->attachmentOrderShipping as $key => $item)
                                                            <div class="imgoverlap img-{{ $key + 1 }}">
                                                                <img src="{{ $item->pathImage() }}" alt=""
                                                                    height="90" width="90"
                                                                    @if ($key == count(@$main->attachmentOrderShipping) - 1 || $key == 2) onclick="openModal('riderSend')" @endif>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <div class="row">
                                                        <img src="{{ asset('img/placeholder-avatar.png') }}"
                                                            alt=""
                                                            style="width: 150px; height: 90px; object-fit: contain;">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div> --}}
                            <div class="col-12 col-md-7">
                                <div class="table-responsive card ">
                                    <table class="table table-striped dataTable m-0">
                                        <thead style="height: 60px;">
                                            <tr>
                                                <th>#</th>
                                                <th>{{ __('ProductName') }}</th>
                                                <th>{{ __('ServiceName') }}</th>
                                                <th>{{ __('qty') }}</th>
                                                <th>{{ __('price') }}</th>
                                                <th>{{ __('unit') }}</th>
                                                <th>{{ __('total') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            @foreach (@$main->getDetails as $key => $item)
                                                <tr>
                                                    <td>{{ $key + 1 }}</td>
                                                    <td>{{ $item->product?->name }}</td>
                                                    <td>{{ $item->service?->name }}</td>
                                                    <td>{{ $item->qty }}</td>
                                                    <td>{{ number_format($item->price ?? 0, 2) }}</td>
                                                    <td>{{ $item->units?->name }}</td>
                                                    <td>{{ number_format($item->qty * $item->price, 2) }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                            @for ($i = count(@$main->getDetails); $i <= 24; $i++)
                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            @endfor
                                        </tbody>
                                    </table>

                                </div>

                            </div>
                        </div>

                    </form>
                </div>
                <div class="card mt-3">
                    <div class="card-header">
                        <h1>{{ __('History') }}</h1>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('historyOrder.store') }}" id="formHistory" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-12">
                                    <ul class="list-group">
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <input type="text" class="d-none" name="order_id"
                                                    value="{{ @$main->id }}">
                                                <label for="type_history">{{ __('HistoryType') }}</label>
                                                <select name="type_history" id="type_history" class="form-select"
                                                    aria-label="Default select example" onchange="showPayment()">
                                                    <option value="change_date">Change Date</option>
                                                    <option value="broken">Broken</option>
                                                    <option value="payment">Payment</option>
                                                    <option value="other">Other</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0 d-none" id="div-price">
                                            <div class="form-group ps-0">
                                                <label for="price">{{ __('price') }}</label>
                                                <input type="text" class="form-control" name="price"
                                                    id="price">
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <label for="type_history">{{ __('Description') }}</label>
                                                <textarea class="form-control" name="comment_history" id="comment_history" cols="30" rows="10"></textarea>
                                            </div>
                                        </li>
                                        <li class="list-group-item border-0 px-0">
                                            <div class="form-group ps-0">
                                                <div class="text-center">
                                                    <p>{{ __('Image') }}</p>
                                                    <div class="d-flex justify-content-center mb-4">
                                                        <img id="selectedAvatar"
                                                            src="{{ asset('img/placeholder-avatar.png') }}"
                                                            class=""
                                                            style="width: 100%; height: 200px; object-fit: contain;"
                                                            alt="example placeholder" />
                                                    </div>
                                                    <div class="d-flex justify-content-center">
                                                        <div data-mdb-ripple-init class="btn btn-primary btn-rounded">
                                                            <label class="form-label text-white m-1"
                                                                for="img">{{ __('ChooseFile') }}</label>
                                                            <input type="file" class="form-control d-none"
                                                                id="img"
                                                                onchange="displaySelectedImage(event, 'selectedAvatar')"
                                                                accept="image/*" name="img" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="btn btn-success" type="submit">{{ __('save') }}</button>
                        </form>
                        <div class="mt-3">
                            @foreach ($main->historyOrder ?? [] as $key => $item)
                                <div class="border border-primary rounded p-3 my-3">
                                    <p>{{ __('HistoryType') }} : {{ $item->type }} & {{ __('Date') }} :
                                        {{ $item->created_at }}</p>
                                    <p>{{ $item->comment }}</p>
                                    <p>{{ __('CreateBy') }} :{{ $item->createBy?->account()?->fullname() }}</p>
                                    <div>
                                        @foreach ($item->ImageHistory ?? [] as $key => $value)
                                            <img src="{{ $value->pathImage() }}" alt="img"
                                                style="width: 300px; height: 100%; object-fit: cover;">
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="for-toast" id="toast-container">
            {{-- <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"
                id="">

            </div> --}}
            {{-- <div>
                <div class="progress m-0">
                    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0"
                        aria-valuemax="100" style="width:0%; border-radius: 0;">
                    </div>
                </div>
            </div> --}}
        </div>
    </div>
   
    <div id="myModal" class="modal-data">
        <span class="close cursor" onclick="closeModal('myModal')">&times;</span>
        <div class="modal-content">
            @foreach (@$main->getImageAccount as $key => $item)
                <div class="mySlides h-100">
                    <div class="d-flex justify-content-center h-100">
                        <div class="">
                            <img src="{{ $item->pathImage() }}" style="width:100%">
                        </div>
                    </div>
                </div>
            @endforeach
            <a class="prev" onclick="plusSlides(-1, 'mySlides')">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 'mySlides')">&#10095;</a>
            {{-- <div class="column">
                <img class="demo cursor" src="{{ asset('app/accounts/6704c2840a5e9_1728365188.png') }}"
                    style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
            </div>
            <div class="column">
                <img class="demo cursor" src="{{ asset('app/accounts/66be2cc75cc73_1723739335.jpg') }}"
                    style="width:100%" onclick="currentSlide(2)" alt="Snow">
            </div>
            <div class="column">
                <img class="demo cursor" src="{{ asset('app/accounts/6704c2840a5e9_1728365188.png') }}"
                    style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
            </div> --}}
        </div>
    </div>
    <div id="rider" class="modal-data">
        <span class="close cursor" onclick="closeModal('rider')">&times;</span>
        <div class="modal-content">
            @foreach (@$main->attachmentOrderPickup ?? [] as $key => $item)
                <div class="mySlides2 h-100">
                    <div class="d-flex justify-content-center h-100">
                        <div class="">
                            <img src="{{ $item->pathImage() }}" style="width:100%">
                        </div>
                    </div>
                </div>
            @endforeach
            <a class="prev" onclick="plusSlides(-1, 'mySlides2')">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 'mySlides2')">&#10095;</a>
        </div>
    </div>
    <div id="riderSend" class="modal-data">
        <span class="close cursor" onclick="closeModal('riderSend')">&times;</span>
        <div class="modal-content">
            @foreach (@$main->attachmentOrderShipping ?? [] as $key => $item)
                <div class="mySlides3 h-100">
                    <div class="d-flex justify-content-center h-100">
                        <div class="">
                            <img src="{{ $item->pathImage() }}" style="width:100%">
                        </div>
                    </div>
                </div>
            @endforeach
            <a class="prev" onclick="plusSlides(-1, 'mySlides3')">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 'mySlides3')">&#10095;</a>
        </div>
    </div>
    <div class="modal fade" id="generateModelData" tabindex="-1" aria-labelledby="generateModelDataLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>{{ __('GenerateRider') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="message-data"></p>
                    <input type="text" id="message-data-input" class="d-none">
                    <input type="text" id="message-data-rider" class="d-none">
                </div>
                <div class="modal-footer" style="justify-content: center;">
                    <button type="button" class="btn btn-secondary" onclick="cliclCopy()">{{ __('Copy') }}</button>
                    <button type="button" class="btn btn-info" onclick="sendSms()">{{ __('SendSms') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        @if ((session('success') && $main->status_booking == 'PICKUP') || $main->status_booking == 'SHIPPING')
            const wss_send = new WebSocket('{{ env('APP_NOTI_SOCKET') }}');

            wss_send.onopen = () => {
                console.log('Connected as Admin');
                wss_send.send(JSON.stringify({
                    sessions: 'admin',
                    usersId: 'admin',
                    triggerTargetId: "{{ $main->account?->user?->id }}",
                }));
            };

            wss_send.onmessage = (event) => {
                const response = JSON.parse(event.data);
                if (response.success) {
                    console.log('Received notification data:', response.data);
                } else {
                    console.error('Error:', response.error);
                }
            };

            wss_send.onclose = () => {
                console.log('Disconnected from WebSocket');
            };
        @endif
        function changeLange(e) {
            document.getElementById("lange").value = e.id;
            document.getElementById("imageFlagDrowdown").src = e.querySelector('img').src;
            lange = document.querySelectorAll(`.datalange`);
            lange.forEach(element => {
                if (element.classList.contains(`datalange_${e.id}`)) {
                    element.classList.remove("d-none");
                } else {
                    element.classList.add("d-none");
                }
            });
        }

        function displaySelectedImage(event, elementId) {
            const selectedImage = document.getElementById(elementId);
            const fileInput = event.target;

            if (fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    selectedImage.src = e.target.result;
                };

                reader.readAsDataURL(fileInput.files[0]);
            }
        }

        function showPayment() {
            let type = document.getElementById("type_history").value;
            // if (type == 'payment') {
            //     document.getElementById("div-price").classList.remove("d-none");
            // } else {
            //     document.getElementById("div-price").classList.add("d-none");
            // }
        }

        function setInputFilter(textbox, inputFilter, errMsg) {
            ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(
                function(event) {
                    textbox.addEventListener(event, function(e) {
                        if (inputFilter(this.value)) {
                            // Accepted value.
                            if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
                                this.classList.remove("input-error");
                                this.setCustomValidity("");
                            }

                            this.oldValue = this.value;
                            this.oldSelectionStart = this.selectionStart;
                            this.oldSelectionEnd = this.selectionEnd;
                        } else if (this.hasOwnProperty("oldValue")) {
                            // Rejected value: restore the previous one.
                            this.classList.add("input-error");
                            this.setCustomValidity(errMsg);
                            this.reportValidity();
                            this.value = this.oldValue;
                            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                        } else {
                            // Rejected value: nothing to restore.
                            this.value = "";
                        }
                    });
                });
        }
        setInputFilter(document.getElementById("price"), function(value) {
            return /^-?\d*[.,]?\d{0,2}$/.test(value);
        }, "Must be a currency value");
    </script>
    <script>
        function deleteItem(id) {
            Swal.fire({
                title: 'Cancel?',
                text: "You want cancel order ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    var is_url = "{{ route('order.destroy', ':id') }}";
                    $.ajax({
                        url: is_url.replace(':id', id),
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}',
                            status: 0,
                        },
                        success: function(response) {
                            Swal.fire({
                                title: 'Success',
                                text: "Cancel order success.",
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Error!!!',
                                text: "Cannot cancel order.",
                                icon: 'error',
                            });
                        }
                    });
                }
            })
        }

        function confirmRider(id) {
            Swal.fire({
                title: 'Warning?',
                text: "You want confirm rider order ?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    var is_url = "{{ route('orderRider.update', ':id') }}";
                    $.ajax({
                        url: is_url.replace(':id', id),
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            _method: 'PUT',
                        },
                        success: function(response) {
                            Swal.fire({
                                title: 'Success',
                                text: "confirme rider order success.",
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                    // const wss = new WebSocket('{{ env('APP_NOTI_SOCKET') }}');

                                    // wss.onopen = () => {
                                    //     wss.send(JSON.stringify({
                                    //         sessions: 'admin',
                                    //         usersId: 'admin',
                                    //         triggerTargetId: "{{ $main->account?->user?->id }}",
                                    //     }));
                                    //     setTimeout(() => {
                                    //         location.reload();
                                    //     }, 1000);
                                    // };

                                    // wss.onmessage = (event) => {
                                    //     const response = JSON.parse(event.data);
                                    //     if (response.success) {
                                    //         console.log('Received notification data:',
                                    //             response.data);
                                    //     } else {
                                    //         console.error('Error:', response.error);
                                    //     }
                                    // };

                                    // wss.onclose = () => {
                                    //     console.log('Disconnected from WebSocket');
                                    // };

                                }
                            });
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Error!!!',
                                text: "confirme rider order order.",
                                icon: 'error',
                            });
                        }
                    });
                }
            })
        }
    </script>
    <script>
        function openModal(idModel, index) {
            document.getElementById(idModel).style.display = "block";
            slideIndex = index;
            showSlides(slideIndex, 'mySlides');
        }

        function closeModal(idModel) {
            document.getElementById(idModel).style.display = "none";
        }

        var slideIndex = 1;
        showSlides(slideIndex, 'mySlides');
        showSlides(slideIndex, 'mySlides2');
        showSlides(slideIndex, 'mySlides3');

        function plusSlides(n, classList) {
            showSlides(slideIndex += n, classList);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n, 'mySlides');
        }

        function showSlides(n, classList) {
            var i;
            var slides = document.getElementsByClassName(classList);
            var dots = document.getElementsByClassName("demo");
            var captionText = document.getElementById("caption");
            if (n > slides.length) {
                slideIndex = 1
            }
            if (n < 1) {
                slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            if (slides[slideIndex - 1]) {
                slides[slideIndex - 1].style.display = "block";
            } // dots[slideIndex - 1].className += " active"; // captionText.innerHTML = dots[slideIndex - 1].alt; }
        }
    </script>
    <script>
        function generateRider(rider_id) {
            var is_url = "{{ route('rider.generateUniq') }}";
            $.ajax({
                url: is_url,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    rider_id: rider_id,
                },
                success: function(response) {
                    let data = window.location.origin + "/?unqi=" + response.data;
                    $('#message-data').html(data);
                    $('#message-data-input').val(data);
                    $('#message-data-rider').val(rider_id);
                    var myModal = new bootstrap.Modal(document.getElementById('generateModelData'))
                    myModal.show()
                    // $('#generateModelData').modal('show')
                    // $('#generateModelData').show();
                    // writeClipboardText(window.location.origin + "/?unqi=" + response.data);

                    // navigator.clipboard.writeText();
                    // Swal.fire({
                    //     title: 'Copy message auto.',
                    //     text: data,
                    //     icon: 'success',
                    //     showCloseButton: true,
                    //     showCancelButton: true,
                    //     confirmButtonText: `Copy Message`,
                    //     cancelButtonText: `Send Sms`,
                    // });
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    Swal.fire({
                        title: 'Error!!!',
                        text: "Cannot generate link.",
                        icon: 'error',
                    });
                }
            });
        }

        function cliclCopy() {

            if (writeClipboardText($('#message-data-input').val())) {
                Swal.fire({
                    title: "{{ __('Copy message auto.') }}",
                    text: "{{ __('Copy message auto.') }}",
                    icon: 'success',
                });
            } else {
                Swal.fire({
                    title: 'Error!!!',
                    text: "{{ __('Cannot generate link.') }}",
                    icon: 'error',
                });
            }
        }

        function sendSms() {
            let rider_id = $('#message-data-rider').val();
            let data = $('#message-data-input').val();
            var is_url = "{{ route('rider.sendSmsRider', ':id') }}";
            let order_id = "{{ @$main->id }}";
            $.ajax({
                url: is_url.replace(':id', rider_id),
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    rider_id: rider_id,
                    data: data,
                    order_id: order_id,
                },
                success: function(response) {
                    if (response.code == 200) {
                        Swal.fire({
                            title: 'Success',
                            text: "{{ __('Send sms success.') }}",
                            icon: 'success',
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!!!',
                            text: "{{ __('Cannot send sms.') }}",
                            icon: 'error',
                        });
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    Swal.fire({
                        title: 'Error!!!',
                        text: "{{ __('Cannot send sms.') }}",
                        icon: 'error',
                    });
                }
            });
        }
        async function writeClipboardText(text) {
            try {
                await navigator.clipboard.writeText(text);
                return true;
            } catch (error) {
                console.error(error.message);
                return false;
            }
        }
    </script>
@endsection