@extends('Admin.layout')
<style>
    .upload-box {
        border: 2px dashed #5d50ae;
        border-radius: 10px;
        padding: 40px 20px;
        text-align: center;
        color: #6c757d;
        cursor: pointer;
        transition: background-color 0.3s ease, border-color 0.3s ease;
        min-height: 150px;
        background-color: #fff;
    }

    .upload-box.dragover {
        background-color: rgba(93, 80, 174, 0.1);
        border-color: #5d50ae;
    }

    #preview {
        max-width: 100%;
        height: 80px;
        border-radius: 8px;
        border: 1px solid #ddd;
        margin-top: 15px;
        object-fit: contain;
    }

    input.form-control,
    select.form-select {
        height: 45px;
    }

    @media (max-width: 767px) {
        .card {
            padding: 20px !important;
        }

        .upload-box {
            padding: 25px;
        }
    }
</style>
@section('content')
    <div class="card p-5">
        <h2 class="mb-4 fw-bold">Create Group</h2>
        <form>
            <div class="row g-3">
                <!-- Left Side -->
                <div class="col-lg-8">
                    <div class="row g-3">
                        <div class="col-lg-3 col-md-6">
                            <label for="menuName" class="form-label">Menu Name</label>
                            <input type="text" class="form-control" id="menuName" placeholder="Enter Name" />
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label for="state" class="form-label">State</label>
                            <select class="form-select" id="state">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label for="specialCommunity" class="form-label">Special Community</label>
                            <select class="form-select" id="specialCommunity">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label for="religion" class="form-label">Religion</label>
                            <select class="form-select" id="religion">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label for="serviceType" class="form-label">Service Type</label>
                            <select class="form-select" id="serviceType">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label for="packageList" class="form-label">Package List</label>
                            <select class="form-select" id="packageList">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label for="liveVideoRecord" class="form-label">Live Video Record</label>
                            <select class="form-select" id="liveVideoRecord">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <label for="watermark" class="form-label">Watermark</label>
                            <select class="form-select" id="watermark">
                                <option selected>Select</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!-- Right Side: Logo -->
                <div class="col-lg-4 col-md-12">
                    <label for="logo" class="form-label fw-semibold">Logo</label>
                    <div id="dropZone" class="upload-box">
                        <p class="mb-0">Drag & drop your logo here or click to upload</p>
                        <input type="file" id="logo" class="d-none" accept="image/*" />
                        <img id="preview" src="" alt="Preview" class="d-none" />
                    </div>
                </div>
                <!-- Additional Select Inputs -->
                <div class="col-12">
                    <div class="row g-3">
                        <div class="col-lg-2 col-md-6">
                            <label for="memberQty" class="form-label">Member Qty</label>
                            <select class="form-select" id="memberQty">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="wishes" class="form-label">Wishes</label>
                            <select class="form-select" id="wishes">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="inviteRequest" class="form-label">Invite Request</label>
                            <select class="form-select" id="inviteRequest">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="messageViewed" class="form-label">Message Viewed</label>
                            <select class="form-select" id="messageViewed">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="publicCreation" class="form-label">Public Creation</label>
                            <select class="form-select" id="publicCreation">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="groupVerification" class="form-label">Group Verification</label>
                            <select class="form-select" id="groupVerification">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="imageVerification" class="form-label">Image Verification</label>
                            <select class="form-select" id="imageVerification">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="keyword" class="form-label">Keyword</label>
                            <select class="form-select" id="keyword">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="autoMapping" class="form-label">Auto Mapping</label>
                            <select class="form-select" id="autoMapping">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="request" class="form-label">Request</label>
                            <select class="form-select" id="request">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="join" class="form-label">Join</label>
                            <select class="form-select" id="join">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="addGroup" class="form-label">Add Group</label>
                            <select class="form-select" id="addGroup">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="webLogin" class="form-label">Web Login</label>
                            <select class="form-select" id="webLogin">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-select" id="status">
                                <option selected>Select</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <label for="alarm" class="form-label">Alarm</label>
                            <select class="form-select" id="alarm">
                                <option selected>Select</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Buttons -->
            <div class="row mt-4">
                <div class="col-12">
                    <button type="submit" class="btn btn-primary px-4 me-2"
                        style="background-color: #5d50ae; border-color: #5d50ae;">
                        Create Group
                    </button>
                    <button type="button" class="btn btn-outline-secondary px-4">Discard</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        const dropZone = document.getElementById("dropZone");
        const fileInput = document.getElementById("logo");
        const preview = document.getElementById("preview");
        dropZone.addEventListener("click", () => fileInput.click());
        fileInput.addEventListener("change", handleFile);
        dropZone.addEventListener("dragover", (e) => {
            e.preventDefault();
            dropZone.classList.add("dragover");
        });
        dropZone.addEventListener("dragleave", () => {
            dropZone.classList.remove("dragover");
        });
        dropZone.addEventListener("drop", (e) => {
            e.preventDefault();
            dropZone.classList.remove("dragover");
            if (e.dataTransfer.files.length) {
                fileInput.files = e.dataTransfer.files;
                handleFile();
            }
        });

        function handleFile() {
            const file = fileInput.files[0];
            if (file && file.type.startsWith("image/")) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    preview.src = e.target.result;
                    preview.classList.remove("d-none");
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
@endsection