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

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb lg:flex items-start">
        <div>
            <h1>Payment Methods</h1>
            <ul>
                <li><a href="#no-link">Pages</a></li>
                <li class="divider la la-arrow-right"></li>
                <li><a href="#no-link">Payment Method</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 -->
                <a href="{{ route('trial-accounts.payments.add-view')}}" class="btn btn_primary uppercase">Add New</a>
            </div>
        </div>
    </section>

    <!-- List -->
    <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">Code</th>
                    <th class="text-center uppercase">Description</th>
                    <th class="text-center uppercase">Payment Type</th>
                    <th class="text-center uppercase"></th>

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

                            <td>{{$payment->code}}</td>
                            <td class="text-center">{{$payment->description}}</td>

                            @switch($payment->type)
                                @case(0)
                                    <td class="text-center">CASH</td>
                                    @break
                                @case(1)
                                    <td class="text-center">QR PAYMENT</td>
                                    @break
                                @case(2)
                                    <td class="text-center">PAYMENT TERMINAL</td>
                                    @break
                                @case(3)
                                    <td class="text-center">OTHERS</td>
                                    @break

                            @endswitch


                            <td class="ltr:text-right rtl:text-left whitespace-nowrap">
                                <div class="inline-flex ltr:ml-auto rtl:mr-auto">
                                    <a href="{{route('trial-accounts.payments.edit-view', $payment->id)}}" class="btn btn-icon btn_outlined btn_secondary">
                                        <span class="la la-pen-fancy"></span>
                                    </a>
                                    <button onclick="removePayment('{{$payment->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>

    <!-- Centered -->
    <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">Remove Payment Method</h2>
                    <button class="close la la-times" data-dismiss="modal" onclick="closeRemoveModal()"></button>
                </div>
                <div class="modal-body">
                    <p>   Do you want remove this payment method?</p>

                </div>
                <div class="modal-footer">
                    <div class="flex ltr:ml-auto rtl:mr-auto">
                        <button class="btn btn_secondary uppercase" data-dismiss="modal" onclick="closeRemoveModal()">Close</button>
                        <button class="btn btn_primary ltr:ml-2 rtl:mr-2 uppercase" onclick="confirmRemoveFunction()">Confirm</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--    <div class="mt-5">--}}
    {{--        @include('partials._pagination')--}}
    {{--    </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>
        let paymentId = '';


        function removePayment(id) {
            paymentId = id;
        }

        function confirmRemoveFunction() {
            axios.post( '{{route('trial-accounts.payments.delete')}}',{
                _token: '{{ csrf_token() }}',
                id: paymentId
            })
                .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);
                });
        }

        function closeRemoveModal() {
            paymentId = '';
        }


    </script>


    {{--    <script>--}}
    {{--        const {createApp} = Vue--}}

    {{--        createApp({--}}

    {{--            data() {--}}
    {{--                return {--}}
    {{--                    oldPassword: '',--}}
    {{--                    newPassword: '',--}}
    {{--                    confirmPassword: '',--}}
    {{--                }--}}
    {{--            },--}}
    {{--            methods: {--}}
    {{--                clearForm() {--}}
    {{--                    this.oldPassword = '';--}}
    {{--                    this.newPassword = '';--}}
    {{--                    this.confirmPassword = '';--}}
    {{--                },--}}
    {{--                submitChangePassword() {--}}
    {{--                    if (this.oldPassword === '') {--}}
    {{--                        alert('Old password is required');--}}
    {{--                        return;--}}
    {{--                    }--}}

    {{--                    if (this.newPassword === '') {--}}
    {{--                        alert('New password is required');--}}
    {{--                        return;--}}
    {{--                    }--}}
    {{--                    if (this.confirmPassword === '') {--}}
    {{--                        alert('Confirm password is required');--}}
    {{--                        return;--}}
    {{--                    }--}}

    {{--                    if (this.oldPassword.length < 8 || this.newPassword.length < 8 || this.confirmPassword.length < 8) {--}}
    {{--                        alert('Password must be at least 8 characters');--}}
    {{--                        return;--}}
    {{--                    }--}}

    {{--                    if (this.newPassword !== this.confirmPassword) {--}}
    {{--                        alert('New password and confirm password does not match');--}}
    {{--                        return;--}}
    {{--                    }--}}

    {{--                    axios.post('{{route('paid-accounts.change-password.store')}}', {--}}
    {{--                        _token: '{{csrf_token()}}',--}}
    {{--                        old_password: this.oldPassword,--}}
    {{--                        new_password: this.newPassword,--}}
    {{--                        confirm_password: this.confirmPassword,--}}
    {{--                    })--}}
    {{--                        .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