@extends('layouts.admin.master')

@section('title')
    {{ isset($memberCategory) ? 'Edit' : 'Create' }} Member Category
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4>{{ isset($memberCategory) ? 'Edit' : 'Create' }} Member Category</h4>
                            <a href="{{ route('admin.member-categories.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>

                        <form id="member-category-form" action="{{ isset($memberCategory) ? route('admin.member-categories.update', $memberCategory->id) : route('admin.member-categories.store') }}" method="POST">
                            @csrf
                            @if(isset($memberCategory))
                                @method('PUT')
                            @endif

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name">Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                               id="name" name="name"
                                               value="{{ old('name', $memberCategory->name ?? '') }}"
                                               placeholder="Enter category name" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="status">Status</label>
                                        <div class="form-check">
                                            <input type="hidden" name="status" value="0"> <!-- ensures unchecked = 0 -->
                                            <input type="checkbox" class="form-check-input" id="status" name="status" value="1"
                                                {{ old('status', $memberCategory->status ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="status">Active</label>
{{--                                            <input type="checkbox" class="form-check-input" id="status" name="status" --}}
{{--                                                   {{ old('status', $memberCategory->status ?? true) ? 'checked' : '' }}>--}}
{{--                                            <label class="form-check-label" for="status">Active</label>--}}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea class="form-control @error('description') is-invalid @enderror"
                                                  id="description" name="description" rows="4"
                                                  placeholder="Enter category description">{{ old('description', $memberCategory->description ?? '') }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> {{ isset($memberCategory) ? 'Update' : 'Create' }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div class="overlay" style="display: none;">
        <div class="spinner">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            text-align: center;
        }

        .spinner-border {
            width: 3rem;
            height: 3rem;
        }
    </style>
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            $('#member-category-form').on('submit', function(e) {
                e.preventDefault();

                // Show loading overlay
                $('.overlay').fadeIn(200);

                $.ajax({
                    url: $(this).attr('action'),
                    method: $(this).attr('method'),
                    data: $(this).serialize(),
                    success: function(response) {
                        $('.overlay').fadeOut(200);

                        if (response.alertType === 'success') {
                            toastr.success(response.message);
                            setTimeout(function() {
                                window.location.href = response.redirectTo;
                            }, 1000);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        $('.overlay').fadeOut(200);

                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            Object.keys(errors).forEach(function(key) {
                                const input = $('#' + key);
                                input.addClass('is-invalid');
                                input.siblings('.invalid-feedback').text(errors[key][0]);
                            });
                        } else {
                            toastr.error('An error occurred. Please try again.');
                        }
                    }
                });
            });

            // Remove validation errors on input
            $('input, textarea').on('input', function() {
                $(this).removeClass('is-invalid');
                $(this).siblings('.invalid-feedback').text('');
            });
        });
    </script>
@endpush