@extends('adminlte::page')

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

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

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Edit Communication Details</h3>
            </div>
            <form action="{{ route('communications.update', $communication) }}" method="POST">
                @csrf
                @method('PUT')
                <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', $communication->case_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', $communication->communication_type) == 'email' ? 'selected' : '' }}>Email</option>
                                    <option value="phone" {{ old('communication_type', $communication->communication_type) == 'phone' ? 'selected' : '' }}>Phone Call</option>
                                    <option value="meeting" {{ old('communication_type', $communication->communication_type) == 'meeting' ? 'selected' : '' }}>Meeting</option>
                                    <option value="note" {{ old('communication_type', $communication->communication_type) == 'note' ? 'selected' : '' }}>Note</option>
                                    <option value="letter" {{ old('communication_type', $communication->communication_type) == 'letter' ? 'selected' : '' }}>Letter</option>
                                    <option value="message" {{ old('communication_type', $communication->communication_type) == 'message' ? 'selected' : '' }}>Internal Message</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', $communication->direction) == 'inbound' ? 'selected' : '' }}>Inbound</option>
                                    <option value="outbound" {{ old('direction', $communication->direction) == 'outbound' ? 'selected' : '' }}>Outbound</option>
                                    <option value="internal" {{ old('direction', $communication->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="low" {{ old('priority', $communication->priority) == 'low' ? 'selected' : '' }}>Low</option>
                                    <option value="medium" {{ old('priority', $communication->priority) == 'medium' ? 'selected' : '' }}>Medium</option>
                                    <option value="high" {{ old('priority', $communication->priority) == 'high' ? 'selected' : '' }}>High</option>
                                    <option value="urgent" {{ old('priority', $communication->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', $communication->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', $communication->content) }}</textarea>
                        @error('content')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="row" id="participants-section">
                        <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)
                                        @php
                                            $isSelected = false;
                                            if (old('participants')) {
                                                $isSelected = in_array($user->id, old('participants'));
                                            } elseif ($communication->participants) {
                                                $participantIds = collect($communication->participants)->pluck('user_id')->toArray();
                                                $isSelected = in_array($user->id, $participantIds);
                                            }
                                        @endphp
                                        <option value="{{ $user->id }}" {{ $isSelected ? 'selected' : '' }}>
                                            {{ $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">
                        <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', $communication->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> Update Communication
                    </button>
                    <a href="{{ route('communications.show', $communication) }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
    
    <div class="col-md-4">
        <!-- Communication Info -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Communication Info</h3>
            </div>
            <div class="card-body">
                <strong>Created:</strong> {{ $communication->created_at->format('M j, Y g:i A') }}<br>
                <strong>Last Updated:</strong> {{ $communication->updated_at->format('M j, Y g:i A') }}<br>
                <strong>Created By:</strong> {{ $communication->user->name ?? 'Unknown' }}<br>
                @if($communication->replies->count() > 0)
                    <strong>Replies:</strong> {{ $communication->replies->count() }}<br>
                @endif
                @if($communication->parent)
                    <strong>Reply To:</strong> 
                    <a href="{{ route('communications.show', $communication->parent) }}" class="text-primary">
                        {{ $communication->parent->subject }}
                    </a><br>
                @endif
            </div>
        </div>

        @if($communication->case)
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Case Information</h3>
            </div>
            <div class="card-body">
                <strong>Case Number:</strong> {{ $communication->case->case_number }}<br>
                <strong>Title:</strong> {{ $communication->case->title }}<br>
                <strong>Status:</strong> <span class="badge badge-info">{{ ucfirst($communication->case->status) }}</span><br>
                @if($communication->case->client)
                    <strong>Client:</strong> {{ $communication->case->client->display_name }}
                @endif
                <hr>
                <a href="{{ route('cases.show', $communication->case) }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-eye"></i> View Case
                </a>
            </div>
        </div>
        @endif
        
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Quick Tips</h3>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li><i class="fas fa-info-circle text-info"></i> <strong>Type:</strong> Determines how this communication is categorized</li>
                    <li><i class="fas fa-info-circle text-info"></i> <strong>Direction:</strong> Inbound (received), Outbound (sent), Internal (team)</li>
                    <li><i class="fas fa-info-circle text-info"></i> <strong>Priority:</strong> Helps organize and filter communications</li>
                    <li><i class="fas fa-info-circle text-info"></i> <strong>Participants:</strong> Required for meetings and internal messages</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
    function toggleSections() {
        var type = $('#communication_type').val();
        
        // Hide all conditional sections first
        $('#participants-section, #duration-section').hide();
        
        // Show relevant sections
        if (type === 'meeting' || type === 'message') {
            $('#participants-section').show();
        }
        
        if (type === 'phone' || type === 'meeting') {
            $('#duration-section').show();
        }
    }

    $('#communication_type').change(toggleSections);
    
    // Trigger on page load to show appropriate sections
    toggleSections();

    // 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();
        }
    });
});
</script>
@stop