@extends('layouts.app')

@section('title', 'SEU CRM - ' . __('app.add_interaction'))

@section('content')
<div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div>
                        <h1 class="page-title fw-medium fs-18 mb-2">{{ __('app.add_interaction') }}</h1>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('app.dashboard') }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('interactions.index') }}">{{ __('app.interactions') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('app.add_interaction') }}</li>
                        </ol>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card custom-card">
                            <div class="card-header">
                                <h4 class="card-title mb-0">{{ __('app.add_new_interaction') }}</h4>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('interactions.store') }}" method="POST">
                                    @csrf
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="customer_id" class="form-label">{{ __('app.customer') }}</label>
                                                <select class="form-select" id="customer_id" name="customer_id" required>
                                                    <option value="">{{ __('app.select_customer') }}</option>
                                                    @foreach($customers as $customer)
                                                        <option value="{{ $customer->id }}">{{ $customer->name }} - {{ $customer->email }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="channel" class="form-label">{{ __('app.channel') }}</label>
                                                <select class="form-select" id="channel" name="channel" required>
                                                    <option value="">{{ __('app.select_channel') }}</option>
                                                    <option value="email">{{ __('app.email') }}</option>
                                                    <option value="whatsapp">{{ __('app.whatsapp') }}</option>
                                                    <option value="call">Call</option>
                                                    <option value="sms">SMS</option>
                                                    <option value="chat">Chat</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="direction" class="form-label">{{ __('app.direction') }}</label>
                                                <select class="form-select" id="direction" name="direction" required>
                                                    <option value="">{{ __('app.select_direction') }}</option>
                                                    <option value="inbound">{{ __('app.inbound') }}</option>
                                                    <option value="outbound">{{ __('app.outbound') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="mb-3">
                                                <label for="subject" class="form-label">{{ __('app.subject') }}</label>
                                                <input type="text" class="form-control" id="subject" name="subject" placeholder="{{ __('app.enter_subject') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="call_duration" class="form-label">{{ __('app.call_duration') }}</label>
                                                <input type="number" class="form-control" id="call_duration" name="call_duration" placeholder="{{ __('app.duration_in_minutes') }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="body" class="form-label">{{ __('app.message_content') }}</label>
                                        <textarea class="form-control" id="body" name="body" rows="5" placeholder="{{ __('app.enter_interaction_content') }}"></textarea>
                                    </div>

                                    <div class="mb-3">
                                        <label for="outcome" class="form-label">{{ __('app.outcome') }}</label>
                                        <input type="text" class="form-control" id="outcome" name="outcome" placeholder="{{ __('app.enter_interaction_outcome') }}">
                                    </div>

                                    <div class="text-end">
                                        <a href="{{ route('interactions.index') }}" class="btn btn-secondary me-2">{{ __('app.cancel') }}</a>
                                        <button type="submit" class="btn btn-primary">{{ __('app.save_interaction') }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
@endsection