@extends('admin.layouts.form')

@section('custom_page_style')
    <style>
        .header .input-group {
            margin-bottom: 0 !important;
        }
        table th, table td {
            vertical-align: middle !important;
            white-space: nowrap;
        }
        .table-container {
            position: relative;
            overflow-x: auto;
            width: 100%;
        }
        .table {
            width: max-content;
            table-layout: auto;
        }
        .sticky-column {
            position: -webkit-sticky; /* For Safari */
            position: sticky;
            left: -21px;
            background-color: white;
            z-index: 2; /* Ensure it stays on top of the table */
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }
        .sticky-column-header {
            position: -webkit-sticky; /* For Safari */
            position: sticky;
            left: -21px;
            background-color: #008080; /* Match your header background color */
            z-index: 3; /* Ensure it stays on top of other headers */
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .searchable_dropdown.open .dropdown-menu.inner{
            padding-left: 30px!important;
            margin-left: 10px!important;
        }

        .bootstrap-select .bs-searchbox, .bootstrap-select .bs-actionsbox, .bootstrap-select .bs-donebutton{
            padding: 0 0 5px 10px;
            border-bottom: 1px solid #e9e9e9;
            margin-left: 37px;
        }
        tr.sub_order td{
            padding:1px 10px!important
        }
        .sub_order .sticky-column{
            background: #c8c7be;
            color: #30312e;
        }

    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="block-header clearfix">
            <h2 class="pull-left">
                <i class="material-icons btn btn-sm btn-warning">list</i> <span>&nbsp; Work-order List</span>
            </h2>
            <a href="#" class="btn btn-default waves-effect pull-right" data-toggle="modal" data-target="#largeModal">Filter</a>
            <a href="{{ route('export.work_orders', request()->all()) }}" class="btn btn-md btn-primary pull-right m-r-10">Download Excel</a>
            <a style="margin-right: 10px;margin-top: 5px;" href="{!! url('module/work_order/create') !!}" class="pull-right">+ Import Work order</a>
            <div class="modal fade" id="largeModal" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="largeModalLabel">Filter Work order</h4>
                        </div>
                        <div class="modal-body">
                            {!! Form::open(['url'=>url('module/work_order/search'),'class'=>'form']) !!}
                            <div class="row">
                                <div class="col-xs-3">
                                    <label for="">Receive From</label>
                                    <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">calendar_month</i>
                                    </span>
                                        <div class="form-line">
                                            {!! Form::text('from',request()->from,['class'=>'form-control datepicker', 'placeholder'=>'Receive From']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">Receive To</label>
                                    <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">calendar_month</i>
                                    </span>
                                        <div class="form-line">
                                            {!! Form::text('to',request()->to,['class'=>'form-control datepicker', 'placeholder'=>'Receive To']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">Company</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">person</i>
                                            </span>
                                        <div class="form-line">
                                            {!! Form::select('company',$companies, request()->company, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%','data-live-search'=>'true', 'placeholder' => '--Company--']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">Client</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">person</i>
                                            </span>
                                        <div class="form-line">
                                            {!! Form::select('client',$clients, request()->client, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%','data-live-search'=>'true', 'placeholder' => '--Client--']) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label for="">Contractor</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">person</i>
                                            </span>
                                        <div class="form-line">
                                            {!! Form::select('contractor',$contractors, request()->contractor, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%','data-live-search'=>'true', 'placeholder' => '--Contractor--']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">Seller</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">person</i>
                                            </span>
                                        <div class="form-line">
                                            {!! Form::select('seller',$seller, request()->seller, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%','data-live-search'=>'true', 'placeholder' => '--Seller--']) !!}
                                        </div>
                                    </div>

                                </div>
                                <div class="col-xs-3">
                                    <label for="">Worktype</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">person</i>
                                            </span>
                                        <div class="form-line">
                                            {!! Form::select('work_type',$work_type, request()->work_type, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%','data-live-search'=>'true', 'placeholder' => '--Work type--']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">Processor</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">person</i>
                                            </span>
                                        <div class="form-line">
                                            {!! Form::select('processor',$processor, request()->processor, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%','data-live-search'=>'true', 'placeholder' => '--Processor--']) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row ">
                                <div class="col-xs-3">
                                    <label for="">City</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">home</i>
                                            </span>
                                        <div class="">
                                            {!! Form::select('city',$cities, request()->city, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%', 'placeholder' => '--Select City--', 'data-dropup-auto'=>'false', 'data-live-search'=>'true']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">State</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">home</i>
                                            </span>
                                        <div class="form-line">
                                            {!! Form::select('state',$states, request()->state, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%', 'placeholder' => '--Select State--', 'data-dropup-auto'=>'false', 'data-live-search'=>'true']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">ZIP</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">home</i>
                                            </span>
                                        <div class="form-line">
                                            {!! Form::select('zip',$zip_codes, request()->zip, ['class' => 'searchable_dropdown selectpicker', 'data-width'=>'100%', 'placeholder' => '--Select ZIP--', 'data-live-search'=>'true']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">PPW ID</label>
                                    <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="material-icons">#</i>
                                            </span>
                                        <div class="form-line">
                                            {!! Form::text('ppw_id', request()->ppw_id, ['class' => 'form-control', 'placeholder' => 'PPW ID']) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-3">
                                    <label for="">Invoice Date</label>
                                    <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">calendar_month</i>
                                    </span>
                                        <div class="form-line">
                                            {!! Form::text('invoice_from',request()->invoice_from,['class'=>'form-control datepicker', 'placeholder'=>'Invoice From']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">Invoice Date</label>
                                    <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">calendar_month</i>
                                    </span>
                                        <div class="form-line">
                                            {!! Form::text('invoice_to',request()->invoice_to,['class'=>'form-control datepicker', 'placeholder'=>'Invoice To']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <label for="">Work Order Code</label>
                                    <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="material-icons">#</i>
                                    </span>
                                        <div class="form-line">
                                            {!! Form::text('work_order_code',request()->work_order_code,['class'=>'form-control', 'placeholder'=>'Workorder Code']) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-4">
                                    {!! Form::submit('SEARCH',['class'=>'btn btn-md btn-success btn-block']) !!}
                                </div>
                                <div class="col-xs-4">
                                    <button type="reset" class="btn btn-md btn-warning btn-block">RESET</button>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix" id="app">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="body table-container">
                        <div class="row">
                            <div class="col-xs-12">
                                <table class="table table-condensed table-bordered">
                                    <thead class="bg-teal">
                                    <tr>
                                        <th class="sticky-column sticky-column-header">PPW ID</th>
                                        <th>Action</th>
                                        <th>SUB PPW</th>
                                        <th>WO Code</th>
                                        <th>Company</th>
                                        <th>Client</th>
                                        <th>Receive date</th>
                                        <th>Contractor</th>
                                        <th>Work type</th>
                                        <th>City</th>
                                        <th>State</th>
                                        <th>Zip</th>
                                        <th>Processor</th>
                                        <th>Inv Date</th>
                                        <th>Source PPW</th>
                                        <th>Seller</th>
                                        <th class="bg-success text-muted">Client Total</th>
                                        <th class="bg-success text-muted">Client Paid</th>
                                        <th class="bg-success text-muted">Client Unpaid</th>
                                        <th class="bg-danger text-muted">Bank</th>
                                        <th class="bg-danger text-muted">Card</th>
                                        <th class="bg-danger text-muted">Loan</th>
                                        <th class="bg-warning text-muted">Vendor Total</th>
                                        <th class="bg-warning text-muted">Vendor Paid</th>
                                        <th class="bg-warning text-muted">Vendor Unpaid</th>
                                        <th>Gross Profit</th>
                                        <th>Received GP</th>
                                    </tr>
                                    <tr class="bg-info">
                                        <th colspan="16"></th>
                                        <th class="bg-success text-muted">{!! $summary_row['client_total'] !!}</th>
                                        <th class="bg-success text-muted">{!! $summary_row['client_paid'] !!}</th>
                                        <th class="bg-success text-muted">{!! $summary_row['client_unpaid'] !!}</th>
                                        <th class="bg-danger text-muted">{!! $summary_row['paid_from_debit'] !!}</th>
                                        <th class="bg-danger text-muted">{!! $summary_row['paid_from_credit'] !!}</th>
                                        <th class="bg-danger text-muted">{!! $summary_row['paid_from_loan'] !!}</th>
                                        <th class="bg-warning text-muted">{!! $summary_row['vendor_total'] !!}</th>
                                        <th class="bg-warning text-muted">{!! $summary_row['vendor_paid'] !!}</th>
                                        <th class="bg-warning text-muted">{!! $summary_row['vendor_unpaid'] !!}</th>
                                        <th class="text-muted">{!! $summary_row['gross_profit'] !!}</th>
                                        <th class="text-muted">{!! $summary_row['receive_gp'] !!}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($results as $i => $result)
                                        <tr class="font-13">
                                            <td class="sticky-column">{!! $result->ppw_id !!}</td>
                                            <td>
                                                <a data-toggle="tooltip" data-title="Edit"
                                                   class="btn btn-xs btn-info" href="{!! URL::to('module/work_order/'.$result->id.'/edit') !!}">
                                                    <i class="material-icons">edit</i>
                                                </a>
                                            </td>
                                            <td>{!! $result->main_order_ppw !!}</td>
                                            <td>{!! $result->work_order_code !!}</td>
                                            <td>{!! $result->companyDetails ? $result->companyDetails->name : 'N/A' !!}</td>
                                            <td>{!! $result->clientDetails ? $result->clientDetails->name : 'N/A' !!}</td>
                                            <td>{!! \Carbon\Carbon::parse($result->receive_date)->format('m/d/Y') !!}</td>
                                            <td>{!! $result->contractor !!}</td>
                                            <td>{!! $result->work_type !!}</td>
                                            <td>{!! $result->city !!}</td>
                                            <td>{!! $result->state !!}</td>
                                            <td>{!! $result->zip !!}</td>
                                            <td>{!! $result->processor !!}</td>
                                            <td>{!! $result->invoice_date !!}</td>
                                            <td>{!! $result->source_ppw !!}</td>
                                            <td>{!! $result->seller !!}</td>
                                            <td>{!! $result->client_total !!}</td>
                                            <td>{!! $result->total_cash_in !!}</td>
                                            <td>{!! $result->client_unpaid !!}</td>
                                            <td>{!! $result->total_cash_out_from_debit !!}</td>
                                            <td>{!! $result->total_cash_out_from_credit !!}</td>
                                            <td>{!! $result->loan_amount !!}</td>
                                            <td>{!! $result->vendor_total !!}</td>
                                            <td>{!! $result->vendor_got_paid !!}</td>
                                            <td>{!! ($result->vendor_unpaid) !!}</td>
                                            <td>{!! $result->gross_profit !!}</td>
                                            <td>{!! $result->received_gp !!}</td>
                                        </tr>
                                        @foreach($result->subOrder as $order)
                                            @php
                                                $sub_of_client_paid = $order->bankStatement->where('ppw_amount', '>', 0)->where('account_type', 'Debit');
                                                if($sub_of_client_paid->count() > 0){
                                                    $order->total_cash_in = $sub_of_client_paid->sum('ppw_amount');
                                                }
                                                $order->client_unpaid = $order->client_amount - $order->total_cash_in;
                                                $order->total_cash_out_from_debit = abs($order->bankStatement->where('ppw_amount', '<', 0)->where('account_type', 'Debit')->sum('ppw_amount'));
                                                $order->total_cash_out_from_credit = abs($order->bankStatement->where('account_type', 'Credit')->sum('ppw_amount'));
                                                //$order->profit = $order->total_cash_in -  ($order->total_cash_out_from_debit+$order->total_cash_out_from_credit);
                                                $loan_amount = 0;
                                                $order->loan_amount = $loan_amount;
                                                $vendor_total = $order->vendor_amount;
                                                $paid_to_vendor = ($order->total_cash_out_from_debit + $order->total_cash_out_from_credit+ $loan_amount);
                                                $order->vendor_total = $vendor_total;
                                                $order->vendor_got_paid = $paid_to_vendor;
                                                $order->vendor_unpaid = $vendor_total - $paid_to_vendor;
                                                $order->gross_profit = $order->client_amount - $paid_to_vendor;
                                                $receive_gp = 0;
                                                if($sub_of_client_paid->count() > 0){
                                                    $receive_gp = $order->total_cash_in - $vendor_total;
                                                    $order->received_gp =$receive_gp;
                                                }
                                            @endphp
                                            <tr class="font-12 bg-warning sub_order">
                                                <td class="sticky-column text-right">
                                                    {!! $order->ppw_id !!}
                                                </td>
                                                <td>
                                                    <a data-toggle="tooltip" data-title="Edit"
                                                       class="btn btn-xs btn-info" href="{!! URL::to('module/work_order/'.$order->id.'/edit') !!}">
                                                        <i class="material-icons">edit</i>
                                                    </a>
                                                </td>
                                                <td>{!! $order->main_order_ppw !!}</td>
                                                <td>{!! $order->work_order_code !!}</td>
                                                <td>{!! $order->companyDetails ? $order->companyDetails->name : 'N/A' !!}</td>
                                                <td>{!! $order->clientDetails ? $order->clientDetails->name : 'N/A' !!}</td>
                                                <td>{!! \Carbon\Carbon::parse($order->receive_date)->format('m/d/Y') !!}</td>
                                                <td>{!! $order->contractor !!}</td>
                                                <td>{!! $order->work_type !!}</td>
                                                <td>{!! $order->city !!}</td>
                                                <td>{!! $order->state !!}</td>
                                                <td>{!! $order->zip !!}</td>
                                                <td>{!! $order->processor !!}</td>
                                                <td>{!! $order->invoice_date !!}</td>
                                                <td>{!! $order->source_ppw !!}</td>
                                                <td>{!! $order->seller !!}</td>
                                                <td>{!! $order->client_amount !!}</td>
                                                <td>{!! $order->total_cash_in !!}</td>
                                                <td>{!! $order->client_unpaid !!}</td>
                                                <td>{!! $order->total_cash_out_from_debit !!}</td>
                                                <td>{!! $order->total_cash_out_from_credit !!}</td>
                                                <td>{!! $order->loan_amount !!}</td>
                                                <td>{!! $order->vendor_amount !!}</td>
                                                <td>{!! $order->vendor_got_paid !!}</td>
                                                <td>{!! $order->vendor_unpaid !!}</td>
                                                <td>{!! $order->gross_profit !!}</td>
                                                <td>{!! $order->received_gp !!}</td>
                                            </tr>
                                        @endforeach
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    {!! $results->appends(request()->all())->links() !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom_page_script')
    <script type="text/javascript">

        document.querySelector('button[type="reset"]').addEventListener('click', function () {
            // Reset datepicker fields
            $('.datepicker').val('');

            // Reset selectpicker dropdowns
            $('.selectpicker').val('').selectpicker('refresh');
        });


        $(document).ready(function(){
            $('.datepicker').bootstrapMaterialDatePicker({
                format: 'Y-MM-DD',
                clearButton: true,
                weekStart: 1,
                time: false
            });
            $('[data-toggle=tooltip]').tooltip();
        });

        var app = new Vue({
            el: '#app',
            data: {
                month: ''
            },
            methods: {
                on_change: function () {
                    let encoded = '?month=' + encodeURIComponent(this.month).replace(/%20/g, '+')
                    window.location.href = '{!! url('module/work_order') !!}?month=' + this.user_id + encoded;
                }
            }
        });
    </script>
@endsection