@extends('admin.layouts.app')
@section('content')
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <form action="{{ route('admin.plan.store') }}" method="POST" id="save_form" class="form-example" enctype="multipart/form-data">
                            @csrf
                            <div class="card card-outline card-primary mt-4">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        @isset($page_title)
                                            {{ $page_title }}
                                        @endisset
                                    </h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-md-6 form_div">
                                                <div class="form-group">
                                                    <label for="slug">Slug <span class="text-danger">*</span> </label>
                                                    <input type="text" class="form-control" name="slug" value="{{old('slug')}}" placeholder="Enter Slug...">
                                                    @error('slug')
                                                        <span class="text-danger">{{$message}}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6 form_div">
                                                <div class="form-group">
                                                    <label for="title">Title <span class="text-danger">*</span> </label>
                                                    <input type="text" class="form-control" name="title" value="{{old('title')}}" placeholder="Enter Title...">
                                                    @error('title')
                                                        <span class="text-danger">{{$message}}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-3 form_div">
                                                <div class="form-group">
                                                    <label for="amount">Amount<span class="text-danger">*</span> </label>
                                                    <input type="text" class="form-control" name="amount" value="{{old('amount')}}" placeholder="Enter Amount...">
                                                    @error('amount')
                                                        <span class="text-danger">{{$message}}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-3 form_div">
                                                <div class="form-group">
                                                    <label for="discounted_price">Discounted Price<span class="text-danger">*</span> </label>
                                                    <input type="text" class="form-control" name="discounted_price" value="{{old('discounted_price')}}" placeholder="Enter Discounted Price...">
                                                    @error('discounted_price')
                                                        <span class="text-danger">{{$message}}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Image</label>
                                                    <div class="custom-file">
                                                        <input type="file" name="image" id="img_input1" class="custom-file-input" accept="image/*">
                                                        <label class="custom-file-label" for="customFile">Choose file</label>
                                                    </div>
                                                    <div class="p-2">
                                                        <img id="img1" src="{{ asset('backend/img/no-image.png') }}" height="100px" width="100px">
                                                    </div>
                                                    @error('image')
                                                        <span class="text-danger">{{$message}}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Cosmofeed Before Discount URL</label>
                                                    <input type="text" name="cosmofeed_before_discount_url" class="form-control" value="{{old('cosmofeed_before_discount_url')}}" placeholder="Enter Cosmofeed Before Discount URL...">
                                                    @error('cosmofeed_before_discount_url')
                                                        <span class="text-danger">{{$message}}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Cosmofeed After Discount URL</label>
                                                    <input type="text" name="cosmofeed_after_discount_url" class="form-control" value="{{old('cosmofeed_after_discount_url')}}" placeholder="Enter Cosmofeed After Discount URL...">
                                                    @error('cosmofeed_after_discount_url')
                                                        <span class="text-danger">{{$message}}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            @for($i=1; $i<=$plan_purchase_commission_level->content; $i++)
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Commission Amount for Level {{ $i }} <span class="text-danger">*</span></label>
                                                        <input type="number" step="0.01" name="commission[]" class="form-control" @isset(old('commission')[$i-1]) value="{{old('commission')[$i-1]}}" @endisset placeholder="Amount for Level {{ $i }}... " required>
                                                        @error('commission.' . ($i-1))
                                                            <span class="text-danger">{{ str_replace('.'.$i-1,' Amount for Level '.$i,$message) }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            @endfor
                                        </div>
                                        <div class="row" id="poins">
                                            @if(old('points', []))
                                                @foreach (old('points', []) as $point_key=>$old_point)
                                                    <div class="col-md-5 form_div{{$point_key+1}}">
                                                        <div class="form-group">
                                                            <label>Point {{$point_key+1}}<span class="text-danger">*</span> </label>
                                                            <input type="text" class="form-control" name="points[]" value="{{$old_point}}" placeholder="Enter Point..." required>
                                                            @error('points.' . ($point_key))
                                                                <span class="text-danger">{{ str_replace('.'.$point_key,' '.$point_key+1,$message) }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    @if($point_key == 0)
                                                        <div class="col-md-1 form_div">
                                                            <div class="form-group" style="padding-top: 35px;">
                                                                <a class="btn btn-outline-primary btn-sm mr-1 mb-1" onclick="addField()">
                                                                    <i class="fas fa-plus"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="col-md-1 form_div{{$point_key+1}}">
                                                            <div class="form-group" style="padding-top: 35px;">
                                                                <a class="btn btn-outline-danger btn-sm mr-1 mb-1" onclick="removeField({{$point_key+1}})">
                                                                    <i class="fas fa-trash"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            @else
                                                <div class="col-md-5 form_div">
                                                    <div class="form-group">
                                                        <label>Point 1<span class="text-danger">*</span> </label>
                                                        <input type="text" class="form-control" name="points[]" placeholder="Enter Point..." required>
                                                    </div>
                                                </div>
                                                <div class="col-md-1 form_div">
                                                    <div class="form-group" style="padding-top: 35px;">
                                                        <a class="btn btn-outline-primary btn-sm mr-1 mb-1" onclick="addField()">
                                                            <i class="fas fa-plus"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">Course List</h5>
                                    @error(old('course_ids'))
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="card-body table-responsive p-2">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th class="text-center"><input type="checkbox" id="all_plans"></th>
                                                <th class="text-center">Image</th>
                                                <th class="text-center">Name</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($courses as $course)
                                                <tr>
                                                    <td class="text-center">
                                                        <input type="checkbox" name="course_ids[]" value="{{ $course->id }}" class="plan_checkboxes" @if(in_array($course->id,old('course_ids')??[])) checked @endif>
                                                    </td>
                                                    <td class="text-center">
                                                        <img src="{{ asset('frontend/images/courses/' . $course->image) }}" onerror="this.onerror=null;this.src='{{ asset('backend/img/no-image.png') }}'" style="height: 50px;width: 50px;">
                                                    </td>
                                                    <td class="text-center">{{ $course->name }}</td>
                                                </tr>
                                            @empty
                                                <tr class="footable-empty">
                                                    <td colspan="11">
                                                        <center style="padding: 70px;"><i class="far fa-frown" style="font-size: 100px;"></i><br>
                                                            <h2>Nothing Found</h2>
                                                        </center>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Short Description</label>
                                        <textarea name="short_description" class="form-control">{{old('short_description')}}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea id="summernote" name="description">{{old('description')}}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">SEO Section</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-md-6 form_div">
                                                <div class="form-group">
                                                    <label for="seo_title">Seo Title</label>
                                                    <input type="text" class="form-control" name="seo_title" value="{{old('seo_title')}}" placeholder="Enter Seo Title...">
                                                </div>
                                            </div>
                                            <div class="col-md-6 form_div">
                                                <div class="form-group">
                                                    <label for="seo_keyword">Seo Keyword</label>
                                                    <input type="text" class="form-control" name="seo_keyword" value="{{old('seo_keyword')}}" placeholder="Enter Seo Keyword...">
                                                </div>
                                            </div>
                                            <div class="col-md-12 form_div">
                                                <div class="form-group">
                                                    <label for="seo_description">Seo Description</label>
                                                    <textarea class="form-control" name="seo_description" placeholder="Enter Seo Description...">{{old('seo_description')}}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer text-center">
                                            <button type="button" class="btn btn-outline-success mt-1 mb-1" onclick="confirmSave('save_form')"><i class="fa fa-check" aria-hidden="true"></i> SAVE</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>

    @push('js')
        <script>
            img_input1.onchange = evt => {
                const [file] = img_input1.files;
                if (file) {
                    img1.src = URL.createObjectURL(file);
                }
            }

            @if(old('points', []))
                var x = {{count(old('points', []))}};
            @else
                var x = 1;
            @endif

            function addField() {
                x++;
                $('#poins').append('<div class="col-md-5 form_div' + x + '">' +
                                        '<div class="form-group">' +
                                            '<label>Point ' + x + '<span class="text-danger">*</span> </label>' +
                                            '<input type="text" class="form-control" name="points[]" placeholder="Enter Point..." required>' +
                                        '</div>' +
                                    '</div>' +
                                    '<div class="col-md-1 form_div' + x + '">' +
                                        '<div class="form-group" style="padding-top: 35px;">' +
                                            '<a class="btn btn-outline-danger btn-sm mr-1 mb-1" onclick="removeField('+x+')">' +
                                                '<i class="fas fa-trash"></i>' +
                                            '</a>' +
                                        '</div>' +
                                    '</div>');
            }

            function removeField(remove_id) {
                $('.form_div' + remove_id + '').remove()
                x--;
            }

            $(checkCheckBox())

            $('#all_plans').change(function() {
                $('.plan_checkboxes').prop('checked', this.checked);
            });

            $('.plan_checkboxes').change(function() {
                checkCheckBox()
            });

            function checkCheckBox() {
                if ($('.plan_checkboxes:checked').length == $('.plan_checkboxes').length) {
                    $('#all_plans').prop('checked', true);
                } else {
                    $('#all_plans').prop('checked', false);
                }
            }
        </script>
    @endpush
@endsection