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

@section('title', __('admin/page.inquiry'))

@section('content')

  @if ($errors->has('error'))
    <x-admin-alert type="danger" msg="{{ $errors->first('error') }}" class="mt-4" />
  @endif

  <div id="tax-classes-app" class="card">
    <div class="card-body h-min-600">
{{--      <div class="d-flex justify-content-between mb-4">--}}
{{--        <a href="{{ admin_route('pages.create') }}" class="btn btn-primary">{{ __('common.add') }}</a>--}}
{{--      </div>--}}
      <div class="table-push">
        <table class="table">
          <thead>
            <tr>
              <th>ID</th>
              <th>{{ __('admin/product.products_img') }}</th>
              <th>{{ __('admin/product.products_name') }}-{{ __('common.sku') }}</th>
              <th>{{ __('common.contacts') }}</th>
              <th>{{ __('common.email') }}</th>
              <th>{{ __('common.content') }}</th>
              <th>{{ __('common.created_at') }}</th>
              <th>{{ __('common.updated_at') }}</th>
              @hook('admin.page.list.column')
              <th class="text-end">{{ __('common.action') }}</th>
            </tr>
          </thead>
          <tbody>
            @if (count($pages_format))
              @foreach ($pages_format as $pageKey=>$page)
                <tr>
                  <td>{{ $page['id'] }}</td>
                  <td>
                    <div class="wh-60 border d-flex justify-content-between align-items-center"><img src="{{ $page['product_images'][0]['preview'] ?? 'image/placeholder.png' }}" class="img-fluid"></div>
                  </td>
                  <td>
                    <div ><a class="text-dark" href="{{ shop_route('products.show', $page['product_id']) }}" target="_blank">{{ $page['product_name'] ?? '' }}-{{ $page['product_sku_sku'] ?? '' }}</a></div>
                  </td>
                  <td>
                    <div title="">{{ $page['contacts'] ?? '' }}</div><!--  -->
                  </td>
{{--                  <td class="{{ $page['active'] ? 'text-success' : 'text-secondary' }}">--}}
{{--                    {{ $page['active'] ? __('common.enable') : __('common.disable') }}--}}
{{--                  </td>--}}
                  <td>
                    <div title="">{{ $page['email'] ?? '' }}</div>
                  </td>
                  <td>
                    <div title="">{{ $page['content'] ?? '' }}</div>
                  </td>
                  <td>{{ $page['created_at'] }}</td>
                  <td>{{ $page['updated_at'] }}</td>
                  @hook('admin.page.list.column_value')
                  <td class="text-end">
                    <button @click="checkedCreate('edit', {{$pageKey}})"
                      class="btn btn-outline-secondary btn-sm">{{ __('common.view') }}</button>
                    <button class="btn btn-outline-danger btn-sm delete-btn" type='button'
                      data-id="{{ $page['id'] }}">{{ __('common.delete') }}</button>
                    @hook('admin.page.list.action')
                  </td>
                </tr>
              @endforeach
            @else
            <tr><td colspan="5" class="border-0"><x-admin-no-data /></td></tr>
            @endif
          </tbody>
        </table>
      </div>

      {{ $pages->links('admin::vendor/pagination/bootstrap-4') }}

    </div>
    <el-dialog title="{{ __('admin/page.inquiry') }}" :visible.sync="dialog.show" width="870px"
               @close="closeCustomersDialog('form')" :close-on-click-modal="false">

      <el-descriptions class="margin-top" :column="2" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            {{ __('admin/product.products_img') }}
          </template>
          <div class="wh-100 border d-flex justify-content-between align-items-center">
          <img :src="dialog.form.product_images.length !== 0 ? dialog.form.product_images[0].preview : 'image/placeholder.png'" class="img-fluid">
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            {{ __('admin/product.products_name') }}-{{ __('common.sku') }}
          </template>
          <a class="text-dark" :href="'/products/' + dialog.form.product_id" target="_blank">@{{ dialog.form.product_name }}-@{{ dialog.form.product_sku_sku}}</a>
        </el-descriptions-item>

      </el-descriptions>
        <el-descriptions class="margin-top" :column="2" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            {{ __('common.contacts') }}
          </template>
          @{{ dialog.form.contacts }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            {{ __('common.email') }}
          </template>
          @{{ dialog.form.email }}
        </el-descriptions-item>

      </el-descriptions>
        <el-descriptions class="margin-top" :column="1" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            {{ __('common.content') }}
          </template>
          @{{ dialog.form.content }}
        </el-descriptions-item>

        </el-descriptions>
          <el-descriptions class="margin-top" :column="2" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            {{ __('common.created_at') }}
          </template>
          @{{ dialog.form.created_at }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            {{ __('common.updated_at') }}
          </template>
          @{{ dialog.form.updated_at }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>

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

@push('footer')
  <script>
    new Vue({
      el: '#tax-classes-app',

      data: {
        size: '',
        currencies: @json($pages_format ?? []),

        dialog: {
          show: false,
          index: null,
          type: 'add',
          form: {
            product_images: [],
            product_id: '',
            product_name: '',
            product_sku_sku: '',
            contacts: '',
            email: '',
            content: '',
            created_at: '',
            updated_at: '',
          },
        },

        rules: {
          name: [{required: true,message: '{{ __('common.error_required', ['name' => __('common.name')]) }}', trigger: 'blur'}, ],
          code: [{required: true,message: '{{ __('common.error_required', ['name' => __('currency.code')]) }}', trigger: 'blur'}, ],
          value: [{required: true,message: '{{ __('common.error_required', ['name' => __('currency.value')]) }}',trigger: 'blur'}, ],
          decimal_place: [{required: true,message: '{{ __('common.error_required', ['name' => __('currency.decimal_place')]) }}',trigger: 'blur'}, ],
        }
      },

      methods: {
        checkedCreate(type, index) {
          this.dialog.show = true
          this.dialog.type = type
          this.dialog.index = index

          if (type == 'edit') {
            this.dialog.form = JSON.parse(JSON.stringify(this.currencies[index]))
          }
        },

        addFormSubmit(form) {
          const self = this;
          const type = this.dialog.type == 'add' ? 'post' : 'put';
          const url = this.dialog.type == 'add' ? 'currencies' : 'currencies/' + this.dialog.form.id;

          this.$refs[form].validate((valid) => {
            if (!valid) {
              this.$message.error('{{ __('common.error_form') }}');
              return;
            }

            $http[type](url, this.dialog.form).then((res) => {
              this.$message.success(res.message);
              if (this.dialog.type == 'add') {
                this.currencies.push(res.data)
              } else {
                this.currencies[this.dialog.index] = res.data
              }

              this.dialog.show = false
            })
          });
        },

        deleteCustomer(id, index) {
          const self = this;
          this.$confirm('{{ __('common.confirm_delete') }}', '{{ __('common.text_hint') }}', {
            confirmButtonText: '{{ __('common.confirm') }}',
            cancelButtonText: '{{ __('common.cancel') }}',
            type: 'warning'
          }).then(() => {
            $http.delete('currencies/' + id).then((res) => {
              this.$message.success(res.message);
              self.currencies.splice(index, 1)
            })
          }).catch(()=>{})
        },

        closeCustomersDialog(form) {
          // this.$refs[form].resetFields();
          Object.keys(this.dialog.form).forEach(key => this.dialog.form[key] = '')
          // this.dialog.show = false
        }
      }
    })

    $('.delete-btn').click(function(event) {
      const id = $(this).data('id');
      const self = $(this);

      layer.confirm('{{ __('common.confirm_delete') }}', {
        title: "{{ __('common.text_hint') }}",
        btn: ['{{ __('common.cancel') }}', '{{ __('common.confirm') }}'],
        area: ['400px'],
        btn2: () => {
          $http.delete(`inquiry/${id}`).then((res) => {
            layer.msg(res.message);
            window.location.reload();
          })
        }
      })
    });
  </script>
@endpush