@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__('Items Points')}}</h1>
            <p>{{__('Add New Items Points')}}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="{{route("admin.points.index")}}">{{__('Items')}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__('Points')}}</a></li>
        </ul>
    </div>
@endsection

@section("content")
    @include("includes.dialog")
    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__('Add New Points')}}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("admin.points.store")}}">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="exampleSelect1">{{__('Items')}}</label>
                                    <select class="form-control items_select" id="exampleSelect1" name="item_id" data-url="{{route("ajax.items.item_prices")}}" >
                                        <option selected disabled>{{__("select one")}}</option>
                                        @foreach($items as $item)
                                            <option value="{{$item->id}}">{{$item->getNameAttribute()}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error("item_id")
                                <div class="input-error">{{$message}}</div>
                                @enderror

                                <div class="col-12">
                                    <div class="modal-body">
                                        <table class="table prices">
                                        </table>
                                    </div>

                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">{{__('gain-points')}}</label>
                                    <input class="form-control @if($errors->has('item_points')) is-invalid @endif" type="number" name="item_points" placeholder="{{__('enter-gain-points')}}">
                                </div>
                                @error("item_points")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">{{__('replacement-points')}}</label>
                                    <input class="form-control @if($errors->has('replacement_points')) is-invalid @endif" type="number" name="replacement_points" placeholder="{{__('enter-replacement-points')}}">
                                </div>
                                @error("replacement_points")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i>{{__('Create')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <script type="text/javascript" src="{{asset("assets/js/plugins/select2.min.js")}}"></script>

    <script type="text/javascript">
        if(document.location.hostname == 'pratikborsadiya.in') {
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-72504830-1', 'auto');
            ga('send', 'pageview');
        }
        $('#demoSelect').select2();
        $(".items_select").on("change",function(){
            const selector=$(".items_select");
            let url = selector.data("url");
            let item_id=selector.val();
            const prices_table=$(".prices");
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "GET",
                url: url,
                data: {item_id: item_id}, // serializes the form's elements.
                success: function (response) {
                    prices_table.empty();
                    let header ="<tr><th>" + "{{__("CarHub")}}"+ "</th>"+"<th>" + "{{__("PickUp")}}" + "</th>"+"<th>" + "{{__("Delivery")}}" + "</th></tr>";
                    let prices ="<tr><td>" + response.car_hub + "</td>"+"<td>" + response.pick_up + "</td>"+"<td>" + response.delivery + "</td></tr>";
                    prices_table.append(header)
                    prices_table.append(prices)
                }
            });
        });
    </script>
@endsection