@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.edit', ['plan' => $plan->id]) }}"></a>Edit</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.edit')</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form id="planForm" action="{{ route('admin.plans.update', ['plan' => $plan->id]) }}"
                                    method="POST">
                                    @csrf
                                    @method('PUT')

                                    <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"
                                                        value="{{ isset($plan) && !empty($plan) ? $plan->name : '' }}"
                                                        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" {{ $plan->period == '1' ? 'selected' : '' }}>
                                                            1
                                                            @lang('admin.month')</option>
                                                        <option value="3" {{ $plan->period == '3' ? 'selected' : '' }}>
                                                            3
                                                            @lang('admin.month')</option>
                                                        <option value="6" {{ $plan->period == '6' ? 'selected' : '' }}>
                                                            6
                                                            @lang('admin.month')</option>
                                                        <option value="12"
                                                            {{ $plan->period == '12' ? 'selected' : '' }}>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>@lang('user.select')</option>
                                                        <option value="1"
                                                            {{ isset($plan) && !empty($plan) && $plan->status == 1 ? 'selected' : '' }}>
                                                            @lang('user.active')</option>
                                                        <option value="0"
                                                            {{ isset($plan) && !empty($plan) && $plan->status == 0 ? 'selected' : '' }}>
                                                            @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 }}"
                                                                @php
                                                                    $plan_package = json_decode($plan->package,true); 
                                                                @endphp
                                                                @if (isset($plan) && $package == $plan_package[0]) selected="selected" @endif>
                                                                {{ $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"
                                                        multiple>
                                                        <option value="">Select notification time</option>
                                                        <option value="3"
                                                            {{ $plan->notify == '3' ? 'selected' : '' }}>3 days before
                                                        </option>
                                                        <option value="7"
                                                            {{ $plan->notify == '7' ? 'selected' : '' }}>1 week before
                                                        </option>
                                                        <option value="14"
                                                            {{ $plan->notify == '14' ? 'selected' : '' }}>2 weeks
                                                            before</option>
                                                    </select>
                                                    <span class="text-danger" id="error-period"></span>
                                                </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">
                                                        @if (isset($plan) && !empty($plan->image_path))
                                                            <img id="edit-preview-image-before-upload"
                                                                src="{{ asset('storage/' . $plan->image_path) }}"
                                                                alt="plan Image" class="img-fluid rounded-circle"
                                                                style="max-width: 70px;width: 70px;height: 70px;">
                                                        @else
                                                            <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;">
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <button type="submit" class="btn btn-primary"
                                        style="margin-top: 30px;">@lang('admin.edit')</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>
        $(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]
                    };
                })
            });

            $('.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
                        };
                    }
                }
            })

            $('#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
                });
            });

            $('.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
{{-- <script>

</script> --}}