@extends('admin.layouts.main')

@section('title')
    {{ trans('finance.wht_log') }}
@endsection

@section('content')
    <main>
        <loading :active.sync="isLoading"></loading>
        <div class="two-col">

            @include('admin.common.sidebar')

            <div class="right-sec">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('finance.finance_reports') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ @trans('finance.wht_log') }}</li>
                    </ol>
                </nav>

                <div class="top-bar d-flex align-items-center">
                    <div class="form-group btm-arrow select without-label">
                        <select class="form-control" name="filter_type" id="filter_type">
                            <option value="{{ route('admin.wht-log.index', ['panel' => Session::get('panel'), 'type' => 'withholder']) }}@if(request()->month)?month={{ request()->month }}@endif"
                                @if(request()->type == 'withholder') selected @endif>{{ @trans('finance.wht_voucher_log') }}</option>
                            <option value="{{ route('admin.wht-log.index', ['panel' => Session::get('panel'), 'type' => 'withholdee']) }}@if(request()->month)?month={{ request()->month }}@endif"
                               @if(request()->type == 'withholdee') selected @endif >{{ @trans('finance.wht_invoice_log') }}</option>
                        </select>
                    </div>
                    <div class="right-table-container ml-auto">
                        <div class="right-table-container ml-auto">
                            <form id="frmSearchPcMonth" action="{{ route('admin.wht-log.index',['panel' => session('panel'), 'type' => request()->type])}}">
                                <input type="hidden" name="month" id="month_filter" value="" />
                            </form>
                            <label class="pt-2 pr-2" style="font-size: 14px;">(Amounts are in TZS)</label>
                            <div class="date">
                                <div class="input-group">
                                    <input type="text" class="form-control bg-white" id="cal_month_filter" name="cal_month_filter" placeholder="Select" autocomplete="off" readonly
                                        value="{{ \Carbon\Carbon::parse($dates['year'] . '-' . $dates['month'])->format('m/Y') }}">
                                    <div class="input-group-addon">
                                        <span class="material-icons">date_range</span>
                                    </div>
                                </div>
                            </div>
                            @permission('vat-log-read')
                                @if(count($whtLogs) > 0)
                                    <a href="javascript:void()" class="btn btn-em btnExport ml-4" target="_blank">Export</a>
                                @endif
                            @endpermission
                        </div>
                    </div>
                </div>
                <div class="table-wrapper">
                    @if(count($whtLogs))
                        <div class="table-data first-col-fix">
                            <div class="table-responsive table-bordered">
                                @if(request()->type == 'withholder')
                                    @include('admin.modules.finance.wht_log.voucher_wht_logs')
                                @else
                                    @include('admin.modules.finance.wht_log.invoice_wht_logs')
                                @endif
                            </div>
                        </div>
                    @else
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-warning" role="alert">
                                    {{ @trans('finance.no_records_to_show') }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                @if(count($whtLogs) > 0 && count($departmentList) > 0)
                    <div class="top-bar d-flex align-items-center pt-5 pb-3">
                        <h2>{{ @trans('finance.wht_allocation') }}</h2>
                    </div>
                    <div class="table-wrapper">
                        <div class="table-data first-col-fix">
                            <div class="table-responsive table-bordered">
                                <table class="table" id="mtcTable">
                                    <thead>
                                        <tr>
                                            <th rowspan="2" style="min-width: 190px;"></th>
                                            @foreach($departmentList as $dept)
                                                <th @if($dept->subdepts_count > 0) colspan="{{ $dept->subdepts_count }}" @endif class="text-center top-head
                                                    @if($loop->odd) table-cl-purple @elseif($loop->even) table-cl-yellow @endif">{{ $dept->name }}</th>
                                            @endforeach
                                            <th rowspan="2" class="top-head text-center">Total</th>
                                        </tr>
                                        <tr>
                                            @foreach ($departmentList as $dept)
                                                @if($dept->subdepts_count > 0)
                                                    @foreach($dept->subdepts as $sub_dept)
                                                        <th class="text-center @if($loop->parent->odd) table-cl-purple @elseif($loop->parent->even) table-cl-yellow @endif"
                                                            style="min-width:120px;">{{ $sub_dept->name }}</th>
                                                    @endforeach
                                                @else
                                                    <th class="text-center @if($loop->odd) table-cl-purple @elseif($loop->even) table-cl-yellow @endif" style="min-width:120px;">-</th>
                                                @endif
                                            @endforeach
                                        </tr>
                                    </thead>
                                    @if(request()->type == 'withholder')
                                        @include('admin.modules.finance.wht_log.voucher_wht_allocation')
                                    @else
                                        @include('admin.modules.finance.wht_log.invoice_wht_allocation')
                                    @endif
                                </table>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </main>
@endsection

@push('pageModals')
    <div class="modal right" tabindex="-1" role="dialog" id="modalVoucherCertificateUpload">
        <div class="modal-dialog modal-md modal-right" role="document">
            <div class="modal-content">
                <form id="frmCertificateUpload" name="frmCertificateUpload" method="post" enctype="multipart/form-data"
                    action="{{ route('admin.wht-log.uploadCertificate', ['panel' => Session::get('panel')]) }}">@csrf
                    <input type="hidden" name="orderId" id="orderId" value="" />
                    <input type="hidden" name="orderType" id="orderType" value="" />
                    <input type="hidden" name="companyId" id="companyId" value="" />
                    <div class="modal-header">
                        <h5 class="modal-title">Upload Govt. Certificate</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p class="gray xs-font-size">Valid files are PDF, Images(jpg).</p>
                        <div class="form-group">
                            <div class="custom-file file-type-new w-100 h-auto">
                                <label class="control-label">Upload File</label>
                                <div class="custom-file w-100 file-type-new">
                                    <input type="file" class="custom-file-input" id="certificate" name="certificate" required>
                                    <label class="custom-file-label bg-white form-control text-left d-flex">Choose file...</label>
                                    <span class="attachment-bg"><img src="{{ asset('img/ic-attachment-dark.svg') }}" alt="ic-attachment"></span>
                                </div>
                                <div class="form-group file-upload">
                                    <label class="control-label certificateName"></label>
                                    <a href="" title="Download" target="_blank" class="text-right hidden downloadCertificate">
                                        <i class="material-icons">get_app</i>
                                    </a>
                                </div>
                                <input type="hidden" name="certificate_already_uploaded" id="certificate_already_uploaded" value="">
                            </div>
                        </div>
                        <div class="form-group mt-1">
                            <label class="control-label">Document Name</label>
                            <input type="text" id="certificate_title" name="certificate_title" class="form-control" placeholder="Document Name" required>
                        </div>
                        <input type="submit" name="submit" class="btn btn-em uploadCertificateBtn" value="Submit">
                    </div>
                </form>
            </div>
        </div>
    </div>
	@include('admin.modules.finance.modals.payment_reminder')
@endpush

@push('pageJs')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <script>
        var exportUrl =  '{{ route("admin.wht-log.export", ["panel" => Session::get("panel"),"type" => request()->type]) }}';
        var exportUrlParams = ("{!! http_build_query($dates) !!}");
        $(document).ready(function() {

            // initialize month picker
            var today = new Date();
            var $calMonthFilter = $('#cal_month_filter');
            $calMonthFilter.datepicker({
                format: 'mm/yyyy',
                zIndex: 2048,
                autoHide: true,
                date: null,
                endDate: (today.getMonth() + 1) + '/' + today.getFullYear(),
            });

            $('#cal_month_filter').on('change', function() {
                app.isLoading = true
                $('#month_filter').val(moment($('#cal_month_filter').datepicker('getDate')).format('YYYY-MM'));
                $('#frmSearchPcMonth').submit();
            });

            // export petty cash
            $('.btnExport').attr('href', exportUrl + '?' + exportUrlParams);

            $('#filter_type').on('change', function() {
                var url = $(this).val();
                app.isLoading = true
                if (url) {
                    window.location = url;
                }
                return false;
            });

            // snackbar message
            @if(Session::has('message'))
            Snackbar.show({
                pos: 'bottom-right',
                text: "{!! session('message') !!}",
                actionText: 'Okay'
            });
            @endif

            // upload govt. certificate
            $('.btn-voucher-certificate-receipt').click(function() {
                var orderId = $(this).data('id');
                var companyId = $(this).data('company-id');
                var fileName = $(this).data('certificate');
                var orderType = $(this).data('order-type');
                var certificateName = $(this).data('certificate-name');
                $('.certificateName').text('');
                $('#certificate_already_uploaded').val('');
                $('.downloadCertificate').attr('href', '');
                $('.downloadCertificate').addClass('hidden');
                $('#modalVoucherCertificateUpload .modal-title').text('Upload Govt. Certificate');

                if(fileName) {
                    $('#certificate_already_uploaded').val(fileName);
                    $('.certificateName').text(fileName);
                    $('.downloadCertificate').removeClass('hidden');
                    $('.downloadCertificate').attr('href', $(this).data('download-url'));
                    $('#modalVoucherCertificateUpload .modal-title').text('View or Update Govt. Certificate');
                }

                $('#frmCertificateUpload #orderId').val(orderId);
                $('#frmCertificateUpload #orderType').val(orderType);
                $('#frmCertificateUpload #companyId').val(companyId);
                $('#frmCertificateUpload #certificate_title').val(certificateName);
                $('#modalVoucherCertificateUpload').modal('show');
            });

            $('#certificate').change(function(e){
                $('.certificateName').text(e.target.files[0].name);
                $('.downloadCertificate').addClass('hidden');
            });

            $("#frmCertificateUpload").validate({
                rules: {
                    certificate: {
                        required : function() {
                            return ($('#certificate_already_uploaded').val() == '');
                        },
                        extension: 'jpg|jpeg|pdf',
                        filesize : 25
                    },
                    certificate_title : {
                        required: true
                    }
                },
                messages: {
                    certificate: {
                        required: 'This field is required.',
                        extension: 'Valid files are jpeg, jpg or pdf.',
                    },
                    certificate_title: 'This field is required.',
                },
                errorPlacement: function(error, element) {
                    if (element.type == 'input')
                        error.insertAfter(element.sibling(a));
                    else {
                        if (element.prop('type') === 'file')
                            error.appendTo(element.parent().parent());
                        else
                            error.insertAfter(element);
                    }
                }
            });

            $('#frmCertificateUpload').on('submit', function(e) {
                if($("#frmCertificateUpload").valid()){
                    $('#frmCertificateUpload .uploadCertificateBtn').attr('disabled', true).val('Uploading...');
                }
            });
        });

        var app = new Vue({
            el: '#app',
            data: {
                isLoading: false,
            }
        });
    </script>
@endpush