@php
    header('Content-Type: text/html; charset=utf-8');
    $default = get_default_language_code();
@endphp
@extends('user.layouts.master')
@section('breadcrumb')
    @include('user.components.breadcrumb',['breadcrumbs' => [
        [
            'name'  => __("Dashboard"),
            'url'   => setRoute("user.dashboard"),
        ]
    ], 'active' => __("Manage Products")])
@endsection
@section('content')
<div class="table-wrapper pt-60">
    <div class="row justify-content-center">
        <div class="col-xl-12">
            <div class="table-area table-responsive">
                <h4 class="title">{{ __('Manage Products') }}</h4>
                <a href="{{ route('user.add.product') }}" style="float:right;padding:10px;border-radius:5px;margin-top:-20px;" class="btn--base modal-btn"><i class="fas fa-plus me-1"></i> 創建產品</a>
                <div class="alert alert-success" role="alert" style="display:none;"></div>
                <table class="custom-table">
                    <thead>
                      <tr>
                          <th></th>
                          <th>{{ __('Image') }}</th>
                          <th>{{ __('Title') }}</th>
                          <th>{{ __('Description') }}</th>
                          <th>{{ __('Price') }}</th>
                          <th>{{ __('Status') }}</th>
                          <th></th>
                      </tr>
                    </thead>
                    <tbody>
                        @forelse ($data ?? [] as $key => $item)
                          <tr id="row_{{ $item->id }}">
                            <td><img src="/public/backend/images/products/{{ $item->image }}" alt="" style="width:100px;"/></td>
                            <td>{{ $item->title_en }}</td>
                            <td></td>
                            <td>{{ number_format($item->price) }}</td>
                            <td>
                              <select class="form--control" style="padding:10px;height:40px;width:auto;" onchange="changeStatus(this.value, {{ $item->id }})">
                                <option  value="0">Enable</option>
                                <option  value="1">Disable</option>
                              </select>
                            </td>
                            <td>
                            	<a href="product-details/{{ $item->id }}" class="btn btn--base"><i class="las la-pencil-alt"></i></a>
                                <a style="background-color:#ff0000;" onclick="deleteProduct({{ $item->id }})" class="btn btn--base"><i class="las la-trash-alt"></i></a>
                            </td>
                          <tr>
                        @empty
                            @include('admin.components.alerts.empty',['colspan' => 7])
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
  function changeStatus(status, productID) {
    var url = 'product-status/' + status + '/' + productID;
    fetch(url).then(data => {
      $('html, body').animate({ scrollTop: 0 }, 'fast');
      $(".alert.alert-success").html("狀態已更改成功");
      $(".alert.alert-success").show();
      $(".alert.alert-success").fadeOut(4000);
    })
    .catch(error => {
    });
  }
  function deleteProduct(productID) {
    if (confirm("Are you sure?") == true) {
        var url = 'product-delete/' + productID;
        fetch(url).then(data => {
            $('html, body').animate({ scrollTop: 0 }, 'fast');
            $(".alert.alert-success").html("產品刪除成功");
            $(".alert.alert-success").show();
            $(".alert.alert-success").fadeOut(4000);
            $("#row_" + productID).remove();
        }).catch(error => {
        });
    }
  }
</script>
@endsection