@extends('layout')

@section('h4-page', __('Rider Payment'))

@section('contents')
    <div class="row layout-top-spacing">
        <div class="col-12 mb-md-0 mb-4">
            <div class="card mb-5">
                <div class="card-body">
                 
                    <form action="{{ route('rider.order_payment_store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row g-3 align-items-center mb-4">
                            <div class="col">
                                <label for="date_start" class="form-label">{{ __('StartDate') }}</label>
                                <input type="date" id="date_start" name="date_start" class="form-control"
                                    value="@if(request()?->date_start){{date('Y-m-d', strtotime(request()?->date_start))}}@else{{ now()->format('Y-m-d') }}@endif"
                                    onchange="searchInput()">
                            </div>
                            <div class="col">
                                <label for="date_end" class="form-label">{{ __('EndDate') }}</label>
                                <input type="date" id="date_end" name="date_end" class="form-control"
                                    value="@if(request()?->date_end){{date('Y-m-d', strtotime(request()?->date_end))}}@else{{ now()->format('Y-m-d') }}@endif"
                                    onchange="searchInput()">
                            </div>
                            <div class="col">
                                <label for="date_end" class="form-label">{{ __('RiderName') }}</label>
                                <select name="rider_id" id="rider_id" class="form-select">
                                    <option value="">{{ __('-Select Rider-') }}</option>
                                    @foreach ($riders as $key => $item)
                                        <option value="{{ $item->id }}"
                                            @if (request()?->rider_id == $item->id) selected @endif>{{ $item->fullname() }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col">
                                <button type="button" id="search_data" class="btn btn-info mt-4">{{ __('Search') }}</button>
                                {{-- <div class="btn btn-success mt-4" onclick="exportExcel()">{{ __('ExportExcel') }}</div> --}}
                            </div>
                          
                        </div>
                        <div class="table-responsive">
                            <table class="table" id="table">
                                <thead>
                                    <tr>
                                        <th style="max-width: 30px; min-width:30px; width:30px;"><input type="checkbox"
                                                onclick="checkAllList(this)" id="checkboxAll"></th>
                                        <th>{{ __('OrderNo') }}</th>
                                        <th>{{ __('Type') }}</th>
                                        <th class="text-end">{{ __('price') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        {{-- <td>
                                            <div class="btn btn-primary" id="add-row">{{ __('Add row') }}</div>
                                        </td> --}}
                                        <td colspan="3" class="text-end"><span>รวมทั้งหมด</td>
                                        <td class="p-2 text-end"><span class="total"
                                                id="total">{{ number_format(0, 2) }}</td>
                                    </tr>
                                </tfoot>
                                <input type="text" name="total" id="total_price" class="d-none">
                            </table>
                        </div>
                        <div class="mt-3">
                            <label for="note" class="form-label">{{ __('Note') }}</label>
                            <textarea class="form-control" name="note" id="note" cols="30" rows="5" style="resize: none;"></textarea>
                        </div>
                        <div class="mt-3">
                            <label for="method" class="form-label">{{ __('Method Payment') }}</label>
                            <select name="method" class="form-select" id="method" onchange="methodOnchange(this)">
                                <option value="bank">{{ __('Bank') }}</option>
                                <option value="promptpay">{{ __('promptpay') }}</option>
                            </select>
                            <div class="mt-3 div-bank">
                                <p>{{ __('Bank') }} : <span id="bank"></span> </p>
                                <p>{{ __('Bank account') }} : <span id="bankAccount"></span></p>
                                <p>{{ __('Bank account number') }} : <span id="bankAccountNumber"></span> <span
                                        class="btn btn-primary" onclick="cliclCopy('bank')">copy</span></p>
                            </div>
                            <div class="mt-3 div-promptpay d-none">
                                <p>{{ __('promptpay') }} : <span class="promptpay" id="promptpay"></span> <span
                                        class="btn btn-primary" onclick="cliclCopy('promptpay')">copy</span></p>
                            </div>

                        </div>
                        <div class="mt-3">
                            <input name="image" type="file" accept="image/jpeg,image/png" class="form-control"
                                onchange="previewImage()">
                            <div class="preview-image d-none pt-3">
                                <img src="#" alt="preview-image"
                                    style="width: 300px; max-width:300px; height: auto;">
                            </div>
                        </div>
                        <div class="mt-3">
                            <a href="{{ route('rider.order_payment') }}"
                                class="btn bg-gradient-success">{{ __('back') }}</a>
                            <button class="btn btn-success" type="submit">{{ __('save') }}</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let dataOrder = [];
        let dataSelect = [];
        let total = 0;
        let indexRow = 0;
        const formatter = new Intl.NumberFormat('th-TH', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
        $("#table").on("click", "#add-row", function() {
            indexRow++;
            var html = `
            <tr>
                <td><input type="checkbox" onclick="checkList(this)"><input type="text" class="form-control input-check" name="check[]" value="0"></td>
                <td><select name="order_id[]" class="select-td form-select" onchange="onchangeSelect(this, ${indexRow})"></select></td>
                <td><span class="type"></span></td>
                <td class="p-2 text-end"><input type="text" class="form-control price" name="amount[]" readonly></span></td>
                <td><div class="btn btn-danger" onclick="deleteRow(this)">Del</div></td>
            </tr>
            `
            $("#table tbody").append(html)
            var selectAll = document.querySelectorAll(".select-td");
            var last = selectAll[selectAll.length - 1];
            last.innerHTML = tempOrder(dataOrder);
        })

        function checkAllList(checkbox) {
            var checkboxs = document.querySelectorAll('tbody input[type=checkbox]')
            checkboxs.forEach(element => {
                var order_id = element.closest("tr").querySelector(".order_id").value;
                var input = element.closest("tr").querySelector(".input-check");
                var order = dataOrder.find(x => x.id == order_id);
                if (!element.checked) {
                    element.checked = true;
                    input.value = 1;
                    total += parseFloat(order.price);
                    $("#total").html(formatter.format(total));
                    $("#total_price").val(formatter.format(total));
                    dataSelect[index] = order
                } else {
                    element.checked = false;
                    input.value = 0;
                    total -= parseFloat(order.price);
                    $("#total").html(formatter.format(total));
                    $("#total_price").val(formatter.format(total));
                    dataSelect[index] = {
                        id: null
                    };
                }
            });
        }

        function checkList(checkbox) {
            var input = checkbox.closest("tr").querySelector(".input-check");
            var order_id = checkbox.closest("tr").querySelector(".order_id").value;
            if (checkbox.checked) {
                input.value = 1;
                var order = dataOrder.find(x => x.id == order_id);
                total += parseFloat(order.price);
                $("#total").html(formatter.format(total));
                $("#total_price").val(formatter.format(total));
                dataSelect[index] = order
            } else {
                input.value = 0;
                var order = dataOrder.find(x => x.id == order_id);
                total -= parseFloat(order.price);
                $("#total").html(formatter.format(total));
                $("#total_price").val(formatter.format(total));
                dataSelect[index] = {
                    id: null
                };
            }
        }

        function tempOrder(data) {
            let html = `<option value=''>{{ __('--- Select Order ---') }}</option>`;
            data.forEach(element => {
                html += `<option value="${element.id}">${element.order} ${element.type}</option>`
            });
            return html;
        }

        function deleteRow(e) {
            var me = e.closest("tr").querySelector(".select-td");
            var order = dataOrder.find(x => x.id == me.value);
            if (order) {
                total -= parseFloat(order.price);
                $("#total").html(formatter.format(total));
                $("#total_price").val(formatter.format(total));
                e.closest("tr").remove()
                var findDataSelect = dataSelect.findIndex(x => x.id == order.id);
                dataSelect.splice(findDataSelect, 1)
            } else {
                e.closest("tr").remove()
            }


        }

        function getOrderByRiderId() {
            var date_start = $("#date_start").val();
            var date_end = $("#date_end").val();
            var rider_id = $("#rider_id").val();
            
            var url = "{{ route('rider.getMapOrderRiderByRiderId', ':id') }}";
            url = url.replace(':id', rider_id);

            var params = [];
            if (date_start) params.push(`start_date=${encodeURIComponent(date_start)}`);
            if (date_end) params.push(`end_date=${encodeURIComponent(date_end)}`);
            if (params.length > 0) {
                url += '?' + params.join('&');
            }

            $.ajax({
                url: url,
                type: "GET",
                success: function(res) {
                    document.querySelector("#table tbody").innerHTML = "";
                    document.getElementById("checkboxAll").checked = false;
                    indexRow = 0;
                    total = 0;
                    $("#total").html(formatter.format(total));
                    $("#total_price").val(formatter.format(total));
                    dataOrder = [];
                    dataSelect = [];

                    if (res.code === 200) {
                        var data = res.data;
                        if (data.length === 0) {
                            // Show message if no data found
                            $("#table tbody").html(`
                                <tr>
                                    <td colspan="4" class="text-center">{{ __('ไม่พบรายการที่ยังไม่ชำระ.') }}</td>
                                </tr>
                            `);
                            return;
                        }

                        dataOrder = data;

                        for (let i = 0; i < data.length; i++) {
                            indexRow++;
                            var html = `
                            <tr>
                                <td><input type="checkbox" onclick="checkList(this)"><input type="text" class="form-control input-check d-none" name="check[]" value="0"></td>
                                <td><input type="text" value="${data[i].id}" name="order_id[]" class="d-none order_id">${data[i].order}</td>
                                <td><span class="type">${data[i].type}</span></td>
                                <td class="p-2 text-end">${Number(data[i].price).toFixed(2)}<input type="text" class="form-control price d-none" name="amount[]" readonly value="${Number(data[i].price).toFixed(2)}"></span></td>
                            </tr>
                            `;
                            $("#table tbody").append(html);
                        }

                        $("#bank").html(res.rider.bank);
                        $("#bankAccount").html(res.rider.bank_account);
                        $("#bankAccountNumber").html(res.rider.bank_account_number);
                        $("#promptpay").html(res.rider.promptpay);
                    } else {
                        $("#table tbody").html(`
                            <tr>
                                <td colspan="4" class="text-center">{{ __('An error occurred while fetching data.') }}</td>
                            </tr>
                        `);
                    }
                },
                error: function(err) {
                    console.error("Error fetching rider orders:", err);
                    $("#table tbody").html(`
                        <tr>
                            <td colspan="4" class="text-center">{{ __('An error occurred. Please try again.') }}</td>
                        </tr>
                    `);
                }
            });
        }


        $('#search_data').on('click', function() {
                getOrderByRiderId();
        });

        function onchangeSelect(e, index) {
            console.log('index' + index)
            var order = dataOrder.find(x => x.id == e.value);
            if (dataSelect.some(x => x.id == e.value)) {
                Swal.fire({
                    title: '{{ __('warning') }}',
                    text: "{{ __('order selected.') }}",
                    confirmButtonText: '{{ __('OK') }}',
                    icon: 'error',
                });
                e.value = "";
                total -= parseFloat(dataSelect[index].price);
                $("#total").html(formatter.format(total));
                $("#total_price").val(formatter.format(total));
                dataSelect[index] = {
                    id: null
                };
                // dataSelect.splice(index, 1)
                console.log(dataSelect)
                return false
            }
            console.log(dataSelect.some(x => x.id == e.value))
            e.closest("tr").querySelector(".type").innerText = order.type;
            e.closest("tr").querySelector(".price").value = Number(order.price).toFixed(2);
            total += parseFloat(order.price);
            $("#total").html(formatter.format(total));
            $("#total_price").val(formatter.format(total));

            dataSelect[index] = order
            console.log(dataSelect)
        }

        function previewImage() {
            var preview = document.querySelector('.preview-image');
            var file = document.querySelector('input[type=file]').files[0];
            var reader = new FileReader();

            reader.onloadend = function() {
                preview.classList.remove("d-none");
                preview.querySelector('img').src = reader.result;
            }
            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.classList.add("d-none");
            }
        }

        function methodOnchange(e) {
            var bank = document.querySelector('.div-bank');
            var promptpay = document.querySelector('.div-promptpay');
            if (e.value == 'bank') {

                bank.classList.remove('d-none');
                promptpay.classList.add('d-none');
            } else {
                bank.classList.add('d-none');
                promptpay.classList.remove('d-none');
            }
        }

        function cliclCopy(type) {

            if (type == 'bank' && writeClipboardText($('#bankAccountNumber').html())) {
                Swal.fire({
                    title: "{{ __('Copy message auto.') }}",
                    text: "{{ __('Copy message auto.') }}",
                    icon: 'success',
                });
            } else if (type == 'promptpay' && writeClipboardText($('#promptpay').html())) {
                Swal.fire({
                    title: "{{ __('Copy message auto.') }}",
                    text: "{{ __('Copy message auto.') }}",
                    icon: 'success',
                });
            } else {
                Swal.fire({
                    title: 'Error!!!',
                    text: "{{ __('Cannot generate link.') }}",
                    icon: 'error',
                });
            }
        }
        async function writeClipboardText(text) {
            try {
                await navigator.clipboard.writeText(text);
                return true;
            } catch (error) {
                console.error(error.message);
                return false;
            }
        }
    </script>
@endsection