@extends('template.app')

@section('title', 'Edit Sale Invoice')

@push('css')
    <!--select2-->
    <link href="{{ asset('admin/assets/plugins/select2/css/select2.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('admin/assets/plugins/select2/css/select2-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- date time -->
    <link href="{{ asset('admin/assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }} " rel="stylesheet" media="screen">
    <style>
        .switch-button {
            display: flex;
            width: 200px;
            border: 2px solid #ccc;
            border-radius: 20px;
            overflow: hidden;
            margin: auto;
        }
        .option {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            cursor: pointer;
            transition: background-color 0.3s, border-color 0.3s;
            font-weight: bold;
            color: #000 !important;
            background: transparent;
        }
        .option.checked {
            background: #3FCC7E;
            color: #fff !important;
        }
        /* Disable links in edit mode */
        .switch-button a {
            pointer-events: none;
        }
    </style>
@endpush

@section('content')

<div class="page-bar">
    <div class="page-title-breadcrumb">

    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card card-box">
            <div class="card-head text-white " style="background-color:#3FCC7E;">
                <header>Edit Sale Invoice</header>
            </div>
            <div class="card-body" id="bar-parent">
                <div class="row">
                    <div class="col-12">
                        <h3 class="text-center">
                            {{ env('COMPANY_NAME','QBYTESOFT') }}
                            <span class="label label-rouded label-danger">{{ auth()->user()->branch->name }}</span>
                        </h3>
                    </div>
                </div>
                {!! Form::open(['route' => ['admin.sales.update', $sale->id],'method' => 'PUT']) !!}
                <div class="row">
                    <div class="col-12">
                        <div class="switch-button mb-3">
                            <a href="#" class="option {{ $for == 'customer' ? 'checked' : '' }}">Customer</a>
                            <a href="#" class="option {{ $for == 'farmer' ? 'checked' : '' }}">Farmer</a>
                        </div>    
                    </div>
                    <div class="col-12 col-md-3 col-sm-4">
                        <div class="form-group">
                            <label for="invoice_id">Invoice No.</label>
                            <input type="text" class="form-control" value="{{ $sale->sale_no ?? $sale->id }}" readonly>
                        </div>
                    </div>
                    <div class="col-12 col-md-3 col-sm-4">
                        <div class="form-group">
                            <label for="user_id">Employee Name</label>
                            <input type="text" id="user_id" class="form-control" value="{{ $sale->user->name ?? Auth::user()->name }}" readonly>
                            <input type="hidden" name="user_id" value="{{ $sale->user_id }}">
                        </div>
                    </div>
                    <div class="col-12 col-sm-4 col-md-3">
                        <div class="form-group">
                            <label for="branch_id">Branch Name</label>
                            @if(count($branches) > 1)
                                <select name="branch_id" id="branch_id" class="form-control select2">
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}" {{ $sale->branch_id == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                    @endforeach
                                </select>
                            @else
                                @php
                                    $firstBranch = $branches->first();
                                @endphp
                                <input type="text" id="branch_id" class="form-control" value="{{ optional($firstBranch)->name ?? '' }}" readonly>
                                <input type="hidden" name="branch_id" value="{{ optional($firstBranch)->id ?? '' }}">
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3">                      
                        <div class="form-group">
                            <label for="customer_id">Select {{ ucfirst( $for ) }}</label>
                            <select id="customer_id" name="customer_id" class="form-control  select2 ">
                                <option value="0">Select {{ ucfirst( $for ) }}</option>
                                @foreach ($customers as $name => $id)
                                    <option value="{{ $id }}" {{ $sale->customer_id == $id ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3">
                        <div class="form-group">
                            <label for="phone">Customer Phone</label>
                            <input type="tel" name="phone" id="phone" class="form-control" value="{{ $for == 'farmer' ? ($customerInfo->phone1 ?? $customerInfo->phone2 ?? '') : ($customerInfo->phone ?? '') }}">
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3">
                        <div class="form-group">
                            <label class="">Bill Date</label>
                            <div class="input-group date form_datetime" data-date="{{ Carbon\Carbon::parse($sale->sale_date)->format('d F Y h:i A') }}" data-date-format="dd MM yyyy HH:ii p" data-link-field="dtp_input1">
                                <input class="form-control" size="16" type="text" name="sale_date" value="{{ Carbon\Carbon::parse($sale->sale_date)->format('d F Y h:i A') }}">
                                <span class="input-group-addon ml-2">
                                    <span class="fa fa-calendar"></span>
                                </span>
                            </div>
                            <input type="hidden" id="dtp_input1" value="" />
                        </div>
                    </div>
                   
                    <div class="col-12 col-sm-6 col-md-3">
                        <div class="form-group">
                            <label class="">Due Date</label>
                            <div class="input-group date form_datetime" data-date="{{ Carbon\Carbon::parse($sale->due_date)->format('d F Y h:i A') }}" data-date-format="dd MM yyyy HH:ii p" data-link-field="dtp_input2">
                                <input class="form-control" size="16" type="text" name="due_date" value="{{ Carbon\Carbon::parse($sale->due_date)->format('d F Y h:i A') }}">
                                <span class="input-group-addon ml-2">
                                    <span class="fa fa-calendar"></span>
                                </span>
                            </div>
                            <input type="hidden" id="dtp_input2" value="" />
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3">
                        <div class="form-group">
                            <label for="payment_processor">Payment Processor</label>
                            <select name="payment_processor" id="payment_processor" class="form-control select2">
                                @foreach( \App\Models\PaymentGateway::get() as $gateway ) 
                                    <option value="{{ $gateway->id }}" {{ $sale->payment_processor == $gateway->id ? 'selected' : '' }}>{{ $gateway->gateway_name }}({{ $gateway->gateway_account_number }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-12">
                         <div class="form-group">
                            <label for="purpose_head">Purpose Head <small>(Required if you take some payment now)</small></label>
                            <select name="purpose_head" id="purpose_head" class="form-control select2">
                                @foreach( \App\Models\PurposeHead::get() as $purposeHead ) 
                                    <option value="{{ $purposeHead->id }}" {{ optional($sale->salepayment)->purpose == $purposeHead->id ? 'selected' : '' }}>{{ $purposeHead->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row p-t-20" ng-controller="ProductSearchController">
                    <div class="col-xs-12 col-3">
                        <div class="form-group">
                            <label>Product Search</label>
                            <input ng-model="search" class="form-control underlined">
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover">
                                <tr ng-repeat="product in products  | filter: search | limitTo:10">
                                    <td width="80%">@{{product.product_name}}</td>
                                    <td><button class="btn btn-primary btn-xs" type="button" ng-click="addTempSale(product)"><span class="glyphicon glyphicon-share-alt" aria-hidden="true">&#x2705;</span></button></td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="col-9">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tr>
                                    <th>Product name</th>
                                    <th>Size</th>
                                    <th>Selling Price</th>
                                    <th>Quantity</th>
                                    <th>Discount</th>
                                    <th>Total</th>
                                    <th>&nbsp;</th>
                                </tr>
                                <tr ng-repeat="tempSale in tempSalesCollection">
                                    <td>@{{ tempSale.product.product_name }}</td>
                                    <td>@{{ tempSale.product.size }}</td>
                                    <td>
                                        <input type="text" style="text-align:center" autocomplete="off" ng-change="updateTempSale(tempSale)" ng-model="tempSale.selling_price" size="8">
                                    </td>
                                    <td width="15%">
                                        <input type="number" style="text-align:center;width: 100%" autocomplete="off" ng-change="updateTempSale(tempSale)" ng-model="tempSale.quantity" step="any">
                                    </td>
                                    <td>
                                        <input type="text" style="text-align:center" autocomplete="off" ng-change="updateTempSale(tempSale)" ng-model="tempSale.discount" size="2">
                                    </td>
                                    <td>@{{ (tempSale.selling_price * tempSale.quantity) - tempSale.discount | currency:'Tk'}}</td>
                                    <td>
                                        <button class="btn btn-danger btn-xs" type="button" ng-click="deleteTempSale(tempSale.id)"><span class="fa fa-remove" aria-hidden="true"></span></button>
                                    </td>
                                </tr>
                                <tfoot>
                                    <tr>
                                        <td colspan="3">
                                        </td>
                                        <td class="text-center">
                                            <b>
                                                TQ: @{{ quantity }}
                                            </b>

                                        </td>
                                        <td>
                                            <b>
                                                TD: @{{ discount }}
                                            </b>

                                        </td>
                                        <td>
                                            <b>
                                                TA: @{{ sum | number:2 }}
                                            </b>
                                            <input type="hidden" name="sub_total" value="@{{ sum }}">
                                        </td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="invoiceDiscount">Discount</label>
                                            <input type="text" ng-model="invoiceDiscount" ng-init="invoiceDiscount={{ $sale->discount ?? 0 }}" autocomplete="off" class="form-control" id="invoiceDiscount" name="invoiceDiscount">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="payment">Paid Amount</label>
                                            <input type="text" ng-model="payment" id="payment" ng-init="payment={{ optional($sale->salepayment)->payment ?? 0 }}" class="form-control" name="payment">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="totalInvoiceAmount">Total Invoice Amount</label>
                                            <input type="text" value="@{{ sum - invoiceDiscount | number:2 }}" class="form-control" id="totalInvoiceAmount" readonly style="font-weight: bold;text-align: center;font-size: 32px">
                                            <input type="hidden" name="grand_total" value="@{{ sum - invoiceDiscount }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="remarks">Remarks</label>
                                            <input type="text" name="remarks" class="form-control" id="remarks" value="{{ $sale->remarks }}">
                                        </div>

                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="amountDue">Amount Due</label>
                                            <input type="text" id="amountDue" class="form-control" value="@{{ (calculateSum( tempSalesCollection ) - invoiceDiscount) - payment }}" readonly style="font-size: 18px;font-weight: bold; text-align: center" name="due">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            {!! Form::submit('Update Sale',['class' => 'mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-success btn-block form-control','style' => 'margin-left:10px;margin-top:30px;']) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="for" value="{{ $for }}">
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>
@endsection
  
@push('js')
<script src="{{ asset('admin/assets/plugins/select2/js/select2.js') }}"></script>
<script src="{{ asset('admin/assets/js/pages/select2/select2-init.js') }}"></script>
<script src="{{ asset('admin/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js') }}" charset="UTF-8"></script>
<script src="{{ asset('admin/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker-init.js') }}" charset="UTF-8"></script>
<script src="{{asset('js/sale.js')}}"></script>
<script src="{{ asset('js/sale-form.js') }}"></script>
@endpush