@extends('admin::layouts.master')

@section('title', __('admin/common.logistics'))

@section('content')
  <style>
    .fcm-content{
      width: 230px!important;
    }
    .fcm-content .fcm-top{
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
    }
    .fcm-content .fcm-top .fcm-top-box{
      padding: 5px;
    }
    .fcm-content .title{
      font-size: 16px;
      font-weight: bold;
      color: #6e6e6e;
    }
    .fcm-content .num{
      font-size: 14px;
      color: #a9a9a9;
    }
    .fcm-content .fcm-top .fcm-top-box:first-child{
      margin-right: 15px;
    }
    .fcm-content .fcm-footer{
      padding: 5px;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
    }
    .fcm-content .fcm-footer .title{
      margin-right: 10px;
    }
    .default-countries{
      margin-left: 30px!important;
      display: inline-flex;
      align-items: flex-end;
      justify-content: flex-start;
      font-size: 15px;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE 10+ */
      user-select: none; /* 标准语法 */
    }
    .countries-select-btn{
      color: #409eff;
      cursor: pointer;
    }
  </style>
  @if ($errors->has('error'))
    <x-admin-alert type="danger" msg="{{ $errors->first('error') }}" class="mt-4" />
  @endif

  @if (session()->has('success'))
    <x-admin-alert type="success" msg="{{ session('success') }}" class="mt-4" />
  @endif

  <div id="product-app">
    <div class="card h-min-600">
      <div class="card-body">

        <div class="d-flex my-4">
          @if ($type != 'trashed')
            <a href="{{ admin_route('logistics.create') }}" class="me-1 nowrap">
              <button class="btn btn-primary">{{ __('admin/logistics.logistics_create') }}</button>
            </a>
            <div class="default-countries">
              {{ __('admin/logistics.default_countries') }}：
              <span class="countries-select-btn"  @click="$refs['select-countries'].showSelectCountries()">
               @{{ showCurrentCountry() }}
              </span>
            </div>
          @else
            @if ($logistics->total())
              <button class="btn btn-primary" @click="clearRestore">{{ __('admin/logistics.clear_restore') }}</button>
            @endif
          @endif
        </div>

        @if ($logistics->total())
          <div class="table-push">
            <table class="table table-hover">
              <thead>
              <tr>
                <th><input type="checkbox" v-model="allSelected" /></th>
                <th>{{ __('common.id') }}</th>
                <th>{{ __('admin/logistics.logistics_name') }}</th>
                <th>{{ __('admin/logistics.warehouse_name') }}</th>
                <th style="max-width: 350px!important;">{{ __('admin/country.index') }}</th>
                <th>{{ __('admin/logistics.type') }}</th>
                <th style="width: 230px!important;">{{ __('admin/logistics.freight_calculation_method') }}</th>
                <th>{{ __('admin/logistics.day') }}</th>
                <th>{{ __('common.sort_order') }}</th>
                <th>{{ __('common.created_at') }}</th>

                @hook('admin.product.list.column')
                <th class="text-end">{{ __('common.action') }}</th>
              </tr>
              </thead>
              <tbody>
              @foreach ($logistics_format as $logistic)
                <tr>
                  <td><input type="checkbox" :value="{{ $logistic['id'] }}" v-model="selectedIds" /></td>
                  <td>{{ $logistic['id'] }}</td>
                  <td>{{ $logistic['name'] }}</td>
                  <td>{{ $logistic['warehouse_name'] }}</td>
                  <td style="max-width: 350px!important;">{{ $logistic['country'] }}</td>
                  <td>{{ __('admin/logistics.type_' . $logistic['type']) }}</td>
                  <td class="fcm-content">
                    <div class="fcm-top">
                      <div class="fcm-top-box">
                        <div class="title">{{ __('admin/logistics.first_weight') }}</div>
                        <div class="num">{{ $logistic['first_weight'] }}{{ __('product.g') }}</div>
                      </div>
                      <div class="fcm-top-box">
                        <div class="title">{{ __('admin/logistics.first_weight_fee') }}</div>
                        <div class="num">{{ $logistic['first_weight_fee'] }}USD</div>
                      </div>
                    </div>
                    <div class="fcm-top">
                      <div class="fcm-top-box">
                        <div class="title">{{ __('admin/logistics.add_weight') }}</div>
                        <div class="num">{{ $logistic['add_weight'] }}{{ __('product.g') }}</div>
                      </div>
                      <div class="fcm-top-box">
                        <div class="title">{{ __('admin/logistics.continuation_weight_fee') }}</div>
                        <div class="num">{{ $logistic['continuation_weight_fee'] }}USD</div>
                      </div>
                    </div>
                    <div class="fcm-footer">
                      <div class="title">{{ __('admin/logistics.throwing_ratio') }}</div>
                      <div class="num">{{ $logistic['throwing_ratio'] }}</div>
                    </div>




                  {{--<td{{ $logistic['first_weight'] }}></td>--}}
                  {{--<td>{{ $logistic['first_weight_fee'] }}</td>--}}
                  {{--                  <td>{{ $logistic['continuation_weight_max'] }}</td>--}}
                  {{--<td>{{ $logistic['add_weight'] }}</td>--}}
                  {{--<td>{{ $logistic['continuation_weight_fee'] }}</td>--}}
                  {{--                  <td>{{ $logistic['num_fee'] }}</td>--}}
                  {{--<td>{{ $logistic['throwing_ratio'] }}</td>--}}

                  </td>
                  <td>{{ $logistic['day_min'] }} - {{ $logistic['day_max'] }} {{ __('admin/logistics.work_day') }}</td>
                  <td>{{ $logistic['position'] }}</td>
                  <td>{{ $logistic['created_at'] }}</td>

                  @hook('admin.logistic.list.column_value')
                  <td class="text-end text-nowrap">
                    @if ($logistic['deleted_at'] == '')
                      <a href="{{ admin_route('logistics.edit', [$logistic['id']]) }}" class="btn btn-outline-secondary btn-sm">{{ __('common.edit') }}</a>
{{--                      <a href="javascript:void(0)" class="btn btn-outline-secondary btn-sm" @click.prevent="copyProduct({{ $loop->index }})">{{ __('common.copy') }}</a>--}}
                      <a href="javascript:void(0)" class="btn btn-outline-danger btn-sm" @click.prevent="deleteProduct({{ $loop->index }})">{{ __('common.delete') }}</a>
                      @hook('admin.product.list.action')
                    @else
                      <a href="javascript:void(0)" class="btn btn-outline-secondary btn-sm" @click.prevent="restoreProduct({{ $loop->index }})">{{ __('common.restore') }}</a>
                      @hook('admin.logistics.trashed.action')
                    @endif
                  </td>
                </tr>
              @endforeach
              </tbody>
            </table>
          </div>

          {{ $logistics->withQueryString()->links('admin::vendor/pagination/bootstrap-4') }}
        @else
          <x-admin-no-data />
        @endif
      </div>
    </div>

    <select-countries ref="select-countries" :country_list="country_list" @change-info="changeCountry" :is_single="true"></select-countries>
  </div>

  @hook('admin.product.list.content.footer')
