@extends('backend.layouts.app')

@section('title')
顧客別売上集計
@endsection

@section('content')
<h2 class="title">顧客別売上集計</h2>
<div class="hscroll">
  <table class="normal type3">
    <thead>
      <tr>
        <th>顧客名</th>
        <th>{{ $info['year'] }}年1月</th>
        <th>{{ $info['year'] }}年2月</th>
        <th>{{ $info['year'] }}年3月</th>
        <th>{{ $info['year'] }}年4月</th>
        <th>{{ $info['year'] }}年5月</th>
        <th>{{ $info['year'] }}年6月</th>
        <th>{{ $info['year'] }}年7月</th>
        <th>{{ $info['year'] }}年8月</th>
        <th>{{ $info['year'] }}年9月</th>
        <th>{{ $info['year'] }}年10月</th>
        <th>{{ $info['year'] }}年11月</th>
        <th>{{ $info['year'] }}年12月</th>
        <th>合計</th>
      </tr>
    </thead>
    <tbody>
      @if(count($params))
      @foreach ($params as $partner_id => $partner_param)
      <tr>
        <td>{{ $partner_param['partner_name'] }}</td>
        @foreach ($partner_param['month_params'] as $month => $value)
        <td>
          <a data-target="detail" data-id='{{ $partner_id }}' data-year='{{ $info['year'] }}' data-month='{{ $month }}'
            class="modal_btn">
            {{ number_format($value) }}
          </a>
        </td>
        @endforeach
        <td>{{ $partner_param['total'] }}</td>
      </tr>
      @endforeach
      @else
      <tr>
        <td colspan="14">対象のデータは存在しません。</td>
      </tr>
      @endif
    </tbody>
  </table>
</div>
<div id="detail" class="modal-content">
  <div class="MDL_window_wrap">
    <table class="normal type3">
      <thead>
        <tr>
          <th>納車日</th>
          <th>満了日</th>
          <th>顧客名</th>
          <th>売上</th>
        </tr>
      </thead>
      <tbody>
        <tr></tr>
      </tbody>
    </table>
  </div>
  <p class="closemodal"><a class="modal-close">×</a></p>
</div>
@endsection

@section('page_css')
<link href="{{ asset('vendor/jquery-ui/jquery-ui.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendor/datetimepicker/jquery.datetimepicker.css') }}" rel="stylesheet">
@endsection

@section('page_js')
<script src="{{ asset('vendor/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('vendor/jquery-ui/i18n/datepicker-ja.js') }}"></script>

<script src="{{ asset('assets/backend/js/page/payment.js') }}"></script>
<script>
  $(function(){
        $('.modal_btn').click(function(){
          let partner_id = $(this).data('id');
          let month = $(this).data('month');
          let year = $(this).data('year');
          $.ajax({
            type: "post",
            url : '{{ route("backend.ajax.get_lease_sales_info") }}',
            data: {
              partner_id: partner_id,
              month: month,
              year: year,
              _token: '{{ csrf_token() }}',
            },
            dataType: "json",
            success: function(result) {
              var text = '';

              if(result.length == 0){
                text += '<tr><td colspan="4">表示する項目はありません。</td></tr>';
              }else{
                for(let i=0; i<result.length; i++){
                  text += '<tr>';
                  text += '<td>' + result[i]["delivery_date"] + '</td>';
                  text += '<td>' + result[i]["expiration_date"] + '</td>';
                  text += '<td>' + result[i]["partner_name"] + '</td>';
                  text += '<td>' + result[i]["sales"] + '</td>';
                  text += '</tr>';
                }
              }
              $('.MDL_window_wrap table tbody tr').remove();
              $('.MDL_window_wrap table tbody').append(text);

            },
            error: function(){
              alert('エラーが発生しました。');
            },
          });
        });
      });
</script>
@endsection