@extends('admin.layouts.app')
@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.plans.index') }}">@lang('admin.plans')</a></li>
                    <li class="breadcrumb-item active"><a href="{{ route('admin.plans.create') }}"></a>@lang('admin.create')</li>
                </ol>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div id="alert-placeholder"></div>

                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">@lang('admin.create')</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form id ="planForm" action="{{ route('admin.plans.store') }}" method="POST">
                                    @csrf
                                    <fieldset>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <!-- plan Name -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.name')</label>
                                                    <input type="text" name="name" class="form-control"
                                                        placeholder="@lang('admin.name')">
                                                    <span class="text-danger" id="error-name"></span>
                                                </div>

                                                <!-- period -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.period')</label>
                                                    <select id="period" name="period" class="form-control" required>
                                                        <option value="">@lang('admin.select_a_period')</option>
                                                        <option value="1">1 @lang('admin.month')</option>
                                                        <option value="3">3 @lang('admin.month')</option>
                                                        <option value="6">6 @lang('admin.month')</option>
                                                        <option value="12">12 @lang('admin.month')</option>
                                                    </select>
                                                    <span class="text-danger" id="error-period"></span>
                                                </div>

                                                <!-- plan Status -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('user.status')</label>
                                                    <select class="form-control" name="status">
                                                        <option value="">@lang('user.select')</option>
                                                        <option value="1">@lang('user.active')</option>
                                                        <option value="0">@lang('user.Inactive')</option>
                                                    </select>
                                                    <span class="text-danger" id="error-status"></span>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">

                                                <!-- Package -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.package')</label>
                                                    <select name="package[]" class="select-control packagesSelect">
                                                        @foreach ($packages as $value => $package)
                                                            <option value="{{ $value }}">{{ $package }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <span class="text-danger" id="error-package"></span>
                                                </div>

                                                <!-- notify -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.notify')</label>
                                                    <select id="notify" name="notify[]"
                                                        class="form-control notifySelect">
                                                    </select>
                                                    <span class="text-danger" id="error-notify"></span>
                                                </div>

                                                <!-- description -->
                                                <div class="mb-3">
                                                    <label class="form-label">@lang('admin.description')</label>
                                                    <textarea name="description" class="form-control" rows="3"></textarea>
                                                    <span class="text-danger" id="error-description"></span>
                                                </div>

                                            </div>
                                            <!-- plan image -->
                                            <div class="mb-3 row">
                                                <label for="formFile" class="form-label">@lang('user.image')</label>
                                                <div class="text-center col-md-10">
                                                    <input class="form-control edit-image" type="file" name="image_path"
                                                        accept="image/*" data-plan-id="">
                                                    <span class="text-danger" id="error-image"></span>
                                                </div>
                                                <div class="text-center col-md-2">
                                                    <img id="edit-preview-image-before-upload"
                                                        src="{{ asset('dummy_user.png') }}" alt="plan Image"
                                                        class="img-fluid rounded-circle"
                                                        style="max-width: 70px;width: 70px;height: 70px;">
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>

                                    <button type="submit" class="btn btn-primary" style="margin-top: 30px;">Create</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .hidden {
            display: none;
        }
    </style>
@endsection
@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var notify = @json(\App\Models\Plan::$notify);

            $('.notifySelect').select2({
                dropdownParent: $('body'), // Change this to the desired parent element
                width: '100%',
                placeholder: "@lang('user.select')",
                data: Object.keys(notify).map(function(key) {
                    return {
                        id: key,
                        text: notify[key]
                    };
                })
            });

            $('#planForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.text-danger').text('');

                var formData = new FormData(this);
                //formData.append('_method', 'PUT'); // Laravel uses this to simulate PUT

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        toastr.success(response.message);
                        window.location.href = response.redirect;
                    },
                    error: function(response) {
                        console.log('Error:', response);
                        if (response.status === 422) {
                            let errors = response.responseJSON.errors;
                            for (const [key, value] of Object.entries(errors)) {
                                // Add red border
                                $('input[name="' + key + '"], select[name="' + key + '"]')
                                    .addClass('is-invalid');
                                // Show error message
                                $('#error-' + key).text(value[0]);
                            }
                        }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

            $('.packagesSelect').select2({
                placeholder: "{{ __('admin.roles') }}",
                allowClear: true,
                ajax: {
                    url: "{{ route('admin.fetchPackages') }}",
                    dataType: 'json',
                    processResults: function(data) {
                        // Convert object keys to array of objects
                        var results = Object.keys(data).map(function(key) {
                            return {
                                id: key,
                                text: data[key]
                            };
                        });
                        return {
                            results: results
                        };
                    }
                }
            })

            $('.edit-image').change(function() {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $('#edit-preview-image-before-upload').attr('src', e.target.result);
                };

                reader.readAsDataURL(this.files[0]);
            });
        });
    </script>
@endsection