@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-auto ms-auto d-print-none">
				<div class="btn-list">
					<span class="d-none d-sm-inline">
						<a href="#" class="btn">New View</a>
					</span>
					<a href="{{ route('rate_sheets.index') }}" class="btn btn-primary d-none d-sm-inline-block">
						Report
					</a>
					<a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
						<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">
							<path d="M12 5v14" />
							<path d="M5 12h14" />
						</svg>
					</a>
				</div>
			</div>
		</div>

		<!-- Modal -->
		<div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">New Report</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<p>Modal content goes here...</p>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>

<div class="container-xl mt-3">
	@if(session('success'))
		<div class="alert alert-success alert-dismissible">
			{{ session('success') }}
		</div>
	@endif
</div>

<!-- Main Content -->
<div class="container-xl">
	<div class="card shadow-sm mb-4">
		<div class="card-header bg-primary text-white">
			<h5 class="mb-0">W.H.S – Add Rate Sheet</h5>
		</div>
		<div class="card-body">
			<form action="{{ route('rate_sheets.store') }}" method="POST">
				@csrf

				@include('rate_sheets.partials.form')

				<div class="mt-3 text-center">
					<button type="submit" class="btn btn-primary">Submit</button>
					<button type="reset" class="btn btn-secondary">Reset</button>
				</div>
			</form>
		</div>
	</div>
</div>
@endsection