@extends('layouts.master')
@section('title') @lang('Chat Settings') @endsection

@section('css')
<!-- Select2 css-->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
<!-- SweetAlert2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css" rel="stylesheet" type="text/css" />
<style>
    .error-message {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    .is-invalid {
        border-color: #dc3545 !important;
    }
    .is-invalid + .select2-container .select2-selection--multiple {
        border-color: #dc3545 !important;
    }
    .alert {
        margin-bottom: 1rem;
    }
</style>
@endsection

@section('content')

<!-- Breadcrumb Trail -->
@component('components.breadcrumb')
@slot('li_1')
@endslot
@slot('title')
    @lang('chat settings')
@endslot
@endcomponent

<!-- Session Messages -->
@include('partials.session')

<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h1 class="card-title mb-0" style="width:50%;float:left">Gift(s) b/w Admins & Users</h1>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url('chat/settings/admin-users') }}">
                    @csrf
                    <div class="form-group">
                        <label for="assets_admin_users">Digital Assets</label>
                        <select class="form-control select2" name="assets_admin_users[]" id="assets_admin_users" multiple required>
                            <option disabled>--Select Digital Assets--</option>
                            @foreach($digital_assets as $item)
                            <option value="{{$item->id}}" {{in_array($item->id, $adminusers_assets) ? 'selected' : ''}}>{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <button class="btn btn-success btn-sm mt-4" type="submit">Save</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h1 class="card-title mb-0" style="width:50%;float:left">Gift(s) b/w Users & Users</h1>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url('chat/settings/user-users') }}">
                    @csrf
                    <div class="form-group">
                        <label for="assets_user_users">Digital Assets</label>
                        <select class="form-control select2" name="assets_user_users[]" id="assets_user_users" multiple required>
                            <option disabled>--Select Digital Assets--</option>
                            @foreach($digital_assets as $item)
                            <option value="{{$item->id}}" {{in_array($item->id, $userusers_assets) ? 'selected' : ''}}>{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <button class="btn btn-success btn-sm mt-4" type="submit">Save</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h1 class="card-title mb-0" style="width:50%;float:left">Max Time an Admin can respond to a gift</h1>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url('chat/settings/time') }}">
                    @csrf
                    <div class="form-group">
                        <label for="time">Time in minutes</label>
                        <input type="number" class="form-control" name="time" id="time" value="{{$time->time ?? ''}}" required>
                    </div>
                    <button class="btn btn-success btn-sm mt-4" type="submit">Save</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h1 class="card-title mb-0">Role-based Digital Assets</h1>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#roleAssetsModal">
                    Add/Update Role Assets
                </button>
            </div>
            <div class="card-body">
                <!-- Table Section -->
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Role</th>
                                <th>Digital Assets</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($roleAssets as $roleAsset)
                                <tr>
                                    <td>{{ $roleAsset['role']->name }}</td>
                                    <td>
                                        @foreach($roleAsset['assets'] as $asset)
                                            <span class="badge bg-primary me-1">{{ $asset->name }}</span>
                                        @endforeach
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-danger btn-sm delete-role-assets" 
                                                data-role-id="{{ $roleAsset['role']->id }}"
                                                data-role-name="{{ $roleAsset['role']->name }}">
                                            Delete
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center">No role assets found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Form -->
<div class="modal fade" id="roleAssetsModal" tabindex="-1" aria-labelledby="roleAssetsModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="roleAssetsModalLabel">Add/Update Role Assets</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="roleAssetsForm" method="POST" action="{{ url('chat/settings/role-assets') }}">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="role">Select Role</label>
                                <select class="form-control select2" id="role" name="role_id" required>
                                    <option value="">--Select Role--</option>
                                    @foreach($roles as $role)
                                    <option value="{{$role->id}}">{{$role->name}}</option>
                                    @endforeach
                                </select>
                                <div class="error-message" id="roleError"></div>
                            </div>
                        </div>
                        <div class="col-md-12 mt-3">
                            <div class="form-group">
                                <label for="role_assets">Digital Assets</label>
                                <select class="form-control select2" id="role_assets" name="assets[]" multiple required>
                                    <option disabled>--Select Digital Assets--</option>
                                    @foreach($digital_assets as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                                <div class="error-message" id="assetsError"></div>
                            </div>
                        </div>
                    </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</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('script')
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Select2 cdn -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2({
            dropdownParent: $('#roleAssetsModal')
        });

        $('#role').on('change', function() {
            var roleId = $(this).val();
            if (roleId) {
                $.ajax({
                    url: '{{ url("chat/settings/role-assets") }}',
                    type: 'GET',
                    data: { role_id: roleId },
                    success: function(response) {
                        $('#role_assets').val(response.assets).trigger('change');
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON?.message || 'Failed to load role assets');
                    }
                });
            } else {
                $('#role_assets').val(null).trigger('change');
            }
        });

        $('.delete-role-assets').click(function() {
            var roleId = $(this).data('role-id');
            var roleName = $(this).data('role-name');

            Swal.fire({
                title: 'Are you sure?',
                text: `Do you want to delete assets for role: ${roleName}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = `{{ url('chat/settings/role-assets') }}/${roleId}`;
                }
            });
        });

        $('#roleAssetsModal').on('hidden.bs.modal', function () {
            $('#roleAssetsForm')[0].reset();
            $('#role').val('').trigger('change');
            $('#role_assets').val(null).trigger('change');
            $('#roleError').text('');
            $('#assetsError').text('');
        });
    });
</script>
@endsection