@extends('layouts.app')
@section('title', 'Edit Insurance Product ')

@section('content')
    <div class="fixed-action-bar">
        <div class="fw-semibold fixed-nav-title">Edit Insurance Product </div>
        <div>
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"
                data-toggle="tooltip" data-placement="top" title="Add"></i>
            <i id="submitForm"
                class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" data-placement="top" title="Save"></i>
            <i class="fa-regular fa-edit fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" data-placement="top" title="Edit"></i>
            <i class="fa-regular fa-trash-can fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" data-placement="top" title="Delete"></i>
            <a href="{{ route('products.index') }}">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center ms-1"
                    data-toggle="tooltip" data-placement="top" title="Cancel"></i>
            </a>
        </div>
    </div>
    {{-- @if ($errors->any())
    @foreach ($errors->all() as $error)
       <div>{{$error}}</div>
    @endforeach
 @endif --}}
    <div class="row mt-3 mb-5">
        <div class="col-md-6">
            <div class="card">
                <h5 class="card-title">Edit Insurance Product </h5>
                <div class="card-body">
                    <form id="editProductForm" action="{{ route('products.update', $product->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <!-- Product Name -->
                        <div class="mb-3">
                            <label for="product_name" class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('product_name') is-invalid @enderror"
                                id="product_name" name="product_name"
                                value="{{ old('product_name', $product->product_name) }}" maxlength="50" required>
                            @error('product_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Category -->
                        <div class="mb-3">
                            <label for="category_id" class="form-label">Category <span class="text-danger">*</span></label>
                            <select class="form-control @error('category_id') is-invalid @enderror" id="category_id"
                                name="category_id" required>
                                <option value="">Select Category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" @if (old('category_id', $product->category_id) == $category->id) selected @endif>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                                rows="3" maxlength="1500">{{ old('description', $product->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Zap Product ID -->
                        <div class="mb-3">
                            <label for="zap_product_id" class="form-label">Zap Product ID</label>
                            <input type="text" class="form-control @error('zap_product_id') is-invalid @enderror"
                                id="zap_product_id" name="zap_product_id"
                                value="{{ old('zap_product_id', $product->zap_product_id ?? '') }}" maxlength="255"
                                placeholder="Enter Zap Product ID (optional)">
                            @error('zap_product_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Status -->
                        <div class="mb-3">
                            <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input @error('status') is-invalid @enderror" type="radio"
                                        id="statusEnable" name="status" value="enabled"
                                        {{ old('status', $product->status) == 'enabled' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="statusEnable">Enable</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input @error('status') is-invalid @enderror" type="radio"
                                        id="statusDisable" name="status" value="disabled"
                                        {{ old('status', $product->status) == 'disabled' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="statusDisable">Disable</label>
                                </div>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        document.getElementById('submitForm').addEventListener('click', function() {
            document.getElementById('editProductForm').submit();
        });
        document.addEventListener('DOMContentLoaded', function() {
            const featureImageInput = document.getElementById('feature_image');
            const flyerInput = document.getElementById('flyer');
            const featureImagePreview = document.querySelector('.image-preview');
            const flyerPreview = document.querySelector('.file-preview');

            function addDeleteIcon(previewElement, inputElement) {
                const deleteIcon = document.createElement('i');
                deleteIcon.className = 'delete-icon fas fa-trash';
                deleteIcon.addEventListener('click', function() {
                    previewElement.innerHTML = '';
                    previewElement.style.display = 'none';
                    inputElement.value = '';
                });
                previewElement.appendChild(deleteIcon);
            }

            function handleFileChange(inputElement, previewElement, isImage) {
                const files = inputElement.files;
                if (files.length > 0) {
                    const file = files[0];
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        if (isImage) {
                            previewElement.innerHTML =
                                `<img src="${e.target.result}" alt="Preview" class="img-thumbnail">`;
                        } else {
                            previewElement.innerHTML = `<p>File Name: ${file.name}</p>`;
                        }
                        previewElement.style.display = 'block';
                        addDeleteIcon(previewElement, inputElement);
                    };

                    reader.readAsDataURL(file);
                }
            }

            featureImageInput.addEventListener('change', function() {
                handleFileChange(featureImageInput, featureImagePreview, true);
            });

            flyerInput.addEventListener('change', function() {
                handleFileChange(flyerInput, flyerPreview, false);
            });

            const dropAreas = document.querySelectorAll('.drop-area');

            dropAreas.forEach(dropArea => {
                dropArea.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    dropArea.classList.add('drag-over');
                });

                dropArea.addEventListener('dragleave', function() {
                    dropArea.classList.remove('drag-over');
                });

                dropArea.addEventListener('drop', function(e) {
                    e.preventDefault();
                    dropArea.classList.remove('drag-over');

                    const files = e.dataTransfer.files;
                    if (files.length > 0) {
                        const file = files[0];
                        const reader = new FileReader();

                        reader.onload = function(e) {
                            let preview;
                            if (dropArea.querySelector('#feature_image')) {
                                preview = document.querySelector('.image-preview');
                                preview.innerHTML =
                                    `<img src="${e.target.result}" alt="Preview" class="img-thumbnail">`;
                            } else if (dropArea.querySelector('#flyer')) {
                                preview = document.querySelector('.file-preview');
                                preview.innerHTML = `<p>File Name: ${file.name}</p>`;
                                if (file.type === 'application/pdf') {
                                    addDeleteIcon(preview, dropArea.querySelector(
                                        'input[type="file"]'));
                                }
                            }

                            preview.style.display = 'block';
                            addDeleteIcon(preview, dropArea.querySelector(
                            'input[type="file"]'));
                        };

                        reader.readAsDataURL(file);
                    }
                });
            });

            // Initial setup: Add delete icon if there are pre-existing previews
            if (featureImagePreview.innerHTML.trim() !== '') {
                addDeleteIcon(featureImagePreview, featureImageInput);
            }

            if (flyerPreview.innerHTML.trim() !== '') {
                addDeleteIcon(flyerPreview, flyerInput);
            }
        });
        document.addEventListener('DOMContentLoaded', function() {
            const commissionTypeSelect = document.getElementById('commission_type');
            const commissionStructureDropdown = document.getElementById('commissionStructureDropdown');
            const staticCommissionDropdown = document.getElementById('staticCommissionDropdown');

            function toggleCommissionFields() {
                const selectedCommissionType = commissionTypeSelect.value;
                if (selectedCommissionType === 'Commission percentage') {
                    commissionStructureDropdown.style.display = 'block';
                    staticCommissionDropdown.style.display = 'none';
                } else if (selectedCommissionType === 'Static Commission') {
                    commissionStructureDropdown.style.display = 'none';
                    staticCommissionDropdown.style.display = 'block';
                } else {
                    commissionStructureDropdown.style.display = 'none';
                    staticCommissionDropdown.style.display = 'none';
                }
            }

            toggleCommissionFields();

            commissionTypeSelect.addEventListener('change', toggleCommissionFields);
        });
    </script>
@endpush