@extends('layouts.app')
@section('style')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')

    <div class="col-12 col-md-12 ">
        <div class="row">
            <!-- register-header -->
            <div class="col-12 news-header px-5 text-primary text-opensans d-flex align-items-center">
                <span class="px-3">Buy items</span>
            </div>
            <style>

            </style>
            <!-- register-content -->
            <div class="col-12 news-content panel-content-h">
                <!-- register -->


                <!-- Modal -->
                <div class="modal fade" id="models" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                </div>

                <div class="col-12 py-4">

                    @if(Auth::user()->character)
                        <div class="row ">
                            @foreach($items as $row)
                            <div class="col-md-3">
                                <div class="box-shop">
                                    <div class="img">
                                        <img src="{{$row->img}}" alt="">
                                    </div>
                                    <div class="name">{{$row->name}}</div>
                                    <div class="points">{{$row->points}}</div>
                                    <div class="buy">
                                        <button class="buy-now" data-offer="{{$row->id}}">Buy Now</button>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="panel-content p-5 my-4">
                            <p class="text-primary text-center text-opensans">
                                You Dont Have Character
                            </p>
                        </div>
                    @endif


                </div>
            </div>

        </div>
    </div>
@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <script>
        $(function (){
           $('.buy-now').on('click' , function (){
              let val = $(this).data('offer');
              $.ajax({
                 url : '{{route('item.get')}}',
                 method : 'POST',
                 dataType: 'json',
                 data: {
                     id : val ,
                     _token : $('meta[name=csrf-token]').attr('content')
                 },
                 success: function (data)
                 {
                    if(data.status == 200)
                    {
                        $('#models').html(data.html).modal('show');
                    }else{
                        alert(data.msg)
                    }
                 }
              });
           });
        });
    </script>
@endsection