@extends('layouts.admin-main')
@section('content')
    <div class="col-lg-12">
        <div class="card-body shadow-1">
            <div class="row">
                <div class="col-lg-12 margin-tb">
                    <div class="pull-right mb-2" style="text-align: right;">
                        <a class="btn btn-sm  btn-primary" href="{{ route('products.create') }}">
                            <i class="fal fa-plus"></i> {{ __('message.add new') }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="panel-container show">
                <div class="d-flex flex-column h-100">
                    <div class="h-auto">
                        <table id="example" class="table table-bordered table-hover table-striped w-100">
                            <thead class="bg-fusion-50">
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('message.order') }}</th>
                                    <th>{{ __('message.name') }}</th>
                                    <th>{{ __('message.image') }}</th>
                                    <th>{{ __('message.commision rate') }}</th>
                                    <th>{{ __('message.sectors') }}</th>
                                    <th>{{ __('message.price') }}</th>
                                    <th>{{ __('message.detail') }}</th>
                                    <th>{{ __('message.status') }}</th>
                                    <th>{{ __('message.created by') }}</th>
                                    {{-- <th>{{ __('message.created date') }}</th> --}}
                                    <th>{{ __('message.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach ($products as $index => $product)
                                    <tr @if (!$product->is_active) class="inactive" @endif>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            {{ $product->order }}
                                        </td>
                                        <td>
                                            {{ $product->name }}
                                        </td>
                                        <th>
                                            @if($product->image)
                                                <img src="{{asset($product->image)}}" style="width:100px;">
                                            @endif
                                        </th>
                                        <td class="credit">
                                            {{ number_format($product->commission_rate,2) }}%
                                        </td>
                                       
                                        <td>
                                            {{ $product->sector->name??'' }}
                                        </td>
                                        
                                        <td class="credit">
                                            {{ number_format($product->current_price,6) }}
                                        </td>
                                        <td>
                                            {{ $product->detail??'' }}
                                        </td>
                                        <td>
                                            @if ($product->is_active)
                                                <label class="badge badge-success">
                                                    {{ __('message.active') }}
                                                </label>
                                            @else
                                                <label class="badge badge-danger">
                                                    {{ __('message.inactive') }}
                                                </label>
                                            @endif
                                        </td>
                                        <td>
                                            {{ $product->user->name ?? '' }}
                                        </td>
                                        {{-- <td>
                                            {{$product->created_at->format('d/m/Y H:i')}}
                                        </td> --}}
                                        <td>
                                            <button type="button" class="btn btn-primary rounded-1 btn-sm modal-update-product-price"
                                                data-toggle="modal" data-target="#product_price_modal" data-product-id="{{ $product->id }}" data-current-price="{{ $product->current_price   }}" >
                                                <i class="fal fa-money-check-alt fa-lg"></i>
                                                {{ __('message.update price') }}
                                            </button>
                                            <a class="btn btn-sm  btn-info"
                                                href="{{ route('products.price-history', $product->id) }}">
                                                 <i class="fal fa-money-check-alt fa-lg"></i>
                                                {{ __('message.price history') }}
                                            </a>
                                            @if ($product->is_active == 1)
                                                <a href="{{ route('product.inactive', $product) }}"  class="btn  btn-sm btn-danger"  title="Inactive Now">{{ __('message.deactivate') }}</a> 
                                            @else
                                                <a href="{{ route('product.active', $product->id) }}"  class="btn btn-sm btn-success" title="Active Now">
                                                     {{ __('message.activate') }}
                                                 </a> 
                                            @endif

                                            <a class="btn btn-sm  btn-info"
                                                href="{{ route('products.edit', $product->id) }}">
                                                <i class="fal fa-pen" title="Edit"></i></a>

                                            <form method="POST" action="products/{{ $product->id }}"
                                                style="display:inline">
                                                <input name="_method" type="hidden" value="DELETE">
                                                {{ csrf_field() }}
                                                <button type="submit" class="btn btn-sm btn-danger"
                                                    onclick="return confirm('{{ __('message.do you want to delete') }}?')">
                                                    <i class="fal fa-trash" style="color: #FFF;"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>

            </div>
        </div>
        <div class="py-4 mt-4 mx-2 ">
            <!-- Pagination bootstrap-->
            {{-- {{ $products->appends($_GET)->links() }} --}}
        </div>
    </div>


    <!-- Modal popup -->
    <div class="modal fade" id="product_price_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <form method="POST" action="{{ route('product.update-price') }}">
                        {{ csrf_field() }}
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title">
                            {{__('message.update price')}}
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fal fa-times"></i></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label" for="simpleinput">
                                {{ __('message.price') }} 
                                <span style="color:#dc3545;font-size: 12px;" class="min-max">
                                   
                                </span>
                            </label> 
                            <input type="hidden" name="product_id" id="simpleinput" class="form-control" required>
                            <input type="number" name="price" class="form-control" required step="0.000001">
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label" for="simpleinput" style="width:100%">
                                {{ __('message.date') }}
                            </label> 
                            <input type="hidden" name="product_id" id="simpleinput" class="form-control" required>
                            <input type="text" class="form-control " placeholder=" {{ __('message.date') }}" id="datepicker" required style="width:40%;float: left" name="date" value="{{date('m/d/Y')}}">
                            <input type="text" class="form-control " placeholder=" {{ __('message.time') }}" id="timepicker" required style="width:40%;float: left" name="time" value="{{date('H:i:s')}}">
                        </div>
                    </div>
                    <div class="modal-footer">

                        <button type="submit" class="btn btn-primary waves-effect waves-themed">
                            <i class="fal fa-save fa-lg"></i>
                            {{ __('message.save') }}
                        </button>
                        <button type="button" class="btn btn-danger waves-effect waves-themed"
                            data-dismiss="modal" value="">{{ __('message.cancel') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- End Modal popup -->

@endsection
@section('scripts')
<link id="myskins" rel="stylesheet" media="screen, print"
        href="{{ asset('admin-asset/css/formplugins/bootstrap-datepicker/bootstrap-datepicker.css') }}">
<script src="{{asset('admin-asset/js/formplugins/bootstrap-datepicker/bootstrap-datepicker.js')}}"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/Customizable-jQuery-Timepicker-Plugin-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Customizable-jQuery-Timepicker-Plugin-timepicker/jquery.timepicker.css">
<script>
    $(document).ready(function() {
        $("#js-nav-menu").removeClass('active');
        $("#js-nav-menu li ul li").removeClass('active');
        $("#menu_setup_list").addClass('active open');
        $("#collapse_setup").addClass('collapse in')
        $("#menu_products").addClass('active')
    })

    $(".modal-update-product-price").click(function() {
        var productId = $(this).data('product-id');
        var currentPrice = $(this).data('current-price');
        $('input[name="product_id"]').val(productId);
        $('input[name="price"]').val(currentPrice);
        if(currentPrice>0){
            $('.min-max').html("("+(currentPrice*0.7)+" - "+(currentPrice*1.3)+")");
        }
        
    })

    var controls = {
        leftArrow: '<i class="fal fa-angle-left" style="font-size: 1.25rem"></i>',
        rightArrow: '<i class="fal fa-angle-right" style="font-size: 1.25rem"></i>'
    }   
    $('#datepicker').datepicker(
    {
        orientation: "Bottom left",
        todayHighlight: true,
        templates: controls
    });

    $('#timepicker').timepicker({ 
        'timeFormat': 'H:i:s',
        'todayHighlight': true,

    });

</script>
@endsection
@section('meta')
    <title>{{ __('message.products') }} - {{ config('app.name', 'Dashboard') }}</title>
@endsection