@extends('layouts.main')
@section('main-container')
<div class="page-header d-print-none">
	<div class="container-xl">
		<div class="row g-2 align-items-center">
                <div class="col">
            
                    <h2 class="page-title d-flex align-items-center gap-2 mb-3">
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <circle cx="12" cy="11" r="3" />
                                <path d="M17.657 16.657l-4.243 4.243l-4.243 -4.243a8 8 0 1 1 8.486 0z" />
                            </svg>
                        Add Unit
                    </h2>
                </div>
				<!-- Page title actions -->
				<div class="col-auto ms-auto d-print-none">
					<div class="btn-list">
	                    <span class="d-none d-sm-inline">
                            <a href="#" class="btn btn-1">New view</a>
	                    </span>
                            <a href="/geo/units" class="btn btn-primary btn-5 d-none d-sm-inline-block">
	                             Report
                            </a>
                            <a href="#" class="btn btn-primary btn-6 d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
	                            <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
	                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-2"><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                            </a>
                    </div>

                    
                </div>
            </div>
	    </div>
    </div>
</div>


<!-- Page body -->
<div class="page-body">
	<div class="container-xl">
            <div class="row row-cards">
                <div class="col-12">
                @if (session('success'))
                   <div id="successAlert" class="alert alert-success">
                    {{ session('success') }}
                    </div>
                @endif
 

                    <form action="" method="post" class="card">
                        <div class="card-header">
                            <h4 class="card-title">Add Unit Name </h4>
                        </div>
                        <div class="card-body">                                    
                        <form action="{{ route('geo.units.store') }}" method="POST">
                                @csrf

                                <div class="mb-3">
                                    <label class="form-label required">Unit Name</label>
                                    <div>
                                        <input type="text" name="name" class="form-control" placeholder="Enter Unit Name" required>
                                    </div>
                                </div>

                                <div class="card-footer text-end">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>    
        </div>
    </div>
</div>

   <script>
        setTimeout(() => {
            const alert = document.getElementById('successAlert');
            if (alert) alert.style.display = 'none';
        }, 3000); // 3000 milliseconds = 3 seconds
    </script>

@endsection