@extends('layouts/layoutMaster')

@section('title', __('New Chat'))

@section('vendor-style')
@vite(['resources/assets/vendor/libs/select2/select2.scss'])
@endsection

@section('vendor-script')
@vite(['resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0">
            <a href="{{ route('dashboard.chats.index') }}" class="text-muted">
                <i class="ti ti-arrow-left"></i> {{ __('Chats') }}
            </a>
            <span class="text-muted fw-light">/</span> {{ __('New Chat') }}
        </h4>
    </div>

    <!-- New Chat Card -->
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="ti ti-message-plus me-2"></i>{{ __('Start a New Conversation') }}
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('dashboard.chats.start') }}" method="POST">
                        @csrf
                        
                        <div class="mb-4">
                            <label for="receiver_id" class="form-label">{{ __('Select User') }}</label>
                            <select name="receiver_id" 
                                    id="receiver_id" 
                                    class="form-select select2 @error('receiver_id') is-invalid @enderror" 
                                    required>
                                <option value="">{{ __('Choose a user to chat with...') }}</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('receiver_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} ({{ $user->phone }})
                                    </option>
                                @endforeach
                            </select>
                            @error('receiver_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                <i class="ti ti-info-circle ti-xs me-1"></i>
                                {{ __('Select a user to start chatting with them') }}
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-send me-1"></i>{{ __('Start Chat') }}
                            </button>
                            <a href="{{ route('dashboard.chats.index') }}" class="btn btn-label-secondary">
                                <i class="ti ti-x me-1"></i>{{ __('Cancel') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Info Card -->
            <div class="card mt-4">
                <div class="card-body">
                    <div class="d-flex align-items-start">
                        <div class="badge bg-label-info p-2 me-3 rounded">
                            <i class="ti ti-info-circle ti-sm"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">{{ __('How it works') }}</h6>
                            <p class="mb-0 text-muted small">
                                {{ __('Select a user from the list above to start a new conversation. If a chat already exists with this user, you will be redirected to the existing conversation.') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        // Initialize Select2
        $('.select2').select2({
            placeholder: '{{ __('Choose a user to chat with...') }}',
            allowClear: true,
            width: '100%'
        });
    });
</script>
@endpush
@endsection