@extends('admin.layouts.admin')
@section('content')
<style>
    .img-bg {
        padding-bottom: 150px;
    }
    .upload__img-wrap{
        height: 150px;

    }
</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.colors') }}">Colors</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">Color</li>
                        </ul>
                    </div>
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h3 class="mb-0">Color</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>
                                {{ $error }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
        @if($action == 'Edit')
        <form class="" role="form" id="edit_form" action="{{ route('admin.colors.update',$record->id) }}" method="post" enctype="multipart/form-data">

            @else
            <form class="" method="POST" id="add_form" action="{{ route('admin.colors.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('colors/'.$record->image)) @endphp
                                    @elseif(old('image'))
                                    @php $image=old('image'); @endphp
                                    $imageUrl=""
                                    @else
                                    @php $image='';
                                    $imageUrl="" @endphp
                                    @endif

                                    <div class="col-lg-2 col-md-3">
                                        <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" >
                                                <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-10 col-md-9">
                                    <div class="row">


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

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

                                    <div class="col-md-12 col-sm-12 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 }}">
                                    </div>

                                    <div class="col-md-12 col-sm-12 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->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-12 col-sm-12 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-2 ">
                                            <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>

                    <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.colors.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