@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="page-title mb-0 font-size-18">@lang('dashboard_sales_expenses.show_client')</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active"> @lang('dashboard_clients.welcome_platform')</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->
      <!-- Errors -->
      @include('dashboard.components.errors')
      <!-- Success Message -->
      @if (session()->has('message'))
          <p class="alert alert-success text-center">
              {{ session()->get('message') }}
          </p>
      @endif

            <!-- Client name and balance -->
            <div class="row">

                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">


                            <div class="form-group row mb-0">
                                <div class="col-sm-8 d-flex justify-content-center flex-column">

                                    <h2 class="text-dark text-center"><b> {{$client->first_name.' '.$client->last_name}} </b></h2>
                                   <form action="{{route('dashboard.clients.savenotes')}}" method="POST">
                                   @csrf
                                   <input type="hidden" name="id" value="{{$client->id}}">
                                    <textarea class="form-control mx-auto my-2 text-center"
                                        style="resize: none; max-width:  80%; height: 120px" placeholder="Notes" name="notes">{{$client->notes}}</textarea>

                                        <div class="d-flex flex-row justify-content-center align-items-center mt-2">
                                            <button class="btn btn-primary" type="submit">@lang('dashboard_sales_expenses.save_notes')</button>
                                        </div>
                                    </form>
                                    </div>
                                <div class="col-sm-4" style="height: 100%">
                                    <p class="font-size-18 text-primary mb-3"><b>@lang('dashboard_sales_expenses.total_balance')</b></p>
                                    <div class="card-body" style="padding: 0 0 0 10px !important;">
                                        <h2 class="mt-1"><span id="clientBalance">{{$client->balance}}</span>$</h2>
                                        <div class="media">
                                            <div class="media-body">
                                                <div class="font-size-18 text-success"><b id="openWord">@lang('dashboard_sales_expenses.open')</b></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body mt-3" style="padding: 0 0 0 10px !important;">
                                        <h2 class="mt-1">{{$overDue}}$</h2>
                                        <div class="media">
                                            <div class="media-body">
                                                <div class="font-size-18 text-danger"><b>@lang('dashboard_sales_expenses.overdue')</b></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
    
                            </div>


                        </div>
                    </div>
                </div>
            </div>

            <!-- Client Sales records -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">


                            <h4 class="card-title">@lang('dashboard_sales_expenses.transactions')</h4>
                            <p class="card-title-desc">@lang('dashboard_sales_expenses.manage_transactions_for') {{$client->first_name.' '.$client->last_name}}.</p>

                            <table id="datatable-buttons" class="table table-striped table-bordered table-responsive nowrap"
                                style="border-collapse: collapse; border-spacing: 0; width: 100%; min-height: 500px">
                                <thead>
                                    <tr>
                                        <th style="width: 40px; white-space: normal" data-priority="1">@lang('dashboard_sales_expenses.date')</th>
                                        <th style="width: 40px; white-space: normal" data-priority="1">@lang('dashboard_sales_expenses.movement_type')</th>
                                        <th data-priority="1">@lang('dashboard_sales_expenses.number')</th>

                                        <th style="width: 40px; white-space: normal" data-priority="1">@lang('dashboard_sales_expenses.due_date')</th>
                                        <th style="width: 40px; white-space: normal" data-priority="1">@lang('dashboard_sales_expenses.balance')</th>
                                        <th style="width: 10px; white-space: normal"  data-priority="1">@lang('dashboard_sales_expenses.tax')</th>
                                        <th style="width: 100px; white-space: normal" data-priority="1">@lang('dashboard_sales_expenses.total_before_tax')</th>
                                        <th style="width: 100px; white-space: normal" data-priority="1">@lang('dashboard_sales_expenses.total_after_tax') </th>
                                        <th style="width: 100px; white-space: normal" data-priority="1">@lang('dashboard_sales_expenses.status') </th>
                                        <th style="width: 200px; white-space: normal; border-right-width: 1px !important" data-priority="1">@lang('dashboard_sales_expenses.action')</th>
                                    </tr>
                                </thead>


                                <tbody>
                                    @foreach ($trans as $tran)
                                    {{-- {{ dd($trans) }} --}}
                                    <tr>
                                        <th style="width: 100px; white-space: normal">{{$tran['date']}}</th>
                                        <td>@lang('dashboard_sales_expenses.'.$tran['type'])</td>
                                        <td>
                                            @if ($tran['type'] == 'expensed' || $tran['type'] == 'cheque' || $tran['type'] == 'transfer' || $tran['type'] == 'deposit'|| $tran['type'] == 'daily_journal'|| $tran['type'] == 'split')
                                            {{$tran['number']}}
                                            @else
                                            <a href= {{ route('dashboard.invoices.show.products',['id'=>$tran['id'],'type'=>$tran['type']]) }} > {{$tran['number']}} </a>
                                            @endif
                                            </td>
                                        <td style="width: 100px; white-space: normal">{{$tran['due_date']}}</td>
                                        <td style="width: 50px; white-space: normal">{{$tran['balance']}}</td>
                                        <td>{{$tran['tax']}}</td>
                                        <td>{{$tran['total_before_tax']}}</td>
                                        <td>{{$tran['total_after_tax']}}</td>
                                        <td class="{{ (strlen(@$tran['status']) > 0) ? 'bg-info' : ' '}} text-white">
                                            {{@$tran['status']}}
                                        </td>
                                        <td style="width: 400px; white-space: normal">
                                           
                                            <div class="btn-group dropdown" role="group">
                                                <button id="btnGroupVerticalDrop1" type="button"
                                                    class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                                    aria-haspopup="true" aria-expanded="false">
                                                    @lang('dashboard_sales_expenses.action') <i class="mdi mdi-chevron-down"></i>
                                                </button>
                                                <!-- BANK MOVE -->
                                                  @if ($tran['type'] == 'expensed' || $tran['type'] == 'cheque' || $tran['type'] == 'transfer' || $tran['type'] == 'deposit' || $tran['type'] == 'daily_journal'|| $tran['type'] == 'split')
                                                   <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                                    @if($tran['file'])  
                                                     <a class="dropdown-item"
                                                     href="{{ route('dashboard.banks.download.file',$tran['id']) }}">@lang('buttons.download')</a>
                                                    @endif
                                                    <a class="dropdown-item"
                                                    href="{{ route('dashboard.banks.print', $tran['id'])}}">@lang('dashboard_sales_expenses.print') </a>
                                                    <a class="dropdown-item"
                                                    href="{{ route('dashboard.banks.send.mail', $tran['id'])}}">@lang('dashboard_sales_expenses.send')</a> 
                                         
                                                   </div>
                                                   @else
                                                   
                                                <!-- END BANK MOVE -->

                                                <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                                    
                                                        @if($tran['type'] != 'notice_credit' && $tran['type'] != 'pay_sales_invoice' && $tran['type'] != 'sales_advance_payment')
                                                            <a class="dropdown-item"
                                                            href="{{ route('dashboard.invoices.show.products',['id'=>$tran['id'],'type'=>$tran['type']]) }}">@lang('dashboard_sales_expenses.show_products') </a>
                                                        @endif
                                                     
                                                        @if($tran['file'])  
                                                         <a class="dropdown-item"
                                                         href="{{ route('dashboard.invoices.download.file',['id'=>$tran['id'],'type'=>$tran['type']]) }}">@lang('buttons.download')</a>
                                                        @endif
                                                       
                                                        @if(($tran['type'] == 'price_offer' || $tran['type'] == 'sales_order') && $tran['converted'] == false)
                                                         <a class="dropdown-item"
                                                            href="{{ route('dashboard.invoices.convert', [$tran['id'],$tran['type']])}}">@lang('dashboard_sales_expenses.convert_to_invoice')</a>
                                                        @endif
                                                       
                                                        <a class="dropdown-item"
                                                        href="{{ route('dashboard.invoices.print', [$tran['id'],$tran['type']])}}">@lang('dashboard_sales_expenses.print') </a>
                                                        @if($tran['type'] == 'sales_invoice' && $tran['status_id'] != 4)
                                                         <a class="dropdown-item"
                                                         href="{{route('dashboard.clients.payinvoice',$tran['id'] )}}">@lang('dashboard_sales_expenses.pay_invoice')
                                                         </a>
                                                        @endif

                                                        @if($tran['type'] == 'sales_invoice')
                                                        
                                                          @if($tran['status_id'] != 2)
                                                           <a class="dropdown-item"
                                                           href="{{route('dashboard.clients.refundclient',$tran['id'] )}}">@lang('dashboard_sales_expenses.refund')
                                                           </a>
                                                          @endif

                                                          @if ($tran['deposit'] == 0)
                                                           <a class="dropdown-item"
                                                           href="{{route('dashboard.invoices.edit',$tran['id'])}}">@lang('dashboard_clients.edit_invoice') </a> 
                                                          @endif

                                                        @endif
                                                     
                                                        <a class="dropdown-item"
                                                        href="{{ route('dashboard.invoices.send.mail', [$tran['id'],$tran['type']])}}">@lang('dashboard_sales_expenses.send')</a>
                                         
                                                       
                                                        @if (!$tran['is_refunded'])

                                                         @if ($tran['type'] == 'sales_advance_payment' && ( $tran['total_after_tax'] != $tran['balance']))
                                                     
                                                          @else 
                                                          <a class="dropdown-item"
                                                          href="{{ route('dashboard.invoices.delete',['id'=>$tran['id'],'type'=>$tran['type']]) }}" @if (@$tran['balance'] >= 0) onclick="confirmtranDelete(this) @endif">@lang('buttons.delete')</a>
                                                          @endif 
                                                         
                                                         @else 
                                                         <a class="dropdown-item" onclick="alertRfundedInvoice()">@lang('buttons.delete')</a>
                                                        @endif
                                                        
                                                        @if($tran['type'] == 'sales_advance_payment')
                                                      
                                                         @if ($tran['is_paid'])
                                                   
                                                          <a class="dropdown-item popup-form"
                                                          href="#convertToInvoice{{ $tran['id'] }}">@lang('dashboard_sales_expenses.convert_to_invoice')</a>

                                                          <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 500px"  id="convertToInvoice{{ $tran['id'] }}">
                                                          <div class="card-body">
                                                           <h4 class="mt-0 mb-2">@lang('dashboard_sales_expenses.convert_to_invoice')</h4>
                                                           <p class="card-title-desc">@lang('dashboard_sales_expenses.convert_to_invoice')</p>

                                                           <form action="{{ route('dashboard.advance.payment.convert')}}" method="POST">
                                                            @csrf
                                                            <input type="hidden" name="invoice_id" value="{{$tran['id']}}" >
                                                            <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                                                               <p class="control-label col-lg-4">@lang('dashboard_sales_expenses.invoice_number')</p>
                                                            <select required class="form-control select2 col-lg-4" name="number"
                                                             style="width: 300px">
                                                             <option disabled selected value="{{ null }}">
                                                                 @lang('dashboard_invoices.choose_invoice_number')
                                                             </option>
                                                             
                                                             @foreach ($invoices as $invoice)
                                                             <option value="{{ $invoice['number'] }}">
                                                                {{ $invoice['number'] }}
                                                             </option>
                                                             @endforeach
                                                            </select>
                                                            </div>
                                                               <div class=" ml-4 my-2">
                                                                   <p class="control-label col-lg-4">@lang('dashboard_sales_expenses.amount')</p>
                                                                   <input type="number" required min="0" max="99999999" step="any" class="form-control"
                                                                   value="{{ $tran['balance'] }}" name="paid"
                                                                   style="width: 200px" placeholder="@lang('dashboard_sales_expenses.amount')">
                                                               </div>
                                                               <div class="row">
                                                                   <div class="col-lg-12  my-2 d-flex justify-content-end">
                                                                       <div class="text-right">
                                                                           <button type="submit"
                                                                               class="btn btn-primary">@lang('dashboard_accountants_tree.Save')</button>
                                                                           
                                                                       </div>
                                                                   </div>
                                                               </div>
                                                           </form>
                                                          </div>
                                                          </div>
                                                      
                                                         @else
                                                      
                                                          <a class="dropdown-item popup-form"
                                                          href="#payAdvancePayment{{$tran['id']}}">@lang('dashboard_sales_expenses.pay_advance_payment')</a>
                                                              <!-- Pay an advance payment -->
                                                          <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 500px"  id="payAdvancePayment{{$tran['id']}}">
                                                          <div class="card-body">
                                                          <h4 class="mt-0 mb-2">@lang('dashboard_sales_expenses.pay_advance_payment')</h4>
                                                          <p class="card-title-desc">@lang('dashboard_sales_expenses.pay_advance_payment')</p>
                                    
                                                          <form action="{{ route('dashboard.advance.payment.pay')}}" method="POST">
                                                          @csrf
                                                          <input type="hidden" name="invoice_id" value="{{$tran['id']}}"> 
                                                          <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-start">
                                                          <p class="control-label col-lg-4">@lang('dashboard_sales_expenses.paid_from')</p>
                                                          <select required class="form-control select2" style="width: 200px" name="account_id">
                                                          <option selected value="" disabled>@lang('dashboard_accountants_tree.Select_account_type')</option>
                                                          @foreach ($accounts as $account)
                                                              <option value="{{ $account->id }}">{{ $account->name }}</option>
                                                          @endforeach
                                                          </select>
                                                          </div>       
      
                                                          <div class="row">
                                                          <div class="col-lg-12  my-2 d-flex justify-content-end">
                                                           <div class="text-right">
                                                               <button type="submit"
                                                                   class="btn btn-primary">@lang('dashboard_accountants_tree.Save')</button>
                                                               
                                                           </div>
                                                          </div>
                                                          </div>
                                                          </form>
                                                          </div>
                                                          </div>
                                                         @endif
                                                       @endif
                                                      
                                                    </div>
                                            </div>
                                            @endif

                                        </td>

                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <!-- Record Transaction Modal -->
                            <div class="card mfp-hide mfp-popup-form mx-auto" id="edittrans">
                                <div class="card-body">
                                    <h4 class="mt-0 mb-4">@lang('dashboard_clients.Action_on_transaction')</h4>
                                    <form>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label class="control-label">@lang('dashboard_clients.type')</label>
                                                    <select class="form-control select2">
                                                        <option>@lang('dashboard_clients.account_type')</option>
                                                        <optgroup label="Alaskan/Hawaiian Time Zone">
                                                            <option value="AK">credit card</option>
                                                            <option value="HI">@lang('dashboard_clients.else')
                                                            <option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label">@lang('dashboard_clients.department')</label>
                                                    <select class="form-control select2">
                                                        <option>@lang('dashboard_clients.choose_department')</option>
                                                        <optgroup label="Alaskan/Hawaiian Time Zone">
                                                            <option value="AK">@lang('dashboard_clients.department_1')
                                                            </option>
                                                            <option value="HI">@lang('dashboard_clients.department_2')
                                                            </option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="subject">@lang('dashboard_clients.tax_code')</label>
                                                    <select class="form-control select2">
                                                        <option>@lang('dashboard_clients.c_tax_code')</option>
                                                        <optgroup label="Alaskan/Hawaiian Time Zone">
                                                            <option value="AK">@lang('dashboard_clients.department_1')
                                                            </option>
                                                            <option value="HI">@lang('dashboard_clients.department_2')
                                                            </option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="subject">@lang('dashboard_clients.comparison') ( class )
                                                    </label>
                                                    <select class="form-control select2">
                                                        <option>@lang('dashboard_clients.choose_comparison')</option>
                                                        <optgroup label="Alaskan/Hawaiian Time Zone">
                                                            <option value="AK">@lang('dashboard_clients.department_1')
                                                            </option>
                                                            <option value="HI">@lang('dashboard_clients.department_2')
                                                            </option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="subject">@lang('dashboard_clients.add_location') </label>
                                                    <select class="form-control select2">
                                                        <option>@lang('dashboard_clients.add_location') </option>
                                                        <optgroup label="Alaskan/Hawaiian Time Zone">
                                                            <option value="AK">@lang('dashboard_clients.saudi')</option>
                                                            <option value="HI">@lang('dashboard_clients.egypt')</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label
                                                        for="subject">@lang('dashboard_clients.explanatory_points')</label>
                                                    <textarea class="form-control" id="subject" rows="3"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="control-label">@lang('dashboard_clients.upload_file')</label>
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="customFile">
                                                    <label class="custom-file-label"
                                                        for="customFile">@lang('dashboard_clients.choose_file')</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="text-right">
                                                    <button type="submit"
                                                        class="btn btn-primary">@lang('dashboard_clients.execution')</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>

            <div class="card py-3">

            <div class="d-flex justify-content-center my-2">
                <a type="button" class="btn btn-success popup-form" href="#createStatement">@lang('dashboard_sales_expenses.create_statement')</a>
            </div>
        </div>


            <div class="card mfp-hide mfp-popup-form mx-auto" style="max-width: 700px" id="createStatement">
                <div class="card-body">
                    <h4 class="mt-0 mb-2">@lang('dashboard_sales_expenses.create_statement')</h4>
                    <p class="card-title-desc">@lang('dashboard_sales_expenses.create_new_statement')</p>

                    <form action="{{ route('dashboard.clients.createstatement') }}" method="POST">
                      @csrf
                      <input type="hidden" name="id" value="{{$client->id}}">
                        <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-center">
                            <h5 class="control-label col-lg-4">@lang('dashboard_sales_expenses.statement_date')</h5>
                            <input type="date" name="statement_date" class="form-control col-lg-6">
                        </div>

                        <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-center">
                            <h5 class="control-label col-lg-4">@lang('dashboard_sales_expenses.start_date')</h5>
                            <input type="date" name="start_date" class="form-control col-lg-6">
                        </div>

                        <div class="row d-flex flex-row align-items-center ml-4 my-2 justify-content-center">
                            <h5 class="control-label col-lg-4">@lang('dashboard_sales_expenses.end_date')</h5>
                            <input type="date" name="end_date" class="form-control col-lg-6">
                        </div>

                        <!-- Table -->
                        <table class="table table-striped table-bordered mx-auto text-center my-4">
                            <thead>
                                <tr>
                                    <th scope="col" class="text-dark"><b>@lang('dashboard_sales_expenses.client_name')</b></th>
                                    <th scope="col" class="text-dark"><b>@lang('dashboard_sales_expenses.client_email')</b></th>
                                    <th scope="col" class="text-dark"><b>@lang('dashboard_sales_expenses.balance')</b></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td  class="text-dark"><b>{{$client->first_name.' '.$client->last_name}}</b></td>
                                    <td  class="text-dark"><input type="email" name="email" class="form-control" placeholder="@lang('dashboard_sales_expenses.client_email')"></td>
                                    <td  class="text-dark"><b>{{$client->balance}}</b></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-lg-12  my-2 d-flex justify-content-end">
                                <div class="text-right">
                                    <button type="submit"
                                        class="btn btn-primary">@lang('reports.excute')</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <!-- End Page-content -->
    @endsection
    
    @section('custom_script')
    <script>
        $(document).ready(function(){
            /* get Client Balance */
            let clientBalance = $('#clientBalance').text()
            /* Check Client Balance value */
            let clientBalanceValue = parseFloat(clientBalance)
            if (clientBalanceValue < 0){
                /* change the sign */
                clientBalance = clientBalance.replace('-', '+')
                $('#clientBalance').text(clientBalance)
                /* change openWord to be credit */
                $('#openWord').html("Credit")
            }
        })
            
        function alertRfundedInvoice(){
            alert('This is a refunded invoice, please delete all refunds of this invoice first')
        }

        function confirmInvoiceDelete(linkElement){
            console.log("Target: ", $(linkElement).attr('class'));
            if (confirm('Are you sure?')){
                $(linkElement).removeClass('popup-form')
                setTimeout(() => {
                    window.location.href = $(linkElement).attr('href')
                }, 200);
            }
        }

    </script>
    @endsection