@extends('layouts.customer')
@section('content')
<style type="text/css">
    .pac-container {
        top: 300px !important;
    }

    div.btn-group {
        width: 100%;
        border-radius: 0.1rem;
        border: 1px solid #d7d7d7;
    }

    .multiselect-selected-text {
        float: left;
    }

    b.caret {
        margin-left: 79%;
    }

    ul.multiselect-container.dropdown-menu.show {
        width: 100%;
    }

    .custom-switch {
        padding-left: 2.25rem !important;
    }

    .edit_model {
        position: absolute;
        top: 20px;
        right: 80px;
    }

    .delete_model {
        position: absolute;
        top: 20px;
        right: 20px;
    }
</style>
<link rel="stylesheet" href="/css/bootstrap-multiselect.css">
<div class="container-fluid">
    <div class="row">

        <div class="col-12">
            <h1>Rewards</h1>
            <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                <ol class="breadcrumb pt-0">
                    <li class="breadcrumb-item">
                        <a href="{{url('/')}}/dashboard">Dashboard</a>
                    </li>

                    <li class="breadcrumb-item" aria-current="page">Rewards</li>
                    <li class="breadcrumb-item active" aria-current="page">List</li>
                </ol>
            </nav>

            @can('user_create')
                <a href="{{ route('rewards.create', ['account' => $account]) }}" class="btn btn-secondary float-right">Add Reward</a>
            @endcan
            <div class="separator mb-5"></div>
        </div>
    </div>

    <div class="row mb-2">
        @if ($message = Session::get('success'))
            <div class="w-100 alert alert-success">
                <p>{{ $message }}</p>
            </div>
        @endif
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="DataTables_Table_0_wrapper">
                    <table class="data-table" id="DataTables_Table_0">
                        <thead>
                            <tr>
                                <th>Reward</th>
                                <th>Type</th>
                                <th>Value</th>
                                <th>Points</th>
                                <th>Status</th>
                                <th style="width:140px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($rewards as $reward)

                                @php
                                    $menuItem  = $reward->menu_item->first();
                                    $isItemOff = $menuItem !== null;
                                @endphp

                                <tr>

                                    {{-- REWARD --}}
                                    <td>
                                        <div class="d-flex align-items-center">

                                            {{-- IMAGE --}}
                                            @if($isItemOff && !empty($menuItem->item_image))
                                                <img src="{{ secure_url($menuItem->item_image) }}"
                                                     alt="{{ $menuItem->item_name }}"
                                                     class="mr-3"
                                                     style="width:48px;height:48px;object-fit:cover;border-radius:6px;">
                                            @endif

                                            {{-- TEXT --}}
                                            <div>
                                                <strong class="d-block">
                                                    {{ $isItemOff ? $menuItem->item_name : 'Amount Off Reward' }}
                                                </strong>

                                                @if(!empty($reward->description))
                                                    <small class="text-muted">
                                                        {{ $reward->description }}
                                                    </small>
                                                @endif
                                            </div>

                                        </div>
                                    </td>

                                    {{-- TYPE --}}
                                    <td>
                                        @if($isItemOff)
                                            <span class="badge badge-pill badge-danger">Item Off</span>
                                        @else
                                            <span class="badge badge-pill badge-success">Amount Off</span>
                                        @endif
                                    </td>

                                    {{-- VALUE --}}
                                    <td>
                                        @if($isItemOff)
                                            {{ $menuItem->item_name }}
                                        @else
                                            ${{ $reward->price }} Off
                                        @endif
                                    </td>

                                    {{-- POINTS --}}
                                    <td>
                                        <span class="badge badge-info">
                                            {{ $reward->points }} pts
                                        </span>
                                    </td>

                                    {{-- STATUS --}}
                                    <td>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox"
                                                   class="custom-control-input status-toggle"
                                                   id="rewardStatus{{ $reward->id }}"
                                                   data-url="{{ secure_url('/createAndUp/rewards/'.$reward->id) }}"
                                                   @if($reward->status == 1) checked @endif>
                                            <label class="custom-control-label"
                                                   for="rewardStatus{{ $reward->id }}"></label>
                                        </div>
                                    </td>

                                    {{-- ACTIONS (3 DOT MENU) --}}
                                    <td>
                                        <div class="dropdown">
                                            <div class="glyph-icon simple-icon-options-vertical"
                                                 style="cursor:pointer;"
                                                 data-toggle="dropdown"
                                                 aria-haspopup="true"
                                                 aria-expanded="false"></div>

                                            <div class="dropdown-menu dropdown-menu-right">

                                                <a class="dropdown-item"
                                                   href="{{ route('rewards.edit', ['account'=>$account,'reward'=>$reward->id]) }}">
                                                    <i class="simple-icon-pencil"></i> Edit
                                                </a>

                                                <a href="javascript:void(0)"
                                                   class="dropdown-item"
                                                   data-toggle="modal"
                                                   data-target="#deleteReward{{ $reward->id }}">
                                                    <i class="simple-icon-trash"></i> Delete
                                                </a>

                                            </div>
                                        </div>
                                    </td>

                                </tr>

                                {{-- DELETE MODAL --}}
                                <div class="modal fade" id="deleteReward{{ $reward->id }}">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">

                                            <div class="modal-header">
                                                <h5 class="modal-title">Delete Reward</h5>
                                                <button type="button" class="close" data-dismiss="modal">
                                                    <span>&times;</span>
                                                </button>
                                            </div>

                                            <div class="modal-body">
                                                Are you sure you want to delete this reward?
                                            </div>

                                            <div class="modal-footer">
                                                <button class="btn btn-secondary" data-dismiss="modal">
                                                    Cancel
                                                </button>
                                                <form method="POST"
                                                      action="{{ route('rewards.destroy',['account'=>$account,'reward'=>$reward->id]) }}">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="btn btn-danger">Delete</button>
                                                </form>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            @endforeach
                            </tbody>

                      </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $(document).on('change', '.status-toggle', function() {
                var status = this.checked?1:0;
                var ajax_url = $(this).data('url');
                var csrf_token = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    type: "POST",
                    url: ajax_url,
                    data: {is_ajax: true, status: status, _token: csrf_token},
                    success: function(response) {
                        location.reload();
                        // console.log(response);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });
        });
    </script>
@endsection