@extends('layouts.admin')

@section('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    <style>
        .header{
            display: none;
        }
        .msg{
            display: none;
        }

    </style>
@endsection

@section('title' , 'Search payment')

@section('breadcrumb-item')
    <li class="breadcrumb-item">Payments</li>
    <li class="breadcrumb-item active">Search Payment</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            <p class="h5 pt-2 mb-0 float-left"><i class="fa fa-list pr-1"></i>Payments</p>
            {{--<a href="{{route('admin.payment.create')}}" data-toggle="tooltip" data-placement="bottom"
               title="Add New Record" class="btn btn-info float-right ml-2">
                <i class="fa fa-plus"></i>
            </a>--}}
            <form action="{{route('admin.payments')}}" method="get" class="form-inline float-right">
                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control search" type="text" name="q" value="{{ request()->query('q') }}"
                               placeholder="Search in Payments">
                        <div class="input-group-append">
                            <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button>
                        </div>
                        <div class="input-group-append">
                            <a class="btn btn-danger{{ request()->query('q') ? '' : ' disabled' }}"
                               href="{{route('admin.payments')}}">
                                <i class="fa fa-eraser"></i></a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-body" style="overflow-x:auto;">

            <form method="post" action="{{route('admin.payment.search')}}">
                @csrf
                <div class="row">
                    <div class="col-md-4">
                        <select class="js-example-basic-single col-md-12 product" name="product">
                            <option>Products</option>
                            @foreach($prods as $prod)
                                <option value="{{$prod->id}}">{{$prod->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select class="js-example-basic-single col-md-12 area" name="area">
                            <option>Area</option>
                            @foreach($areas as $area)
                                <option value="{{$area->id}}">{{$area->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select class="js-example-basic-single col-md-12 employee" name="employee">
                            <option>Employee</option>
                            @foreach($employees as $employee)
                                <option value="{{$employee->id}}">{{$employee->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-4">
                        <select class="js-example-basic-single col-md-12 shop" name="ehop">
                            <option>Shop</option>
                            @foreach($shopes as $shop)
                                <option value="{{$shop->id}}">{{$shop->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <input id="datepicker" name="date"/>
                    </div>

                    <div class="col-md-4 text-center" >
                        <button class="btn btn-sm btn-success col-md-3 submit">Search</button>
                        <button class="btn btn-sm btn-success col-md-3 print" >Print</button>
                        <a href="{{route('admin.payments')}}" class="btn btn-sm btn-success col-md-3">Reload</a>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-4">
                        <div class="alert alert-danger msg" role="alert">
                            Select Some Search Options.
                        </div>
                    </div>
                </div>
            </form>
            <br>
            <div class="result-view" id="print-view">
                <div class="header">
                    <h4 class="text-center">BRIGHT VISION</h4>
                    <h6 class="text-center">SUIT # 102, FINE CENTER COMMERCIAL, BLOCK-V GULSHAN-E-IQBAL.</h6>
                    <h6 class="text-center">Phone <b>:</b> 201-34155063 N.T.N : 4360989-9</h6>
                    <h6 class="text-center">Email <b>:</b> info@brightvisionhealth.com</h6>
                    <h4 class="text-center" style="margin-top: 5%">Sales Report</h4>
                    <br>
                </div>
                <table class="table table-hover table-c">
                    <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Amount</th>
                        <th>Shop</th>
                        <th>Received By</th>
                        <th>Received On</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($payments as $payment)
                        <tr>
                            <td>{{$payment->order->id}}</td>
                            <td>{{$payment->amount}}</td>
                            <td>{{$payment->order->shop->name}}</td>
                            <td>{{$payment->employee->name}}</td>
                            <td>{{$payment->created_at->format('d-M-Y')}}</td>
                            <td>
                                <div class="btn-group">
                                    {{--<a href="{{route('admin.payment.show', ['id' => $payment->id])}}"
                                       data-toggle="tooltip" title="View"
                                       class="btn btn-sm btn-outline-primary"><i class="fa fa-eye"></i></a>--}}
                                    {{--<a href="{{route('admin.payment.edit', ['id' => $payment->id])}}"
                                       data-toggle="tooltip" title="Edit"
                                       class="btn btn-sm btn-outline-success"><i class="fa fa-pencil"></i></a>--}}
                                    @include('includes.modals.delete', ['model' => 'payment', 'route' => 'admin.payment.delete'])
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <th colspan="7" class="text-center">No Payments Yet</th>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
                <div class="pagination justify-content-center mb-4">
                    {{ $payments->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
            $('#datepicker').datepicker({
                format: 'yyyy-mm-dd',
                uiLibrary: 'bootstrap4'
            });

            // Search on name column only
            $('.search').keyup(function(){
                // Search Text
                var search = $(this).val();

                // Hide all table tbody rows
                $('table tbody tr').hide();


                $('table tbody td:contains("'+search+'")').each(function(){
                    $(this).closest('tr').show();
                });
            });

            $('.submit').click(function (e) {
                e.preventDefault();
                let pro = $('.product').val();
                let area = $('.area').val();
                let shop = $('.shop').val();
                let emp = $('.employee').val();
                let date = $('#datepicker').val();

                if(pro !== 'Products' || area !== 'Area' || shop !== 'Shop' || emp !== 'Employee' || date !== ''){
                    $('#searchfrom').submit();
                }
                else{
                    $('.msg').show();
                    $('.msg').delay(3200).fadeOut(300);
                }
            });

            $('.print').click(function (e) {
                e.preventDefault();
                $('.header').show();
                $('.print-t').hide();

                let printContents = document.getElementById('print-view').innerHTML;

                let originalContents = document.body.innerHTML;

                document.body.innerHTML = printContents;

                window.print();
                document.body.innerHTML = originalContents;
                $('.header').hide();
                $('.print-t').show();

            })


        });

        // Case-insensitive searching (Note - remove the below script for Case sensitive search )
        $.expr[":"].contains = $.expr.createPseudo(function(arg) {
            return function( elem ) {
                return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
            };
        });


    </script>
@endsection