@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">VIP Management</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 New
                        </button>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Target</th>
                                <th>VIP Level</th>
                                <th>Purchase Coin</th>
                                <th>Discounted Coin</th>
                                <th>Level Icon</th>
                                <th>Frame</th>
                                <th>Colored Username</th>
                                <th>Exclusive Nickname</th>
                                <th>Profile Card</th>
                                <th>Rank The Top</th>
                                <th>Anti Effect</th>
                                <th>Unlimited Message</th>
                                <th>Take Mic Free</th>
                                <th>Lock Room</th>
                                <th>Anti Kick</th>
                                <th>Special Icon</th>
                                <th>Medal</th>
                                <th>Validity (Days)</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($vips as $vip)
                                <tr>
                                    <td>{{$vip->target}}</td>
                                    <td>{{$vip->vip_level}}</td>
                                    <td>{{$vip->purchase_coin}}</td>
                                    <td>{{$vip->discounted_coin}}</td>

                                    <!-- Level Icon -->
                                    <td>
                                        @if($vip->level_icon_status && $vip->level_icon_gift_image)
                                            <img src="{{ asset($vip->level_icon_gift_image) }}" alt="Level Icon"
                                                 width="50" height="50" style="object-fit:cover" loading="lazy">
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Frame -->
                                    <td>
                                        @if($vip->frame_status && $vip->frame_gift_image)
                                            <img src="{{ asset($vip->frame_gift_image) }}" alt="Frame" width="50"
                                                 height="50" style="object-fit:cover" loading="lazy">
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Colored Username -->
                                    <td>
                                        @if($vip->colored_username_status)
                                            <span class="badge bg-success">Enabled</span>
                                            @if($vip->colored_username_color)
                                                <div class="mt-1">
                                                    <div
                                                        style="width:30px; height:30px; background-color:{{ $vip->colored_username_color }}; border-radius:50%;"></div>
                                                </div>
                                            @endif
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Exclusive Nickname -->
                                    <td>
                                        @if($vip->exclusive_nickname_status && $vip->exclusive_nickname_gift_image)
                                            <img src="{{ asset($vip->exclusive_nickname_gift_image) }}"
                                                 alt="Exclusive Nickname" width="50" height="50"
                                                 style="object-fit:cover" loading="lazy">
                                            @if($vip->exclusive_nickname_color1 || $vip->exclusive_nickname_color2)
                                                <div class="mt-1 d-flex gap-1">
                                                    @if($vip->exclusive_nickname_color1)
                                                        <div
                                                            style="width:20px; height:20px; background-color:{{ $vip->exclusive_nickname_color1 }}; border-radius:50%;"></div>
                                                    @endif
                                                    @if($vip->exclusive_nickname_color2)
                                                        <div
                                                            style="width:20px; height:20px; background-color:{{ $vip->exclusive_nickname_color2 }}; border-radius:50%;"></div>
                                                    @endif
                                                </div>
                                            @endif
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Profile Card -->
                                    <td>
                                        @if($vip->profile_card_status && $vip->profile_card_gift_image)
                                            <img src="{{ asset($vip->profile_card_gift_image) }}" alt="Profile Card"
                                                 width="50" height="50" style="object-fit:cover" loading="lazy">
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Rank The Top -->
                                    <td>
                                        @if($vip->rank_the_top_status && $vip->rank_the_top_gift_image)
                                            <img src="{{ asset($vip->rank_the_top_gift_image) }}" alt="Rank The Top"
                                                 width="50" height="50" style="object-fit:cover" loading="lazy">
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Anti Effect -->
                                    <td>
                                        @if($vip->anti_effect_status && $vip->anti_effect_gift_image)
                                            <img src="{{ asset($vip->anti_effect_gift_image) }}" alt="Anti Effect"
                                                 width="50" height="50" style="object-fit:cover" loading="lazy">
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Unlimited Message -->
                                    <td>
                                        @if($vip->unlimited_message_status)
                                            <span class="badge bg-success">Enabled</span>
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Take Mic Free -->
                                    <td>
                                        @if($vip->take_mic_free_status)
                                            <span class="badge bg-success">Enabled</span>
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Lock Room -->
                                    <td>
                                        @if($vip->lock_room_status)
                                            <span class="badge bg-success">Enabled</span>
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Anti Kick -->
                                    <td>
                                        @if($vip->antikick_status)
                                            <span class="badge bg-success">Enabled</span>
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Special Icon -->
                                    <td>
                                        @if($vip->special_icon_status && $vip->special_icon_gift_image)
                                            <img src="{{ asset($vip->special_icon_gift_image) }}" alt="Special Icon"
                                                 width="50" height="50" style="object-fit:cover" loading="lazy">
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <!-- Medal -->
                                    <td>
                                        @if($vip->medal_status && $vip->medal_gift_image)
                                            <img src="{{ asset($vip->medal_gift_image) }}" alt="Medal" width="50"
                                                 height="50" style="object-fit:cover" loading="lazy">
                                        @else
                                            <span class="badge bg-danger">Disabled</span>
                                        @endif
                                    </td>

                                    <td>{{$vip->validity}}</td>
                                    <td>
                                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#editModal{{$vip->id}}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#deleteModal{{$vip->id}}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal{{$vip->id}}" tabindex="-1"
                                     aria-labelledby="editModalLabel{{$vip->id}}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-xl">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="editModalLabel{{$vip->id}}">Edit VIP</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{route('admin.vip.update')}}" method="post"
                                                  enctype="multipart/form-data">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <!-- Basic Information -->
                                                        <div class="col-md-4 mb-3">
                                                            <label>Target</label>
                                                            <input type="text" class="form-control" name="target"
                                                                   value="{{$vip->target}}" required>
                                                            <input type="hidden" class="form-control" name="edit_id"
                                                                   value="{{$vip->id}}" required>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label>VIP Level</label>
                                                            <input type="text" class="form-control" name="vip_level"
                                                                   value="{{$vip->vip_level}}" required>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <label>Validity (Days)</label>
                                                            <input type="number" class="form-control" name="validity"
                                                                   value="{{$vip->validity}}" required>
                                                        </div>

                                                        <!-- Coin Information -->
                                                        <div class="col-md-6 mb-3">
                                                            <label>Purchase Coin</label>
                                                            <input type="number" class="form-control"
                                                                   name="purchase_coin" value="{{$vip->purchase_coin}}"
                                                                   required>
                                                        </div>
                                                        <div class="col-md-6 mb-3">
                                                            <label>Discounted Coin</label>
                                                            <input type="number" class="form-control"
                                                                   name="discounted_coin"
                                                                   value="{{$vip->discounted_coin}}">
                                                        </div>

                                                        <!-- Features with Images -->
                                                        @php
                                                            $features = [
                                                                'level_icon' => 'Level Icon',
                                                                'frame' => 'Frame',
                                                                'colored_username' => 'Colored Username',
                                                                'exclusive_nickname' => 'Exclusive Nickname',
                                                                'profile_card' => 'Profile Card',
                                                                'rank_the_top' => 'Rank The Top',
                                                                'anti_effect' => 'Anti Effect',
                                                                'unlimited_message' => 'Unlimited Message',
                                                                'take_mic_free' => 'Take Mic Free',
                                                                'lock_room' => 'Lock Room',
                                                                'antikick' => 'Anti Kick',
                                                                'special_icon' => 'Special Icon',
                                                                'medal' => 'Medal'
                                                            ];
                                                        @endphp

                                                        @foreach($features as $key => $label)
                                                            <div class="col-md-6 mb-3">
                                                                <div class="card">
                                                                    <div class="card-body">
                                                                        <h6 class="card-title">{{ $label }}</h6>

                                                                        <!-- Status Toggle -->
                                                                        <div class="mb-2">
                                                                            <label>Status</label>
                                                                            <select class="form-control"
                                                                                    name="{{ $key }}_status">
                                                                                <option
                                                                                    value="1" {{$vip->{$key.'_status'} ? 'selected' : ''}}>
                                                                                    Enabled
                                                                                </option>
                                                                                <option
                                                                                    value="0" {{!$vip->{$key.'_status'} ? 'selected' : ''}}>
                                                                                    Disabled
                                                                                </option>
                                                                            </select>
                                                                        </div>

                                                                        <!-- Image Upload (for features that have images) -->
                                                                        @if(in_array($key, ['level_icon', 'frame', 'colored_username', 'exclusive_nickname', 'profile_card', 'rank_the_top', 'anti_effect', 'take_mic_free', 'lock_room', 'antikick', 'special_icon', 'medal']))
                                                                            <div class="mb-2">
                                                                                <label>Current {{ $label }}
                                                                                    Image</label>
                                                                                @if($vip->{$key.'_gift_image'})
                                                                                    <div class="mb-2">
                                                                                        <img
                                                                                            src="{{ asset($vip->{$key.'_gift_image'}) }}"
                                                                                            alt="Current {{ $label }}"
                                                                                            width="50" loading="lazy">
                                                                                    </div>
                                                                                @else
                                                                                    <div class="text-muted">No image
                                                                                        uploaded
                                                                                    </div>
                                                                                @endif
                                                                                <label>Update {{ $label }} Image</label>
                                                                                <input type="file" class="form-control"
                                                                                       name="{{ $key }}_gift_image"
                                                                                       accept=".svga,.png,.jpg,.jpeg,.gif">
                                                                            </div>
                                                                        @endif

                                                                        <!-- Special Fields -->
                                                                        {{--                                                                        @if($key === 'colored_username')--}}
                                                                        {{--                                                                            <div class="mb-2">--}}
                                                                        {{--                                                                                <label>Username Color</label>--}}
                                                                        {{--                                                                                <input type="color" class="form-control"--}}
                                                                        {{--                                                                                       name="colored_username_color"--}}
                                                                        {{--                                                                                       value="{{$vip->colored_username_color ?? '#000000'}}">--}}
                                                                        {{--                                                                            </div>--}}
                                                                        {{--                                                                        @endif--}}


                                                                        @if($key === 'exclusive_nickname')
                                                                            <!-- Exclusive Nickname Color Options -->
                                                                            <div class="row">
                                                                                <div class="col-md-6 mb-2">
                                                                                    <label>Color 1</label>
                                                                                    <input type="color"
                                                                                           class="form-control"
                                                                                           name="exclusive_nickname_color1"
                                                                                           value="{{$vip->exclusive_nickname_color1 ?? '#FF0000'}}">
                                                                                </div>
                                                                                <div class="col-md-6 mb-2">
                                                                                    <label>Color 2</label>
                                                                                    <input type="color"
                                                                                           class="form-control"
                                                                                           name="exclusive_nickname_color2"
                                                                                           value="{{$vip->exclusive_nickname_color2 ?? '#0000FF'}}">
                                                                                </div>
                                                                            </div>
                                                                        @endif

                                                                        @if($key === 'colored_username')
                                                                            <!-- Exclusive Nickname Color Options -->
                                                                            <div class="row">
                                                                                <div class="col-md-6 mb-2">
                                                                                    <label>Color 1</label>
                                                                                    <input type="color"
                                                                                           class="form-control"
                                                                                           name="colored_username_color1"
                                                                                           value="{{$vip->colored_username_color1 ?? '#FF0000'}}">
                                                                                </div>
                                                                                <div class="col-md-6 mb-2">
                                                                                    <label>Color 2</label>
                                                                                    <input type="color"
                                                                                           class="form-control"
                                                                                           name="exclusive_nickname_color2"
                                                                                           value="{{$vip->exclusive_nickname_color2 ?? '#0000FF'}}">
                                                                                </div>
                                                                            </div>
                                                                        @endif

                                                                        @if(in_array($key, ['unlimited_message', 'take_mic_free', 'lock_room', 'antikick']))
                                                                            <div class="text-muted">
                                                                                <small>This feature doesn't require an
                                                                                    image upload</small>
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </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">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Delete Modal -->
                                <div class="modal fade" id="deleteModal{{$vip->id}}" tabindex="-1"
                                     aria-labelledby="deleteModalLabel{{$vip->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{{$vip->id}}">Confirm
                                                    Delete</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{route('admin.vip.delete')}}" method="post">
                                                @csrf
                                                <div class="modal-body">
                                                    <p>Are you sure you want to delete this VIP level?</p>
                                                    <input type="hidden" class="form-control" name="delete_id"
                                                           value="{{$vip->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>

                    <!-- Pagination -->
                    @if($vips->hasPages())
                        <div class="mt-3">
                            {{ $vips->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 modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createModalLabel">Create New VIP</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{route('admin.vip.save')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <!-- Basic Information -->
                            <div class="col-md-4 mb-3">
                                <label>Target</label>
                                <input type="text" class="form-control" name="target" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label>VIP Level</label>
                                <input type="text" class="form-control" name="vip_level" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label>Validity (Days)</label>
                                <input type="number" class="form-control" name="validity" required>
                            </div>

                            <!-- Coin Information -->
                            <div class="col-md-6 mb-3">
                                <label>Purchase Coin</label>
                                <input type="number" class="form-control" name="purchase_coin" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Discounted Coin</label>
                                <input type="number" class="form-control" name="discounted_coin">
                            </div>

                            <!-- Features with Images -->
                            @php
                                $features = [
                                    'level_icon' => 'Level Icon',
                                    'frame' => 'Frame',
                                    'colored_username' => 'Colored Username',
                                    'exclusive_nickname' => 'Exclusive Nickname',
                                    'profile_card' => 'Profile Card',
                                    'rank_the_top' => 'Rank The Top',
                                    'anti_effect' => 'Anti Effect',
                                    'unlimited_message' => 'Unlimited Message',
                                    'take_mic_free' => 'Take Mic Free',
                                    'lock_room' => 'Lock Room',
                                    'antikick' => 'Anti Kick',
                                    'special_icon' => 'Special Icon',
                                    'medal' => 'Medal'
                                ];
                            @endphp

                            @foreach($features as $key => $label)
                                <div class="col-md-6 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title">{{ $label }}</h6>

                                            <!-- Status Toggle -->
                                            <div class="mb-2">
                                                <label>Status</label>
                                                <select class="form-control" name="{{ $key }}_status">
                                                    <option value="1">Enabled</option>
                                                    <option value="0" selected>Disabled</option>
                                                </select>
                                            </div>

                                            <!-- Image Upload (for features that have images) -->
                                            @if(in_array($key, ['level_icon', 'frame', 'colored_username', 'exclusive_nickname', 'profile_card', 'rank_the_top', 'anti_effect', 'take_mic_free', 'lock_room', 'antikick', 'special_icon', 'medal']))
                                                <div class="mb-2">
                                                    <label>{{ $label }} Image</label>
                                                    <input type="file" class="form-control" name="{{ $key }}_gift_image"
                                                           accept=".svga,.png,.jpg,.jpeg,.gif">
                                                </div>
                                            @endif

                                            <!-- Special Fields -->
                                            {{--                                            @if($key === 'colored_username')--}}
                                            {{--                                                <div class="mb-2">--}}
                                            {{--                                                    <label>Username Color</label>--}}
                                            {{--                                                    <input type="color" class="form-control"--}}
                                            {{--                                                           name="colored_username_color" value="#000000">--}}
                                            {{--                                                </div>--}}
                                            {{--                                            @endif--}}
                                            @if($key === 'exclusive_nickname')
                                                <!-- Exclusive Nickname Color Options -->
                                                <div class="row">
                                                    <div class="col-md-6 mb-2">
                                                        <label>Color 1</label>
                                                        <input type="color"
                                                               class="form-control"
                                                               name="exclusive_nickname_color1"
                                                        >
                                                    </div>
                                                    <div class="col-md-6 mb-2">
                                                        <label>Color 2</label>
                                                        <input type="color"
                                                               class="form-control"
                                                               name="exclusive_nickname_color2"
                                                        >
                                                    </div>
                                                </div>
                                            @endif
                                            @if($key === 'colored_username')
                                                <!-- Exclusive Nickname Color Options -->
                                                <div class="row">
                                                    <div class="col-md-6 mb-2">
                                                        <label>Color 1</label>
                                                        <input type="color" class="form-control"
                                                               name="colored_username_color1" value="#FF0000">
                                                    </div>
                                                    <div class="col-md-6 mb-2">
                                                        <label>Color 2</label>
                                                        <input type="color" class="form-control"
                                                               name="colored_username_color2" value="#0000FF">
                                                    </div>
                                                </div>
                                            @endif

                                            @if(in_array($key, ['unlimited_message', 'take_mic_free', 'lock_room', 'antikick']))
                                                <div class="text-muted">
                                                    <small>This feature doesn't require an image upload</small>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </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">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection