@extends('admin.layouts.admin')
@section('content')
<style>
    .img-bg {
        padding-bottom: 310px;
    }
</style>
<section class="pc-container">
    <div class="pc-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.categories') }}">Categories</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">Category</li>
                        </ul>
                    </div>
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h3 class="mb-0">Category</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if($action == 'Edit')
        <form class="" role="form" id="edit_form" action="{{ route('admin.categories.update',$record->id) }}" method="post" enctype="multipart/form-data">

            @else
            <form class="" method="POST" id="add_form" action="{{ route('admin.categories.store') }}" enctype="multipart/form-data">
                @endif
                @csrf
                <div class="row pt-0">
                    <div class="col-md-12">
                        @if(isset($record->id))
                        @php $id=$record->id @endphp
                        @else
                        @php $id=0; @endphp
                        @endif
                        <div class="card">
                            <div class="card-header">
                                <h5>{{ $title }}</h5>
                            </div>
                            <div class="card-body pt-2">
                                <div class="row">
                                    <!-- @if(isset($record->image))
                                    @php $image=$record->image @endphp
                                    @php $imageUrl=asset(Storage::url('categories/'.$record->image)) @endphp
                                    @elseif(old('image'))
                                    @php $image=old('image'); @endphp
                                    $imageUrl=""
                                    @else
                                    @php $image='';
                                    $imageUrl="" @endphp
                                    @endif

                                    <div class="col-lg-4 col-md-6">
                                        <input type="hidden" class="form-control old_image" id="old_image" name="old_image" value="{{$image}}">
                                        <div class="upload__box">
                                            <div class="upload__img-wrap" style="height: 312px;">
                                                <div class='upload__img-box'>
                                                    <div style='background-image: url("{{$imageUrl}}");' data-number="{{$id}}" data-file='{{$image}}' class='img-bg'>
                                                        <div class='upload__img-close' data-id="{{$id}}" data-type="I"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="upload__btn-box mt-3">
                                                <label class="upload__btn">
                                                    Upload file
                                                    <input type="file" name="image" data-max_length="1" value="" class="form-control upload__inputfile" accept="image/jpeg, image/jpg, image/png, application/pdf">
                                                </label>
                                            </div>

                                        </div>
                                    </div> -->

                                    <!-- <div class="col-lg-6 col-md-6"> -->
                                    <!-- <div class="row"> -->


                                    <div class="col-md-4 col-sm-6 col-12 form-group">
                                        @if(isset($record->name))
                                        @php $name=$record->name @endphp
                                        @elseif(old('name'))
                                        @php $name=old('name'); @endphp
                                        @else
                                        @php $name=''; @endphp
                                        @endif

                                        <label class="form-label">Name <span class="text-danger">*</span></label>
                                        <input required name="name" type="text" class="form-control" placeholder="Name" value="{{ $name }}" autofocus>
                                    </div>

                                    <div class="col-md-4 col-sm-6 col-12 form-group">
                                        @if(isset($record->parent_id))
                                        @php $parent_id=$record->parent_id @endphp
                                        @elseif(old('parent_id'))
                                        @php $parent_id=old('parent_id'); @endphp
                                        @else
                                        @php $parent_id=0; @endphp
                                        @endif
                                        <label class="form-label">Parent</label>
                                        <select class="form-control" name="parent_id">
                                            <option value="">-- Select --</option>
                                            @foreach($categories as $category)
                                            <option value="{{ $category->id }}" {!! ($parent_id==$category->id) ? 'selected' : '' !!}>{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <div class="col-md-4 col-sm-6 col-12 form-group">
                                        @if(isset($record->alias))
                                        @php $alias=$record->alias @endphp
                                        @elseif(old('alias'))
                                        @php $alias=old('alias'); @endphp
                                        @else
                                        @php $alias=''; @endphp
                                        @endif
                                        <label class="form-label">Alias</label>
                                        <input name="alias" type="text" class="form-control" placeholder="Alias" value="{{ $alias }}" autofocus>
                                    </div>



                                    <div class="col-md-12 col-sm-12 col-12 form-group">
                                        @if(isset($record->description))
                                        @php $description=$record->description @endphp
                                        @elseif(old('description'))
                                        @php $description=old('description'); @endphp
                                        @else
                                        @php $description=''; @endphp
                                        @endif
                                        <label class="form-label">Description </label>
                                        <textarea name="description" class="form-control ckeditor" placeholder="Description">{!! $description !!}</textarea>
                                    </div>

                                    <div class="col-md-4 col-sm-6 col-12 form-group">
                                        @if(isset($record->rank))
                                        @php $rank=$record->rank @endphp
                                        @elseif(old('rank'))
                                        @php $rank=old('rank'); @endphp
                                        @else
                                        @php $rank=''; @endphp
                                        @endif
                                        <label class="form-label">Rank </label>
                                        <input name="rank" type="number" class="form-control" placeholder="Item Rank" value="{{ $rank }}">
                                    </div>

                                    <div class="col-md-4 col-sm-6 col-12" data-bs-toggle="tooltip">
                                        @if(isset($record->active))
                                        @php $active=$record->active @endphp
                                        @elseif(old('active'))
                                        @php $active=old('active'); @endphp
                                        @else
                                        @php $active=1; @endphp
                                        @endif
                                        <div class="form-check form-switch custom-switch-v1 mt-4 pt-3">
                                            <input name="active" type="checkbox" class="form-check-input input-primary" id="activeCheckbox" value='1' {!! ($active==1) ? 'checked' : '' !!}>
                                            <label class="form-check-label" for="activeCheckbox">Active</label>
                                        </div>
                                    </div>
                                    <!-- </div> -->
                                    <!-- </div> -->
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h5>Category SEO Detail</h5>
                            </div>
                            <div class="card-body pt-2">
                                <div class="row">
                                    <div class="col-md-4 col-sm-6 col-12 form-group">
                                        @if(isset($record->meta_title))
                                        @php $meta_title=$record->meta_title @endphp
                                        @elseif(old('meta_title'))
                                        @php $meta_title=old('meta_title'); @endphp
                                        @else
                                        @php $meta_title=''; @endphp
                                        @endif
                                        <label class="form-label">Meta Title</label>
                                        <input name="meta_title" type="text" class="form-control" placeholder="Meta Title" value="{{ $meta_title }}" autofocus>
                                    </div>

                                    <div class="col-md-4 col-sm-6 col-12 form-group">
                                        @if(isset($record->meta_keyword))
                                        @php $meta_keyword=$record->meta_keyword @endphp
                                        @elseif(old('meta_keyword'))
                                        @php $meta_keyword=old('meta_keyword'); @endphp
                                        @else
                                        @php $meta_keyword=''; @endphp
                                        @endif
                                        <label class="form-label">Meta Keyword</label>
                                        <input name="meta_keyword" type="text" class="form-control" placeholder="Meta Keyword" value="{{ $meta_keyword }}" autofocus>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-12 form-group">
                                        @if(isset($record->og_title))
                                        @php $og_title=$record->og_title @endphp
                                        @elseif(old('og_title'))
                                        @php $og_title=old('og_title'); @endphp
                                        @else
                                        @php $og_title=''; @endphp
                                        @endif
                                        <label class="form-label">OG Title</label>
                                        <input name="og_title" type="text" class="form-control" placeholder="OG Title" value="{{ $og_title }}" autofocus>
                                    </div>


                                    <div class="col-md-12 col-sm-12 col-12 form-group">
                                        @if(isset($record->meta_description))
                                        @php $meta_description=$record->meta_description @endphp
                                        @elseif(old('meta_description'))
                                        @php $meta_description=old('meta_description'); @endphp
                                        @else
                                        @php $meta_description=''; @endphp
                                        @endif
                                        <label class="form-label">Meta Description </label>
                                        <textarea name="meta_description" class="form-control ckeditor" placeholder="Meta Description">{!! $meta_description !!}</textarea>
                                    </div>

                                    <div class="col-md-12 col-sm-12 col-12 form-group">
                                        @if(isset($record->og_description))
                                        @php $og_description=$record->og_description @endphp
                                        @elseif(old('og_description'))
                                        @php $og_description=old('og_description'); @endphp
                                        @else
                                        @php $og_description=''; @endphp
                                        @endif
                                        <label class="form-label">OG Description </label>
                                        <textarea name="og_description" class="form-control ckeditor" placeholder="OG Description">{!! $og_description !!}</textarea>
                                    </div>

                                 
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="row my-5">
                        <div class="col-6">
                            <button class="btn btn-primary" type="submit">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
</section>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {

        var imgWrap = "";
        var imgArray = [];

        $(document).on('change', '.upload__inputfile', function(e) {

            if ($(this).attr('data-id') == 'video_file') {

                $(this).closest('.upload__box').find('video source').attr('src', URL.createObjectURL(this.files[0]))
                $(this).closest('.upload__box').find('video')[0].load()

            } else {

                imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
                var maxLength = $(this).attr('data-max_length');

                var files = e.target.files;
                var filesArr = Array.prototype.slice.call(files);
                var iterator = 0;

                console.log('filesArr ' + filesArr);
                filesArr.forEach(function(f, index) {

                    var len = 0;
                    for (var i = 0; i < imgArray.length; i++) {
                        if (imgArray[i] !== undefined) {
                            len++;
                        }
                    }
                    if (len > maxLength) {
                        return false;
                    } else {
                        imgArray.push(f);

                        var reader = new FileReader();
                        reader.onload = function(e) {
                            console.log(f.type);
                            if (f.type == 'application/pdf') {
                                var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg' ><div class='upload__img-close' data-type='I'></div><img  src='https://cdn-icons-png.flaticon.com/128/337/337946.png'></div></div>";

                            } else {
                                var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close' data-type='I'></div></div></div>";

                            }
                            // imgWrap.append(html);
                            imgWrap.html(html);
                            iterator++;
                        }
                        reader.readAsDataURL(f);
                    }
                    // }
                });
                // });
            }
        });

        $('body').on('click', ".upload__img-close", function(e) {
            if (confirm('Are you sure you want to delete ?')) {
                var file = $(this).parent().data("file");
                var id = $(this).attr('data-id');
                var file_type = $(this).attr('data-type');
                that = this;
                // For some browsers, `attr` is undefined; for others,
                // `attr` is false.  Check for both.
                if (typeof id !== 'undefined' && id !== false) {
                    $.ajax({
                        url: "{{ route('admin.categories.removeFile') }}",
                        type: 'POST',
                        data: {
                            // _method: 'DELETE',
                            id: id,
                            type: file_type
                        },
                        success: function(res) {
                            if (res.status == true) {

                            }
                        }
                    });
                }
                for (var i = 0; i < imgArray.length; i++) {
                    if (imgArray[i].name === file) {
                        imgArray.splice(i, 1);
                        break;
                    }
                }
                $(this).parentsUntil('.row').find('.old_image').val('');
                console.log($(this).parentsUntil('.row').find('.old_image').val());
                $(this).parent().parent().remove();
                $(this).parent().children().remove();
            }
        });

    });
</script>
@endpush