@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-6">
                        <h5 class="card-title mb-0">Create WhatsApp Message</h5>
                    </div>
                    <div class="col-6 text-end">
                        <a href="{{ route('whatsapp-messages.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                @can('create whatsapp messages')
                    <form action="{{ route('whatsapp-messages.store') }}" method="POST" id="whatsappForm">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="msg_id" class="form-label">Message ID *</label>
                                <input type="text" class="form-control @error('msg_id') is-invalid @enderror" 
                                       id="msg_id" name="msg_id" value="{{ old('msg_id') }}" 
                                       placeholder="Enter WhatsApp message ID" required>
                                @error('msg_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Unique identifier from WhatsApp</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="from_phone" class="form-label">From Phone *</label>
                                <input type="tel" class="form-control @error('from_phone') is-invalid @enderror" 
                                       id="from_phone" name="from_phone" value="{{ old('from_phone') }}" 
                                       placeholder="e.g. +923001234567" required>
                                @error('from_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Phone number with country code (e.g., +92...)</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="mosque_id" class="form-label">Mosque</label>
                                <select class="form-control @error('mosque_id') is-invalid @enderror" 
                                        id="mosque_id" name="mosque_id">
                                    <option value="">Select Mosque</option>
                                    @foreach($mosques as $mosque)
                                        <option value="{{ $mosque->id }}" {{ old('mosque_id') == $mosque->id ? 'selected' : '' }}>
                                            {{ $mosque->name }}
                                            @if($mosque->location)
                                                ({{ $mosque->location }})
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                @error('mosque_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Link this message to a mosque</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="task_code" class="form-label">Task Code</label>
                                <input type="text" class="form-control @error('task_code') is-invalid @enderror" 
                                       id="task_code" name="task_code" value="{{ old('task_code') }}" 
                                       placeholder="e.g. MSQ102-TASK07-20260113">
                                @error('task_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Format: MSQ102-TASK07-20260113</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="media_url" class="form-label">Media URL</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">
                                @error('media_url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">URL to attached media (image/video/document)</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="parsed_status" class="form-label">Parsed Status</label>
                                <select class="form-control @error('parsed_status') is-invalid @enderror" 
                                        id="parsed_status" name="parsed_status">
                                    <option value="">Select Status</option>
                                    @foreach($parsedStatuses as $key => $label)
                                        <option value="{{ $key }}" {{ old('parsed_status') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('parsed_status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Parsed Information (for display only) -->
                            <div class="col-md-12 mb-3">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="mb-0">Parsed Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <div id="parsed-info" class="alert alert-info">
                                            <p class="mb-2"><strong>Task Code Format:</strong> MSQ102-TASK07-20260113</p>
                                            <ul class="mb-0">
                                                <li><strong>MSQ102</strong> = Mosque Code</li>
                                                <li><strong>TASK07</strong> = Task Number</li>
                                                <li><strong>20260113</strong> = Date (YYYYMMDD)</li>
                                            </ul>
                                        </div>
                                        <button type="button" id="parse-task-code" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-search"></i> Find Matching Mosque
                                        </button>
                                        <div id="matching-result" class="mt-2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Save Message
                            </button>
                            <a href="{{ route('whatsapp-messages.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                @else
                    <div class="alert alert-danger">
                        <i class="fas fa-ban"></i> You don't have permission to create WhatsApp messages.
                    </div>
                @endcan
            </div>
        </div>
    </div>
@endsection

@push('script')
<script>
$(document).ready(function() {
    // Auto-format phone number
    $('#from_phone').on('blur', function() {
        var phone = $(this).val().replace(/\D/g, '');
        if (phone.length === 11 && phone.startsWith('0')) {
            phone = '+92' + phone.substring(1);
            $(this).val(phone);
        } else if (phone.length === 10) {
            phone = '+92' + phone;
            $(this).val(phone);
        } else if (phone.length > 0 && !phone.startsWith('+')) {
            phone = '+' + phone;
            $(this).val(phone);
        }
    });

    // Parse task code and find matching mosque
    $('#parse-task-code').on('click', function() {
        var taskCode = $('#task_code').val();
        var fromPhone = $('#from_phone').val();
        
        if (!taskCode && !fromPhone) {
            $('#matching-result').html('<div class="alert alert-warning">Please enter a task code or phone number</div>');
            return;
        }
        
        $('#matching-result').html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Searching...</div>');
        
        $.ajax({
            url: "{{ route('whatsapp-messages.find-matching-mosque') }}",
            type: "GET",
            data: {
                task_code: taskCode,
                from_phone: fromPhone
            },
            success: function(response) {
                if (response.success && response.mosque) {
                    var html = '<div class="alert alert-success">';
                    html += '<strong>Match Found!</strong><br>';
                    html += 'Mosque: ' + response.mosque.name + '<br>';
                    html += '<button type="button" class="btn btn-sm btn-success mt-2" onclick="selectMosque(' + response.mosque.id + ', \'' + response.mosque.name + '\')">';
                    html += 'Select This Mosque</button>';
                    html += '</div>';
                    
                    if (response.parsed_data) {
                        html += '<div class="alert alert-info mt-2">';
                        html += '<strong>Parsed Task Code:</strong><br>';
                        html += 'Mosque Code: ' + response.parsed_data.mosque_code + '<br>';
                        html += 'Task Number: ' + response.parsed_data.task_number + '<br>';
                        html += 'Date: ' + response.parsed_data.formatted_date;
                        html += '</div>';
                    }
                    
                    $('#matching-result').html(html);
                } else {
                    var html = '<div class="alert alert-warning">';
                    if (response.parsed_data) {
                        html += '<strong>Parsed Task Code:</strong><br>';
                        html += 'Mosque Code: ' + response.parsed_data.mosque_code + '<br>';
                        html += 'Task Number: ' + response.parsed_data.task_number + '<br>';
                        html += 'Date: ' + response.parsed_data.formatted_date + '<br><br>';
                    }
                    html += 'No matching mosque found. Please select manually.';
                    html += '</div>';
                    $('#matching-result').html(html);
                }
            },
            error: function() {
                $('#matching-result').html('<div class="alert alert-danger">Error searching for mosque</div>');
            }
        });
    });
});

function selectMosque(mosqueId, mosqueName) {
    $('#mosque_id').val(mosqueId);
    $('#matching-result').html('<div class="alert alert-success">Selected: ' + mosqueName + '</div>');
}
</script>
@endpush