@extends('layouts.dashboard')

@section('title', 'Create Template')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">Create New Template</h4>
    <a href="{{ route('dashboard.templates') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Back to Templates
    </a>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('dashboard.templates.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

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

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="client_id" class="form-label">Assign to Organization</label>
                            <select class="form-select @error('client_id') is-invalid @enderror" id="client_id" name="client_id">
                                <option value="">Global (All Organizations)</option>
                                @foreach($clients as $client)
                                <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                    {{ $client->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('client_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Template Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                id="name" name="name" value="{{ old('name') }}" required>
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="type" class="form-label">Template Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                                <option value="auto_reply" {{ old('type') == 'auto_reply' ? 'selected' : 'selected' }}>Auto Reply</option>
                                <option value="promotion" {{ old('type') == 'promotion' ? 'selected' : '' }}>Promotion</option>
                            </select>
                            @error('type')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="channel" class="form-label">Channel <span class="text-danger">*</span></label>
                            <select class="form-select @error('channel') is-invalid @enderror" id="channel" name="channel" required>
                                <option value="sms" {{ old('channel') == 'sms' ? 'selected' : 'selected' }}>SMS</option>
                                <option value="whatsapp" {{ old('channel') == 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                            </select>
                            @error('channel')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="call_type" class="form-label">Call Type <span class="text-danger">*</span></label>
                            <select class="form-select @error('call_type') is-invalid @enderror" id="call_type" name="call_type" required>
                                <option value="all" {{ old('call_type') == 'all' ? 'selected' : 'selected' }}>All Calls</option>
                                <option value="incoming" {{ old('call_type') == 'incoming' ? 'selected' : '' }}>Incoming Only</option>
                                <option value="outgoing" {{ old('call_type') == 'outgoing' ? 'selected' : '' }}>Outgoing Only</option>
                                <option value="missed" {{ old('call_type') == 'missed' ? 'selected' : '' }}>Missed Only</option>
                            </select>
                            @error('call_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="priority" class="form-label">Priority</label>
                            <input type="number" class="form-control @error('priority') is-invalid @enderror"
                                id="priority" name="priority" value="{{ old('priority', 0) }}" min="0">
                            <small class="text-muted">Lower = Higher priority</small>
                            @error('priority')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- WhatsApp Media Attachment (shown when channel is whatsapp) -->
                    <div id="media-section" class="card bg-light mb-3" style="display: none;">
                        <div class="card-body">
                            <h6 class="mb-3"><i class="bi bi-image"></i> Media Attachment <small class="text-muted">(WhatsApp only)</small></h6>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="media_type" class="form-label">Media Type</label>
                                    <select class="form-select @error('media_type') is-invalid @enderror" id="media_type" name="media_type">
                                        <option value="">None</option>
                                        <option value="image" {{ old('media_type') == 'image' ? 'selected' : '' }}>Image</option>
                                        <option value="video" {{ old('media_type') == 'video' ? 'selected' : '' }}>Video</option>
                                        <option value="document" {{ old('media_type') == 'document' ? 'selected' : '' }}>Document</option>
                                    </select>
                                    @error('media_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-8 mb-3">
                                    <label for="media_url" class="form-label">Media URL (Optional)</label>
                                    <input type="url" class="form-control @error('media_url') is-invalid @enderror"
                                        id="media_url" name="media_url" value="{{ old('media_url') }}"
                                        placeholder="https://example.com/image.jpg">
                                    <small class="text-muted">Use either URL or Upload File. If both are provided, uploaded file is used.</small>
                                    @error('media_url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-12 mb-2">
                                    <label for="media_file" class="form-label">Upload File (Optional)</label>
                                    <input type="file" class="form-control @error('media_file') is-invalid @enderror"
                                        id="media_file" name="media_file"
                                        accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.csv">
                                    <small class="text-muted">Supported: image, video, and documents supported by WhatsApp (max 100MB).</small>
                                    @error('media_file')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div id="media-preview" class="mt-2" style="display: none;">
                                <img id="media-preview-img" src="" alt="Preview" class="img-thumbnail" style="max-height: 150px; display: none;">
                                <div id="media-preview-video" class="badge bg-info" style="display: none;"><i class="bi bi-camera-video"></i> Video file</div>
                                <div id="media-preview-doc" class="badge bg-secondary" style="display: none;"><i class="bi bi-file-earmark"></i> Document file</div>
                                <div id="media-preview-upload" class="small text-muted mt-2" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="content" class="form-label">Message Content <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('content') is-invalid @enderror"
                            id="content" name="content" rows="5" required maxlength="1000">{{ old('content') }}</textarea>
                        <small class="text-muted">
                            Available variables: {name}, {phone}, {time}, {date}
                        </small>
                        @error('content')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_active"
                                    name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    Active
                                </label>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_default"
                                    name="is_default" value="1" {{ old('is_default') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_default">
                                    Set as Default
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-2 mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-lg"></i> Create Template
                        </button>
                        <a href="{{ route('dashboard.templates') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card bg-light mb-3">
            <div class="card-body">
                <h6><i class="bi bi-info-circle"></i> Template Variables</h6>
                <ul class="small text-muted mb-0">
                    <li><code>{name}</code> - Caller's name (if available)</li>
                    <li><code>{phone}</code> - Caller's phone number</li>
                    <li><code>{time}</code> - Current time</li>
                    <li><code>{date}</code> - Current date</li>
                </ul>
            </div>
        </div>

        <div class="card bg-light">
            <div class="card-body">
                <h6><i class="bi bi-lightbulb"></i> Tips</h6>
                <ul class="small text-muted mb-0">
                    <li>Auto Reply templates are sent as response to calls</li>
                    <li>Promotion templates are marketing messages</li>
                    <li>Specific call types take priority over "All Calls"</li>
                    <li>Lower priority numbers are selected first</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const channelSelect = document.getElementById('channel');
    const mediaSection = document.getElementById('media-section');
    const mediaType = document.getElementById('media_type');
    const mediaUrl = document.getElementById('media_url');
    const mediaFile = document.getElementById('media_file');
    const previewContainer = document.getElementById('media-preview');
    const previewImg = document.getElementById('media-preview-img');
    const previewVideo = document.getElementById('media-preview-video');
    const previewDoc = document.getElementById('media-preview-doc');
    const previewUpload = document.getElementById('media-preview-upload');

    function toggleMediaSection() {
        const val = channelSelect.value;
        mediaSection.style.display = (val === 'whatsapp') ? 'block' : 'none';
        if (val === 'sms') {
            mediaType.value = '';
            mediaUrl.value = '';
            previewContainer.style.display = 'none';
        }
    }

    function updatePreview() {
        const type = mediaType.value;
        const url = mediaUrl.value;
        const file = mediaFile.files && mediaFile.files.length ? mediaFile.files[0] : null;
        previewImg.style.display = 'none';
        previewVideo.style.display = 'none';
        previewDoc.style.display = 'none';
        previewUpload.style.display = 'none';
        previewContainer.style.display = 'none';

        if (file) {
            previewUpload.textContent = `Selected file: ${file.name}`;
            previewUpload.style.display = 'block';
            if (type === 'image') {
                previewDoc.style.display = 'none';
            } else if (type === 'video') {
                previewVideo.style.display = 'inline-block';
            } else if (type === 'document') {
                previewDoc.style.display = 'inline-block';
            }
            previewContainer.style.display = 'block';
            return;
        }

        if (url && type === 'image') {
            previewImg.src = url;
            previewImg.style.display = 'block';
            previewContainer.style.display = 'block';
        } else if (url && type === 'video') {
            previewVideo.style.display = 'inline-block';
            previewContainer.style.display = 'block';
        } else if (url && type === 'document') {
            previewDoc.style.display = 'inline-block';
            previewContainer.style.display = 'block';
        }
    }

    channelSelect.addEventListener('change', toggleMediaSection);
    mediaType.addEventListener('change', updatePreview);
    mediaUrl.addEventListener('input', updatePreview);
    mediaFile.addEventListener('change', updatePreview);
    toggleMediaSection();
    updatePreview();
});
</script>
@endsection