@extends(auth()->user()->hasRole('Company') ? 'wallet.layouts.master' : 'dashboard.layouts.master')
@section('title', $mode === 'reply' ? 'Reply' : ($mode === 'forward' ? 'Forward' : 'Compose Email'))
@section('page-css')
<style>
    .compose-card { max-width: 900px; margin: 0 auto; }
    .compose-form .form-label { font-size: 0.85rem; font-weight: 500; color: var(--bs-body-color); margin-bottom: 0.35rem; }
    .compose-form .form-control {
        background-color: var(--bs-body-bg); color: var(--bs-body-color);
        border: 1px solid var(--bs-border-color); font-size: 0.9rem;
    }
    .compose-form .form-control:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.05rem var(--bs-primary); }
    .compose-body-editor {
        min-height: 300px; padding: 1rem; border: 1px solid var(--bs-border-color);
        border-radius: 0.375rem; background: var(--bs-body-bg); color: var(--bs-body-color);
        overflow-y: auto; line-height: 1.6; font-size: 0.9rem;
    }
    .compose-body-editor:focus { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 0.05rem var(--bs-primary); }
    .compose-body-editor blockquote, .compose-body-editor div[style*="border-left"] { margin-left: 0.5rem; padding-left: 0.75rem; border-left: 2px solid #666; color: #999; }
    .cc-bcc-toggle { font-size: 0.8rem; color: var(--bs-primary); cursor: pointer; text-decoration: underline; }
</style>
@endsection
@section('main-content')
<div class="mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0">
            @if($mode === 'reply') Reply
            @elseif($mode === 'forward') Forward
            @else Compose Email
            @endif
        </h4>
        <a href="{{ route('email.inbox') }}" class="btn btn-outline-secondary d-flex align-items-center gap-1">
            <i class="ri ri-arrow-left-line" style="font-size:1rem;"></i> Back to Inbox
        </a>
    </div>

    <div class="compose-card">
        <div class="card shadow-none">
            <div class="card-body p-4">
                <form method="POST" action="{{ route('email.send') }}" enctype="multipart/form-data" class="compose-form">
                    @csrf

                    @if(!empty($fromAddress))
                    <div class="mb-3">
                        <label class="form-label">From</label>
                        <input type="text" class="form-control" value="{{ $fromAddress }}" disabled>
                    </div>
                    @endif

                    <div class="mb-3">
                        <label for="to" class="form-label">To</label>
                        <input type="email" class="form-control" id="to" name="to"
                               value="{{ old('to', $replyTo) }}" required placeholder="recipient@example.com">
                    </div>

                    <div class="mb-2">
                        <span class="cc-bcc-toggle" id="toggleCcBcc">Show Cc / Bcc</span>
                    </div>

                    <div id="ccBccFields" style="display: {{ ($cc || old('cc') || old('bcc')) ? 'block' : 'none' }};">
                        <div class="mb-3">
                            <label for="cc" class="form-label">Cc</label>
                            <input type="text" class="form-control" id="cc" name="cc"
                                   value="{{ old('cc', $cc) }}" placeholder="Separate multiple with commas">
                        </div>
                        <div class="mb-3">
                            <label for="bcc" class="form-label">Bcc</label>
                            <input type="text" class="form-control" id="bcc" name="bcc"
                                   value="{{ old('bcc') }}" placeholder="Separate multiple with commas">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="subject" class="form-label">Subject</label>
                        <input type="text" class="form-control" id="subject" name="subject"
                               value="{{ old('subject', $replySubject) }}" required placeholder="Email subject">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Message</label>
                        <div class="compose-body-editor" contenteditable="true" id="bodyEditor">{!! old('body', $replyBody ?: $forwardBody) !!}</div>
                        <input type="hidden" name="body" id="bodyInput">
                    </div>

                    <div class="mb-4">
                        <label for="attachments" class="form-label">Attachments</label>
                        <input type="file" class="form-control" id="attachments" name="attachments[]" multiple>
                        <div class="form-text text-muted">Max 10MB per file.</div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary d-flex align-items-center gap-1" id="sendBtn">
                            <i class="ri ri-send-plane-line" style="font-size:1.1rem;"></i> Send
                        </button>
                        <a href="{{ route('email.inbox') }}" class="btn btn-outline-secondary">Discard</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
<script>
    $(document).ready(function () {
        $("#email-page").addClass('active');

        $('#toggleCcBcc').on('click', function () {
            var fields = $('#ccBccFields');
            fields.toggle();
            $(this).text(fields.is(':visible') ? 'Hide Cc / Bcc' : 'Show Cc / Bcc');
        });

        $('form.compose-form').on('submit', function () {
            $('#bodyInput').val($('#bodyEditor').html());
        });
    });
</script>
@endsection