@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $page_title = empty($service->id) ? __('Create new Service') : __('Edit Service');
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <form id="service-form" method="post" enctype="multipart/form-data"
            action="{{ empty($service->id) ? route('services.store') : route('services.update', $service->id) }}">
            @if (!empty($service->id))
                @method('PATCH')
            @endif
            <div class="card">
                <div class="card-body">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div class="notes">(*) Datos obligatorios.</div>
                    </div>
                    <div class="form-group">
                        <label for="file_image">{{ __('Image') }}</label>
                        <div>
                            <img id="service_image" alt="Image"
                                style="padding-bottom:20px;max-width: 400px; max-height: 400px; object-fit: contain; 
                                @if (!$service || !$service->image) display:none; @endif"
                                @if ($service && $service->image) src="{{ asset('storage/images/' . $service->image) }}" @endif>
                        </div>
                        <div class="col-md-10">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="file_image" name="file_image"
                                    accept="image/*">
                                <label class="custom-file-label" for="file_image">{{ __('Choose file') }}</label>
                            </div>
                            <div id="fileDetails" style="margin-top: 10px; display: none;">
                                <img id="fileThumbnail" src="" alt="Thumbnail"
                                    style="max-width: 150px; max-height: 150px; object-fit: contain; display: block; margin-top: 10px;" />
                            </div>
                            <span id="file_image-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="key">{{ __('Key or SKU') }}</label>
                        <div class="col-md-10">
                            <input class="form-control" id="key" name="key" value="{{ $service->key ?? '' }}">
                            <span id="key-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    @if (count($categories) > 0)
                        <div class="form-group">
                            <label for="category_id">{{ __('Category') }}</label>
                            <div class="col-md-10">
                                <select class="form-control" name="category_id" id="category_id">
                                    <option value="">{{ __('-- Select category --') }}</option>
                                    @foreach ($categories as $id => $name)
                                        <option value="{{ $id }}"
                                            @if (!empty($service->id) && $service->category_id == $id) selected @endif>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="category_id-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    @endif
                    <div class="form-group">
                        <label for="name">*{{ __('Name') }}</label>
                        <div class="col-md-10">
                            <input class="form-control" id="name" name="name" value="{{ $service->name ?? '' }}">
                            <span id="name-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description">*{{ __('Description') }}</label>
                        <div class="col-md-10">
                            <textarea id="description" name="description">{{ $service->description ?? '' }}</textarea>
                            <span id="description-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sat_key">*{{ __('SAT Key') }}</label>
                        <div class="col-md-10">
                            <select class="form-control select2bs4" name="sat_key" id="sat_key">
                                <option value="">{{ __('-- Select SAT key --') }}</option>
                                @if (!empty($service->sat_key))
                                    <option value="{{ $service->sat_key }}" selected>{{ $service->sat_key }}</option>
                                @endif
                            </select>
                            <span id="sat_key-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="unit">*{{ __('Unit') }}</label>
                        <div class="col-md-10">
                            <select class="form-control select2bs4" name="unit" id="unit">
                                <option value="">{{ __('-- Select unit --') }}</option>
                                @if (!empty($service->unit))
                                    <option value="{{ $service->unit }}" selected>{{ $service->unit }}</option>
                                @endif
                            </select>
                            <span id="unit-error" class="invalid-feedback" style="font-weight:bold" role="alert"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="price">*{{ __('Selling Price') }}</label>
                        <div class="col-md-10">
                            <input class="form-control" id="price" name="price"
                                value="{{ $service->price ?? '' }}">
                            <span id="price-error" class="invalid-feedback" style="font-weight:bold"
                                role="alert"></span>
                        </div>
                    </div>
                </div>
            </div>
            {{-- buttons --}}
            <div class="card">
                <div class="card-body">
                    <div class="form-group row" style="margin-bottom:0">
                        <a href="javascript:loadContent('{{ route('services.index') }}')" id="cancel" name="cancel"
                            class="btn btn-default custom-btn">{{ __('Cancel') }}</a>
                        <button type="submit"
                            class="btn btn-info custom-btn">{{ empty($service->id) ? __('Create') : __('Save') }}</button>
                    </div>
                </div>
            </div>
            <br>
        </form>
    </div>
    <script>
        $(function() {
            bsCustomFileInput.init();

            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })

            $('#description').summernote({
                placeholder: '',
                tabsize: 2,
                height: 150,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['fontname', 'bold', 'italic', 'underline', 'clear']],
                    ['fontstyle', ['strikethrough', 'superscript', 'subscript']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link']],
                    ['view', ['codeview']]
                ],
            });

            var fileInput = document.getElementById("file_image");
            var fileLabel = document.querySelector(".custom-file-label");
            var fileDetails = document.getElementById("fileDetails");
            var fileThumbnail = document.getElementById("fileThumbnail");
            var existingImage = document.getElementById("service_image");

            fileInput.addEventListener("change", function() {
                const file = fileInput.files[0];

                if (file) {
                    fileLabel.textContent = file.name;

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        fileThumbnail.src = e.target.result;
                        fileThumbnail.style.display = "block";
                    };
                    reader.readAsDataURL(file);

                    fileDetails.style.display = "block";

                    if (existingImage) {
                        existingImage.style.display = "none";
                    }
                } else {
                    fileLabel.textContent = "{{ __('Choose file') }}";
                    fileDetails.style.display = "none";
                    fileThumbnail.style.display = "none";
                }
            });

            $('#sat_key').select2({
                theme: 'bootstrap4',
                placeholder: "{{ __('-- Select SAT key --') }}",
                minimumInputLength: 3,
                language: {
                    inputTooShort: function(args) {
                        var remainingChars = args.minimum - args.input.length;
                        return "{{ __('Please enter') }} " + remainingChars +
                            " {{ __('or more characters') }}";
                    },
                    searching: function() {
                        return "{{ __('Searching...') }}";
                    },
                    noResults: function() {
                        return "{{ __('No results found') }}";
                    }
                },
                ajax: {
                    url: "{{ route('sat_keys.search') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            search: params.term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.map(function(item) {
                                return {
                                    id: item.clave + ' - ' + item.descripcion,
                                    text: item.clave + ' - ' + item.descripcion
                                };
                            })
                        };
                    },
                    cache: true
                }
            });

            $('#unit').select2({
                theme: 'bootstrap4',
                placeholder: "{{ __('-- Select unit --') }}",
                minimumInputLength: 3,
                language: {
                    inputTooShort: function(args) {
                        var remainingChars = args.minimum - args.input.length;
                        return "{{ __('Please enter') }} " + remainingChars +
                            " {{ __('or more characters') }}";
                    },
                    searching: function() {
                        return "{{ __('Searching...') }}";
                    },
                    noResults: function() {
                        return "{{ __('No results found') }}";
                    }
                },
                ajax: {
                    url: "{{ route('sat_units.search') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            search: params.term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.map(function(item) {
                                return {
                                    id: item.clave + ' - ' + item.descripcion,
                                    text: item.clave + ' - ' + item.descripcion
                                };
                            })
                        };
                    },
                    cache: true
                }
            });
        });
    </script>
@endsection