@extends('layout')

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

@section('contents')
    <style>
        .container-mute-gray {
            background: #F3F6FF;
            border-radius: 15px;
            padding: 1rem;
        }
    </style>
    <div class="row layout-top-spacing">
        <div class="col-12 col-lg-12">
            <div class="mb-3">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show " role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">x</button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
            <form action="" id="uploadForm"></form>
            @foreach ($main ?? [] as $key => $item)
                <form action="{{ route('order.update', @$item->order?->id) }}" method="POST" enctype="multipart/form-data"
                    onsubmit="submitForm(event, '{{ $item->order?->id }}', this, '{{ $item->order?->no }}')">
                    @csrf
                    @method('PUT')
                    <div class="card mt-3 mb-3">
                        <div class="card-body" style="padding-top: 12px;">
                            <div style="text-align: right;">
                                <span
                                    style="font-size: 10px;">{{ \Carbon\Carbon::parse(optional($item->order)->date)->translatedFormat('d M Y') }}
                                </span>
                            </div>
                            <div class="row rider-{{ $item->rider_id }} mt-3 mb-3">
                                <div style="height: 100px; text-align:center;">
                                    @if (@$item->order?->status_booking == App\Enums\OrderStatusEnums::PICKUP)
                                        <input type="text" class="d-none typestatus" id="typestatus" value="PICKUP">
                                    @else
                                        <input type="text" class="d-none typestatus" id="typestatus" value="SHIPPING">
                                    @endif
                                    @if (@$item->status_order == 'PENDING')
                                        <label class="form__container" id="upload-container">
                                            <img src="{{ asset('img/icon_image.png') }}" height="100">
                                            <input class="form__file" id="upload-files" type="file"
                                                accept="capture=camera,image/*" multiple="multiple" name="uploadImageSend[]"
                                                onchange="checkFileLimit(event, '{{ $item->order?->id }}', this)"
                                                capture="environment" />
                                        </label>
                                    @else
                                        <img src="{{ asset('img/icon_result.png') }}" height="100">
                                    @endif
                                </div>
                                <div class="col-12 col-md-12">
                                    <div class="d-flex me-2">
                                        <div style="width: 100%;">
                                            <span>{{ $item->order?->no }}</span>
                                            @if ($item->type == 'RECEIVE')
                                                <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                                    {{ __('from') }}:
                                                    <span
                                                        style="color: black; font-weight: 400;">{{ $item->order?->receive_address_order }}</span>
                                                </p>
                                                <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                                    {{ __('to') }}: <span
                                                        style="color: black; font-weight: 400;">{{ $item->order?->getStore?->name }}</span>
                                                </p>
                                                <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                                    {{ __('Remark') }}: <span
                                                        style="color: black; font-weight: 400;">{{ $item->order?->receive_remark }}</span>
                                                </p>
                                            @elseif($item->type == 'SEND')
                                                <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                                    {{ __('from') }}:
                                                    <span
                                                        style="color: black; font-weight: 400;">{{ $item->order?->getStore?->name }}</span>
                                                </p>
                                                <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                                    {{ __('to') }}:<span
                                                        style="color: black; font-weight: 400;">{{ $item->order?->send_address_order }}</span>
                                                </p>
                                                <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                                    {{ __('Remark') }}: <span
                                                        style="color: black; font-weight: 400;">{{ $item->order?->send_remark }}</span>
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="container-mute-gray">
                                        <h1 class="text-center" style="color: #099FD9;">
                                            @if ($item->type == 'RECEIVE' && $item->status_order == 'PENDING')
                                                <span>{{ __('receiveTheShirt') }}</span>
                                            @elseif($item->type == 'RECEIVE' && $item->status_order == 'GOSTORE')
                                                <span>{{ __('goToStore') }}</span>
                                            @elseif($item->type == 'SEND')
                                                <span>{{ __('goToReturnShirt') }}</span>
                                            @elseif($item->type == 'SEND' && $item->status_order == 'GOSTORE')
                                                <span>{{ __('sendShirtSuccess') }}</span>
                                            @endif
                                        </h1>
                                    </div>
                                </div>
                                {{-- <div class="col-12 col-md-9" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseExample{{ $key + 1 }}" aria-expanded="false"
                                aria-controls="collapseExample{{ $key + 1 }}">
                                <div class="d-flex justify-content-between">
                                    <p class="fw-bold">{{ $item->rider?->fullname() }} No. {{ $item->order?->no }}</p>
                                    <p class="fw-bold">กำหนดส่ง : {{ $item->order?->date }}</p>
                                </div>
                                <div>
                                    @if ($item->type == 'RECEIVE')
                                        <p class="text-mute">จาก: <span
                                                class="fw-bold">{{ $item->order?->receiveAddress?->address }}</span> >>
                                            ถึง:
                                            <span class="fw-bold">{{ $item->order?->getStore?->name }}</span>
                                        </p>
                                    @elseif($item->type == 'SEND')
                                        <p class="text-mute">จาก: <span
                                                class="fw-bold">{{ $item->order?->getStore?->name }}</span> >> <span
                                                class="fw-bold">{{ $item->order?->sendAddress?->address }}</span></p>
                                    @endif
                                </div>

                            </div>
                            <div class="col-12 col-md-3" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseExample{{ $key + 1 }}" aria-expanded="false"
                                aria-controls="collapseExample{{ $key + 1 }}">
                            </div> --}}
                                <div class="col-12 col-md-12 collapse" id="collapseExample{{ $key + 1 }}">
                                    <div class="container-mute-gray">
                                        <div class="detailsOrder">
                                            <div class="row">
                                                <div class="col-6">
                                                    <span class="fw-bold"
                                                        style="color: #099FD9;">{{ __('type') }}</span>
                                                </div>
                                                <div class="col-6 text-end">
                                                    <span class="fw-bold"
                                                        style="color: #099FD9;">{{ __('qty') }}</span>
                                                </div>
                                                @php
                                                    $tempService = 0;
                                                @endphp
                                                @foreach ($item->order?->getDetails ?? [] as $k => $value)
                                                    @if ($tempService != $value?->service_id)
                                                        @php
                                                            $tempService = $value?->service_id;
                                                        @endphp
                                                        <div class="col-12">
                                                            <span class="fw-bold"
                                                                style="color: #099FD9;">{{ $value?->service?->name }}</span>
                                                        </div>
                                                    @endif
                                                    <div class="col-6">
                                                        <p class="p-0">{{ $value->product?->name }}</p>
                                                    </div>
                                                    <div class="col-6 text-end">
                                                        <p class="p-0">x{{ $value->qty }}</p>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="form__files-container" id="files-list-container">
                                        </div>
                                        @if (@$item->status_order != 'PENDING')
                                            @if (@$item->order?->status_booking == App\Enums\OrderStatusEnums::PICKUP)
                                                @foreach ($item->order?->attachmentOrderPickup ?? [] as $i => $d)
                                                    <div class="form__files-container" id="files-list-container">
                                                        <div class="form__image-container-show ">
                                                            <img class="form__image" src="{{ $d->pathImage() }}"
                                                                alt="">
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                @foreach ($item->order?->attachmentOrderShipping ?? [] as $i => $d)
                                                    <div class="form__files-container" id="files-list-container">
                                                        <div class="form__image-container-show ">
                                                            <img class="form__image" src="{{ $d->pathImage() }}"
                                                                alt="">
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        @endif
                                        @if (@$item->status_order == 'PENDING')
                                            <div class="text-center submit mt-3">
                                                <button class="btn btn-success">{{ __('save') }}</button>
                                            </div>
                                            <div class="text-center mt-3">
                                                <button class="btn btn-success div-spinner d-none" type="button" disabled>
                                                    <span class="spinner-grow spinner-grow-sm" role="status"
                                                        aria-hidden="true"></span>
                                                    Loading...
                                                </button>
                                            </div>
                                        @endif
                                        {{-- <form action="{{ route('order.update', @$item->order?->id) }}" method="POST"
                                        enctype="multipart/form-data"
                                        onsubmit="submitForm(event, '{{ $item->order?->id }}', this)">
                                        @csrf
                                        @method('PUT')
                                        <h1>
                                            @if ($item->type == 'RECEIVE' && $item->status_order == 'PENDING')
                                                <span>เข้ารับเสื้อ</span>
                                            @elseif($item->type == 'RECEIVE' && $item->status_order == 'GOSTORE')
                                                <span>กำลังไปโรงงาน</span>
                                            @elseif($item->type == 'SEND')
                                                <span>กำลังไปส่งผ้าคืน</span>
                                            @elseif($item->type == 'SEND' && $item->status_order == 'GOSTORE')
                                                <span>ส่งผ้าคืนสำเร็จ</span>
                                            @endif
                                        </h1>
                                        <div class="mt-3 mb-3">
                                            @if (@$item->order?->status_booking == App\Enums\OrderStatusEnums::PICKUP)
                                                <div class="row">
                                                    @foreach (@$item->order?->attachmentOrderPickup ?? [] as $key => $data)
                                                        <div class="col-12 col-md-4">
                                                            <img src="{{ $data->pathImage() }}" alt=""
                                                                width="300" height="300" class="img-fluid">
                                                        </div>
                                                    @endforeach
                                                </div>
                                                @if ($item->status_order == 'PENDING')
                                                    <input type="text" class="d-none typestatus" id="typestatus"
                                                        value="PICKUP">
                                                    <div class="form__files-container" id="files-list-container">
                                                    </div>
                                                @endif
                                            @endif
                                            @if (@$item->order?->status_booking == App\Enums\OrderStatusEnums::SHIPPING)
                                                <div class="row">
                                                    @foreach (@$item->order?->attachmentOrderShipping ?? [] as $key => $data)
                                                        <div class="col-12 col-md-4">
                                                            <img src="{{ $data->pathImage() }}" alt=""
                                                                width="300" height="300" class="img-fluid">
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <div>
                                                    <div class="form__files-container" id="files-list-container">
                                                    </div>
                                                </div>
                                            @endif

                                        </div>
                                        <div>
                                            @if (@$item->status_order == 'PENDING')
                                                <button class="btn btn-success saveData"
                                                    data-id="{{ $item->id }}">Save</button>
                                            @endif
                                        </div>
                                    </form> --}}
                                    </div>
                                </div>
                                <div class="col-12" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseExample{{ $key + 1 }}" aria-expanded="false"
                                    aria-controls="collapseExample{{ $key + 1 }}">
                                    <div class="btn btn-primary w-100">{{ __('orderDetails') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            @endforeach
        </div>
    </div>
@endsection
@section('scripts')
    <link rel="stylesheet"
        href="{{ asset('css/uploadFile.css?v=') }}?ver={{ filemtime(public_path('css/uploadFile.css')) }}">
    {{-- <meta name="_token" content="{{ csrf_token() }}"> --}}
    {{-- <script src="{{ asset('js/uploadFile.js') }}?ver={{ filemtime(public_path('js/uploadFile.js')) }}"></script> --}}
    <script>
        let selectedFiles = {};
        // ฟังก์ชันตรวจสอบจำนวนไฟล์
        function checkFileLimit(event, id, data) {
            const fileInput = event.target;
            const files = fileInput.files;
            console.log(files[0].size);
            // ถ้าไม่เคยมีการเลือกไฟล์จาก input นี้ ให้สร้าง array ใหม่
            if (!selectedFiles[id]) {
                selectedFiles[id] = [];
            }
            const maxSize = 5 * 1024 * 1024; // 5 MB in bytes
            if (files[0].size > maxSize) {
                Swal.fire({
                    title: 'Warning!!!',
                    text: "Reduce the file size to less than 5MB.",
                    icon: 'warning',
                });
                fileInput.value = '';
            }
            console.log(selectedFiles[id].length)
            if (selectedFiles[id].length > 2) {
                Swal.fire({
                    title: 'Warning!!!',
                    text: "limit 3 image.",
                    icon: 'warning',
                });
                fileInput.value = '';
            }
            // เช็คจำนวนไฟล์
            if (files.length > 3) {
                Swal.fire({
                    title: 'Warning!!!',
                    text: "limit 3 image.",
                    icon: 'warning',
                });
                // รีเซ็ตไฟล์ที่เลือก
                fileInput.value = '';
            } else {
                for (let i = 0; i < files.length; i++) {
                    selectedFiles[id].push(files[i]);
                    previewImages(data.closest("form"), files[i], id, i)
                }


            }
        }
        // preview image
        function previewImages(form, file, id, index) {
            const FILES_LIST_CONTAINER = form.querySelector('.form__files-container');
            console.log(FILES_LIST_CONTAINER);
            const reader = new FileReader();
            reader.onload = function(event) {
                const content = `
        <div class="form__image-container js-remove-image" data-index="${index}" data-id="${0}"  onclick="removeFile(this, ${id})">
          <img class="form__image" src="${event.target.result}" alt="${id}">
        </div>
      `;
                FILES_LIST_CONTAINER.insertAdjacentHTML('beforeEnd', content);
                // FILES_LIST_CONTAINER.appendChild(content);
            };
            const div_show = form.querySelector('.collapse');
            div_show.classList.add("show");

            reader.readAsDataURL(file); // อ่านไฟล์เป็น Data URL
        }
        // remove file
        function removeFile(file, id) {
            const fileIndex = file.getAttribute('data-index');
            const form = file.closest("form");
            const inputFile = form.querySelector(".form__file");
            inputFile.value = "";
            selectedFiles[id].splice(fileIndex, 1);
            file.remove();
        }
        async function resizeImage(file, width, height) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                const reader = new FileReader();

                reader.onload = (e) => {
                    img.src = e.target.result;
                };

                img.onload = () => {
                    // สร้าง canvas และปรับขนาดภาพ
                    const canvas = document.createElement('canvas');
                    canvas.width = width;
                    canvas.height = height;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, width, height);

                    // แปลง canvas เป็น blob
                    canvas.toBlob(blob => {
                        resolve(blob); // ส่ง blob ที่ resize แล้วกลับไป
                    }, file.type, 0.9);
                };

                reader.onerror = reject;
                reader.readAsDataURL(file);
            });
        }

        async function submitForm(event, id, form, docno) {
            event.preventDefault(); // ป้องกันการส่งฟอร์มแบบปกติ
            console.log(someChecknavigator)
            console.log('position :' + positionLat + ' long : ' + positionLong);
            if (!someChecknavigator || !positionLat || !positionLong) {
                Swal.fire({
                    title: 'Warning!!!',
                    text: "Pls allow location before submit work.",
                    icon: 'warning',
                });
                doSomething();
                return;
            }
            const fileInput = form.querySelector('.form__file');
            const files = selectedFiles[id] ?? 0
            // check type
            const type = form.querySelector('.typestatus');
            const fileimagename = type.value == "PICKUP" ? "uploadImage[]" : "uploadImageSend[]";
            // ตรวจสอบว่ามีไฟล์หรือไม่
            if (files <= 0) {
                Swal.fire({
                    title: 'Error!!!',
                    text: "Pls upload image.",
                    icon: 'error',
                });
                return;
            }
            const spiner = form.querySelector('.div-spinner');
            spiner.classList.remove('d-none');
            const submitform = form.querySelector('.submit');
            submitform.classList.add('d-none');
            console.log(fileimagename);
            const formData = new FormData();
            formData.append("_token", $('input[name="_token"]').val());
            formData.append("_method", "PUT");
            formData.append("lat", positionLat);
            formData.append("long", positionLong);
            const newWidth = 800; // กำหนดความกว้างใหม่
            const newHeight = 800; // กำหนดความสูงใหม่
            const resizePromises = [];
            try {
                console.log(selectedFiles[id])
                console.log(type);
                // Resize รูปภาพ
                for (const file of selectedFiles[id]) {
                    console.log(file.size);
                    formData.append(fileimagename, file, `${file.name}`)
                    // formData.append(fileimagename, file, file.name);
                    // resizePromises.push(
                    //     formData.append(fileimagename, file, `${file.name}`)
                    // resizeImage(file, newWidth, newHeight).then(resizedBlob => {
                    //     formData.append(fileimagename, resizedBlob, `resized_${file.name}`);
                    // })
                    // );
                    // const resizedBlob = await resizeImage(file, newWidth, newHeight);
                    // formData.append('uploadImage[]', resizedBlob, `resized_${file.name}`);
                }

                // await Promise.all(resizePromises);
                // console.log(resizePromises);
                console.log(formData);

                // ส่งฟอร์มด้วย Fetch API
                let url = "{{ route('order.update', ':id') }}"
                $.ajax({
                    url: url.replace(':id', id),
                    type: 'POST', // ใช้ POST และ `_method` สำหรับ PUT
                    data: formData,
                    processData: false, // ไม่แปลง `FormData` เป็น String
                    contentType: false, // ตั้งค่าให้เหมาะสมสำหรับการส่งไฟล์
                    success: function(response) {
                        if (response.status != 200) {
                            Swal.fire({
                                title: 'Error!!!',
                                text: "Cannot update image.",
                                icon: 'error',
                            });
                            // const spiner = form.querySelector('.div-spinner');
                            spiner.classList.add('d-none');
                            // const submitform = form.querySelector('.submit');
                            submitform.classList.remove('d-none');
                        } else {
                            const targetUserId = 2;
                            sendData({
                                userId,
                                targetUserId,
                                text: `{"type": "order", "message": "order#${docno}", "order_id": "${id}"}`,
                            });
                            // wsOrderRider.send(JSON.stringify());
                            Swal.fire({
                                title: 'Success',
                                text: "Success save order.",
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            title: 'Error!!!',
                            text: "Cannot update image.",
                            icon: 'error',
                        });
                        // const spiner = form.querySelector('.div-spinner');
                        spiner.classList.add('d-none');
                        // const submitform = form.querySelector('.submit');
                        submitform.classList.remove('d-none');
                        console.error("Error:", error);
                    }
                });
                // const response = await fetch(url.replace(':id', id), {
                //     method: 'POST',
                //     body: formData
                // });

                // const result = await response.json();

                // if (result.status != 200) {
                //     Swal.fire({
                //         title: 'Error!!!',
                //         text: "Cannot update image.",
                //         icon: 'error',
                //     });
                //     // const spiner = form.querySelector('.div-spinner');
                //     spiner.classList.add('d-none');
                //     // const submitform = form.querySelector('.submit');
                //     submitform.classList.remove('d-none');
                // } else {
                //     const targetUserId = 2;
                //     sendData({
                //         userId,
                //         targetUserId,
                //         text: `{"type": "order", "message": "order#${docno}", "order_id": "${id}"}`,
                //     });
                //     // wsOrderRider.send(JSON.stringify());
                //     Swal.fire({
                //         title: 'Success',
                //         text: "Success save order.",
                //         icon: 'success',
                //     }).then((result) => {
                //         if (result.isConfirmed) {
                //             location.reload();
                //         }
                //     });
                // }

            } catch (error) {
                // const spiner = form.querySelector('.div-spinner');
                spiner.classList.add('d-none');
                // const submitform = form.querySelector('.submit');
                submitform.classList.remove('d-none');
                console.error('Error processing the image:', error);
                Swal.fire({
                    title: 'Error!!!',
                    text: "Cannot update image.",
                    icon: 'error',
                });
            }
        }
    </script>
@endsection