@extends('dashboard.layouts.app')

<style>
    .ui-card {
        border-radius: 0 !important;
    }
</style>

@section('content')

    @include('components.alert')

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

                <x-page-title
                    title="Create Shared Center"
                    description="Create a new shared center item, assign its folder and audience, configure notification settings, and upload the related attachment.">
                    <a href="{{ route('share-center.index') }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

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

                    <div class="ui-card" style="margin-bottom: 10px;">
                        <div class="form-section" >
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Shared Center Information</h5>
                                <p class="form-section__sub mb-0">
                                    Enter the main details including name, description, folder, status, and access settings.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-12">
                                    <label for="name" class="asset-label">
                                        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', $shared_center->name ?? '') }}"
                                        required
                                        pattern="^[A-Za-z0-9\s]+$"
                                        title="Only letters, numbers, and spaces are allowed.">
                                    @error('name')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-12">
                                    <label for="description" class="asset-label">
                                        Description <span class="text-danger">*</span>
                                    </label>
                                    <textarea
                                        name="description"
                                        id="description"
                                        rows="4"
                                        class="asset-input @error('description') asset-invalid @enderror"
                                        required
                                        title="Only letters, numbers, and spaces are allowed.">{{ old('description', $shared_center->description ?? '') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="folder_id" class="asset-label">
                                        Folder <span class="text-danger">*</span>
                                    </label>
                                    <select
                                        name="folder_id"
                                        id="folder_id"
                                        class="asset-select  @error('folder_id') asset-invalid is-invalid @enderror"
                                        required>
                                        <option value="">Select Folder</option>
                                        @foreach ($folders as $folder)
                                            <option value="{{ $folder->id }}"
                                                {{ old('folder_id') == $folder->id ? 'selected' : '' }}>
                                                {{ $folder->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('folder_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <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 is-invalid @enderror"
                                        required>
                                        <option value="">Select Status</option>
                                        <option value="active" {{ old('status', $shared_center->status ?? '') == 'active' ? 'selected' : '' }}>
                                            Active
                                        </option>
                                        <option value="not_active" {{ old('status', $shared_center->status ?? '') == 'not_active' ? 'selected' : '' }}>
                                            Not Active
                                        </option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="share_department_id" class="asset-label">Department</label>
                                    <select
                                        name="share_department_id"
                                        id="share_department_id"
                                        class="asset-select  @error('share_department_id') asset-invalid is-invalid @enderror">
                                        <option value="">Select Department</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}"
                                                {{ (string) old('share_department_id') === (string) $department->id ? 'selected' : '' }}>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('share_department_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="share_staff_id" class="asset-label">Staff</label>
                                    <select
                                        name="share_staff_id"
                                        id="share_staff_id"
                                        class="asset-select  @error('share_staff_id') asset-invalid is-invalid @enderror">
                                        <option value="">Select Staff</option>
                                    </select>
                                    @error('share_staff_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="notifications" class="asset-label">Notifications</label>
                                    <select
                                        name="notifications"
                                        id="notifications"
                                        class="asset-select  @error('notifications') asset-invalid is-invalid @enderror">
                                        <option value="">Select Notification Type</option>
                                        <option value="email" {{ old('notifications', $shared_center->notifications ?? '') == 'email' ? 'selected' : '' }}>
                                            Email
                                        </option>
                                        <option value="feeds" {{ old('notifications', $shared_center->notifications ?? '') == 'feeds' ? 'selected' : '' }}>
                                            Feeds
                                        </option>
                                    </select>
                                    @error('notifications')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="valid_until" class="asset-label">
                                        Valid Until <span class="text-danger">*</span>
                                    </label>
                                    <input
                                        type="date"
                                        name="valid_until"
                                        id="valid_until"
                                        class="asset-input @error('valid_until') asset-invalid @enderror"
                                        value="{{ old('valid_until', isset($shared_center->valid_until) ? \Carbon\Carbon::parse($shared_center->valid_until)->format('Y-m-d') : '') }}"
                                        required>
                                    @error('valid_until')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Attachment</h5>
                                <p class="form-section__sub mb-0">
                                    Select the attachment type and upload the related file.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="attachment_type" class="asset-label">
                                        Attachment Type <span class="text-danger">*</span>
                                    </label>
                                    <select
                                        name="attachment_type"
                                        id="attachment_type"
                                        class="asset-select @error('attachment_type') asset-invalid @enderror"
                                        required>
                                        <option value="">Select Attachment Type</option>
                                        <option value="image" {{ old('attachment_type', $shared_center->file_type ?? '') == 'image' ? 'selected' : '' }}>
                                            Image
                                        </option>
                                        <option value="video" {{ old('attachment_type', $shared_center->file_type ?? '') == 'video' ? 'selected' : '' }}>
                                            Video
                                        </option>
                                        <option value="pdf" {{ old('attachment_type', $shared_center->file_type ?? '') == 'pdf' ? 'selected' : '' }}>
                                            PDF
                                        </option>
                                    </select>
                                    @error('attachment_type')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="attachment" class="asset-label">Attachment</label>
                                    <input
                                        type="file"
                                        name="attachment"
                                        id="attachment"
                                        style="padding: 6px;"
                                        class="asset-input @error('attachment') asset-invalid @enderror">
                                    @error('attachment')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="asset-actions">
                        <a href="{{ route('share-center.index') }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>
                        <button type="submit" class="asset-btn asset-btn--primary">
                            Save Shared Center
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            $('.').({
                allowClear: true,
                width: '100%'
            });

            const departments = @json($departments);
            const oldDepartmentId = '{{ old('share_department_id') }}';
            const oldStaffId = '{{ old('share_staff_id') }}';
            const staffSelect = $('#share_staff_id');

            function populateStaff(deptId, selectedStaffId = '') {
                staffSelect.empty().append('<option value="">Select Staff</option>');

                if (!deptId) {
                    staffSelect.trigger('change');
                    return;
                }

                const selectedDept = departments.find(d => String(d.id) === String(deptId));

                if (selectedDept && selectedDept.staffs && selectedDept.staffs.length > 0) {
                    selectedDept.staffs.forEach(staff => {
                        const option = new Option(staff.full_name, staff.id, false, String(selectedStaffId) === String(staff.id));
                        staffSelect.append(option);
                    });
                }

                staffSelect.trigger('change');
            }

            $('#share_department_id').on('change', function () {
                populateStaff($(this).val());
            });

            if (oldDepartmentId) {
                populateStaff(oldDepartmentId, oldStaffId);
            }
        });
    </script>
@endpush