@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.promotions.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.promotions.update', ['promotion' => $promotion->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">Promotion</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="{{ $promotion->id }}" hidden>
                            <input type="text" class="form-control" id="item_vendor_id" name="item_vendor_id"
                                value=" {{ isset($promotion->item) ? $promotion->item->name . '  |  ' . $promotion->item->item_vendor_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="{{ $promotion->title }}">
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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="form-control" rows="3" name="description">{{ $promotion->description }}</textarea>
                                </div>
                            </div>
                            <!--End Row-->

                            <div class="row mb-4">
                                <label for="item_vendor_id" class="col-md-3 form-label mb-4">Product</label>
                                <div class="col-md-9">
                                    <input class="form-control @error('item_vendor_id') is-invalid @enderror" list="items"
                                        id="item_vendors" placeholder="Type to search...">
                                    <datalist id="items">
                                        @foreach ($products as $p)
                                            <option value="{{ $p->name }} | {{ $p->item_vendor_id }}"
                                                {{ isset($promotion->item) ? ($p->item_vendor_id == $promotion->item->item_vendor_id ? 'selected' : '') : '' }}>
                                        @endforeach
                                    </datalist>
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label for="item_vendor_id" class="col-md-3 form-label mb-4">Start Date</label>
                                <div class="col-md-9">
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="lbl_start_date"><i class="fe fe-calendar"
                                                title="" data-bs-original-title="fe fe-calendar"
                                                aria-label="fe fe-calendar"></i></span>
                                        <input type="date" name="start_date" class="form-control" id="start_date"
                                            value="{{ date('Y-m-d', strtotime($promotion->start_date)) }}">
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label for="item_vendor_id" class="col-md-3 form-label mb-4">End Date</label>
                                <div class="col-md-9">
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="lbl_end_date"><i class="fe fe-calendar"
                                                title="" data-bs-original-title="fe fe-calendar"
                                                aria-label="fe fe-calendar"></i></span>
                                        <input type="date" name="end_date" class="form-control" id="end_date"
                                            value="{{ date('Y-m-d', strtotime($promotion->end_date)) }}">
                                    </div>
                                </div>
                            </div>

                            <!--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="image" 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">
                                        <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 Promotion</button>
                                    <a href="{{ route('web.admin.master-data.promotions.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>

    <!-- 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 = `{{ $promotion->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 image = JSON.parse(`{!! json_encode($promotion->image) !!}`);
        loadURLToInputFiled(image.file_url, 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).'
            }
        });

        let selectedItem = document.getElementById('item_vendors');
        $('#item_vendors').val(`{{ $promotion->item->name . '  |  ' . $promotion->item->item_vendor_id }}`)
        selectedItem.addEventListener('input', function() {
            console.log('this.value :>> ', this.value);
            $("#item_vendor_id").val(this.value);
        });
    </script>
@endsection