@extends('layouts.default')
@section('content')
            <div class="page-title">
                    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li><h1>Compose</h1></li>
            <li class="breadcrumb-item">
                <a href="{{ url('index') }}">
                    <svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.125 6.375L8.5 1.41667L14.875 6.375V14.1667C14.875 14.5424 14.7257 14.9027 14.4601 15.1684C14.1944 15.4341 13.8341 15.5833 13.4583 15.5833H3.54167C3.16594 15.5833 2.80561 15.4341 2.53993 15.1684C2.27426 14.9027 2.125 14.5424 2.125 14.1667V6.375Z" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M6.375 15.5833V8.5H10.625V15.5833" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Home
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Compose</li>
        </ol>
    </nav>
            </div>
            <div class="container-fluid p-0">
                <div class="card border-0 rounded-0 mb-0 h-auto">
                    <div class="card-body p-0">
                        <div class="row gx-0">
                            <div class="col-xxl-2 col-xl-3 col-lg-4 email-left-body">
                                <div class="email-left-column dz-scroll" id="email-left">
                                    <div class="mb-4">
                                        <a href="email-compose" class="btn btn-lg btn-dark w-100"><i class="fa-solid fa-plus"></i> Compose Email</a>
                                    </div>
                                    <div class="mail-list-group">
                                        <a href="email-inbox" class="list-group-item active">
                                            <i class="fa-regular fa-envelope"></i> Inbox
                                            <span class="badge badge-purple badge-sm float-end rounded">2</span>
                                        </a>
                                        <a href="javascript:void(0);" class="list-group-item">
                                            <i class="fa-regular fa-paper-plane"></i> Sent
                                        </a>    
                                        <a href="javascript:void(0);" class="list-group-item">
                                            <i class="fa-regular fa-star"></i> Favorite
                                        </a>
                                        <a href="javascript:void(0);" class="list-group-item">
                                            <i class="fa-regular fa-file"></i> Draft
                                        </a>
                                        <a href="javascript:void(0);" class="list-group-item">
                                            <i class="fa-solid fa-tag"></i> Important
                                        </a>
                                        <a href="javascript:void(0);" class="list-group-item">
                                            <i class="fa-regular fa-clock"></i> Scheduled
                                        </a>
                                        <a href="javascript:void(0);" class="list-group-item">
                                            <i class="fa-solid fa-angle-down"></i> Move
                                        </a>
                                    </div>
                                    <div class="mail-list-group">
                                        <h5 class="mb-3 px-3">Categories</h5>
                                        <a href="email-inbox" class="list-group-item opacity-75"> <i class="fa fa-circle text-primary"></i> Work </a>
                                        <a href="email-inbox" class="list-group-item opacity-75"> <i class="fa fa-circle text-purple"></i> Private </a>
                                        <a href="email-inbox" class="list-group-item opacity-75"> <i class="fa fa-circle text-success"></i> Support </a>
                                        <a href="email-inbox" class="list-group-item opacity-75"> <i class="fa fa-circle text-primary text-danger"></i> Social </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-10 col-xl-9 col-lg-8">
                                <div class="email-right-column">
                                    <div class="compose-wrapper" id="compose-content">
                                        <div class="align-items-center justify-content-between d-flex d-lg-none mb-3">
                                            <h4 class="mb-0">Email</h4>
                                            <a href="javascript:void(0);" class="mobile-email-panel btn btn-square btn-primary light btn-sm">
                                                <i class="fa-solid fa-list-ul"></i>
                                            </a>
                                        </div>
                                        <div class="compose-content">
                                            <form action="#">
                                                <div class="row">
                                                    <div class="col-sm-12 mb-3">
                                                        <input type="text" class="form-control" placeholder="To">
                                                    </div>
                                                    <div class="col-sm-12 mb-3">
                                                        <input type="text" class="form-control" placeholder="Subject">
                                                    </div>
                                                    <div class="col-sm-12 mb-3">
                                                        <textarea class="form-control" rows="7" placeholder="Type Message"></textarea>
                                                    </div>
                                                </div>
                                            </form>
                                            <h5 class="mt-2 mb-3"><i class="fa fa-paperclip me-1"></i> Attatchment</h5>
                                            <form action="/employee" id="my-dropzone" class="dropzone" enctype="multipart/form-data">
                                                 @csrf
                                                <div class="fallback">                                                              
                                                    <input name="file" type="file" multiple>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="mt-4">
                                            <button class="btn btn-danger light" type="button"><i class="fa fa-times"></i> Discard</button>
                                            <button class="btn btn-primary ms-2" type="button"><i class="fa fa-paper-plane"></i> Send</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>          
@endsection
@push('scripts')
<script type="text/javascript">
    Dropzone.autoDiscover = false;

const myDropzone = new Dropzone("#my-dropzone", {
    url: "/compose/upload", 
    method: "post",
    paramName: "file",
    headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
    init: function () {
        this.on("success", function (file, response) {
            // console.log("Upload success:", response);
        });

        this.on("error", function (file, errorMessage) {
            console.error("Upload error:", errorMessage);
        });
    }
});
</script>
@endpush