@extends('layouts.app')

@section('content')
<style>
    .sidebar .sidebar-brand {
        padding: 1rem;
        font-size: 1.2rem;
        text-align: center;
        background-color: #0B2C53;
        margin-bottom: 10px;
    }
    .sidebar .sidebar-brand img {
        max-width: 130px !important;
    }
    .sidebar a i {
        margin-right: 10px;
    }
   
    .table {
        margin-top: 20px !important;
    }
    .btn-new {
        background-color: #001d40;
        border-color: #001d40;
        color: #fff;
        padding: 8px;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: .25rem;
        margin-right: 5px;
    }
    a:hover {
        /*color: #fff !important;*/
        text-decoration: none !important;
    }
    
    .sidebar .sidebar-brand {
    background-color: #ffffff4d;
    }
    .p-custom{
        padding:8px;
    }
    .page-item.active .page-link{
      color: #fff;
      background-color: #001d40 !important;
      border:none !important;
    }
    .page-link{
      color: #000 !important;
    }
    .page-item.active .page-link{
     color: #fff !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background: #001d40 !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
   
    background: #fff !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
        color: #000 !important;
        background: #f8f9fa !important;
    }
    .dataTables_wrapper .dataTables_paginate{
        margin:10px 0px;
    }
    .dataTables_wrapper .dataTables_info{
        margin:10px 0px; 
    }
</style>

<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4>Manage Premium Users</h4>
        <div>
           
            <a href="{{ route('notifications.create')}}" class="btn btn-warning">Send Notification</a>
            <a href="{{ route('premium_requests.export') }}" class="btn-new">Export Data</a>
        </div>
    </div>

    <!-- Filters Form -->
    <form method="GET" action="{{ route('premium_requests.index') }}" class="mb-3">
        <div class="row">
            <div class="col-md-4">
                <label for="from_date">From Date</label>
                <input type="date" class="form-control" name="from_date" value="{{ request('from_date') }}">
            </div>
            <div class="col-md-4">
                <label for="to_date">To Date</label>
                <input type="date" class="form-control" name="to_date" value="{{ request('to_date') }}">
            </div>
            <div class="col-md-3">
                <label for="filter_user_type">User Type</label>
                <select class="form-control" name="filter_user_type">
                <option value="">All</option>
                <option value="1" {{ request('filter_user_type') == '1' ? 'selected' : '' }}>Premium</option>
                <option value="0" {{ request('filter_user_type') == '0' ? 'selected' : '' }}>Normal</option>

                </select>
            </div>
            <div class="col-md-1 d-flex align-items-end">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>


   <table id="usersTable" class="table table-bordered table-striped" style="width:100%;">
        <thead>
            <tr>
                <th>S.No.</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone No</th>
                <th>User Type</th>
                <th>Sub Start Date</th>
                <th>Sub End Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($premiumRequests as $index => $request)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $request->name }}</td>
                    <td>{{ $request->email }}</td>
                    <td>{{ $request->mobile }}</td>
                    <td>
                        @if($request->user_type == 1)
                            <span class="badge bg-danger text-white p-custom">Premium</span>
                        @else
                            <span class="badge bg-success text-white p-custom">Normal</span>
                        @endif
                    </td>

                    <td>{{ $request->sub_start_date ?? '-' }}</td>
                    <td>{{ $request->sub_end_date ?? '-' }}</td>
                    <td>
                           @if($request->user_type == 1) {{-- Premium User --}}
                            <form action="{{ route('premium_requests.removePremium', ['p_id' => $request->p_id]) }}" method="POST" 
                                onsubmit="return confirm('Do you really want to remove Premium status?')" 
                                style="display:inline">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-light border-0">
                                    <i class="fa fa-check text-success"></i> {{-- Green Tick --}}
                                </button>
                            </form>
                        @else {{-- Normal User --}}
                            <form action="{{ route('premium_requests.upgradePremium', ['p_id' => $request->p_id]) }}" method="POST" 
                                onsubmit="return confirm('Do you really want to upgrade to Premium?')" 
                                style="display:inline">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-light border-0">
                                    <i class="fa fa-times text-danger"></i> {{-- Red Cross --}}
                                </button>
                            </form>
                        @endif
                        
                        <a href="{{ route('premium_requests.show', $request->p_id) }}" class="btn btn-sm btn-light border-0">
                            <i class="fa fa-eye text-info"></i>
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" class="text-center">No records found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#usersTable').DataTable({
            pageLength: 10, 
            lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
        });
    });
</script>
@endsection