@extends('Admin.layout')
@section('content')
    <div class="card p-5">
        <div class="form-section">
            <h3>Join</h3>
            <form id="groupForm">
                <div class="row">
                    <div class="col-lg-4 mb-2">
                        <label class="form-label" for="stateName"> Join</label>
                        <input type="text" class="form-control" id="stateName" placeholder="Enter Join">
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label" for="stateLogo">Logo</label>
                        <input type="file" class="form-control" id="stateLogo">
                    </div>

                    <div class="col-lg-4 mb-2">
                        <label class="form-label">State</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Special Community</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Religion</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Service Type</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Package List</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Live Video Record</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Watermark</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Member Qty</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Wishes</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Invite Request For Group</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Message Viewed</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Public Creation</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Group Verification</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Image Verification</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Keyword</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Auto Mapping</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 mb-2">
                        <label class="form-label">Request</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>
                </div>
                <div class="form-actions mt-4">
                    <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                        data-bs-target="#basicModal">Create Join</button>
                    <button type="reset" class="btn btn-secondary">Discard</button>
                </div>
            </form>
        </div>
        <div class="modal fade" id="basicModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-md modal-dialog-centered">
                <div class="modal-content  rounded-4 text-center p-4 py-5">

                    <h5 class="fw-bold mb-2">Are you sure!!</h5>
                    <p class="text-muted">Are you confirm to submit ?</p>
                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary py-4 fw-semibold w-25 me-3"
                            data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary py-4 fw-semibold w-25">Yes,Sure</button>

                    </div>
                </div>
            </div>
        </div>
</div>
@endsection