@extends('layout')

@section('h4-page', __('edit') . ' ' . __('order'))

@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 tbody tr td {
            line-height: 30px;
            height: 30px;
        }

        .imgoverlap {
            width: 90px;
            height: 90px;
            object-fit: cover;
            position: absolute;
            top: 0px;
            left: 0px;
            background: #ffffff;
        }

        .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;
            left: 2rem;
            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 {
            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-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: white;
        }

        .mySlides2 {
            display: none;
        }

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

        .mySlides3 {
            display: none;
        }

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

        .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: white;
        }

        .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);
        }

        /* end modal image */
    </style>
    <div class="row layout-top-spacing">
        <div class="col-12 mb-md-0 mb-4">
            <div class="card">
                @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 class="card-body">
                    <div class="row">
                        <div class="col-12 col-md-5">
                            <div class="card pt-5 pb-5 ps-5 pe-5 h-100">
                                <ul class="list-group">
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold fs-3">Order No : </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">Order Date : </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 Booking : </span>
                                            <span>{{ @$main->getStatus() }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">Account :
                                            </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">Rider receive:
                                            </span><span>{{ @$main->rider?->fullname() }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">Rider send:
                                            </span><span>{{ @$main->riderSend?->fullname() }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">Service Type :
                                            </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">Receive Date :
                                            </span><span>{{ date('Y-m-d', 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">Receive Address :
                                            </span><span>{{ @$main->receiveAddress?->fullAddress() }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">Receive Remark :
                                            </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">Send Date :
                                            </span><span>{{ date('Y-m-d', 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">Send Address : </span><span>
                                                {{ @$main->sendAddress?->fullAddress() }}</span>
                                        </div>
                                    </li>
                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">Send Remark :
                                            </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">Delivery :
                                            </span><span>{{ @$main->delivery_type }}</span>
                                        </div>
                                    </li>

                                    <li class="list-group-item border-0 px-0">
                                        <div class="form-group ps-0">
                                            <span class="fw-bold">Shipping Price :
                                            </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">Promotion Price :
                                            </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">
                                            <span class="fs-3 fw-bold text-success">Total Price :
                                            </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">
                                            <div class="row">
                                                <div class="col-12 col-lg-4">
                                                    <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>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-12 col-lg-4">
                                                    <div class="relativeImg">
                                                        <div class="div-absolute-header">
                                                            <span class="fw-bold">Rider Revice</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>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-12 col-lg-4">
                                                    <div class="relativeImg">
                                                        <div class="div-absolute-header">
                                                            <span class="fw-bold">Rider Send</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>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>


                                </ul>
                            </div>
                        </div>
                        <div class="col-12 col-md-7">
                            <div class="table-responsive card h-100">
                                <table class="table table-striped dataTable">
                                    <thead style="height: 60px;">
                                        <tr>
                                            <th>#</th>
                                            <th>product</th>
                                            <th>service</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>
                            {{-- @if (@$main->status_booking != App\Enums\OrderStatusEnums::CANCEL || @$main->status_booking != App\Enums\OrderStatusEnums::SUCCESS)
                                <li class="list-group-item border-0 px-0 pt-3">
                                    <div class="btn btn-danger" onclick="deleteItem('{{ @$main->id }}')">Cancel
                                    </div>
                                </li>
                            @endif --}}
                        </div>
                    </div>
                    {{-- <ul class="list-group">
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Order No : {{ @$main->no }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Order Date : {{ @$main->date }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Account : {{ @$main->account?->fullname() }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Rider : {{ @$main->rider?->fullname() }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Service Type : {{ @$main->service_type }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Receive Date :
                                    {{ date('Y-m-d', strtotime(@$main->receive_datetime)) }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Receive Address :
                                    {{ @$main->receive_address_id }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Receive Remark :
                                    {{ @$main->receive_remark }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Send Date :
                                    {{ date('Y-m-d', strtotime(@$main->send_datetime)) }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Send Address :
                                    {{ @$main->send_address_id }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Send Remark :
                                    {{ @$main->send_remark }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Delivery :
                                    {{ @$main->delivery_type }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Shipping Price :
                                    {{ number_format(@$main->shipping_price ?? 0, 2) }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Promotion Price :
                                    {{ number_format(@$main->promotion_price ?? 0, 2) }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Total Price :
                                    {{ number_format(@$main->total_price ?? 0, 2) }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Store :
                                    {{ @$main->store_service_id }}</label>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label class="form-label">Image User</label>
                                <div>
                                    @if (count(@$main->getImageAccount) > 0)
                                        <div class="row">
                                            @foreach (@$main->getImageAccount as $key => $item)
                                                <div class="col-12 col-md-4">
                                                    <img src="{{ $item->pathImage() }}" alt="" width="300"
                                                        height="300" class="img-fluid">
                                                </div>
                                            @endforeach

                                        </div>
                                    @else
                                        <p>Not Found</p>
                                    @endif
                                </div>
                            </div>
                        </li>
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-borderless">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>product</th>
                                                        <th>service</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->unit_id }}</td>
                                                            <td>{{ number_format($item->qty * $item->price, 2) }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="status_booking" class="form-label">Status Booking</label>
                                <select type="text" class="form-control" name="status_booking" disabled>
                                    <option value="WAIT_PAYMENT" @if (@$main->status_booking == 'WAIT_PAYMENT') selected @endif>
                                        WAIT_PAYMENT
                                    </option>
                                    <option value="PENDING" @if (@$main->status_booking == 'PENDING') selected @endif>PENDING
                                    </option>
                                    <option value="PICKUP" @if (@$main->status_booking == 'PICKUP') selected @endif>PICKUP
                                    </option>
                                    <option value="PROCESSING" @if (@$main->status_booking == 'PROCESSING') selected @endif>
                                        PROCESSING</option>
                                    <option value="SHIPPING" @if (@$main->status_booking == 'SHIPPING') selected @endif>SHIPPING
                                    </option>
                                    <option value="SUCCESS" @if (@$main->status_booking == 'SUCCESS') selected @endif>SUCCESS
                                    </option>
                                    <option value="CANCEL" @if (@$main->status_booking == 'CANCEL') selected @endif>CANCEL
                                    </option>
                                </select>
                            </div>
                        </li>
                    </ul> --}}
                    @if (auth()?->user()?->role?->id == 3)
                        <form action="{{ route('order.update', @$main->id) }}" method="POST" enctype="multipart/form-data"
                            onsubmit="checkForm()" id="uploadForm">
                            @csrf
                            @method('PUT')
                            <ul class="list-group">
                                <li class="list-group-item border-0 px-0">
                                    {{-- <p>Image {{ App\Enums\OrderStatusEnums::PICKUP }} </p> --}}
                                    @if (@$main->status_booking == App\Enums\OrderStatusEnums::PICKUP)
                                        {{-- @if (count(@$main->attachmentOrderPickup) > 0)
                                            <div class="row">
                                                @foreach (@$main->attachmentOrderPickup as $key => $item)
                                                    <div class="col-12 col-md-4">
                                                        <img src="{{ $item->pathImage() }}" alt="" width="300"
                                                            height="300" class="img-fluid">
                                                    </div>
                                                @endforeach

                                            </div>
                                        @else
                                            <p>Not Found</p>
                                        @endif --}}
                                        <input type="text" class="d-none" id="typestatus" value="PICKUP">
                                        <label class="form__container" id="upload-container">select image or drag and drop
                                            <input class="form__file" id="upload-files" type="file"
                                                accept="capture=camera,image/*" multiple="multiple"
                                                name="uploadImageTemp[]" onchange="checkImage()" capture="environment" />
                                        </label>
                                        <div class="form__files-container" id="files-list-container">
                                        </div>
                                    @else
                                        {{-- @if (count(@$main->attachmentOrderPickup) > 0)
                                            <div class="row">
                                                @foreach (@$main->attachmentOrderPickup as $key => $item)
                                                    <div class="col-12 col-md-4">
                                                        <img src="{{ $item->pathImage() }}" alt=""
                                                            width="300" height="300" class="img-fluid">
                                                    </div>
                                                @endforeach

                                            </div>
                                        @else
                                            <p>Not Found</p>
                                        @endif --}}
                                    @endif
                                </li>
                                <li class="list-group-item border-0 px-0">
                                    <div class="form-group ps-0">
                                        {{-- <p>Image {{ App\Enums\OrderStatusEnums::SHIPPING }} </p> --}}
                                        @if (@$main->status_booking == App\Enums\OrderStatusEnums::SHIPPING)
                                            <input type="text" class="d-none" id="typestatus" value="SHIPPING">
                                            <label class="form__container" id="upload-container">select image or drag and
                                                drop
                                                <input class="form__file" id="upload-files" type="file"
                                                    accept="capture=camera,image/*" multiple="multiple"
                                                    name="uploadImageTemp[]" onchange="checkImage()"
                                                    capture="environment" />
                                            </label>
                                            <div class="form__files-container" id="files-list-container">
                                            </div>
                                        @else
                                            {{-- @if (count(@$main->attachmentOrderShipping) > 0)
                                                <div class="row">
                                                    @foreach (@$main->attachmentOrderShipping as $key => $item)
                                                        <div class="col-12 col-md-4">
                                                            <img src="{{ $item->pathImage() }}" alt=""
                                                                width="300" height="300" class="img-fluid">
                                                        </div>
                                                    @endforeach

                                                </div>
                                            @else
                                                <p>Not Found</p>
                                            @endif --}}
                                        @endif
                                    </div>
                                </li>
                            </ul>
                            <a href="{{ route('order.index') }}" class="btn bg-gradient-success">Back</a>
                            <button class="btn btn-success" type="submit" id="saveForm" disabled>Save</button>
                        </form>
                    @endif
                </div>
            </div>
        </div>

    </div>
    <div id="myModal" class="modal">
        <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">
        <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">
        <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>
@endsection

@section('scripts')
    {{-- fileupload --}}
    <link rel="stylesheet" href="{{ asset('css/uploadFile.css') }}">
    <meta name="_token" content="{{ csrf_token() }}">
    <script src="{{ asset('js/uploadFile.js') }}?ver={{ filemtime(public_path('js/uploadFile.js')) }}"></script>
    <script>
        const uploadFile = @json($main->attachmentOrderShipping);
        uploadFile.forEach(element => {
            var url = "{{ asset('app/:project/:imageName') }}";
            FILE_LIST.push({
                name: element.name,
                url: url.replace(":project", "orders").replace(":imageName", element.name),
                id: element.id,
            })
        });

        previewImages();
        UPLOADED_FILES = document.querySelectorAll(".js-remove-image");
        removeFile();
    </script>
    <script>
        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 checkImage() {
            if (document.getElementById("upload-files").files.length == 0) {
                document.getElementById("saveForm").disabled = true;
                return false;
            } else {
                document.getElementById("saveForm").disabled = false;
                return true;
            }
        }

        function checkForm() {
            if (!checkImage()) {
                event.preventDefault()
                document.getElementById("saveForm").disabled = true;
                Swal.fire({
                    title: 'Warning !!!',
                    text: "Pls Insert Image.",
                    icon: 'warning',
                });
            } else {
                @if (@$main->status_booking == App\Enums\OrderStatusEnums::SHIPPING)
                    resizedBlobs.forEach((blob, index) => {
                        formData.append(`uploadImageSend[]`, blob,
                            `resized-image-${index}.jpg`); // Append each resized blob
                    });
                @elseif (@$main->status_booking == App\Enums\OrderStatusEnums::PICKUP)
                    resizedBlobs.forEach((blob, index) => {
                        formData.append(`uploadImage[]`, blob,
                            `resized-image-${index}.jpg`); // Append each resized blob
                    });
                @endif


                document.getElementById("saveForm").disabled = false;
            }
        }
    </script>
    <script>
        function openModal(idModel) {
            document.getElementById(idModel).style.display = "block";
        }

        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);
        }

        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", "");
            }
            slides[slideIndex - 1].style.display = "block";
            // dots[slideIndex - 1].className += " active";
            // captionText.innerHTML = dots[slideIndex - 1].alt;
        }
    </script>
@endsection