@extends('../layout/' . $layout)

@section('subhead')
<title>Atarud MIS - Shared Balance Report</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }

    .fileBtn:hover {
        cursor: progress;
        color: red;
    }
</style>
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />
@section('subcontent')
<div class="intro-y flex items-center mt-8">
    <h2 class="text-lg font-medium mr-auto">Shared Balance Report</h2>
</div>

<div class="box ">

    <div class="col-span-12 lg:col-span-8 2xl:col-span-9 ">
        <div class="flex box items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
            <h2 class="font-medium text-base mr-auto">Filter</h2>
        </div>

        <div class="p-5 box">
            <div class="flex flex-col-reverse xl:flex-row">
                <div class="flex-1 mt-6 xl:mt-0">
                    <form action="{{route('sharedbalance')}}" method="get">
                        <div class="grid grid-cols-12 gap-2">
                            <div class="form-control col-span-5 mt-2">
                                <label class="control-label">From</label>
                                <input type="text" placeholder="YYYY-0M-0D" name="from" class="form-control pdpF2 pl-12"
                                    value="{{  app('request')->input('from')  }}">
                            </div>
                            <div class="form-control col-span-5 mt-2">
                                <label class="control-label">To</label>
                                <input type="text" placeholder="YYYY-0M-0D" id="dateTo" name="to"
                                    class="form-control pdpF2 pl-12" value="{{  app('request')->input('to')  }}">
                            </div>
                            @php
                            $c = 0;
                            @endphp
                            @foreach ($partners as $row )
                            <div class="form-control col-span-5 mt-2">
                                <input type="hidden" name="moreFields[{{ $c }}][id]" value="{{ $row->id }}">
                                <label class="control-label">{{ $row->name }}</label>
                                <input type="text" placeholder="Enter Percentage..."
                                    name="moreFields[{{ $c }}][percentage]" class="form-control ">
                            </div>
                            @php ++$c; @endphp
                            @endforeach

                        </div>

                        <div class="grid grid-cols-12 gap-2">
                            <button type="submit" onclick="filter()" class="btn btn-primary mt-5"
                                style="float: right;">Filter</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="intro-y box lg:mt-5">

        <div class="p-5 box ">

            @if(isset($shares))

            <br>
            <div class="col-span-6" style="background-color: rgb(248, 247, 246); padding:10px;">
                <div class="intro-y box mt-5">
                    <div
                        class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                        <h2 class="font-medium text-base mr-auto">Report Content</h2>
                        @if(isset($fromDate) && isset($toDate))
                        <form method="get" action="{{route('revenue_ledger.print')}}">

                            <input type="text" class=" " name="fromDate" value="{{$fromDate}}" style="display:none;">
                            <input type="text" class=" " name="toDate" value="{{$toDate}}" style="display:none;">
                            <input type="hidden" name="type" value="{{$type}}">
                            <button class="btn btn-pending mr-1 mb-2">
                                <i data-lucide="download" class="w-5 h-5"></i>
                            </button>
                        </form>
                        @endif
                    </div>
                    <div class="p-5">
                        @if(isset($shares))
                        <h1 style="text-align: center; margin-top: 10px;"><strong>Shared Balance</strong></h1>
                        <div class="overflow-x-auto parents" id="parent">
                            <table class="table mt-5" id="child" style="width: 100%;">
                                <thead class="table-light">
                                    <tr>
                                        <th class="whitespace-nowrap">#</th>
                                        <th class="whitespace-nowrap">Name</th>
                                        <th class="whitespace-nowrap">Percetage</th>
                                        <th class="whitespace-nowrap">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $total = 0; @endphp
                                    @foreach($shares as $row)
                                    @php
                                    $amount =0;
                                    $total += $amount;
                                    @endphp
                                    <tr>
                                         <td>{{++$loop->index}}</td>
                                        <td>{{$row[0]}}</td>
                                        <td>{{$row[1]}}%</td>
                                        <td>{{$row[2]}}</td>

                                    </tr>
                                    @endforeach
                                    <tr>
                                        <td style="background-color: #A9A9A9;" colspan="4">Total: {{$total}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        @endif
                    </div>
                    @endif
                </div>

            </div>
            <!-- END: Display Information -->
            @endsection

            @section('script')
            <script src="{{ asset('dist/js/jquery.js') }}"></script>
            <script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
            <script>
                $(function () {

        $(".pdpF2").persianDatepicker({
            months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
            dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
            shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
            showGregorianDate: !1,
            persianNumbers: !0,
            formatDate: "YYYY/MM/DD",
            selectedBefore: !1,
            selectedDate: null,
            startDate: null,
            endDate: null,
            prevArrow: '\u25c4',
            nextArrow: '\u25ba',
            theme: 'default',
            alwaysShow: !1,
            selectableYears: null,
            selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            cellWidth: 25, // by px
            cellHeight: 20, // by px
            fontSize: 13, // by px
            isRTL: !1,
            calendarPosition: {
                x: 0,
                y: 0,
            },
            onShow: function () {},
            onHide: function () {},
            onSelect: function () {},
            onRender: function () {}
    });


    });
            </script>


            <script>
                function rangeType(el) {
            if(el.value == ''){
                document.getElementById('dateFrom').disabled = true;
                document.getElementById('dateTo').disabled = true;
            }
            else{
                document.getElementById('dateFrom').disabled = false;
                document.getElementById('dateTo').disabled = false;
            }
        }
        function filter(){
            var dateFrom = document.getElementById('dateFrom').value;
            var dateTo = document.getElementById('dateTo').value;
            var account = document.getElementById('account').value;
            var range_type = document.getElementById('range_type').value;

            $.ajax({
                method: 'GET',
                url: "{{ url('/report/transaction/filter/') }}",
                data: {
                    from: dateFrom,
                    to: dateTo,
                    category: account,
                    type: range_type,
                },

                success: function(response) {
                    console.log(response);
                    jQuery('#result').html(response);
                }
            });
        }

        // print invoice function
        function PrintElem() {
            Popup($('#invoice_print').html());
        }

        function Popup(data)
        {
            var mywindow = window.open('', 'Report', 'height=600,width=850');
            mywindow.document.write('<html><head><title>Invoice</title>');
            mywindow.document.write('</head><body >');
            mywindow.document.write(data);
            mywindow.document.write('</body></html>');
            setTimeout(function(){
                mywindow.print();
            mywindow.close();
            }, 500);


            return true;
        }
            </script>
            @endsection