@extends('layouts.admin')
@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.create') }} {{ trans('cruds.company.title_singular') }}
    </div>

    <div class="card-body">
        <form action="{{ route("admin.companies.store") }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
                <label for="name">{{ trans('cruds.company.fields.name') }}*</label>
                <input type="text" id="name" name="name" class="form-control" value="{{ old('name', isset($company) ? $company->name : '') }}" required>
                @if($errors->has('name'))
                    <em class="invalid-feedback">
                        {{ $errors->first('name') }}
                    </em>
                @endif
                <p class="helper-block">
                    {{ trans('cruds.company.fields.name_helper') }}
                </p>
            </div>
            <div class="form-group {{ $errors->has('address') ? 'has-error' : '' }}">
                <label for="address">{{ trans('cruds.company.fields.address') }}</label>
                <input type="text" id="address" name="address" class="form-control" value="{{ old('address', isset($company) ? $company->address : '') }}">
                @if($errors->has('address'))
                    <em class="invalid-feedback">
                        {{ $errors->first('address') }}
                    </em>
                @endif
                <p class="helper-block">
                    {{ trans('cruds.company.fields.address_helper') }}
                </p>
            </div>
            <div class="form-group {{ $errors->has('telephone') ? 'has-error' : '' }}">
                <label for="telephone">{{ trans('cruds.company.fields.telephone') }}</label>
                <input type="text" id="telephone" name="telephone" class="form-control" value="{{ old('telephone', isset($company) ? $company->telephone : '') }}">
                @if($errors->has('telephone'))
                    <em class="invalid-feedback">
                        {{ $errors->first('telephone') }}
                    </em>
                @endif
                <p class="helper-block">
                    {{ trans('cruds.company.fields.address_helper') }}
                </p>
            </div>
            <div class="form-group {{ $errors->has('description') ? 'has-error' : '' }}">
                <label for="description">{{ trans('cruds.company.fields.description') }}</label>
                <textarea id="description" name="description" class="form-control ">{{ old('description', isset($company) ? $company->description : '') }}</textarea>
                @if($errors->has('description'))
                    <em class="invalid-feedback">
                        {{ $errors->first('description') }}
                    </em>
                @endif
                <p class="helper-block">
                    {{ trans('cruds.company.fields.description_helper') }}
                </p>
            </div>
            <label for="priority">Les Services</label>

            <input type="text" id="services-input" class="form-control">
            <div id="services-list"></div>
            <input type="hidden" name="services-data" id="services-data-input">
           

            @if(auth()->user()->isAdmin()) {{-- Check if the user is an admin --}}
             
            <div class="form-group">
                <label for="priority">Priorité</label>
                <input type="number" id="priority" name="priority" class="form-control" value="{{ old('priority', $company->priority ?? 0) }}">
            </div>
            <div class="form-group {{ $errors->has('owner') ? 'has-error' : '' }}">
                <label for="owner">propriétaire</label>
            <select id="user_id" name="user_id" class="form-control">
                @foreach($users as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>
        </div>
        @else
        <div class="form-group {{ $errors->has('owner') ? 'has-error' : '' }}">
            <label for="owner">propriétaire</label>
        <select id="user_id" name="user_id" class="form-control">
                <option value="{{ auth()->user()->id }}">{{ auth()->user()->name }}</option>
        </select>
    </div>
    

            @endif
            <div class="form-group {{ $errors->has('city_id') ? 'has-error' : '' }}">
                <label for="city">{{ trans('cruds.company.fields.city') }}</label>
                <select name="city_id" id="city" class="form-control select2">
                    @foreach($cities as $id => $city)
                        <option value="{{ $id }}" {{ (isset($company) && $company->city ? $company->city->id : old('city_id')) == $id ? 'selected' : '' }}>{{ $city }}</option>
                    @endforeach
                </select>
                @if($errors->has('city_id'))
                    <em class="invalid-feedback">
                        {{ $errors->first('city_id') }}
                    </em>
                @endif
            </div>
             <div class="form-group">
                <label for="video">Company Video</label>
                <input type="file" id="video" name="video" class="form-control">
            </div>
    <div class="form-group">
        <label for="gallery">Company Gallery (Multiple Images)</label>
        <input type="file" id="gallery" name="gallery[]" class="form-control" multiple>
    </div>
            <div class="form-group {{ $errors->has('categories') ? 'has-error' : '' }}">
                <label for="categories">{{ trans('cruds.company.fields.categories') }}
                    <span class="btn btn-info btn-xs select-all">{{ trans('global.select_all') }}</span>
                    <span class="btn btn-info btn-xs deselect-all">{{ trans('global.deselect_all') }}</span></label>
                <select name="categories[]" id="categories" class="form-control select2" multiple="multiple">
                    @foreach($categories as $id => $categories)
                        <option value="{{ $id }}" {{ (in_array($id, old('categories', [])) || isset($company) && $company->categories->contains($id)) ? 'selected' : '' }}>{{ $categories }}</option>
                    @endforeach
                </select>
                @if($errors->has('categories'))
                    <em class="invalid-feedback">
                        {{ $errors->first('categories') }}
                    </em>
                @endif
                <p class="helper-block">
                    {{ trans('cruds.company.fields.categories_helper') }}
                </p>
            </div>

         
            
            <div class="form-group">
                <label for="subcategories">Select Subcategories</label>
                <select name="subcategories[]" id="subcategories" class="form-control select2" multiple="multiple"></select>
            </div>

            <div class="form-group">
                <label for="logo">{{ trans('cruds.company.fields.logo') }}</label>
                <input type="file" name="image" class="form-control" id="logo">
            </div>
        
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
            @endif

            <div>
                <input class="btn btn-danger" type="submit" value="{{ trans('global.save') }}">
            </div>
        </form>


    </div>
</div>

@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
<script>
$(document).ready(function () {
    let  servicesData = [];

    $('#categories').select2(); // Initialize Select2 for categories
    $('#subcategories').select2(); // Initialize Select2 for subcategories

    $('#categories').on('change', function () {
        var selectedCategories = $(this).val(); // Get selected category IDs

        // Make an AJAX request to fetch subcategories based on selected categories
        $.ajax({
            url: "{{ route('get-subcategories') }}",
            method: 'GET',
            data: { categories: selectedCategories },
            success: function (data) {
                // Clear and update the subcategory select options
                $('#subcategories').empty();
                $.each(data, function (key, value) {
                    $('#subcategories').append('<option value="' + key + '">' + value + '</option>');
                });
                $('#subcategories').trigger('change'); // Notify Select2 of changes
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });
    const servicesList = $('#services-list');
    const servicesInput = $('#services-input');
    

    servicesInput.on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();

            const inputValue = servicesInput.val().trim();
            if (inputValue !== '') {
            if (!servicesData.includes(inputValue)) {
                const serviceItem = $('<div class="service-item">' + inputValue + '</div>');
                servicesList.append(serviceItem);
                servicesData.push(inputValue);
                $('#services-data-input').val(JSON.stringify(servicesData));
                servicesInput.val('');
            }
            }
        }
    });
    servicesList.on('click', '.service-item', function() {
    const serviceItem = $(this).text().trim();
    const confirmDelete = window.confirm("Are you sure you want to delete this service?");
    
    if (confirmDelete) {
        servicesData = servicesData.filter(service => service !== serviceItem);
        $('#services-data-input').val(servicesData.join(', '));
        $(this).remove();
        console.log('Service deleted:', serviceItem);
    } else {
        console.log('Service not deleted:', serviceItem);
    }
});





});
    Dropzone.options.logoDropzone = {
    url: '{{ route('admin.companies.storeMedia') }}',
    maxFilesize: 2, // MB
    acceptedFiles: '.jpeg,.jpg,.png,.gif',
    maxFiles: 1,
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 2,
      width: 4096,
      height: 4096
    },
    success: function (file, response) {
      $('form').find('input[name="logo"]').remove()
      $('form').append('<input type="hidden" name="logo" value="' + response.name + '">')
    },
    removedfile: function (file) {
      file.previewElement.remove()
      if (file.status !== 'error') {
        $('form').find('input[name="logo"]').remove()
        this.options.maxFiles = this.options.maxFiles + 1
      }
    },
    init: function () {
@if(isset($company) && $company->logo)
      var file = {!! json_encode($company->logo) !!}
          this.options.addedfile.call(this, file)
      this.options.thumbnail.call(this, file, file.url)
      file.previewElement.classList.add('dz-complete')
      $('form').append('<input type="hidden" name="logo" value="' + file.file_name + '">')
      this.options.maxFiles = this.options.maxFiles - 1
@endif
    },
    error: function (file, response) {
        if ($.type(response) === 'string') {
            var message = response //dropzone sends it's own error messages in string
        } else {
            var message = response.errors.file
        }
        file.previewElement.classList.add('dz-error')
        _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
        _results = []
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i]
            _results.push(node.textContent = message)
        }

        return _results
    }
}
</script>
<style>
    #services-list {
        display: flex;
        flex-wrap: wrap;
    }

    #services-list > div {
        background-color: #337ab7;
        color: white;
        padding: 4px 8px;
        border-radius: 5px;
        margin: 4px;
        cursor: pointer;
    }
</style>
@stop