@extends('layouts.master')
@section('title')
    Projects
@endsection

@section('css')
    <script src="{{asset('custom_js/upload-image.js')}}"></script>
@endsection

@section('content')
    @section('content')
    @component('components.breadcrumb')
    @slot('li_1')
        Projects
    @endslot
    @slot('title')
        Projects
    @endslot
    @endcomponent

    <div class="card info-card pt-5 ps-3">
        <div class="card-body">
            <form action="{{ route('portfolios.update', $portfolio->id) }}) }}" method="post" enctype="multipart/form-data">
                @csrf

                 <!-- Existing hidden inputs for old images -->
                <input type="hidden" name="old_img_banner_image" value="{{ $portfolio->banner_image }}">
                <input type="hidden" name="old_img_portfolio2_image" value="{{ $portfolio->portfolio2_image }}">
                {{-- <input type="hidden" name="old_img_portfolio3_image" value="{{ $portfolio->portfolio3_image }}"> --}}

                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <img src="{{ asset('uploads/portfolios/'.$portfolio->banner_image) }}" alt="banner_image" class="d-block rounded" width="150" height="90" id="uploadedAvatar" />
                                <br>
                                <div class="form-group">
                                    <label for="upload" class="btn btn-primary me-2 mb-2" tabindex="0">
                                        <span class="d-none d-sm-block">Upload Image Here</span>
                                        <i class="bx bx-upload d-block d-sm-none"></i>
                                        <input class="form-control account-file-input" type="file" name="banner_image" id="upload" hidden>
                                    </label>
                                    <button type="button" class="btn btn-outline-secondary account-image-reset mb-2">
                                        <i class="bx bx-reset d-block d-sm-none"></i>
                                        <span class="d-none d-sm-block">Reset</span>
                                    </button>
                                </div>
                                <span class="text text-info" style="font-size: 11px">The image is preferred to be 2418 x 1340</span>
                                @error('banner_image')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="banner_title" class="form-label">Banner Title</label>
                        <input type="text" class="form-control" name="banner_title" value="{{ old('banner_title', $portfolio->banner_title) }}" />
                        @error('banner_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-6 mb-3">
                        <label for="banner_subtitle" class="form-label">Banner Sub Title</label>
                        <input type="text" class="form-control" name="banner_subtitle" value="{{ old('banner_subtitle', $portfolio->banner_subtitle) }}" />
                        @error('banner_subtitle')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-6 mb-3">
                        <label for="banner_portfolio_title" class="form-label">Banner Project Title</label>
                        <input type="text" class="form-control" name="banner_portfolio_title" value="{{ old('banner_portfolio_title', $portfolio->banner_portfolio_title) }}" />
                        @error('banner_portfolio_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-6 mb-3">
                        <label for="banner_portfolio_slogan" class="form-label">Banner Project Slogan</label>
                        <input type="text" class="form-control" name="banner_portfolio_slogan" value="{{ old('banner_portfolio_slogan', $portfolio->banner_portfolio_slogan) }}" />
                        @error('banner_portfolio_slogan')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <hr>

                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <img src="{{ asset('uploads/portfolios/'.$portfolio->portfolio2_image) }}" alt="portfolio2_image" class="d-block rounded" width="150" height="90" id="uploadedAvatar2" />
                                <br>
                                <div class="form-group">
                                    <label for="upload2" class="btn btn-primary me-2 mb-2" tabindex="0">
                                        <span class="d-none d-sm-block">Upload Image Here</span>
                                        <i class="bx bx-upload d-block d-sm-none"></i>
                                        <input class="form-control account-file-input2" type="file" name="portfolio2_image" id="upload2" hidden>
                                    </label>
                                    <button type="button" class="btn btn-outline-secondary account-image-reset2 mb-2">
                                        <i class="bx bx-reset d-block d-sm-none"></i>
                                        <span class="d-none d-sm-block">Reset</span>
                                    </button>
                                </div>
                                <span class="text text-info" style="font-size: 11px">The image is preferred to be 820 x 385</span>
                                @error('portfolio2_image')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <label for="portfolio2_title" class="form-label">Project2 Title</label>
                        <input type="text" class="form-control" name="portfolio2_title" value="{{ old('portfolio2_title', $portfolio->portfolio2_title) }}" />
                        @error('portfolio2_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-6 mb-3">
                        <label for="portfolio2_description" class="form-label">Project2 Description</label>
                        <textarea rows="3" class="form-control" name="portfolio2_description">{{ old('portfolio2_description', $portfolio->portfolio2_description) }}</textarea>
                        @error('portfolio2_description')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <hr>

                    {{-- <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <img src="{{ asset('uploads/portfolios/'.$portfolio->portfolio3_image) }}" alt="portfolio3_image" class="d-block rounded" width="150" height="90" id="uploadedAvatar3" />
                                <br>
                                <div class="form-group">
                                    <label for="upload3" class="btn btn-primary me-3 mb-2" tabindex="0">
                                        <span class="d-none d-sm-block">Upload Image Here</span>
                                        <i class="bx bx-upload d-block d-sm-none"></i>
                                        <input class="form-control account-file-input3" type="file" name="portfolio3_image" id="upload3" hidden>
                                    </label>
                                    <button type="button" class="btn btn-outline-secondary account-image-reset2 mb-2">
                                        <i class="bx bx-reset d-block d-sm-none"></i>
                                        <span class="d-none d-sm-block">Reset</span>
                                    </button>
                                </div>
                                <span class="text text-info" style="font-size: 11px">The image is preferred to be 1940 x 1340</span>
                                @error('portfolio3_image')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div> --}}

                    <hr>

                    <div class="col-4 mb-3">
                        <div class="form-group">
                            <label for="category_id">Category</label>
                            <select name="category_id" id="category_id" class="form-select">
                                <option value="" selected="" disabled="">Select Category</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" {{ $category->id == $portfolio->category_id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-4 mb-3">
                        <label for="order" class="form-label">Order</label>
                        <input type="number" class="form-control" name="order" value="{{ old('order', $portfolio->order) }}" />
                        @error('order')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-3 mb-3 mt-4 ms-2">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" name="published" {{ $portfolio->published == 1 ? 'checked' : '' }}>
                            <label class="form-check-label" for="flexSwitchCheckChecked">Active</label>
                        </div>
                        @error('published')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <hr>
                <h3>Sections</h3>
                <div id="sections-wrapper"></div>
                <button type="button" id="add-section" class="btn btn-primary mb-3">Add Section</button>
                <hr>

                <!-- Hidden input to track removed section IDs -->
                <input type="hidden" name="removed_sections" id="removed_sections" value="">

                <button type="submit" class="btn btn-round btn-success col-md-1 me-2">Save</button>
                <a href="{{ route('portfolios.all') }}" style="width: 200px" class="btn btn-secondary"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i> Back</a>
            </form>
        </div>
    </div>
@endsection
@section('js')
    <script>
        let counter = 0;
        const styles = ['catalog', 'multiimage', 'blank', 'scrolling', 'tabs'];
        const wrapper = document.getElementById('sections-wrapper');
        const addBtn = document.getElementById('add-section');
        const form = document.getElementById('projects_form');
        const removedSectionsInput = document.getElementById('removed_sections');
        let removedSections = [];
        const portfolioId = '{{ $portfolio->id ?? "" }}';
        const baseAssetUrl = "{{ asset('uploads/portfolios') }}";

        @if(isset($portfolio) && $portfolio->sections)
            @foreach($portfolio->sections as $section)
                addSectionBlock({
                    id: {{ $section->id }},
                    style_type: "{{ $section->style_type }}",
                    order: "{{ $section->order }}",
                    title: {!! json_encode($section->title) !!},
                    text: {!! json_encode($section->text) !!},
                    image1: {!! json_encode($section->image1) !!},
                    image2: {!! json_encode($section->image2) !!}
                });
            @endforeach
        @endif

        addBtn.addEventListener('click', () => addSectionBlock());

        function addSectionBlock(data = {}) {
            const idx = counter++;
            const div = document.createElement('div');
            div.className = 'section-block mb-4 p-3 border rounded bg-light';
            div.dataset.idx = idx;
            if (data.id) div.dataset.sectionId = data.id;

            const imgPreviewStyle = `
                display:inline-block;
                width:100px;
                height:100px;
                object-fit:cover;
                border-radius:6px;
                border:1px solid #ccc;
                margin-top:6px;
            `;
            
            const img1Preview = (data.image1 && portfolioId)
                ? `<img src="${baseAssetUrl}/${portfolioId}/${data.image1}" alt="Image1" style="${imgPreviewStyle}">`
                : (data.image1 ? `<img src="${data.image1}" alt="Image1" style="${imgPreviewStyle}">` : '');

            const img2Preview = (data.image2 && portfolioId)
                ? `<img src="${baseAssetUrl}/${portfolioId}/${data.image2}" alt="Image2" style="${imgPreviewStyle}">`
                : (data.image2 ? `<img src="${data.image2}" alt="Image2" style="${imgPreviewStyle}">` : '');

            div.innerHTML = `
                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Style</label>
                        <select name="sections[${idx}][style_type]" class="form-select style-select">
                            ${styles.map(s => `<option value="${s}" ${data.style_type === s ? 'selected' : ''}>${s}</option>`).join('')}
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label fw-semibold">Order</label>
                        <input type="number" name="sections[${idx}][order]" class="form-control section-order" 
                            value="${data.order ?? ''}" min="1" required>
                        <small class="text-danger d-none order-error">Duplicate order number!</small>
                    </div>

                    <div class="col-md-3 image1-field">
                        <label class="form-label fw-semibold">Image 1</label>
                        <div class="d-flex flex-column">
                            <input type="file" name="sections[${idx}][image1]" class="form-control">
                            ${img1Preview ? `<div class="mt-2">${img1Preview}</div>` : ''}
                        </div>
                    </div>

                    <div class="col-md-3 image2-field">
                        <label class="form-label fw-semibold">Image 2</label>
                        <div class="d-flex flex-column">
                            <input type="file" name="sections[${idx}][image2]" class="form-control">
                            ${img2Preview ? `<div class="mt-2">${img2Preview}</div>` : ''}
                        </div>
                    </div>

                    <div class="col-md-12 title-field">
                        <label class="form-label fw-semibold">Title</label>
                        <input type="text" name="sections[${idx}][title]" class="form-control" 
                            value="${data.title ? escapeHtml(data.title) : ''}">
                    </div>

                    <div class="col-md-12 text-field">
                        <label class="form-label fw-semibold">Text</label>
                        <textarea name="sections[${idx}][text]" class="form-control" rows="3">${data.text ? escapeHtml(data.text) : ''}</textarea>
                    </div>

                    <div class="col-md-12 text-end mt-2">
                        <button type="button" class="btn btn-outline-danger btn-sm remove-section">
                            <i class="bi bi-trash"></i> Remove Section
                        </button>
                    </div>

                    ${data.id ? `<input type="hidden" name="sections[${idx}][id]" value="${data.id}">` : ''}
                </div>
            `;

            wrapper.appendChild(div);

            const styleSelect = div.querySelector('.style-select');
            const orderInput = div.querySelector('.section-order');
            const removeBtn = div.querySelector('.remove-section');

            styleSelect.addEventListener('change', () => handleStyleChange(div, styleSelect.value));
            handleStyleChange(div, data.style_type || styleSelect.value);

            orderInput.addEventListener('input', validateOrders);

            removeBtn.addEventListener('click', () => {
                if (div.dataset.sectionId) {
                    removedSections.push(div.dataset.sectionId);
                    if (removedSectionsInput) {
                        removedSectionsInput.value = removedSections.join(',');
                    } else {
                        const hidden = document.createElement('input');
                        hidden.type = 'hidden';
                        hidden.name = 'removed_sections';
                        hidden.id = 'removed_sections';
                        hidden.value = removedSections.join(',');
                        form.appendChild(hidden);
                    }
                }
                div.remove();
                validateOrders();
            });
        }

        function handleStyleChange(sectionDiv, styleType) {
            const img1 = sectionDiv.querySelector('.image1-field');
            const img2 = sectionDiv.querySelector('.image2-field');
            const title = sectionDiv.querySelector('.title-field');
            const text = sectionDiv.querySelector('.text-field');

            [img1, img2, title, text].forEach(el => el?.classList.add('d-none'));

            switch (styleType) {
                case 'catalog': img1?.classList.remove('d-none'); break;
                case 'multiimage': img1?.classList.remove('d-none'); img2?.classList.remove('d-none'); break;
                case 'blank': title?.classList.remove('d-none'); text?.classList.remove('d-none'); break;
                case 'scrolling': [img1,img2,title,text].forEach(el => el?.classList.remove('d-none')); break;
                case 'tabs': img1?.classList.remove('d-none'); img2?.classList.remove('d-none'); break;
            }
        }

        function escapeHtml(text) {
            if (!text) return '';
            return String(text).replace(/[&<>"']/g, m => ({
                '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'
            })[m]);
        }

        function validateOrders() {
            const orders = {};
            document.querySelectorAll('.section-order').forEach(input => {
                const val = input.value.trim();
                const errorLabel = input.closest('.col-md-2').querySelector('.order-error');
                if (val === '') {
                    input.classList.remove('is-invalid');
                    errorLabel?.classList.add('d-none');
                    return;
                }
                if (orders[val]) {
                    input.classList.add('is-invalid');
                    errorLabel?.classList.remove('d-none');
                } else {
                    input.classList.remove('is-invalid');
                    errorLabel?.classList.add('d-none');
                    orders[val] = true;
                }
            });
        }

        form.addEventListener('submit', e => {
            validateOrders();
            if (document.querySelectorAll('.section-order.is-invalid').length > 0) {
                e.preventDefault();
                alert('Fix duplicate order numbers before submitting.');
            }
        });
    </script>
@endsection