@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/sweetalert2.min.css') }}">
@endpush

@section('content')
    <div class="container my-5 px-5">
        <div class="row">
            <div class="col-12 d-flex justify-content-between align-items-center mb-4">
                <h2 class="fw-bold">Add Unit</h2>
                <button class="btn btn-primary" onclick="window.location='{{ route('unit.index') }}'">
                    Back
                </button>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-lg-4 col-md-5 col-sm-8 col-10 mx-auto">
                <div class="card bg-white boxShadow px-4 py-3">
                    <form action="{{ route('unit.store') }}" method="POST">
                        @csrf

                        <div class="mb-3">
                            <label for="name" class="form-label f_14">Name*</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                                name="name" value="{{ old('name') }}" placeholder="Enter Unit Name">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="rent" class="form-label f_14">Rent*</label>
                            <input type="text" class="form-control @error('rent') is-invalid @enderror" id="rent"
                                name="rent" value="{{ old('rent') }}" placeholder="Enter Rent Amount">
                            @error('rent')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="payment_date" class="form-label f_14">Payment Date*</label>
                            <input type="date" class="form-control @error('payment_date') is-invalid @enderror"
                                id="payment_date" name="payment_date" value="{{ old('payment_date') }}">
                            @error('payment_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="date_available" class="form-label f_14">Date Available*</label>
                            <input type="date" class="form-control @error('date_available') is-invalid @enderror"
                                id="date_available" name="date_available" value="{{ old('date_available') }}">
                            @error('date_available')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="key_system" class="form-label f_14">Key System*</label>
                            <select name="key_system" id="key_system" class="form-select">
                                <option value="">Select Key System</option>
                                @foreach ($keySystems as $keySystem)
                                    <option value="{{ $keySystem->id }}" @if (old('key_system') == $keySystem->id) selected @endif>
                                        {{ $keySystem->name }}</option>
                                @endforeach
                            </select>
                            {{-- <input type="text" class="form-control @error('key_system') is-invalid @enderror"
                                id="key_system" name="key_system" value="{{ old('key_system') }}"
                                placeholder="Enter Key System ID"> --}}
                            @error('key_system')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div>
                            <button type="submit" class="btn btn-primary gap-2 align-items-center">
                                Submit
                                <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6.93896 4.33112L12.2016 9.59374L6.93896 14.8564" stroke="white"
                                        stroke-width="2.25541" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endsection