@extends('layouts.admin')

@section('container')
    <div class="main-container container-fluid">

        <!-- PAGE-HEADER -->
        <div class="page-header">
            <h1 class="page-title">{{ $title }}</h1>
            <div>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('web.admin.master-data.news.index') }}">Pages</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
                </ol>
            </div>
        </div>
        <!-- PAGE-HEADER END -->

        <!-- ROW-1 OPEN -->
        <form action="{{ route('web.admin.master-data.news.update', ['news' => $news->id]) }}" method="post"
            enctype="multipart/form-data">
            <div class="row">
                @csrf
                @method('PUT')
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">News</div>
                        </div>
                        <div class="card-body">
                            @error('error')
                                <div class="alert alert-danger mb-4" role="alert">
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-hidden="true">×</button>
                                    <strong>Alert!</strong> {{ $message }}
                                </div>
                            @enderror

                            <input type="text" class="form-control" name="id" value="{{ $news->id }}" hidden>

                            <div class="row mb-4">
                                <label class="col-md-3 form-label">Title :</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control  @error('title') is-invalid @enderror"
                                        name='title' value="{{ $news->title }}" required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- <div class="row mb-4">
                                <label class="col-md-3 form-label">Categories :</label>
                                <div class="col-md-9">
                                    <select name="category_id" class="form-control form-select select2"
                                        data-bs-placeholder="Select Category" required>
                                        <option value="">Select Category</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}"
                                                {{ $news->category->id == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div> --}}

                            <!-- Row -->
                            <div class="row">
                                <label class="col-md-3 form-label mb-4">Description :</label>
                                <div class="col-md-9 mb-4">
                                    <textarea class="content" name="description" required>{{ $news->description }}</textarea>
                                </div>
                            </div>
                            <!--End Row-->

                            <!--Row-->
                            <div class="row mb-4">
                                <label class="col-md-3 form-label mb-4">File Upload :</label>
                                <div class="col-md-3">
                                    <input type="file" id="image_1" name="images[0]" class="dropify"
                                        data-bs-height="180" />
                                </div>
                                <div class="col-md-3">
                                    <input type="file" id="image_2" name="images[1]" class="dropify"
                                        data-bs-height="180" />
                                </div>
                                <div class="col-md-3">
                                    <input type="file" id="image_3" name="images[2]" class="dropify"
                                        data-bs-height="180" />
                                </div>
                            </div>
                            <!--End Row-->

                            <div class="row mb-4">
                                <label class="col-md-3 form-label mb-4">Publish :</label>
                                <div class="col-md-9">
                                    <label class="custom-switch form-switch me-5">
                                        <input type="checkbox" name="is_publish" class="custom-switch-input"
                                            {{ $news->is_publish ? 'checked' : '' }}>
                                        <span class="custom-switch-indicator custom-switch-indicator-md"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <!--Row-->
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-9">
                                    <button type="submit" class="btn btn-primary">Save News</button>
                                    <a href="{{ route('web.admin.master-data.news.index') }}"
                                        class="btn btn-default float-end">Discard</a>
                                </div>
                            </div>
                            <!--End Row-->
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- /ROW-1 CLOSED -->
    </div>
@endsection
@section('scripts')
    <!-- FILE UPLOADES JS -->
    <script src="{{ asset('assets/plugins/fileuploads/js/fileupload.js') }}"></script>
    {{-- <script src="{{ asset('assets/plugins/fileuploads/js/file-upload.js') }}"></script> --}}

    <!-- INTERNAL Bootstrap-Datepicker js-->
    <script src="{{ asset('assets/plugins/bootstrap-daterangepicker/daterangepicker.js') }}"></script>

    <script>
        function loadURLToInputFiled(url, index) {
            document.querySelector(`#image_${index}`).setAttribute("data-default-file", url);
            getImgURL(url, (imgBlob) => {
                let fileName = `{{ $news->id }}${index}.png`
                let file = new File([imgBlob], fileName, {
                    type: "image/png",
                    lastModified: new Date().getTime()
                }, 'utf-8');
                let container = new DataTransfer();
                container.items.add(file);
                document.querySelector(`#image_${index}`).files = container.files;
            })
        }
        // xmlHTTP return blob respond
        function getImgURL(url, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                callback(xhr.response);
            };
            xhr.open('GET', url);
            xhr.responseType = 'blob';
            xhr.send();
        }

        let images = JSON.parse(`{!! json_encode($news->images) !!}`);
        console.log('images :>> ', images);
        images.forEach((image, i) => {
            console.log('i :>> ', i);
            loadURLToInputFiled(image.file_url, (i + 1));
        });

        $('.dropify').dropify({
            messages: {
                'default': 'Drag and drop a file here or click',
                'replace': 'Drag and drop or click to replace',
                'remove': 'Remove',
                'error': 'Ooops, something wrong appended.'
            },
            error: {
                'fileSize': 'The file size is too big (2M max).'
            }
        });
    </script>
@endsection