@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.store') }}" method="post" enctype="multipart/form-data" id="projects_form">
                @csrf

                <div class="row">

                    <div class="col-12 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <img src="{{ asset('uploads/portfolios/banner_image.png') }}" 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') }}" />
                        @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') }}" />
                        @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') }}" />
                        @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') }}" />
                        @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/portfolio2_image.png') }}" 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') }}" />
                        @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') }}</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/portfolio3_image.png') }}" 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->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') }}" />
                        @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" 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>

                <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');

        addBtn.addEventListener('click', function() {
            addSectionBlock();
        });

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

            div.innerHTML = `
                <div class="row align-items-end">
                    <div class="col-md-3 mb-2">
                        <label class="form-label">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 mb-2">
                        <label class="form-label">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>

                    <!-- Image fields -->
                    <div class="col-md-3 mb-2 image1-field">
                        <label class="form-label">Image 1</label>
                        <input type="file" name="sections[${idx}][image1]" class="form-control">
                    </div>

                    <div class="col-md-3 mb-2 image2-field">
                        <label class="form-label">Image 2</label>
                        <input type="file" name="sections[${idx}][image2]" class="form-control">
                    </div>

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

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

                    <div class="col-md-12 text-end">
                        <button type="button" class="btn btn-danger btn-sm remove-section">Remove Section</button>
                    </div>
                </div>
            `;

            wrapper.appendChild(div);

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

            // Update fields visibility on style change
            styleSelect.addEventListener('change', function() {
                handleStyleChange(div, this.value);
            });

            // Initial visibility based on default or loaded data
            handleStyleChange(div, data.style_type || styleSelect.value);

            // Live duplicate validation
            orderInput.addEventListener('input', validateOrders);

            // Remove section
            removeBtn.addEventListener('click', function() {
                div.remove();
                validateOrders(); // recheck after removing
            });
        }

        // Handle visibility based on style type
        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');

            // Hide everything by default
            [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.classList.remove('d-none');
                    img2.classList.remove('d-none');
                    title.classList.remove('d-none');
                    text.classList.remove('d-none');
                    break;
                case 'tabs':
                    img1.classList.remove('d-none');
                    img2.classList.remove('d-none');
                    break;
            }
        }

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

        // Live order uniqueness check
        function validateOrders() {
            const orders = {};
            const inputs = document.querySelectorAll('.section-order');
            inputs.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;
                }
            });
        }

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