@extends('layouts.admin')
@section('admin')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Daily Reward</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createModal">
                            Create
                        </button>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Daily Rewards List</h4>
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Name</th>
                                <th>Reward Type</th>
                                <th>Value</th>
                                <th>Validity (Days)</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($daily_rewards as $reward)
                                @php
                                    $file = $reward->file;
                                    $publicFile = $file ? public_path($file) : null;
                                @endphp
                                <tr>
                                    <td>{{ $reward->name }}</td>
                                    <td>
                                        <span class="badge bg-info text-capitalize">{{ $reward->reward_type }}</span>
                                    </td>
                                    <td>
                                        @if($reward->reward_type == 'coin')
                                            <span class="fw-bold">{{ $reward->coin }} coins</span>
                                        @else
                                            @if(!empty($reward->file) && file_exists($reward->file))
                                                @php
                                                    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                                @endphp
                                                @if($ext === 'svga')

                                                    <div id="svga-player-{{ $reward->id }}"
                                                         style="width:50px; height:50px;"></div>
                                                    <script>
                                                        document.addEventListener("DOMContentLoaded", function () {
                                                            const player{{ $reward->id }} = new SVGA.Player('#svga-player-{{ $reward->id }}');
                                                            const parser{{ $reward->id }} = new SVGA.Parser('#svga-player-{{ $reward->id }}'); // same container

                                                            parser{{ $reward->id }}.load('{{ asset($reward->file) }}', function (videoItem) {
                                                                player{{ $reward->id }}.setVideoItem(videoItem);
                                                                player{{ $reward->id }}.startAnimation();
                                                            });
                                                        });
                                                    </script>
                                                @else
                                                    {{-- Regular raster/image --}}
                                                    <img src="{{ asset($file) }}" alt="image" width="50" height="50" style="object-fit:cover" loading="lazy">
                                                @endif
                                            @else
                                                <img
                                                    src="https://coffective.com/wp-content/uploads/2018/06/default-featured-image.png.jpg"
                                                    alt="image" width="50" height="50" loading="lazy">
                                            @endif
                                        @endif
                                    </td>
                                    <td>{{ $reward->validity }} days</td>
                                    <td>
                                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#editModal{{ $reward->id }}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#deleteModal{{ $reward->id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal{{ $reward->id }}" tabindex="-1"
                                     aria-labelledby="createModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="createModalLabel">Edit Reward</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{route('admin.daily.reward.update')}}" method="post"
                                                  enctype="multipart/form-data">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label class="form-label">Name</label>
                                                        <input type="text" class="form-control" name="name"
                                                               value="{{$reward->name}}" required>
                                                        <input type="hidden" class="form-control" name="edit_id"
                                                               value="{{$reward->id}}" required>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label">Reward Type</label>
                                                        <select class="form-control reward-type-select"
                                                                name="reward_type">
                                                            <option
                                                                value="coin" {{$reward->reward_type == 'coin' ? 'selected' :''}}>
                                                                Coin
                                                            </option>
                                                            <option
                                                                value="frame" {{$reward->reward_type == 'frame' ? 'selected' :''}}>
                                                                Frame
                                                            </option>
                                                            <option
                                                                value="room-frame" {{$reward->reward_type == 'room-frame' ? 'selected' :''}}>
                                                                Room Frame
                                                            </option>
                                                            <option
                                                                value="noble" {{$reward->reward_type == 'noble' ? 'selected' :''}}>
                                                                Noble
                                                            </option>
                                                            <option
                                                                value="vehicle" {{$reward->reward_type == 'vehicle' ? 'selected' :''}}>
                                                                Vehicle
                                                            </option>
                                                            <option
                                                                value="chat-bubble" {{$reward->reward_type == 'chat-bubble' ? 'selected' :''}}>
                                                                Chat Bubble
                                                            </option>
                                                            <option
                                                                value="room-lock" {{$reward->reward_type == 'room-lock' ? 'selected' :''}}>
                                                                Room Lock
                                                            </option>
                                                            <option
                                                                value="theme" {{$reward->reward_type == 'theme' ? 'selected' :''}}>
                                                                Theme
                                                            </option>
                                                            <option
                                                                value="personal-page" {{$reward->reward_type == 'personal-page' ? 'selected' :''}}>
                                                                Personal Page
                                                            </option>
                                                        </select>
                                                    </div>
                                                    <div class="mb-3 coin-field">
                                                        <label class="form-label">Coin Value</label>
                                                        <input type="number" class="form-control" name="coin"
                                                               value="{{$reward->coin}}"
                                                               min="1">
                                                    </div>
                                                    <div class="mb-3 image-field">
                                                        <label class="form-label">Current Image</label>
                                                        <br>
                                                        @if(!empty($file) && file_exists($publicFile))
                                                            @php
                                                                $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                                            @endphp
                                                            @if($ext === 'svga')
                                                                <div id="svga-player-edit-{{ $reward->id }}"
                                                                     style="width:100px; height:100px;"></div>
                                                            @else
                                                                <img src="{{ asset($file) }}" alt="Reward Image"
                                                                     width="100" height="100" class="rounded">
                                                            @endif
                                                        @else
                                                            <span class="text-muted">No image</span>
                                                        @endif
                                                        <label class="form-label mt-2">New Image</label>
                                                        <input type="file" class="form-control" name="file">
                                                        <small class="text-muted">Leave empty to keep current image</small>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label">Validity</label>
                                                        <input type="number" class="form-control" name="validity"
                                                               value="{{$reward->validity}}"
                                                               min="1">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Delete Modal -->
                                <div class="modal fade" id="deleteModal{{ $reward->id }}" tabindex="-1"
                                     aria-labelledby="deleteModalLabel{{ $reward->id }}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="deleteModalLabel{{ $reward->id }}">Confirm
                                                    Deletion</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('admin.daily.rewards.delete') }}"
                                                  method="post">
                                                @csrf
                                                <div class="modal-body">
                                                    <p>Are you sure you want to delete the reward "{{ $reward->name }}
                                                        "?</p>
                                                    <input type="hidden" class="form-control" name="delete_id"
                                                           value="{{$reward->id}}" required>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel
                                                    </button>
                                                    <button type="submit" class="btn btn-danger">Delete</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            </tbody>
                        </table>
                    </div>

                    @if($daily_rewards->hasPages())
                        <div class="mt-3">
                            {{ $daily_rewards->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Create Modal -->
    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createModalLabel">Create Reward</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{route('admin.daily.reward.save')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Reward Type</label>
                            <select class="form-control reward-type-select" name="reward_type" required>
                                <option value="coin">Coin</option>
                                <option value="frame">Frame</option>
                                <option value="room-frame">Room Frame</option>
                                <option value="noble">Noble</option>
                                <option value="vehicle">Vehicle</option>
                                <option value="chat-bubble">Chat Bubble</option>
                                <option value="room-lock">Room Lock</option>
                                <option value="theme">Theme</option>
                                <option value="personal-page">Personal Page</option>
                            </select>
                        </div>
                        <div class="mb-3 coin-field">
                            <label class="form-label">Coin Value</label>
                            <input type="number" class="form-control" name="coin" value="10" min="1">
                        </div>
                        <div class="mb-3 image-field">
                            <label class="form-label">Image</label>
                            <input type="file" class="form-control" name="file">
                            <small class="text-muted">Supports: JPG, PNG, GIF, SVG, SVGA</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Validity</label>
                            <input type="number" class="form-control" name="validity" value="7" min="1" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Function to toggle fields based on reward type
            function toggleRewardFields(selectElement) {
                const rewardType = selectElement.value;
                const coinField = selectElement.closest('.modal-content').querySelector('.coin-field');
                const imageField = selectElement.closest('.modal-content').querySelector('.image-field');

                if (rewardType === 'coin') {
                    coinField.style.display = 'block';
                    if (imageField) imageField.style.display = 'none';
                } else {
                    coinField.style.display = 'none';
                    if (imageField) imageField.style.display = 'block';
                }
            }

            // Initialize on page load for each modal
            document.querySelectorAll('.reward-type-select').forEach(select => {
                toggleRewardFields(select);

                // Add event listener for changes
                select.addEventListener('change', function () {
                    toggleRewardFields(this);
                });
            });

            // For the create modal specifically
            const createModal = document.getElementById('createModal');
            if (createModal) {
                const createSelect = createModal.querySelector('.reward-type-select');
                toggleRewardFields(createSelect);

                createSelect.addEventListener('change', function () {
                    toggleRewardFields(this);
                });
            }


        });
    </script>
@endsection

@section('js')
    <script src="https://unpkg.com/svgaplayerweb@latest/build/svga.min.js"></script>
@endsection