@extends('layouts.app')

@section('content')
<style>
    :root {
        --ura-primary: #17479E;
        --ura-primary-light: #2558B3;
        --ura-accent: #00BCD4;
        --ura-accent-light: #4DD0E1;
        --ura-success: #10dc60;
        --ura-warning: #ffce00;
        --ura-danger: #f04141;
        --ura-gradient: linear-gradient(135deg, #17479E 0%, #00BCD4 100%);
        --ura-gradient-light: linear-gradient(135deg, rgba(23, 71, 158, 0.1) 0%, rgba(0, 188, 212, 0.1) 100%);
        --ura-shadow: 0 8px 25px rgba(23, 71, 158, 0.15);
        --ura-shadow-hover: 0 12px 35px rgba(23, 71, 158, 0.25);
    }

    .modern-card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        overflow: hidden;
        background: white;
        margin-bottom: 2rem;
        transition: all 0.3s ease;
    }

    .modern-card:hover {
        box-shadow: 0 12px 32px rgba(23, 71, 158, 0.18);
    }

    .modern-card-header {
        background: #A9DAE8;
        padding: 1rem 1.5rem;
        border-bottom: 2px solid rgba(23, 71, 158, 0.15);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .modern-card-title {
        color: var(--ura-primary);
        font-weight: 600;
        font-size: 1.1rem;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .modern-alert {
        border: none;
        border-radius: 12px;
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: var(--ura-shadow);
    }

    .modern-alert.alert-danger {
        background: linear-gradient(135deg, rgba(240, 65, 65, 0.1) 0%, rgba(240, 65, 65, 0.05) 100%);
        border-left: 4px solid var(--ura-danger);
        color: #721c24;
    }

    .form-control, .form-select {
        border: 2px solid rgba(23, 71, 158, 0.1);
        border-radius: 8px;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--ura-primary);
        box-shadow: 0 0 0 0.2rem rgba(23, 71, 158, 0.25);
    }

    .form-label {
        color: var(--ura-primary);
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .modern-btn {
        border: none;
        border-radius: 8px;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }

    .modern-btn-primary {
        background: var(--ura-gradient);
        color: white;
        box-shadow: 0 4px 15px rgba(23, 71, 158, 0.3);
    }

    .modern-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--ura-shadow-hover);
        color: white;
    }

    .modern-btn-secondary {
        background: linear-gradient(135deg, #6c757d 0%, #868e96 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
    }

    .modern-btn-secondary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(108, 117, 125, 0.4);
        color: white;
    }

    .modern-breadcrumb {
        background: linear-gradient(135deg, rgba(23, 71, 158, 0.08) 0%, rgba(0, 188, 212, 0.08) 100%);
        border-radius: 16px;
        padding: 1.25rem 2rem;
        margin-bottom: 2rem;
        border: 2px solid rgba(23, 71, 158, 0.12);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .breadcrumb-title {
        color: var(--ura-primary);
        font-weight: 700;
        font-size: 1.2rem;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .breadcrumb-title i {
        font-size: 1.5rem;
    }

    .breadcrumb-nav {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .breadcrumb-nav a {
        color: var(--ura-primary);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        transition: all 0.3s ease;
        font-weight: 600;
        padding: 0.35rem 0.75rem;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.5);
    }

    .breadcrumb-nav a:hover {
        color: var(--ura-accent);
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .invalid-feedback {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: var(--ura-danger);
    }
</style>

<div class="container-fluid">
    <!-- Modern Breadcrumb -->
    <div class="modern-breadcrumb d-flex flex-wrap align-items-center justify-content-between">
        <h6 class="breadcrumb-title">
            <i class="bx bx-edit me-2"></i>
            Edit SMS Campaign
        </h6>
        <ul class="breadcrumb-nav">
            <li>
                <a href="{{ route('dashboard') }}">
                    <i class="bx bx-home-alt"></i>
                    Dashboard
                </a>
            </li>
            <li><span class="text-muted">•</span></li>
            <li>
                <a href="{{ route('bulk.sms.history') }}">
                    <i class="bx bx-history"></i>
                    SMS History
                </a>
            </li>
            <li><span class="text-muted">•</span></li>
            <li class="text-muted">Edit</li>
        </ul>
    </div>

    <!-- Main Content Card -->
    <div class="modern-card">
        <div class="modern-card-header">
            <h5 class="modern-card-title">
                <i class="bx bx-message-square-edit"></i>
                Edit SMS Campaign Details
            </h5>
        </div>
        <div class="card-body" style="padding: 2rem;">
            {{-- Validation Errors --}}
            @if($errors->any())
                <div class="alert modern-alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="bx bx-error-circle me-2"></i>
                    <strong>Please correct the following errors:</strong>
                    <ul class="mb-0 mt-2">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- Edit Form --}}
            <form action="{{ route('bulk.sms.update', $smsHistory->id) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="mb-4">
                    <label for="heading" class="form-label">
                        <i class="bx bx-heading me-2"></i>
                        Heading
                    </label>
                    <input type="text"
                           class="form-control @error('heading') is-invalid @enderror"
                           id="heading"
                           name="heading"
                           value="{{ old('heading', $smsHistory->heading) }}"
                           placeholder="Enter campaign heading">
                    @error('heading')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="title" class="form-label">
                        <i class="bx bx-text me-2"></i>
                        Title
                    </label>
                    <input type="text"
                           class="form-control @error('title') is-invalid @enderror"
                           id="title"
                           name="title"
                           value="{{ old('title', $smsHistory->title) }}"
                           placeholder="Enter campaign title">
                    @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="message" class="form-label">
                        <i class="bx bx-message-square-detail me-2"></i>
                        Message
                    </label>
                    <textarea class="form-control @error('message') is-invalid @enderror"
                              id="message"
                              name="message"
                              rows="6"
                              placeholder="Enter SMS message content">{{ old('message', $smsHistory->message) }}</textarea>
                    @error('message')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="text-muted mt-1 d-block">
                        <i class="bx bx-info-circle me-1"></i>
                        Character count: <span id="charCount">{{ strlen(old('message', $smsHistory->message)) }}</span>/160 (Standard SMS)
                    </small>
                </div>

                <div class="mb-4">
                    <label for="status" class="form-label">
                        <i class="bx bx-loader-circle me-2"></i>
                        Status
                    </label>
                    <select class="form-select @error('status') is-invalid @enderror"
                            id="status"
                            name="status">
                        <option value="pending" {{ old('status', $smsHistory->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="processing" {{ old('status', $smsHistory->status) == 'processing' ? 'selected' : '' }}>Processing</option>
                        <option value="completed" {{ old('status', $smsHistory->status) == 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="failed" {{ old('status', $smsHistory->status) == 'failed' ? 'selected' : '' }}>Failed</option>
                    </select>
                    @error('status')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="d-flex gap-3">
                    <button type="submit" class="modern-btn modern-btn-primary">
                        <i class="bx bx-save"></i>
                        Update Campaign
                    </button>
                    <a href="{{ route('bulk.sms.history') }}" class="modern-btn modern-btn-secondary">
                        <i class="bx bx-x"></i>
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Character counter for message field
    document.addEventListener('DOMContentLoaded', function() {
        const messageField = document.getElementById('message');
        const charCountElement = document.getElementById('charCount');

        if (messageField && charCountElement) {
            messageField.addEventListener('input', function() {
                const length = this.value.length;
                charCountElement.textContent = length;

                // Color coding for character count
                if (length > 160) {
                    charCountElement.style.color = 'var(--ura-danger)';
                    charCountElement.style.fontWeight = 'bold';
                } else if (length > 140) {
                    charCountElement.style.color = 'var(--ura-warning)';
                    charCountElement.style.fontWeight = '600';
                } else {
                    charCountElement.style.color = 'var(--ura-success)';
                    charCountElement.style.fontWeight = '500';
                }
            });
        }
    });
</script>

@endsection