@extends('layouts.app')
@section('title', __('lang_v1.'.$type.'s'))
@php
    $api_key = env('GOOGLE_MAP_API_KEY');
@endphp
@if(!empty($api_key))
    @section('css')
        @include('contact.partials.google_map_styles')
    @endsection
@endif
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm">
              <a class="text-white opacity-5" href="javascript:;">
                <i class="fa fas fa-address-book text-sm-i opacity-10"></i> @lang('contact.contacts')
              </a>
            </li>
            <li class="breadcrumb-item text-sm">
                <a class="opacity-7 text-white" href="javascript:;">@lang('lang_v1.'.$type.'s')</a>
            </li>
            <li class="breadcrumb-item text-sm text-white" aria-current="page">
              @lang( 'contact.manage_your_contact', ['contacts' =>  __('lang_v1.'.$type.'s') ])
            </li>
          </ol>
    </nav>
</section>

<!-- Main content -->
<section class="content">
    <div class="pad-15" >
        <div class="row mb-20">
            <div class="col-md-12"> 
                @component('components.filters', ['title' => __('report.filters')])
                @if($type == 'customer')
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>
                                {!! Form::checkbox('has_sell_due', 1, false, ['class' => 'input-icheck', 'id' => 'has_sell_due']); !!} <strong>@lang('lang_v1.sell_due')</strong>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>
                                {!! Form::checkbox('has_sell_return', 1, false, ['class' => 'input-icheck', 'id' => 'has_sell_return']); !!} <strong>@lang('lang_v1.sell_return')</strong>
                            </label>
                        </div>
                    </div>
                @elseif($type == 'supplier')
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>
                                {!! Form::checkbox('has_purchase_due', 1, false, ['class' => 'input-icheck', 'id' => 'has_purchase_due']); !!} <strong>@lang('report.purchase_due')</strong>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>
                                {!! Form::checkbox('has_purchase_return', 1, false, ['class' => 'input-icheck', 'id' => 'has_purchase_return']); !!} <strong>@lang('lang_v1.purchase_return')</strong>
                            </label>
                        </div>
                    </div>
                @endif
                <div class="col-md-3">
                    <div class="form-group">
                        <label>
                            {!! Form::checkbox('has_advance_balance', 1, false, ['class' => 'input-icheck', 'id' => 'has_advance_balance']); !!} <strong>@lang('lang_v1.advance_balance')</strong>
                        </label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>
                            {!! Form::checkbox('has_opening_balance', 1, false, ['class' => 'input-icheck', 'id' => 'has_opening_balance']); !!} <strong>@lang('lang_v1.opening_balance')</strong>
                        </label>
                    </div>
                </div>
                @if($type == 'customer')
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="has_no_sell_from">@lang('lang_v1.has_no_sell_from'):</label>
                            {!! Form::select('has_no_sell_from', ['one_month' => __('lang_v1.one_month'), 'three_months' => __('lang_v1.three_months'), 'six_months' => __('lang_v1.six_months'), 'one_year' => __('lang_v1.one_year')], null, ['class' => 'form-control select2', 'id' => 'has_no_sell_from', 'placeholder' => __('messages.please_select'), 'style' => 'width:100%;']); !!}
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="cg_filter">@lang('lang_v1.customer_group'):</label>
                            {!! Form::select('cg_filter', $customer_groups, null, ['class' => 'form-control select2', 'id' => 'cg_filter', 'style' => 'width:100%;']); !!}
                        </div>
                    </div>
                @endif

                @if(config('constants.enable_contact_assign') === true)
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('assigned_to',  __('lang_v1.assigned_to') . ':') !!}
                        {!! Form::select('assigned_to', $users, null, ['class' => 'form-control select2', 'style' => 'width:100%']); !!}
                    </div>
                </div>
                @endif

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="status_filter">@lang('sale.status'):</label>
                        {!! Form::select('status_filter', ['active' => __('business.is_active'), 'inactive' => __('lang_v1.inactive')], null, ['class' => 'form-control select2', 'id' => 'status_filter', 'placeholder' => __('lang_v1.none'), 'style' => 'width:100%;']); !!}
                    </div>
                </div>
                @endcomponent
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <input type="hidden" value="{{$type}}" id="contact_type">
                @component('components.widget', ['class' => 'box-primary', 'icon' => 'fa fa-address-book text-primary', 'title' => __( 'contact.all_your_contact', ['contacts' => __('lang_v1.'.$type.'s') ])])
                    <hr class="line-light">
                    @if(auth()->user()->can('supplier.create') || auth()->user()->can('customer.create') || auth()->user()->can('supplier.view_own') || auth()->user()->can('customer.view_own'))
                        @slot('tool')
                            <div class="box-tools mt-50">
                                <button type="button" class="btn bg-gradient-add white btn-ht-lg-add pull-right btn-modal" data-toggle="tooltip" title="@lang('messages.add')" 
                                data-href="{{action([\App\Http\Controllers\ContactController::class, 'create'], ['type' => $type])}}" 
                                data-container=".contact_modal">
                                <i class="fa fa-plus fa-lg"></i></button>
                            </div>
                        @endslot
                    @endif
                    @if(auth()->user()->can('supplier.view') || auth()->user()->can('customer.view') || auth()->user()->can('supplier.view_own') || auth()->user()->can('customer.view_own'))
                     <div class="card">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0 full-width" id="contact_table">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('messages.action')</th>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('lang_v1.contact_id')</th>
                                        @if($type == 'supplier') 
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('business.business_name')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder" >@lang('contact.name')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('business.email')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('contact.tax_no')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('contact.pay_term')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('account.opening_balance')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('lang_v1.advance_balance')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('lang_v1.added_on')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('business.address')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('contact.mobile')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('contact.total_purchase_due')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('lang_v1.total_purchase_return_due')</th>
                                        @elseif( $type == 'customer')
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('business.business_name')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('user.name')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('business.email')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('contact.tax_no')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('lang_v1.credit_limit')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('contact.pay_term')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('account.opening_balance')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('lang_v1.advance_balance')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('lang_v1.added_on')</th>
                                            @if($reward_enabled)
                                                <th class="text-uppercase text-dark text-xs font-weight-bolder" id="rp_col">{{session('business.rp_name')}}</th>
                                            @endif
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('lang_v1.customer_group')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('business.address')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('contact.mobile')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('contact.total_sale_due')</th>
                                            <th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('lang_v1.total_sell_return_due')</th>
                                        @endif
                                        @php
                                            $custom_labels = json_decode(session('business.custom_labels'), true);
                                        @endphp
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                            {{ $custom_labels['contact']['custom_field_1'] ?? __('lang_v1.contact_custom_field1') }}
                                        </th>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                            {{ $custom_labels['contact']['custom_field_2'] ?? __('lang_v1.contact_custom_field2') }}
                                        </th>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                            {{ $custom_labels['contact']['custom_field_3'] ?? __('lang_v1.contact_custom_field3') }}
                                        </th>
                                        <th>
                                            {{ $custom_labels['contact']['custom_field_4'] ?? __('lang_v1.contact_custom_field4') }}
                                        </th>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                            {{ $custom_labels['contact']['custom_field_5'] ?? __('lang_v1.custom_field', ['number' => 5]) }}
                                        </th>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                            {{ $custom_labels['contact']['custom_field_6'] ?? __('lang_v1.custom_field', ['number' => 6]) }}
                                        </th>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                            {{ $custom_labels['contact']['custom_field_7'] ?? __('lang_v1.custom_field', ['number' => 7]) }}
                                        </th>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                            {{ $custom_labels['contact']['custom_field_8'] ?? __('lang_v1.custom_field', ['number' => 8]) }}
                                        </th>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                            {{ $custom_labels['contact']['custom_field_9'] ?? __('lang_v1.custom_field', ['number' => 9]) }}
                                        </th>
                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                            {{ $custom_labels['contact']['custom_field_10'] ?? __('lang_v1.custom_field', ['number' => 10]) }}
                                        </th>
                                    </tr>
                                </thead>
                                <tfoot class="bg-white">
                                    <tr class="font-17 text-center footer-total">
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td
                                            @if($type == 'supplier')
                                                colspan="6"
                                            @elseif( $type == 'customer')
                                                @if($reward_enabled)
                                                    colspan="9"
                                                @else
                                                    colspan="8"
                                                @endif
                                            @endif>
                                                <strong>
                                                    @lang('sale.total'):
                                                </strong>
                                        </td>
                                        <td class="footer_contact_due"></td>
                                        <td class="footer_contact_return_due"></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    @endif
                @endcomponent
            </div>
        </div>
    </div>

    <div class="modal fade contact_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade pay_contact_due_modal" tabindex="-1" role="dialog" 
        aria-labelledby="gridSystemModalLabel">
    </div>

</section>
<!-- /.content -->
@stop
@section('javascript')
@if(!empty($api_key))
<script>
  // This example adds a search box to a map, using the Google Place Autocomplete
  // feature. People can enter geographical searches. The search box will return a
  // pick list containing a mix of places and predicted search terms.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

  function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 10,
      mapTypeId: 'roadmap'
    });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(initialLocation);
        });
    }


    // Create the search box and link it to the UI element.
    var input = document.getElementById('shipping_address');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }

      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };

        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          icon: icon,
          title: place.name,
          position: place.geometry.location
        }));

        //set position field value
        var lat_long = [place.geometry.location.lat(), place.geometry.location.lng()]
        $('#position').val(lat_long);

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{$api_key}}&libraries=places"
     async defer></script>
<script type="text/javascript">
    $(document).on('shown.bs.modal', '.contact_modal', function(e) {
        initAutocomplete();
    });
</script>
@endif
@endsection