@extends('frontend::layouts.master')
@section('style')
    <style>
        .area {
            width: 100%;
            padding: 15px 0;
        }

        #drop-area {
            border: 2px dashed #bbb;
            -webkit-border-radius: 5px;
            border-radius: 15px;
            padding: 50px;
            text-align: center;
            font: 21pt bold arial;
            color: #bbb;
            align-items: center;
            display: flex;
            font-size: 18px;
            font-weight: 500;
            justify-content: center;
            width: 100%;
            color: #000;
            font-family: quicksand, notosans, sans-serif;
            position: relative;
        }

        #drop-area>img.upload {
            margin-left: 5px;
            max-width: 25px;
        }

        .clear-button {
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            position: absolute;
            bottom: 10px;
            width: calc(100% - 20px) !important;
        }

        .uploaded-image {
            max-width: 100%;
            display: block;
            margin: auto;
            margin-bottom: 10px;
            border-radius: 8px;
        }

        .file-icon {
            margin-bottom: 10px;
        }
    </style>
@endsection
@section('content')
    <div class="col-12 my-6">
        <div class="max-w-lg mx-auto bg-primary">
            <div class=" py-8 mb-4 xl:mb-8">
                <img src="{{ Module::asset('frontend:img/logo-w.svg') }}" alt="Trisak" class="w-32 mx-auto mb-4">
            </div>
        </div>
        <form id="bank_transfer_frm" onsubmit="return false;">
            <input type="hidden" name="order_uid" value="{{ $data['uuid'] }}">
            <div class="max-w-lg mx-auto">
                <div class="px-4">
                    <div class="flex items-center justify-between w-full">
                        <p class="font-bold">{{ __('frontend::frontend.member_order.order_no') }}</p>
                        <a class="font-bold underline">{{ $data['fake_order_no'] }}</a>
                    </div>
                </div>

                <div class="px-4">
                    <div class="flex items-center justify-between w-full">
                        <p class="text-13">{{ __('frontend::frontend.member_order.order_date') }}</p>
                        <p class="text-13">{{ $data['order']['order_at'] ?? now() }}</p>
                    </div>
                </div>

                <div class="bg-gray-100 rounded-lg p-4 my-4">
                    <div class="mx-auto">
                        <div class="flex items-center justify-between w-full">
                            <p class="font-bold text-18">{{ __('frontend::frontend.transfer.pay_via') }}</p>
                            <div class="">
                                <select name="bank_id" id="bank_id" onchange="initBankData(this.value)">
                                    @php
                                        $c = 0;
                                    @endphp
                                    @foreach ($data['banks'] as $bank)
                                        <option value="{{ $bank['id'] }}">{{ $bank['bank_name'] }}</option>
                                        @php
                                            if ($c == 0) {
                                                $default_bank = $bank;
                                            }
                                            $c++;
                                        @endphp
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div>
                        <div class="flex items-center justify-between w-full">
                            <p>{{ __('frontend::frontend.transfer.no') }}</p>
                            <p id="acc_number_text">{{ $default_bank['acc_number'] ?? '' }}</p>
                        </div>
                    </div>
                    <div>
                        <div class="flex items-center justify-between w-full">
                            <p>{{ __('frontend::frontend.transfer.name') }}</p>
                            <p id="acc_name_text">{{ $default_bank['acc_name'] ?? '' }}</p>
                        </div>
                    </div>
                    <div>
                        <div class="flex items-center justify-between w-full py-6 px-8">
                            <img id="bank_image" src="{{ $default_bank['image'] ?? '' }}" alt="logo" class="w-100 mx-auto m-4">
                        </div>
                    </div>
                </div>
                <div class="w-full p-2">
                    <div class="form-slip">
                        <label class="required" for="slip"> {{ __('frontend::frontend.transfer.slip') }}</label>
                        <input class="dn" id="slip" name="slip" type="file" placeholder="Pay-in Slip" accept="image/*,.pdf" hidden>
                        <div class="area">
                            <div id="drop-area">
                                Upload <img class="upload" src="{{ Module::asset('frontend:img\/upload.svg') }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full px-2">
                    <div class="flex items-center -mx-2">
                        <div class="w-1/2 p-2">
                            <div class="com-form-basic float form-style input-group">
                                <input id="date" name="date" type="date" placeholder="Transfer Date" value="{{ date('Y-m-d') }}">
                                <label for="date">{{ __('frontend::frontend.transfer.date') }}</label>
                            </div>
                        </div>
                        <div class="w-1/2 p-2">
                            <div class="com-form-basic float form-style input-group">
                                <input id="time" name="time" type="time" placeholder="Transfer Time" value="{{ date('H:i') }}">
                                <label for="time">{{ __('frontend::frontend.transfer.time') }}</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full px-4 border-b pb-4">
                    <div class="flex items-center justify-between w-full">
                        <p class="font-bold">{{ __('frontend::frontend.amount') }}</p>
                        <p class="font-bold text-24">{{ number_format($data['order']['grand_total'], 2) }} {{ __('frontend::frontend.label.thb') }}</p>
                    </div>
                </div>
                <div class="w-full px-2 pt-6 text-right">
                    <button type="button" onclick="updatePaymentSlip();" class="button-primary w-full">
                        {{ __('frontend::frontend.submit') }}
                    </button>
                </div>
                @if (!empty($data['order']['quotation_status']))
                    <div class="w-full px-2 pt-2 text-right">
                        <a href="{{ mwz_route('frontend.member.quotation_detail', [$data['order']['uuid']]) }}" class="button-primary-bordered w-full text-black">
                            {{ __('frontend::frontend.back_to_qt') }}
                        </a>
                    </div>
                @else
                    <div class="w-full px-2 pt-2 text-right">
                        <a href="{{ mwz_route('frontend.slug', ['cart']) }}" class="button-primary-bordered w-full text-black">
                            {{ __('frontend::frontend.back_to_order') }}
                        </a>
                    </div>
                @endif
            </div>
        </form>
    </div>
