@extends('admin.layouts.layout')

@section('css')
<style>
    .main_contentarea {
        width: 100%;
    }
    .title_area {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .title_area h3 {
        margin-bottom: 0;
        font-size: 24px;
        font-weight: 600;
    }
    .form-select {
        height: 45px;
        border-radius: 4px;
    }
    .add_btn {
        background-color: #28a745;
        border-color: #28a745;
        color: white;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 15px;
    }
</style>
@endsection

@section('content')
<div class="mb-4">
    <!-- BODY CONTENT SECTION START -->
    <div class="main_contentarea mt-2">
        <div class="container">
            <div class="title_area">
                <div class="d-flex align-items-center gap-2">
                    <h3>Select Tenant</h3>
                </div>
                <div class="d-flex align-items-center gap-2 ms-auto">
                    <div class="contact_btns">
                        <a href="{{ route('admin.home') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Dashboard
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="card mt-4">
                <div class="card-body">
                    <p class="text-muted mb-4">
                        To proceed with {{ $module }}, please select a tenant from the dropdown below.
                    </p>
                    
                    <form method="POST" action="{{ route('customer-agent-type.set-tenant') }}" id="tenantSelectionForm">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="tenant_id" class="form-label">Tenant <span class="text-danger">*</span></label>
                                    <select 
                                        class="form-select @error('tenant_id') is-invalid @enderror"
                                        name="tenant_id"
                                        id="tenant_id"
                                        required
                                    >
                                        <option value="">Select Tenant</option>
                                        @foreach ($tenant_list as $key => $value)
                                            <option value="{{ $key }}"
                                                {{ (string) old('tenant_id') === (string) $key ? 'selected' : '' }}>
                                                {{ $value }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tenant_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary add_btn">
                                    <i class="fas fa-check"></i> Continue
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Form validation
        $('#tenantSelectionForm').submit(function(e) {
            if ($('#tenant_id').val() === '') {
                alert('Please select a tenant to continue');
                e.preventDefault();
                return false;
            }
        });
    });
</script>
@endsection