@extends('Admin.layout')
@section('content')
<style>
    .mail-card {
        background: #fff;
    }

    .recipient-wrapper {
        min-height: 55px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .recipient-input {
        outline: none;
        min-width: 200px;
        padding: 8px;
    }

    .recipient-chip {
        background: #eef2ff;
        color: #4338ca;
        padding: 6px 12px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }

    .recipient-chip i {
        cursor: pointer;
    }

    .custom-textarea {
        min-height: 220px;
    }

    .upload-area {
        border: 2px dashed #d1d5db;
        background: #f9fafb;
    }

    .file-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .file-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .file-icon {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        background: #eef2ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4338ca;
        font-size: 22px;
    }

    .send-btn {
        min-width: 220px;
    }
</style>
<div class="row d-flex justify-content-between">
    <div class="col-auto">
        <h5>
            <button type="button"
                class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ url()->previous() }}">
                    <svg xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#000"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round">
                        <path stroke="none"
                            d="M0 0h24v24H0z"
                            fill="none"></path>
                        <path d="M15 6l-6 6l6 6"></path>
                    </svg>
                </a>
            </button>
            Compose Mail
        </h5>
    </div>
</div>


<div class="card p-4 rounded-4 shadow-sm border-0 mail-card">
    
    <form id="mailForm">
        @csrf
        <input type="hidden"
            id="document_id"
            value="{{ $document->id }}">
        <input type="hidden"
            id="project_id"
            value="{{ $document->project_id }}">
        {{-- TO --}}
        <div class="mb-4">
            <label class="form-label fw-semibold d-flex align-items-center gap-2">
                <i class="ti tabler-user"></i>
                To
                <span class="text-danger">*</span>
            </label>
            <div class="recipient-wrapper form-control rounded-4 p-2">
                <div id="recipientChips"
                    class="d-flex flex-wrap gap-2">
                </div>
                <input type="text"
                    id="recipientInput"
                    class="border-0 flex-grow-1 recipient-input"
                    placeholder="Enter recipient email"
                    value="{{ $document->project->client_email ?? '' }}"
                    required>
            </div>
            <small class="text-muted d-block mt-2">
                Press
                <span class="fw-semibold text-dark">
                    comma (,)
                </span>
                to add another recipient
            </small>
        </div>
        {{-- SUBJECT --}}
        <div class="mb-4">
            <label class="form-label fw-semibold d-flex align-items-center gap-2">
                <i class="ti tabler-pencil"></i>
                Subject
                <span class="text-danger">*</span>
            </label>
            <input type="text"
                class="form-control rounded-4"
                id="subject"
                placeholder="Enter Subject"
                value="{{ $document->document_name }}"
                required>
        </div>
        {{-- CONTENT --}}
        <div class="mb-4">
            <label class="form-label fw-semibold d-flex align-items-center gap-2">
                <i class="ti tabler-message"></i>
                Content
                <span class="text-danger">*</span>
            </label>
            <textarea id="content"
                class="form-control rounded-4 custom-textarea"
                rows="10"
                placeholder="Enter email content"
                required></textarea>
        </div>
        {{-- ATTACHMENT --}}
        <div class="mb-4">
            <label class="form-label fw-semibold d-flex align-items-center gap-2">
                <i class="ti tabler-paperclip"></i>
                Attachment
                <span class="text-danger">*</span>
            </label>
            <div class="upload-area rounded-4 p-4">
                <div class="attachment-list"
                    id="attachmentList">
                </div>
            </div>
        </div>
        {{-- SEND BUTTON --}}
        <div class="text-center">
            <button type="submit"
                class="btn btn-primary rounded-pill px-5 py-3 send-btn"
                id="sendBtn">
                <span class="btn-text">
                    <i class="ti tabler-send me-2"></i>
                    Send Email
                </span>
                <span class="spinner-border spinner-border-sm d-none"></span>
            </button>
        </div>
    </form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    let recipients = [];
    let uploadedFiles = [];

    const recipientInput =
        document.getElementById('recipientInput');

    const recipientChips =
        document.getElementById('recipientChips');

    /*
    |--------------------------------------------------------------------------
    | RECIPIENT INPUT
    |--------------------------------------------------------------------------
    */

    recipientInput.addEventListener('keydown', function(e) {

        if (e.key === 'Enter' || e.key === ',') {

            e.preventDefault();
            addRecipient();
        }
    });

    function addRecipient() {

        const email = recipientInput.value.trim();

        if (email == '') {
            return;
        }

        if (validateEmail(email)) {

            if (!recipients.includes(email)) {

                recipients.push(email);
                renderRecipients();
            }

            recipientInput.value = '';

        } else {

            alert('Invalid Email');
        }
    }

    function renderRecipients() {

        recipientChips.innerHTML = '';

        recipients.forEach((email, index) => {

            recipientChips.innerHTML += `
                <div class="recipient-chip">
                    ${email}
                    <i class="ti tabler-x"
                        onclick="removeRecipient(${index})">
                    </i>
                </div>
            `;
        });
    }

    function removeRecipient(index) {

        recipients.splice(index, 1);
        renderRecipients();
    }

    function validateEmail(email) {

        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }

    /*
    |--------------------------------------------------------------------------
    | FILE PREVIEW
    |--------------------------------------------------------------------------
    */

    window.addEventListener('load', () => {

        // DEFAULT EMAIL CHIP
        if (recipientInput.value.trim() != '') {

            addRecipient();
        }

        // ATTACHMENT SHOW
        uploadedFiles.push({

            name: "{{ basename($document->pdf_file) }}",
            size: "PDF Document"
        });

        renderFiles();
    });

    function renderFiles() {

        let html = '';

        uploadedFiles.forEach((file) => {

            html += `
                <div class="file-item">
                    <div class="file-left">

                        <div class="file-icon">
                            <i class="ti tabler-file"></i>
                        </div>

                        <div>
                            <div class="fw-semibold">
                                ${file.name}
                            </div>

                            <small class="text-muted">
                                ${file.size}
                            </small>
                        </div>

                    </div>

                   <div>

    @if($document->pdf_file)

        <a href="{{ asset('storage/' . $document->pdf_file) }}"
           target="_blank"
           class="btn btn-sm btn-primary">

            View PDF

        </a>

    @else

        <span class="text-danger">
            PDF Not Found
        </span>

    @endif

</div>
                </div>
            `;
        });

        $('#attachmentList').html(html);
    }

    /*
    |--------------------------------------------------------------------------
    | SEND MAIL
    |--------------------------------------------------------------------------
    */

    $('#mailForm').submit(function(e) {

        e.preventDefault();

        // HTML5 VALIDATION
        if (!this.checkValidity()) {

            this.reportValidity();
            return;
        }

        // ADD LAST EMAIL
        if (recipientInput.value.trim() != '') {

            addRecipient();
        }

        if (recipients.length == 0) {

            alert('Please enter at least one email');
            return;
        }

        $('#sendBtn').prop('disabled', true);

        $('.btn-text').addClass('d-none');

        $('.spinner-border').removeClass('d-none');

        $.ajax({

            url: "{{ route('send_document_invoice_mail') }}",

            type: "POST",

            data: {

                _token: "{{ csrf_token() }}",

                document_id: $('#document_id').val(),

                emails: recipients,

                subject: $('#subject').val(),

                content: $('#content').val()
            },

            success: function(response) {

                $('#sendBtn').prop('disabled', false);

                $('.btn-text').removeClass('d-none');

                $('.spinner-border').addClass('d-none');

                if (response.status == true) {

                    window.location.href =
                        "{{ route('bill_table') }}" + "?success=1";

                } else {

                    window.location.href =
                        "{{ route('bill_table') }}" + "?error=1";
                }
            },

            error: function(xhr) {

                $('#sendBtn').prop('disabled', false);

                $('.btn-text').removeClass('d-none');

                $('.spinner-border').addClass('d-none');

                if (xhr.status == 422) {

                    let errors = xhr.responseJSON.errors;

                    let firstError =
                        Object.values(errors)[0][0];

                    alert(firstError);

                } else {

                    window.location.href =
                        "{{ route('bill_table') }}" + "?error=1";
                }
            }
        });
    });
</script>
@endsection