@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">Edit 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('update whatsapp messages')
                    <form action="{{ route('whatsapp-messages.update', $whatsappMessage) }}" method="POST" id="whatsappForm">
                        @csrf
                        @method('PUT')
                        
                        <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', $whatsappMessage->msg_id) }}" 
                                       placeholder="Enter WhatsApp message ID" required>
                                @error('msg_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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', $whatsappMessage->from_phone) }}" 
                                       placeholder="e.g. +923001234567" required>
                                @error('from_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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', $whatsappMessage->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
                            </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', $whatsappMessage->task_code) }}" 
                                       placeholder="e.g. MSQ102-TASK07-20260113">
                                @error('task_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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', $whatsappMessage->media_url) }}" 
                                       placeholder="https://example.com/image.jpg">
                                @error('media_url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </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', $whatsappMessage->parsed_status) == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('parsed_status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Current Information -->
                            <div class="col-md-12 mb-3">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="mb-0">Current Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <strong>Message ID:</strong> {{ $whatsappMessage->msg_id }}<br>
                                                <strong>Received:</strong> {{ $whatsappMessage->created_at->format('d M Y, h:i A') }}
                                            </div>
                                            <div class="col-md-6">
                                                @if($whatsappMessage->media_url)
                                                    <strong>Media:</strong> 
                                                    <a href="{{ $whatsappMessage->media_url }}" target="_blank" class="btn btn-sm btn-success">
                                                        <i class="fas fa-external-link-alt"></i> View
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Update 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 update 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);
        }
    });
});
</script>
@endpush