@endsection

@push('footer')
  @include('shared.select-countries')
  <script>
    let app = new Vue({
      el: '#product-app',
      data: {
        url: '{{ $type == 'trashed' ? admin_route("products.trashed") : admin_route("products.index") }}',
        filter: {
          name: bk.getQueryString('name'),
          page: bk.getQueryString('page'),
          category_id: bk.getQueryString('category_id'),
          sku: bk.getQueryString('sku'),
          model: bk.getQueryString('model'),
          active: bk.getQueryString('active'),
          order_by: bk.getQueryString('order_by', ''),
        },
        selectedIds: [],
        productIds: @json($logistics->pluck('id')),
        country_list: @json($default_countries ?? []),
        default_countries_name: "{{ $default_countries_name ?? ''}}",
      },
      computed: {
        allSelected: {
          get(e) {
            return this.selectedIds.length == this.productIds.length;
          },
          set(val) {
            return val ? this.selectedIds = this.productIds : this.selectedIds = [];
          }
        }
      },
      created() {
        bk.addFilterCondition(this);
      },
      methods: {
        turnOnOff() {
          let id = event.currentTarget.getAttribute("data-id");
          let checked = event.currentTarget.getAttribute("data-active");
          let type = true;
          if (checked) type = false;
          $http.post('products/status', {ids: [id], status: type}).then((res) => {
            layer.msg(res.message)
            location.reload();
          })
        },
        batchDelete() {
          this.$confirm('{{ __('admin/product.confirm_batch_product') }}', '{{ __('common.text_hint') }}', {
            confirmButtonText: '{{ __('common.confirm') }}',
            cancelButtonText: '{{ __('common.cancel') }}',
            type: 'warning'
          }).then(() => {
            $http.delete('logistics/delete', {ids: this.selectedIds}).then((res) => {
              layer.msg(res.message)
              location.reload();
            })
          }).catch(()=>{});
        },
        batchActive(type) {
          this.$confirm('{{ __('admin/product.confirm_batch_status') }}', '{{ __('common.text_hint') }}', {
            confirmButtonText: '{{ __('common.confirm') }}',
            cancelButtonText: '{{ __('common.cancel') }}',
            type: 'warning'
          }).then(() => {
            $http.post('products/status', {ids: this.selectedIds, status: type}).then((res) => {
              layer.msg(res.message)
              location.reload();
            })
          }).catch(()=>{});
        },
        search() {
          this.filter.page = '';
          location = bk.objectToUrlParams(this.filter, this.url)
        },
        checkedOrderBy(orderBy) {
          this.filter.order_by = orderBy;
          location = bk.objectToUrlParams(this.filter, this.url)
        },
        resetSearch() {
          this.filter = bk.clearObjectValue(this.filter)
          location = bk.objectToUrlParams(this.filter, this.url)
        },
        copyProduct(index) {
          const id = this.productIds[index];

          this.$confirm('{{ __('common.confirm_copy') }}', '{{ __('common.text_hint') }}', {
            type: 'warning'
          }).then(() => {
            $http.post('products/' + id + '/copy').then((res) => {
              this.$message.success(res.message);
              location.reload();
            })
          }).catch(()=>{});
        },
        deleteProduct(index) {
          const id = this.productIds[index];

          this.$confirm('{{ __('common.confirm_delete') }}', '{{ __('common.text_hint') }}', {
            type: 'warning'
          }).then(() => {
            $http.delete('logistics/' + id).then((res) => {
              this.$message.success(res.message);
              location.reload();
            })
          }).catch(()=>{});
        },
        restoreProduct(index) {
          const id = this.productIds[index];

          this.$confirm('{{ __('admin/product.confirm_batch_restore') }}', '{{ __('common.text_hint') }}', {
            type: 'warning'
          }).then(() => {
            $http.put('products/restore', {id: id}).then((res) => {
              location.reload();
            })
          }).catch(()=>{});;
        },
        clearRestore() {
          this.$confirm('{{ __('admin/product.confirm_delete_restore') }}', '{{ __('common.text_hint') }}', {
            type: 'warning'
          }).then(() => {
            $http.post('products/trashed/clear').then((res) => {
              location.reload();
            })
          }).catch(()=>{});;
        },
        // 默认国家信息改变
        changeCountry(info){
          let _this = this;
          _this.country_list = info;
          let singleInfo = Object.values(info)[0];
          $http.post('logistics/default_countries',{ country: singleInfo }).then((res) => {
            _this.default_countries_name = singleInfo.name;
            _this.$refs['select-countries'].closeSelectCountries();
          })
        },
        // 当前选择国家文字显示
        showCurrentCountry(){
          let name = this.default_countries_name;
          if(!name) name = "{{ __('admin/customer.choose_country') }}";

          return name;
        }


      }
    });
  </script>
@endpush