@extends('layouts.master')
@section('title', $title)

@section('content')
    @include($view . '.modal')
    <div class="main-body">
        <div class="page-wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between">
                                <h5>{{ $title }} {{ __('list') }}</h5>
                                @can($access . '-create')
                                    <div>
                                        <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">
                                            <i class="fas fa-plus mx-2"></i>
                                            {{ $title }}</a>
                                        <a href="#" class="btn btn-info" data-bs-toggle="modal"
                                            data-bs-target="#filter_modal">
                                            <i class="fas fa-filter mx-2"></i>
                                            Filter</a>
                                    </div>
                                @endcan
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="table" class="display table nowrap table-striped table-hover"
                                    style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{{ __('messages.name') }}</th>
                                            <th>Payment</th>
                                            <th>Discount</th>
                                            <th>User</th>
                                            {{-- <th>Status</th> --}}
                                            <th>{{ __('messages.action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('page_js')
    <script>
        const dt = (data) => {
            $("#table").DataTable({
                ajax: {
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        ...data
                    },
                    url: '{{ route($route . '.data') }}',
                    dataSrc: ""
                },
                destroy: true,
            });
        }

        dt()




        // $("#form").on("submit", async function(e) {
        //     e.preventDefault()
        //     data = objectifyForm($(this).serializeArray())
        //     btn = $(this).find("button[type='submit']")
        //     console.log(btn)
        //     btn.prop("disabled", true)
        //     $("#spinners").removeClass("d-none")
        //     let res = await client($(this), '{{ route($route . '.create') }}', 'post', data)
        //     $("#spinners").addClass("d-none")
        //     btn.prop("disabled", false)
        //     if (res && res.status == 200) {
        //         $("#table").DataTable().ajax.reload()
        //         Swal.fire({
        //             text: res.data,
        //             icon: "success",
        //             buttonsStyling: !1,
        //             confirmButtonText: "Ok, got it!",
        //             customClass: {
        //                 confirmButton: "btn btn-primary",
        //             },
        //         });
        //         $("#modal").modal("toggle")
        //     }
        // })

        $("#customer_id").on("change", async function() {
            if ($(this).val()) {
                let res = await _client("{{ route($route . '.get_balance') }}", 'POST', {
                    id: $(this).val()
                })
                if (res.status == 200) {
                    console.log(res.data)
                    $("#total_amount_hidden").val(res.data)
                    $("#total_amount").val(res.data)
                    $("#payment").val(res.data)
                    $("#discount").val(0)
                    $("#promotuon").val(0)
                    $("#credit").val(0)
                }
            }
        })

        $("#currency").on("change", async function() {
            if ($(this).val()) {
                let res = await _client('{{ route('admin.currency.dropdown_byid') }}', "post", {
                    id: $(this).val()
                })
                if (res && res.status == 200) {
                    $("#payment").val(eval($("#payment").val() + res.data.operation + res.data
                        .exchange_rate))

                    $("#total_amount_hidden").val(eval($("#total_amount_hidden").val() + res.data.operation +
                        res.data
                        .exchange_rate))

                    $("#discount").val(eval($("#discount").val() + res.data.operation + res.data
                        .exchange_rate))
                    $("#promotion").val(eval($("#promotion").val() + res.data.operation + res.data
                        .exchange_rate))
                    $("#credit").val(eval($("#credit").val() + res.data.operation + res.data
                        .exchange_rate))

                }
            }
        })

        $("#discount").on("keyup", function() {
            discount = isNaN(parseFloat($("#discount").val())) ? 0 : parseFloat($("#discount").val())
            promotion = isNaN(parseFloat($("#promotion").val())) ? 0 : parseFloat($("#promotion").val())
            credit = isNaN(parseFloat($("#credit").val())) ? 0 : parseFloat($("#credit").val())
            max = isNaN(parseFloat($("#total_amount_hidden").val())) ? 0 : parseFloat($("#total_amount_hidden")
                .val())
            if (discount > max) {
                $("#payment").val(0)
                $("#discount").val(max).trigger("keyup")
            } else {
                $("#payment").val(max - discount - promotion - credit)
            }
        })

        $("#promotion").on("keyup", function() {
            discount = isNaN(parseFloat($("#discount").val())) ? 0 : parseFloat($("#discount").val())
            promotion = isNaN(parseFloat($("#promotion").val())) ? 0 : parseFloat($("#promotion").val())
            credit = isNaN(parseFloat($("#credit").val())) ? 0 : parseFloat($("#credit").val())
            max = isNaN(parseFloat($("#total_amount_hidden").val())) ? 0 : parseFloat($("#total_amount_hidden")
                .val())
            console.log(max)
            if (promotion > max) {
                $("#payment").val(0)
                $("#promotion").val(max).trigger("keyup")
            } else {
                $("#payment").val(max - discount - promotion - credit)
            }
        })

        $("#form").on("submit", async function(e) {
            e.preventDefault()
            data = objectifyForm($(this).serializeArray())
            btn = $(this).find("button[type='submit']")
            console.log(btn)
            btn.prop("disabled", true)
            $("#spinners").removeClass("d-none")
            let res = await client($(this), '{{ route($route . '.create') }}', 'post', data)
            $("#spinners").addClass("d-none")
            btn.prop("disabled", false)
            if (res && res.status == 200) {
                PopupWin(res.data.url, "Print {{ $title }}", 1000, 600);
                $("#table").DataTable().ajax.reload()
                Swal.fire({
                    text: res.data.msg,
                    icon: "success",
                    buttonsStyling: !1,
                    confirmButtonText: "Ok, got it!",
                    customClass: {
                        confirmButton: "btn btn-primary",
                    },
                });
                $("#modal").modal("toggle")
            }
        })
    </script>
@endsection