@endsection


@section('script')
    <!-- validator js -->
    <script src="{{ asset('assets/libs/validator/jquery.validate.min.js') }}"></script>
    {{ module_vite('build-frontend', 'resources/assets/js/cart.js') }}
    <script>
        const BANKS = $.parseJSON('""');

        const dropArea = document.getElementById('drop-area');
        const fileInput = document.getElementById('slip');

        // Utility function to prevent default browser behavior
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        // Event listeners to prevent default browser behavior on drag events
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        // Highlight drop area on drag over
        dropArea.addEventListener('dragenter', () => {
            dropArea.classList.add('highlight');
        }, false);

        dropArea.addEventListener('dragleave', () => {
            dropArea.classList.remove('highlight');
        }, false);

        dropArea.addEventListener('dragover', () => {
            dropArea.classList.add('highlight');
        }, false);

        // Remove highlight and handle drop
        dropArea.addEventListener('drop', (e) => {
            dropArea.classList.remove('highlight');
            handleDrop(e);
        }, false);

        // Trigger file input click on drop-area click
        dropArea.addEventListener('click', (e) => {
            if (e.target !== document.querySelector('.clear-button')) {
                fileInput.click();
            }
        });

        // Handle file input change
        fileInput.addEventListener('change', (e) => {
            handleFiles(e.target.files);
        });

        // Handle file drop
        function handleDrop(e) {
            let dt = e.dataTransfer;
            let files = dt.files;
            handleFiles(files);
        }

        // Handle files, display image, and add clear button
        function handleFiles(files) {
            if (files.length > 1) {
                clearFile();
                msg_noti("error", "{{ __('frontend::frontend.transfer.slip_image_placeholder') }}");
                return false;
            }
            if (files.length > 0) {
                const file = files[0];

                const maxSize = 5 * 1024 * 1024; // 5 MB in bytes
                if (file.size > maxSize) {
                    clearFile();
                    msg_noti("error", "{{ __('frontend::frontend.transfer.slip_image_placeholder') }}");
                    return false;
                }

                if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg') {
                    dropArea.innerHTML = ''; // Clear existing content
                    const img = document.createElement('img');
                    img.classList.add('uploaded-image');
                    img.file = file;
                    const clearButton = document.createElement('button');
                    clearButton.innerHTML = 'Clear';
                    clearButton.classList.add('clear-button');
                    clearButton.classList.add('button-primary');
                    //clearButton.classList.add('text-white');
                    //clearButton.classList.add('uppercase');
                    dropArea.appendChild(img);
                    dropArea.appendChild(clearButton);
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);

                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    fileInput.files = dataTransfer.files;

                    clearButton.addEventListener('click', function(e) {
                        e.stopPropagation();
                        clearFile();
                    });
                } else if (file.type === 'application/pdf') {
                    dropArea.innerHTML = ''; // Clear existing content
                    const icon = document.createElement('img');
                    icon.src = '{{ Module::asset('frontend:img\/pdf.svg') }}'; // Path to your PDF icon
                    icon.classList.add('file-icon');
                    const clearButton = document.createElement('button');
                    clearButton.innerHTML = 'Clear';
                    clearButton.classList.add('clear-button');
                    clearButton.classList.add('button-primary');
                    clearButton.classList.add('text-white');
                    clearButton.classList.add('uppercase');
                    dropArea.appendChild(icon);
                    dropArea.appendChild(clearButton);

                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    fileInput.files = dataTransfer.files;

                    clearButton.addEventListener('click', function(e) {
                        e.stopPropagation();
                        clearFile();
                    });

                } else {
                    clearFile();
                    console.log(file.type);
                    msg_noti("error", "{{ __('frontend::frontend.transfer.invalid_filetype') }}");
                }
            }
        }

        // Clear file input and remove image
        function clearFile() {
            document.getElementById('slip').value = '';
            var event = new Event('change');
            document.getElementById('slip').dispatchEvent(event);
            // Clear drop area
            dropArea.innerHTML = 'Upload <img class="upload" src="{{ Module::asset('frontend:img\/upload.svg') }}">';
        }
    </script>
@endsection