@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">New Campaign</h4>
        <div class="text-secondary small mt-1">Set up a new outbound calling campaign.</div>
    </div>
    <a href="{{ route('dialer.campaigns.index') }}" class="btn btn-outline-secondary btn-sm">← Back to Campaigns</a>
</div>

@if($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
@endif

<form method="POST" action="{{ route('dialer.campaigns.store') }}">
    @csrf

    {{-- Step 1: Campaign Details --}}
    <div class="card mb-3">
        <div class="card-header fw-semibold"><span class="badge bg-primary-subtle text-primary me-2">1</span> Campaign Details</div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Campaign Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Call Centre Team</label>
                    <select name="team_queue_id" class="form-select">
                        <option value="">— Select team —</option>
                        @foreach($teams as $team)
                            <option value="{{ $team->id }}" @selected(old('team_queue_id') == $team->id)>{{ $team->name }} ({{ $team->number }})</option>
                        @endforeach
                    </select>
                    <div class="form-text">Required for "Automatic" and "Send to Team" methods.</div>
                </div>
                <div class="col-md-12">
                    <label class="form-label">Description</label>
                    <input type="text" name="description" class="form-control" value="{{ old('description') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Start Date</label>
                    <input type="date" name="start_date" class="form-control" value="{{ old('start_date') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">End Date</label>
                    <input type="date" name="end_date" class="form-control" value="{{ old('end_date') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Calling Start</label>
                    <input type="time" name="calling_window_start" class="form-control" value="{{ old('calling_window_start', '08:00') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Calling End</label>
                    <input type="time" name="calling_window_end" class="form-control" value="{{ old('calling_window_end', '17:00') }}">
                </div>
            </div>
        </div>
    </div>

    {{-- Step 2: Calling Method --}}
    <div class="card mb-3">
        <div class="card-header fw-semibold"><span class="badge bg-primary-subtle text-primary me-2">2</span> Calling Method</div>
        <div class="card-body">
            <p class="text-secondary small mb-3">How should customers be called?</p>
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="card h-100 border {{ old('calling_mode') === 'preview' ? 'border-primary' : '' }}">
                        <div class="card-body">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="calling_mode" value="preview" id="modePreview" @checked(old('calling_mode','preview') === 'preview') required>
                                <label class="form-check-label fw-semibold" for="modePreview">Agent Calls Customer</label>
                            </div>
                            <div class="text-muted small mt-2">The agent reviews the customer and clicks to call. The system rings the agent's phone first.</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border {{ old('calling_mode') === 'direct_agent' ? 'border-primary' : '' }}">
                        <div class="card-body">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="calling_mode" value="direct_agent" id="modeDirect" @checked(old('calling_mode') === 'direct_agent')>
                                <label class="form-check-label fw-semibold" for="modeDirect">Automatic Calls for Available Agents</label>
                            </div>
                            <div class="text-muted small mt-2">The system selects the next customer after an agent is available. Agent's phone rings first.</div>
                            <span class="badge bg-success-subtle text-success mt-2">Recommended</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border {{ old('calling_mode') === 'send_to_team' ? 'border-primary' : '' }}">
                        <div class="card-body">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="calling_mode" value="send_to_team" id="modeTeam" @checked(old('calling_mode') === 'send_to_team')>
                                <label class="form-check-label fw-semibold" for="modeTeam">Send Answered Customers to Team</label>
                            </div>
                            <div class="text-muted small mt-2">The system phones customers. When they answer, the call is sent to the selected team.</div>
                            <span class="badge bg-info-subtle text-info mt-2">Client requested</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Step 3: Calling Rules --}}
    <div class="card mb-3">
        <div class="card-header fw-semibold"><span class="badge bg-primary-subtle text-primary me-2">3</span> Calling Rules</div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Caller ID</label>
                    <input type="text" name="caller_id" class="form-control" value="{{ old('caller_id') }}" placeholder="e.g. 0214615500">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Outbound Trunk</label>
                    <select name="trunk" class="form-select">
                        <option value="">— Select trunk —</option>
                        @foreach($trunks as $t)
                            <option value="{{ $t }}" @selected(old('trunk') === $t)>{{ $t }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Max Attempts per Contact</label>
                    <input type="number" name="max_attempts" class="form-control" value="{{ old('max_attempts', 3) }}" min="1" max="50">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Time Before Calling Again (min)</label>
                    <input type="number" name="retry_minutes" class="form-control" value="{{ old('retry_minutes', 60) }}" min="1">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Min Logged-In Agents</label>
                    <input type="number" name="min_logged_in_agents" class="form-control" value="{{ old('min_logged_in_agents', 1) }}" min="0">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Max Wait After Answer (sec)</label>
                    <input type="number" name="max_wait_after_answer_seconds" class="form-control" value="{{ old('max_wait_after_answer_seconds', 15) }}" min="1">
                </div>
                <div class="col-md-3">
                    <div class="form-check form-switch mt-4">
                        <input class="form-check-input" type="checkbox" name="recording_enabled" value="1" id="recEnabled" @checked(old('recording_enabled'))>
                        <label class="form-check-label" for="recEnabled">Record Connected Calls</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-check form-switch mt-4">
                        <input class="form-check-input" type="checkbox" name="callbacks_enabled" value="1" id="cbEnabled" @checked(old('callbacks_enabled', true))>
                        <label class="form-check-label" for="cbEnabled">Allow Agent Callbacks</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-check form-switch mt-4">
                        <input class="form-check-input" type="checkbox" name="connecting_message_enabled" value="1" id="connMsg" @checked(old('connecting_message_enabled'))>
                        <label class="form-check-label" for="connMsg">Play Connecting Message</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-check form-switch mt-4">
                        <input class="form-check-input" type="checkbox" name="auto_pause_not_connected_enabled" value="1" id="autoPause" @checked(old('auto_pause_not_connected_enabled', true))>
                        <label class="form-check-label" for="autoPause">Auto-Pause on Failures</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Actions --}}
    <div class="d-flex justify-content-end gap-2">
        <a href="{{ route('dialer.campaigns.index') }}" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">Save as Draft</button>
    </div>
</form>
@endsection