@extends('admin.layout.master')

@section('title', isset($slider) ? __('admin.edit_slider') : __('admin.add_slider'))

@section('styles')

@endsection

@section('content')

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ isset($slider) ? __('admin.edit_slider') : __('admin.add_slider') }}</h5>
                        <div>
                            <a href="{{ route('admin.sliders.index') }}" class="btn btn-secondary mb-3">
                                {{ __('admin.back_to_sliders') }}
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <form
                            action="{{ isset($slider) ? route('admin.sliders.update', $slider->id) : route('admin.sliders.store') }}"
                            method="POST" enctype="multipart/form-data">
                            @csrf
                            @if (isset($slider))
                                @method('PUT')
                            @endif
                            <div class="modal-body">
                                <div class="row">
                                    <!-- Slider Name Inputs -->
                                    <div class="col-md-6">
                                        <label for="name_en" class="form-label">{{ __('admin.name_en') }}</label>
                                        <input type="text" class="form-control" id="name_en" name="name[en]"
                                            value="{{ old('name[en]', isset($slider) ? $slider->getTranslation('name', 'en') : '') }}"
                                            placeholder="{{ __('admin.name_en') }}">
                                        @error('name.en')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6">
                                        <label for="name_ar" class="form-label">{{ __('admin.name_ar') }}</label>
                                        <input type="text" class="form-control" id="name_ar" name="name[ar]"
                                            value="{{ old('name[ar]', isset($slider) ? $slider->getTranslation('name', 'ar') : '') }}"
                                            placeholder="{{ __('admin.name_ar') }}">
                                        @error('name.ar')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <br>

                                <!-- Slider Description Inputs -->
                                <div class="mb-3">
                                    <label for="description_en" class="form-label">{{ __('admin.description_en') }}</label>
                                    <textarea class="form-control" id="description_en" name="description[en]" rows="3"
                                        placeholder="{{ __('admin.description_en') }}">{{ old('description[en]', isset($slider) ? $slider->getTranslation('description', 'en') : '') }}</textarea>
                                    @error('description.en')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="description_ar" class="form-label">{{ __('admin.description_ar') }}</label>
                                    <textarea class="form-control" id="description_ar" name="description[ar]" rows="3"
                                        placeholder="{{ __('admin.description_ar') }}">{{ old('description[ar]', isset($slider) ? $slider->getTranslation('description', 'ar') : '') }}</textarea>
                                    @error('description.ar')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="row">
                                    <!-- Color Picker for Slider -->
                                    <div class="col-md-6">
                                        <label for="color" class="form-label">{{ __('admin.color') }}</label>
                                        <input type="color" class="form-control" id="color" name="color"
                                            value="{{ old('color', isset($slider) ? $slider->color : '') }}">
                                        @error('color')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Slider Status Selection -->
                                    <div class="col-md-6">
                                        <label for="status" class="form-label">{{ __('admin.status') }}</label>
                                        <select name="status" id="status" class="form-select">
                                            <option value="active"
                                                {{ old('status', isset($slider) ? $slider->status : 'active') == 'active' ? 'selected' : '' }}>
                                                {{ __('admin.active') }}
                                            </option>
                                            <option value="inactive"
                                                {{ old('status', isset($slider) ? $slider->status : 'inactive') == 'inactive' ? 'selected' : '' }}>
                                                {{ __('admin.inactive') }}
                                            </option>
                                        </select>
                                        @error('status')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <br>
                                <!-- Slider Type URL Selection -->
                                <div class="row">
                                    <!-- Slider Type URL Selection -->
                                    <div class="col-md-6">
                                        <label for="type_url" class="form-label">{{ __('admin.type_url') }}</label>
                                        <select name="type_url" id="type_url" class="form-select"
                                            onchange="toggleUrlInput()">
                                            <option value="url"
                                                {{ old('type_url', isset($slider) ? $slider->type_url : 'url') == 'url' ? 'selected' : '' }}>
                                                {{ __('admin.url') }}
                                            </option>
                                            <option value="category"
                                                {{ old('type_url', isset($slider) ? $slider->type_url : '') == 'category' ? 'selected' : '' }}>
                                                {{ __('admin.category') }}
                                            </option>
                                            <option value="product"
                                                {{ old('type_url', isset($slider) ? $slider->type_url : '') == 'product' ? 'selected' : '' }}>
                                                {{ __('admin.product') }}
                                            </option>
                                        </select>

                                        @error('type_url')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- URL Input for Slider -->
                                    <div class="col-md-6" id="urlInputContainer"
                                        style="display: {{ old('type_url', isset($slider) ? $slider->type_url : 'url') == 'url' ? 'block' : 'none' }}">
                                        <label for="url" class="form-label">{{ __('admin.url_input') }}</label>
                                        <input type="text" class="form-control" id="url" name="url"
                                            value="{{ old('url', isset($slider) ? $slider->url : '') }}"
                                            placeholder="{{ __('admin.enter_url') }}">
                                        @error('url')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6" id="categoryInputContainer"
                                        style="display: {{ old('type_url', isset($slider) ? $slider->type_url : 'url') == 'category' ? 'block' : 'none' }}">
                                        <label for="category" class="form-label">{{ __('admin.select_category') }}</label>
                                        <select name="category_id" id="category" class="form-select">
                                            <option value="">{{ __('admin.select_category') }}</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}"
                                                    {{ old('category_id', isset($slider) ? $slider->category_id : '') == $category->id ? 'selected' : '' }}>
                                                    {{ $category->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('category_id')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- حقل اختيار المنتج --}}
                                    <div class="col-md-6" id="productInputContainer"
                                        style="display: {{ old('type_url', isset($slider) ? $slider->type_url : 'url') == 'product' ? 'block' : 'none' }}">
                                        <label for="product" class="form-label">{{ __('admin.select_product') }}</label>
                                        <select name="product_id" id="product" class="form-select">
                                            <option value="">{{ __('admin.select_product') }}</option>
                                            @foreach ($products as $product)
                                                <option value="{{ $product->id }}"
                                                    {{ old('product_id', isset($slider) ? $slider->product_id : '') == $product->id ? 'selected' : '' }}>
                                                    {{ $product->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('product_id')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>


                                <!-- Image Upload for Slider -->
                                <div class="mb-3">
                                    <label for="image" class="form-label">{{ __('admin.image') }}</label>
                                    <input type="file" class="form-control" id="image" name="image"
                                        onchange="previewImage(event)">
                                    <div class="image-container mt-2" style="display: none;">
                                        <img id="imagePreview" class="rounded-circle"
                                            style="max-width: 100%; height: auto;" />
                                    </div>
                                    @if (isset($slider) && $slider->image)
                                        <div class="image-container mt-2">
                                            <img id="imagePreview" class="rounded-circle"
                                                src="{{ asset('storage/' . $slider->image) }}"
                                                style="max-width: 100%; height: auto;" />
                                        </div>
                                    @endif
                                    @error('image')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="modal-footer">
                                    <button class="btn btn-primary"
                                        type="submit">{{ isset($slider) ? __('admin.update') : __('admin.save') }}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    function previewImage(event) {
        const reader = new FileReader();
        reader.onload = function() {
            const output = document.getElementById('imagePreview');
            output.src = reader.result;
            document.querySelector('.image-container').style.display = 'block';
        };
        reader.readAsDataURL(event.target.files[0]);
    }

    function toggleUrlInput() {
        var typeUrl = document.getElementById('type_url').value;

        var urlInputContainer = document.getElementById('urlInputContainer');
        var categoryInputContainer = document.getElementById('categoryInputContainer');
        var productInputContainer = document.getElementById('productInputContainer');

        urlInputContainer.style.display = 'none';
        categoryInputContainer.style.display = 'none';
        productInputContainer.style.display = 'none';

        if (typeUrl === 'url') {
            urlInputContainer.style.display = 'block';
        } else if (typeUrl === 'category') {
            categoryInputContainer.style.display = 'block';
        } else if (typeUrl === 'product') {
            productInputContainer.style.display = 'block';
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        toggleUrlInput();
    });
</script>