@include('includes.header')

<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-md-8 col-sm-6 col-xs-12">
            <ul class="pull-right d-inline-flex" style="list-style: none;">
                <li class="btn-sm">
                    <a href="{{ route('all-account') }}" class="btn btn-primary rounded-pill" style="width: 110px; text-align: center;">All Account</a>
                </li>
                <li class="btn-sm">
                    <a href="{{route('pending')}}" class="btn btn-warning rounded-pill" style="width: 130px; text-align: center; color: white;"> Today History</a>
                </li>
                <li class="btn-sm">
                    <a href="{{ route('all-history') }}" class="btn btn-success rounded-pill" style="width: 110px; text-align: center;">All History</a>
                </li>
            </ul>
            <br>
            <b style="color: #009688;">Rank & Rewards</b>
        </div>
    </div>
    <hr/>

    <div class="container-fluid">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if ($rankRewards->isNotEmpty())
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Description</th>
                        <th>Details</th>
                        <th>Reward</th>
                        <th>Royalty</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rankRewards as $reward)
                        <tr>
                            <td>{{ $reward->id }}</td>
                            <td>{{ $reward->title }}</td>
                            <td>{{ $reward->description }}</td>
                            <td>{{ $reward->details }}</td>
                            <td>{{ $reward->reward }}</td>
                            <td>{{ $reward->royalty }}</td>
                            <td>
                                <button class="btn btn-sm btn-warning" 
                                        onclick="openEditModal({{ json_encode($reward) }})">
                                    Edit
                                </button>
                                <form action="{{ route('delete-rank-reward', $reward->id) }}" method="POST" style="display: inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <p class="text-danger">No records found.</p>
        @endif
    </div>

    <!-- Modal for Editing -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editForm" action="{{ route('update-rank-reward') }}" method="POST">
                    @csrf
                    <input type="hidden" name="id" id="editId">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editModalLabel">Edit Rank Reward</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="editTitle" class="form-label">Title</label>
                            <input type="text" class="form-control" id="editTitle" name="title" required>
                        </div>
                        <div class="mb-3">
                            <label for="editDescription" class="form-label">Description</label>
                            <textarea class="form-control" id="editDescription" name="description" rows="3" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="editDetails" class="form-label">Details</label>
                            <textarea class="form-control" id="editDetails" name="details" rows="3" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="editReward" class="form-label">Reward</label>
                            <input type="text" class="form-control" id="editReward" name="reward" required>
                        </div>
                        <div class="mb-3">
                            <label for="editRoyalty" class="form-label">Royalty</label>
                            <input type="text" class="form-control" id="editRoyalty" name="royalty" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

@include('includes.footer')

<script>
    function openEditModal(reward) {
        document.getElementById('editId').value = reward.id;
        document.getElementById('editTitle').value = reward.title;
        document.getElementById('editDescription').value = reward.description;
        document.getElementById('editDetails').value = reward.details;
        document.getElementById('editReward').value = reward.reward;
        document.getElementById('editRoyalty').value = reward.royalty;
        
        // Show the modal
        new bootstrap.Modal(document.getElementById('editModal')).show();
    }
</script>