@extends('dashboard.layouts.app')

@section('content')

@include('components.alert')

<div class="container-fluid app-bg">
    <div class="page-shell">
        <div class="space-y-4">

            {{-- Page Title --}}
            <x-page-title
                title="Create Shared Folder"
                description="Create a new shared folder and control its visibility status for users.">
                <a href="{{ route('share-center-folders.index') }}" class="asset-btn asset-btn--secondary">
                    Back
                </a>
            </x-page-title>

            <form action="{{ route('share-center-folders.store') }}" method="POST">
                @csrf

                {{-- Folder Info --}}
                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Folder Information</h5>
                            <p class="form-section__sub mb-0">
                                Enter the folder name and define whether it is active or not.
                            </p>
                        </div>

                        <div class="asset-form-grid">

                            {{-- Folder Name --}}
                            <div class="asset-col-12">
                                <label for="name" class="asset-label">
                                    Folder Name <span class="text-danger">*</span>
                                </label>

                                <input
                                    type="text"
                                    name="name"
                                    id="name"
                                    class="asset-input @error('name') asset-invalid @enderror"
                                    value="{{ old('name') }}"
                                    pattern="^[A-Za-z0-9\s]+$"
                                    title="Only letters, numbers, and spaces are allowed."
                                    required>

                                @error('name')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Status --}}
                            <div class="asset-col-12">
                                <label for="status" class="asset-label">
                                    Status <span class="text-danger">*</span>
                                </label>

                                <select
                                    name="status"
                                    id="status"
                                    class="asset-select @error('status') asset-invalid @enderror"
                                    required>

                                    <option value="">Select Status</option>
                                    <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>
                                        Active
                                    </option>
                                    <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>
                                        Not Active
                                    </option>
                                </select>

                                @error('status')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

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

                {{-- Actions --}}
                <div class="asset-actions">
                    <a href="{{ route('share-center-folders.index') }}" class="asset-btn asset-btn--secondary">
                        Cancel
                    </a>

                    <button type="submit" class="asset-btn asset-btn--primary">
                        Save Folder
                    </button>
                </div>

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

@endsection