@extends('Admin.layout')
@section('content')
    <div class="card p-5">

        <div class="form-section">
            <h3> Service Type</h3>
            <form id="groupForm">
                <div class="row">
                    <div class="col-lg-4 mb-2">
                        <label class="form-label" for="stateName">Enter Service Type</label>
                        <input type="text" class="form-control" id="stateName" placeholder="Enter Service Type">
                    </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>
                <div class="form-actions mt-4">
                    <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                        data-bs-target="#basicModal">Create Service Type</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