@extends('admin.master')

@section('title', 'Statements')

@section('contents')
    <!-- row -->
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-info collapsed-card" id="add_statement">
                <div class="card-header" style="cursor: pointer;" data-card-widget="collapse">
                    <h3 class="card-title">Add New Statement</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                <form action="{{ url('/reports/statements/add') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Date <small>mm/dd/yyyy</small><span style="color:red">*</span> </label>
                                <input type="date" name="s_date" class="form-control @error('s_date') is-invalid @enderror" value="{{ old('s_date') }}" id="s_date" required>
                                @error('s_date')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Title<span style="color:red">*</span> </label>
                                <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}" id="title" required>
                                @error('title')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Amount({{$settings->currency_symbol}})</label>
                                <input type="number" name="amount" class="form-control" value="{{ old('amount') ? old('amount') : 0 }}" id="amount">
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Description</label>
                                <textarea name="description" rows="1" class="form-control" id="description">{{ old('description') }}</textarea>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Ref. File</label>
                                <input type="file" name="ref_file" class="form-control @error('ref_file') is-invalid @enderror" value="{{ old('ref_file') }}" id="ref_file">
                                @error('ref_file')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Action By</label>
                                <select name="action_by_id" class="form-control">
                                    <option disabled selected>Select an employee</option>
                                    @foreach($employees  as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->emp_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group"><br>
                                <div class="mt-2">
                                    <button type="submit" class="btn btn-info col-12">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">Filter Statements</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Date From <small>mm/dd/yyyy</small></label>
                                <input type="date" value="" class="form-control" id="dateFrom">
                                <span id="errDateFrom" style="color:red;display: none;">This field must fill up</span>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Date To <small>mm/dd/yyyy</small></label>
                                <input type="date" value="" class="form-control" id="dateTo">
                                <span id="errDateTo" style="color:red;display: none;">This field must fill up</span>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Action By</label>
                                <select id="actionBy" class="form-control">
                                    <option value="all">All employees</option>
                                    @foreach($employees  as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->emp_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group"><br>
                                <div class="mt-2">
                                    <button type="button" id="searchBy" class="btn btn-info">Search</button>
                                    <button type="button" id="resetBy" class="btn btn-warning ml-5">Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card card-widget widget-user">
                <!-- Add the bg color to the header using any of the bg-* classes -->
                <div class="widget-user-header bg-white" style="height:auto !important;">
                    <h4 class="widget-user-username">Summary: Statement reports</h4>
                    <hr>
                    <p class="p-0 m-0">
                        Date From: &nbsp;<strong><span id="smDateFrom"></span></strong>&nbsp;&nbsp;&nbsp;
                        Date To:&nbsp;<strong><span id="smDateTo"></span></strong>&nbsp;&nbsp;&nbsp;
                        Action By: &nbsp;<strong><span id="smActionBy"></span></strong>
                    </p>
                </div>
                <div class="overlay" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt"></i>
                </div>
                <div class="card-footer" style="padding-top: 0;padding-bottom: 0;">
                    <div class="row">
                        <div class="col-sm-6 border-right bg-success">
                            <div class="description-block">
                                <h5 id="show_total_products" class="description-header" style="font-size: 30px;">0</h5>
                                <span class="description-text">TOTAL STATEMENTS</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                        <div class="col-sm-6 bg-info">
                            <div class="description-block">
                                <h5 id="show_total_amount" class="description-header" style="font-size: 30px;">00.0</h5>
                                <span class="description-text">TOTAL AMOUNT({{$settings->currency_symbol}})</span>
                            </div>
                            <!-- /.description-block -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-outline card-info">
                <div class="card-header">
                    <h3 class="card-title">
                        Statements
                    </h3>
                    <a href="{{ url('/reports/statements/print/all') }}" target="_blank" id="prindBy" class="btn btn-success float-right">Print</a>
                </div>
                <!-- /.card-header -->
                <div class="card-body table-responsive">
                    <div class="dataTables_wrapper dt-bootstrap4">
                        <table id="products" class="table table-sm table-striped table-bordered table-hover dataTable" style="width: 100%" role="grid" aria-describedby="products">
                            <thead>
                            <tr class="bg-secondary">
                                <th>SL#</th>
                                <th>Date</th>
                                <th>Title</th>
                                <th>Descripton</th>
                                <th>Amount({{$settings->currency_symbol}})</th>
                                <th>Ref. File</th>
                                <th>Action By</th>
                                <th style="width:58px;">Action</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr class="bg-secondary">
                                <th>SL#</th>
                                <th>Date</th>
                                <th>Title</th>
                                <th>Descripton</th>
                                <th>Amount({{$settings->currency_symbol}})</th>
                                <th>Ref. File</th>
                                <th>Action By</th>
                                <th style="width:58px;">Action</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="overlay" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt"></i>
                </div>
            </div>
            <!-- /.card -->

        </div>
    </div>
    <!-- /.row -->
    <!-- Delete modal -->
    <div class="modal fade" id="modal-delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal_heading">Delete Statement Confirmation</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="modal_text">Are you sure to delete the statement?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <form action="" method="post" id="deleteform">
                        @csrf
                        @method('delete')
                        <button type="submit" id="deleteBtn" class="btn btn-primary">Yes</button>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
@endsection

@section('script_links')
    <script>
        @foreach(['success','error'] as $type)
            @if(Session::has('msg-'.$type))
            toastr.{{ $type }}('{{ Session::get('msg-'.$type) }}');
            @endif
        @endforeach
        @if($errors->any())
            $( "#add_statement" ).removeClass("collapsed-card");
        @endif

        $(function() {
            // active left-menu
            // for tree addClass .menu-open
            // for submenu addClass .active
            $('#sub_statements').addClass('active');

            var dateFrom = $('#dateFrom').val();
            var dateTo = $('#dateTo').val();
            var actionByID = $("#actionBy").val();
            var actionBy = $("#actionBy option:selected").text();
            var print_url = "";

            load_data(dateFrom,dateTo,actionByID,actionBy);

            var table = $("#products").DataTable({
                            initComplete: function () {
                                $('#products_filter label input').focus();
                            },
                            pageLength: 25,
                            processing: true,
                            serverSide: true,
                            ajax:{
                                url: "{{ url('/reports/statements') }}",
                                data: {
                                    dateFrom: function() { return $('#dateFrom').val() },
                                    dateTo : function() { return $('#dateTo').val() },
                                    actionBy: function() { return $('#actionBy').val() }
                                }

                            },
                            columns:[
                                {
                                    data: 'DT_RowIndex',
                                    name: 'DT_RowIndex'
                                },
                                {
                                    data: 's_date',
                                    name: 's_date'
                                },
                                {
                                    data: 'title',
                                    name: 'title'
                                },
                                {
                                    data: 'description',
                                    name: 'description'
                                },
                                {
                                    data: 'amount',
                                    name: 'amount',
                                    render: function(data,type,full,meta){
                                        var price = numeral(data).format('0,0.00');
                                        return price;
                                    },
                                },
                                {
                                    data: 'ref_file',
                                    name: 'ref_file',
                                    render: function(data,type,full,meta){
                                        var value = "";
                                        if(data !== null){
                                            value = `<a href="{{ asset('/') }}${data}" target="_blank" alt="${data}"><i class="fas fa-download"></i> Download file</a>`;
                                        }
                                        return value;
                                    },
                                },
                                {
                                    data: 'action_by',
                                    name: 'action_by'
                                },
                                {
                                    data: 'action',
                                    name: 'action',
                                    orderable: false
                                }
                            ]
                        });

            $("#searchBy").click(function () {
                dateFrom = $('#dateFrom').val();
                dateTo = $('#dateTo').val();
                actionByID = $("#actionBy").val();
                actionBy = $("#actionBy option:selected").text();

                if(dateFrom != "" && dateTo == ""){
                    $('#errDateTo').show();
                } else if(dateFrom == "" && dateTo != ""){
                    $('#errDateFrom').show();
                } else {
                    if(dateFrom != "" && dateTo != ""){
                        print_url = '{{ url('/reports/statements/print/') }}/'+actionByID+"/"+dateFrom+"/"+dateTo;
                    } else {
                        print_url = '{{ url('/reports/statements/print/') }}/'+actionByID;
                    }
                    $("#prindBy").attr('href',print_url);
                    $('#errDateFrom').hide();
                    $('#errDateTo').hide();
                    load_data(dateFrom,dateTo,actionByID,actionBy);
                    table.ajax.reload();
                }
            });

            $("#resetBy").click(function () {
                $('#dateFrom').val("");
                $('#dateTo').val("");
                $('#actionBy').val("all");
                $('#errDateFrom').hide();
                $('#errDateTo').hide();
                table.ajax.reload();
            });

            $('#products tbody').on( 'click', '.delete', function () {
                var id = $(this).attr('id');

                var action = "{{ url('/statements/') }}/"+id;
                $("#deleteform").attr("action",action);
            });

            function load_data(dateFrom,dateTo,actionByID,actionBy){
                $.ajax({
                    method: "POST",
                    url: "{{ url('/get_statements_summary') }}",
                    data: { _token: "{{ csrf_token() }}", dateFrom: dateFrom, dateTo: dateTo, actionBy:actionByID },
                    beforeSend: function() {
                        $(".overlay").show();
                    },
                    complete: function(){
                        $(".overlay").hide();
                    },
                    success: function(data) {
                        $("#smDateFrom").text(dateFrom);
                        $('#smDateTo').text(dateTo);
                        $("#smActionBy").text(actionBy);
                        $('#show_total_products').text(data[0].total_qty);
                        $('#show_total_amount').text(numeral(data[0].total_amount).format('0,0.00'));
                    }
                })
            }


        });
    </script>
@endsection