@section('modal_title', __('frontend.add_service'))

<div class="main-card mb-3 card">
    <div class="card-body">
        <form id="addSubmit" action="{{ route('frontend.services.store') }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            @if (auth()->user()->hasRole('Super Admin'))
                <div class="form-group mb-3">
                    <label for="business_id" class="form-label">{{ __('core.business_name') }} : * </label>
                    <select name="business_id" id="business_id" class="form-control" required>
                        <option value="">{{ __('core.please_select') }}</option>
                        @foreach ($data['businesses'] as $business)
                            <option value="{{ $business->id }}">{{ $business->business_name }}</option>
                        @endforeach
                    </select>
                </div>
            @else
                <input type="hidden" name="business_id" value="{{ auth()->user()->business_id }}">
            @endif

            {{-- <div class="position-relative mb-3">
                <label for="icon_id" class="form-label">{{ __('core.icon') }} : * </label>
                <select name="icon_id" id="icon_id" class="form-control" required>
                    <option value="">{{ __('core.please_select') }}</option>
                    @foreach ($data['icons'] as $icon)
                        <option value="{{ $icon->id }}"> <i class="{{ $icon->icon }}"></i>
                        </option>
                    @endforeach
                </select>
            </div> --}}

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="photo">{{ __('core.photo') }}:</label>
                    <input type="file" class="form-control" name="photo" id="photo" data-role="file-upload"
                        onchange="previewPhoto(event)">
                    @error('photo')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                {{-- Photo Preview --}}
                <div class="col-md-6 mb-3">
                    <img id="photo-preview" class="float-end" alt="Image Preview" style="display:none;" width="200"
                        height="200">
                </div>
            </div>

            <div class="position-relative mb-3">
                <label for="title" class="form-label">{{ __('frontend.title') }}</label>
                <input name="title" id="title" placeholder="{{ __('frontend.title') }}" type="text"
                    class="form-control">
            </div>

            <div class="position-relative mb-3">
                <label for="note">{{ __('frontend.description') }}:</label>
                <textarea name="description" id="description" class="form-control">{{ old('description') }}</textarea>
            </div>

            <button class="mt-1 btn btn-primary">{{ __('core.submit') }}</button>
        </form>
    </div>
</div>


<script>
    function previewPhoto(event) {
        const file = event.target.files[0];
        const preview = document.getElementById('photo-preview');

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = "block";
            };
            reader.readAsDataURL(file);
        } else {
            preview.style.display = "none";
        }
    }
</script>