@extends('layouts.master', ['title' => 'List - Payment Terminal - Pages'])

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb lg:flex items-start">
        <div>
            <h1>Payment Terminals</h1>
            <ul>
                <li><a href="#no-link">Pages</a></li>
                <li class="divider la la-arrow-right"></li>
                <li><a href="#no-link">Payment Terminal</a></li>
                <li class="divider la la-arrow-right"></li>
                <li>List</li>
            </ul>
        </div>

        <div class="flex flex-wrap gap-2 items-center ltr:ml-auto rtl:mr-auto mt-5 lg:mt-0">
            <!-- Search -->
{{--            <form class="flex flex-auto">--}}
{{--                <label class="form-control-addon-within rounded-full">--}}
{{--                    <input class="form-control border-none" placeholder="Search">--}}
{{--                    <button--}}
{{--                        class="text-gray-300 dark:text-gray-700 text-xl leading-none la la-search ltr:mr-4 rtl:ml-4"></button>--}}
{{--                </label>--}}
{{--            </form>--}}

            <div class="flex gap-x-2">

                <!-- Sort By -->
{{--                <div class="dropdown">--}}
{{--                    <button class="btn btn_outlined btn_secondary uppercase" data-toggle="dropdown-menu">--}}
{{--                        Sort By--}}
{{--                        <span class="ltr:ml-3 rtl:mr-3 la la-caret-down text-xl leading-none"></span>--}}
{{--                    </button>--}}
{{--                    <div class="dropdown-menu">--}}
{{--                        <a href="#no-link">Ascending</a>--}}
{{--                        <a href="#no-link">Descending</a>--}}
{{--                    </div>--}}
{{--                </div>--}}

                <!-- Add New -->
                <button
                    data-toggle="modal"
                    data-target="#exampleModalCentered"
                    class="btn btn_primary uppercase">Add New</button>
            </div>
        </div>
    </section>

    <div class="card p-5">

        <div class="overflow-x-auto">
            <table class="table table-auto table_hoverable w-full">
                <thead>
                <tr>
                    <th class="ltr:text-left rtl:text-right uppercase">Terminal Id</th>
                    <th class="text-center uppercase">Serial Number</th>
                    <th class="text-center uppercase">Remark</th>
                    <th class="text-center uppercase"></th>

                </tr>
                </thead>
                <tbody>
                @if($paymentTerminals->count() > 0)
                    @foreach($paymentTerminals as $terminal)
                        <tr>

                            <td>{{$terminal->terminal_id}}</td>
                            <td class="text-center">{{$terminal->serial_number}}</td>
                            <td class="text-center">{{$terminal->remark}}</td>


                            <td class="ltr:text-right rtl:text-left whitespace-nowrap">
                                <div class="inline-flex ltr:ml-auto rtl:mr-auto">
                                    <button data-toggle="modal"
                                            data-target="#exampleModalCentered"
                                            @click="selectTerminal('{{$terminal}}')"
                                       class="btn btn-icon btn_outlined btn_secondary">
                                        <span class="la la-pen-fancy"></span>
                                    </button>
                                    <button onclick="removePayment('{{$terminal->id}}')"
                                            class="btn btn-icon btn_outlined btn_danger ltr:ml-2 rtl:mr-2"
                                            data-toggle="modal"
                                            data-target="#exampleModalCentered">
                                        <span class="la la-trash-alt"></span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="6" class="text-center">No records found</td>
                    </tr>
                @endif
                </tbody>
            </table>
        </div>

    </div>

    <div id="exampleModalCentered" class="modal" data-animations="fadeInDown, fadeOutUp" data-static-backdrop>
        <div class="modal-dialog modal-dialog_centered max-w-2xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" v-if="isEdit">Edit Payment Terminal</h2>
                    <h2 class="modal-title" v-else>Add Payment Terminal</h2>

                    <button class="close la la-times" data-dismiss="modal" @click="closeModal()"></button>
                </div>
                <div class="modal-body">
                    {{--Terminal ID--}}
                    <div class="mb-5">
                        <label class="label block mb-2" for="input">Terminal ID</label>
                        <input id="input" class="form-control" v-model="terminalId"
                               placeholder="Enter terminal id here">
                    </div>

                    {{--Serial Number--}}
                    <div class="mb-5">
                        <label class="label block mb-2" for="input">Serial Number</label>
                        <input id="input" class="form-control" v-model="serialNumber"
                               placeholder="Enter serial number here">
                    </div>

                    {{--Remark--}}
                    <div class="mb-5">
                        <label class="label block mb-2" for="remark">Remark</label>
                        <textarea id="remark" v-model="remark" class="form-control" rows="5"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="flex ltr:ml-auto rtl:mr-auto">
                        <button class="btn btn_secondary uppercase" data-dismiss="modal" @click="closeModal()">Close</button>
                        <button class="btn btn_primary ltr:ml-2 rtl:mr-2 uppercase" @click="submitChangePassword()">Save Changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        const {createApp} = Vue

        createApp({

            data() {
                return {
                    isEdit : false,
                    selectedTerminalId: '',

                    terminalId: '',
                    serialNumber: '',
                    remark: '',

                }
            },
            methods: {

                closeModal() {
                    this.isEdit = false;
                    this.selectedTerminalId = '';

                    this.terminalId = '';
                    this.serialNumber = '';
                    this.remark = '';
                },

                selectTerminal(terminal) {
                    let terminalObj = JSON.parse(terminal);
                    this.isEdit = true;
                    this.selectedTerminalId = terminalObj.id;

                    this.terminalId = terminalObj.terminal_id;
                    this.serialNumber = terminalObj.serial_number;
                    this.remark = terminalObj.remark;
                },
                clearForm() {
                    this.terminalId = '';
                    this.serialNumber = '';
                    this.remark = '';
                },
                handleInput(event, target) {
                    // 从输入框的值中提取只包含0到9的数字
                    let filteredValue = event.target.value.replace(/[^0-9]/g, '');
                    if (filteredValue.length > 6) {
                        filteredValue = filteredValue.slice(0, 6);
                    }
                    switch (target) {
                        case 'oldPIN':
                            this.oldPIN = filteredValue;
                            break;
                        case 'newPIN':
                            this.newPIN = filteredValue;
                            break;
                        case 'confirmPIN':
                            this.confirmPIN = filteredValue;
                            break;
                    }
                },
                submitChangePassword() {
                    if (this.terminalId === '') {
                        alert('Terminal ID is required');
                        return;
                    }

                    if (this.serialNumber === '') {
                        alert('Serial Number is required');
                        return;
                    }


                    axios.post('{{route('paid-accounts.payments.terminals-store')}}', {
                        _token: '{{csrf_token()}}',
                        selected_payment_id: this.selectedTerminalId,
                        terminal_id: this.terminalId,
                        serial_number: this.serialNumber,
                        remark: this.remark,
                    })
                        .then(function (response) {
                            console.log(response);
                            if (response.status === 200) {
                                alert(response.data.message);
                                window.location.reload();
                            } else {
                                alert(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                }
            }

        }).mount('#app')
    </script>

@endsection