@extends('adminlte::page')

@section('title', 'New Communication')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>New Communication</h1>
        <a href="{{ route('communications.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back
        </a>
    </div>
@stop

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Communication Details</h3>
            </div>
            <form action="{{ route('communications.store') }}" method="POST">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="case_id">Case <span class="text-danger">*</span></label>
                                <select name="case_id" id="case_id" class="form-control @error('case_id') is-invalid @enderror" required>
                                    <option value="">Select Case</option>
                                    @foreach($cases as $case)
                                        <option value="{{ $case->id }}" 
                                            {{ old('case_id', $selectedCase->id ?? '') == $case->id ? 'selected' : '' }}>
                                            {{ $case->case_number }} - {{ $case->title }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('case_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="communication_type">Type <span class="text-danger">*</span></label>
                                <select name="communication_type" id="communication_type" class="form-control @error('communication_type') is-invalid @enderror" required>
                                    <option value="">Select Type</option>
                                    <option value="email" {{ old('communication_type') == 'email' ? 'selected' : '' }}>Email</option>
                                    <option value="phone" {{ old('communication_type') == 'phone' ? 'selected' : '' }}>Phone Call</option>
                                    <option value="meeting" {{ old('communication_type') == 'meeting' ? 'selected' : '' }}>Meeting</option>
                                    <option value="note" {{ old('communication_type') == 'note' ? 'selected' : '' }}>Note</option>
                                    <option value="letter" {{ old('communication_type') == 'letter' ? 'selected' : '' }}>Letter</option>
                                    <option value="message" {{ old('communication_type') == 'message' ? 'selected' : '' }}>Internal Message</option>
                                    <option value="whatsapp" {{ old('communication_type') == 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                                </select>
                                @error('communication_type')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="direction">Direction <span class="text-danger">*</span></label>
                                <select name="direction" id="direction" class="form-control @error('direction') is-invalid @enderror" required>
                                    <option value="">Select Direction</option>
                                    <option value="inbound" {{ old('direction') == 'inbound' ? 'selected' : '' }}>Inbound</option>
                                    <option value="outbound" {{ old('direction') == 'outbound' ? 'selected' : '' }}>Outbound</option>
                                    <option value="internal" {{ old('direction') == 'internal' ? 'selected' : '' }}>Internal</option>
                                </select>
                                @error('direction')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="priority">Priority <span class="text-danger">*</span></label>
                                <select name="priority" id="priority" class="form-control @error('priority') is-invalid @enderror" required>
                                    <option value="medium" {{ old('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                    <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                    <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                                    <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                                </select>
                                @error('priority')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="subject">Subject <span class="text-danger">*</span></label>
                        <input type="text" name="subject" id="subject" class="form-control @error('subject') is-invalid @enderror" 
                               value="{{ old('subject') }}" required maxlength="255">
                        @error('subject')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="content">Content <span class="text-danger">*</span></label>
                        <textarea name="content" id="content" rows="8" class="form-control @error('content') is-invalid @enderror" required>{{ old('content') }}</textarea>
                        @error('content')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div id="wa-section" style="display:none;">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="to_contact">Recipient (User/Client)</label>
                                <select id="to_contact" class="form-control select2" data-placeholder="Select recipient">
                                    <option value=""></option>
                                    @foreach(($contacts ?? []) as $c)
                                        <option value="{{ $c['phone'] }}" data-type="{{ $c['type'] }}" data-id="{{ $c['id'] }}">
                                            {{ $c['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                                <input type="hidden" name="to_phone" id="to_phone" value="{{ old('to_phone') }}">
                                <small class="form-text text-muted">Hanya bisa mengirim ke User/Client terdaftar yang memiliki nomor.</small>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="wa_media_url">Media URL (optional)</label>
                                <input type="url" name="wa_media_url" id="wa_media_url" class="form-control" placeholder="https://..." value="{{ old('wa_media_url') }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="wa_send_now" name="wa_send_now" value="1" checked>
                                <label class="custom-control-label" for="wa_send_now">Send via WhatsApp immediately</label>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="participants-section" style="display: none;">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="participants">Participants</label>
                                <select name="participants[]" id="participants" class="form-control select2" multiple>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                    @endforeach
                                </select>
                                <small class="form-text text-muted">Select participants for meetings or internal messages</small>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="duration-section" style="display: none;">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="duration">Duration (minutes)</label>
                                <input type="number" name="duration" id="duration" class="form-control @error('duration') is-invalid @enderror" 
                                       value="{{ old('duration') }}" min="1">
                                @error('duration')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Communication
                    </button>
                    <a href="{{ route('communications.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
    
    <div class="col-md-4">
        @if($selectedCase)
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Case Information</h3>
            </div>
            <div class="card-body">
                <strong>Case Number:</strong> {{ $selectedCase->case_number }}<br>
                <strong>Title:</strong> {{ $selectedCase->title }}<br>
                <strong>Status:</strong> <span class="badge badge-info">{{ ucfirst($selectedCase->status) }}</span><br>
                @if($selectedCase->client)
                    <strong>Client:</strong> {{ $selectedCase->client->display_name }}
                @endif
            </div>
        </div>
        @endif
        
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Communication Types</h3>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li><strong>Email:</strong> External email communications</li>
                    <li><strong>Phone:</strong> Phone call records</li>
                    <li><strong>Meeting:</strong> Meeting notes and records</li>
                    <li><strong>Note:</strong> Internal notes and memos</li>
                    <li><strong>Letter:</strong> Formal correspondence</li>
                    <li><strong>Message:</strong> Internal team messages</li>
                    <li><strong>WhatsApp:</strong> External WhatsApp messages via Wablast</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize select2
    $('.select2').select2({
        theme: 'bootstrap4',
        width: '100%'
    });

    // Show/hide sections based on communication type
    $('#communication_type').change(function() {
        var type = $(this).val();
        
        // Hide all conditional sections
        $('#participants-section, #duration-section, #wa-section').hide();
        
        // Show relevant sections
        if (type === 'meeting' || type === 'message') {
            $('#participants-section').show();
        }
        
        if (type === 'phone' || type === 'meeting') {
            $('#duration-section').show();
        }

        if (type === 'whatsapp') {
            $('#wa-section').show();
            // sync select preset to hidden to_phone
            var preset = $('#to_phone').val();
            if (preset) {
                $('#to_contact').val(preset).trigger('change');
            }
        }
    });

    // Auto-suggest participants based on direction
    $('#direction').change(function() {
        var direction = $(this).val();
        var type = $('#communication_type').val();
        
        if (direction === 'internal' && (type === 'message' || type === 'meeting')) {
            $('#participants-section').show();
        }
    });

    // When selecting recipient, copy phone to hidden to_phone
    $('#to_contact').on('change', function() {
        var phone = $(this).val();
        $('#to_phone').val(phone);
    });

    // Trigger change on page load if values are pre-filled
    $('#communication_type').trigger('change');
});
</script>
@stop