@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', __('Add Project'))

@section('content')

    <!-- Flash Messages -->
    @if ($errors->any())
        <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('success'))
        <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                {{ session('success') }}
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Responsive Styles -->
    <style>
        @media (max-width: 768px) {
            #validation-alert, #success-alert {
                width: 90% !important; /* Adjust the width for small screens */
                left: 5% !important; /* Center it horizontally */
            }
        }

        @media (max-width: 576px) {
            #validation-alert, #success-alert {
                width: 95% !important; /* Make the alert almost full width on very small screens */
                left: 2.5% !important; /* Slightly adjust for better centering */
            }
        }

        .btn-hover-yellow:hover, .btn-hover-grey:focus {
            background-color: #ffc107 !important;
            color: #fff !important;
        }
    </style>




    <div class="page-wrapper">
        <div class="card shadow-sm p-4">
            <form action="{{ route('project_list.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

            <div class="d-flex justify-content-end mb-3">
                <button class="btn btn-icon shadow-sm btn-hover-yellow btn-outline-yellow bg-yellow-lt me-1 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#notesPanel" title="Add License & Renewal">
                    <i class="ti ti-info-hexagon me-1"></i> Add License & Renewal
                </button>
            </div>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="notesPanel" aria-labelledby="notesPanelLabel">
                <div class="offcanvas-header bg-dark text-white">
                    <h5 class="offcanvas-title" id="notesPanelLabel">
                        <i class="ti ti-info-hexagon me-1"></i> License & Renewal
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>

                <div class="offcanvas-body">
                    <div class="card shadow-sm p-3">
                        <div id="notes-wrapper">
                            <!-- JS will append new notes here -->
                        </div>
                    </div>

                    <div class="-flex justify-content-between mt-3">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="addNewNote()">
                            <i class="ti ti-plus"></i> Add New License & Renewal
                        </button>
                    </div>
                </div>
            </div>

            <div class="p-3 mb-4 rounded-3">
                <div class="row g-3 align-items-center">
                    <!-- Left: Icon and Input -->
                    <div class="col-md-6 d-flex align-items-center">
                        <h3 class="text-primary me-2 mb-0">
                            <i class="ti ti-info-circle"></i>
                        </h3>
                        <input type="text" name="ref_no" id="ref_no" class="form-control text-uppercase" placeholder="AHK/PB/MUS/19/01" value="{{ old('ref_no') }}">
                    </div>

                    <!-- Middle: Info Text -->
                    <div class="col-md-4">
                        <small class="d-block" style="color: var(--tblr-primary, #206bc4);">
                            <strong>{{ __('Reference Info:') }}</strong>
                            UT – Ubahan Tambahan, PB – Pelan Bangunan, ID – Interior Design
                        </small>
                    </div>

                    <!-- Right: Switches -->
                    <div class="col-md-2 d-flex justify-content-start gap-3">
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" id="is_registration" name="is_registration" value="1"
                            {{ old('is_registration') ? 'checked' : '' }}/>
                            <label class="form-check-label small text-primary" for="is_registration">Register</label>
                        </div>

                        {{-- <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" id="is_finished" name="is_finished" value="1"
                            {{ old('is_finished') ? 'checked' : '' }}/>
                            <label class="form-check-label small text-primary" for="is_finished">Finished</label>
                        </div> --}}
                    </div>
                </div>
            </div>
            

            <div class="row">
                <div class="col-md-6">
                    <!-- Description -->
                    <div class="mb-4">
                        <h4 class="">
                            <i class="ti ti-file-description"></i> {{ __('Project Description') }}
                        </h4>
                        <textarea name="description" id="description" class="form-control" rows="10" placeholder="Enter Project Description" style="text-transform: uppercase;" required>{{ old('description') }}</textarea>
                    </div>
                   
                </div>

                <div class="col-md-6">

                    <!-- Client -->
                    <div class="mb-4">
                        <h4 class="">
                            <i class="ti ti-user"></i> {{ __('Client') }}
                        </h4>
                        <input type="text" name="client" id="client" class="form-control" placeholder="Enter Client Name" value="{{ old('client') }}" style="text-transform: uppercase;" required>
                    </div> 

                    <!-- Scope & Project Type -->
                    <div class="row mb-4">
                        <!-- Scope -->
                        <div class="col-md-4">
                            <h4 class="">
                                <i class="ti ti-clipboard-list"></i> {{ __('Scope') }}
                            </h4>
                            <select name="scope_id" id="scope_id" class="form-control" required>
                                <option value="" disabled {{ old('scope_id') ? '' : 'selected' }}>{{ __('Select a Scope') }}</option>
                                @foreach($scopes as $scope)
                                    <option value="{{ $scope->id }}" {{ old('scope_id') == $scope->id ? 'selected' : '' }} class="text-capitalize">{{ $scope->name }}</option>
                                @endforeach
                            </select>                        
                        </div>

                        <!-- Project Type -->
                        <div class="col-md-4">
                            <h4><i class="ti ti-list-check"></i> {{ __('Project Type') }}</h4>
                            <select name="project_type_id" id="project_type_id" class="form-control">
                                <option value="" disabled {{ old('project_type_id') ? '' : 'selected' }}>
                                    {{ __('Select a Project Type') }}
                                </option>
                                @foreach($project_type as $type)
                                    <option value="{{ $type->id }}" {{ old('project_type_id') == $type->id ? 'selected' : '' }} class="text-capitalize">
                                        {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        
                        <!-- Project Phase -->
                        <div class="col-md-4">
                            <h4><i class="ti ti-list-check"></i> {{ __('Project Phase') }}</h4>
                            <select name="project_phase_id" id="project_phase_id" class="form-control">
                                <option value="" disabled {{ old('project_phase_id') ? '' : 'selected' }}>
                                    {{ __('Select a Project Phase') }}
                                </option>
                                @foreach($project_phase as $phase)
                                    <option value="{{ $phase->id }}" {{ old('project_phase_id') == $phase->id ? 'selected' : '' }} class="text-capitalize">
                                        {{ $phase->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    

                    </div>


                    <!-- Dates -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <h4 class="">
                                <i class="ti ti-calendar-repeat"></i> {{ __('Received Year') }}
                            </h4>
                            <input type="number" name="received_year" id="received_year" class="form-control" value="{{ old('received_year') }}" min="1900" max="{{ date('Y') }}">
                        </div>
                        <div class="col-md-4">
                            <h4 class="">
                                <i class="ti ti-calendar-event"></i> {{ __('Start Date') }}
                            </h4>
                            <input type="date" name="start_date" id="start_date" class="form-control" value="{{ old('start_date') }}">
                        </div>
                        <div class="col-md-4">
                            <h4 class="">
                                <i class="ti ti-calendar-check"></i> {{ __('End Date') }}
                            </h4>
                            <input type="date" name="end_date" id="end_date" class="form-control" value="{{ old('end_date') }}">
                        </div>
                    </div>
                </div>

                <!-- Assignees -->
                <div class="mb-4">
                    <h4>
                        <i class="ti ti-users"></i> {{ __('Assignees') }}
                    </h4>
                    <div class="form-selectgroup">
                        @foreach($users as $user)
                            <label class="form-selectgroup-item">
                                <input type="checkbox" name="assignees[]" value="{{ $user->id }}" class="form-selectgroup-input" {{ in_array($user->id, old('assignees', [])) ? 'checked' : '' }}>
                                <span class="form-selectgroup-label">{{ $user->name }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="col-12 mt-4">

                    {{-- submission types --}}
                    <div id="submission-types-section">
                        <h4 class="mb-3">
                            <i class="ti ti-archive"></i> {{ __('Submission Types') }}
                        </h4>
                    
                        <div class="row">
                            @error('submission_types')
                                <div class="text-danger mb-3">
                                    {{ $message }}
                                </div>
                            @enderror

                            @foreach($submissionTypes as $index => $type)
                            <div class="col-md-4 mb-4">
                                <div class="border p-3 rounded h-100 shadow-sm">
                                <div class="form-check mb-2">
                                    <input class="form-check-input toggle-submission" type="checkbox" 
                                        name="submission_types[{{ $index }}][submission_type_id]" 
                                        value="{{ $type->id }}" 
                                        id="submissionCheck{{ $index }}" 
                                        data-target="submissionFields{{ $index }}"
                                        {{ old("submission_types.$index.submission_type_id") == $type->id ? 'checked' : '' }}>
                                        
                                    <label class="form-check-label text-uppercase" for="submissionCheck{{ $index }}">
                                        <strong>{{ strtoupper($type->name) }}</strong>
                                    </label>
                                </div>

                    
                                    <div id="submissionFields{{ $index }}" class="submission-fields" style="display:none;">
                                        {{-- <input type="hidden" name="submission_types[{{ $index }}][submission_type_id]" value="{{ $type->id }}"> --}}
                    
                                        <div class="row">
                                            <div class="col-md-6 mb-2">
                                                <label>Date</label>
                                                <input type="date" name="submission_types[{{ $index }}][submission_date]" class="form-control" value="{{ old("submission_types.{$index}.submission_date") }}">
                                            </div>
                                            <div class="col-md-6 mb-2">
                                                <label>File No / ID</label>
                                                <input type="text" name="submission_types[{{ $index }}][file_no]" class="form-control" value="{{ old("submission_types.{$index}.file_no") }}">
                                            </div>
                                            
                                            <div class="col-md-6 mb-2">
                                                <label>Status</label>
                                                <select name="submission_types[{{ $index }}][status_id]" class="form-control">
                                                    <option value="">{{ __('Select Status') }}</option>
                                                    @foreach($statuses as $status)
                                                        <option value="{{ $status->id }}"
                                                            {{ old("submission_types.$index.status_id") == $status->id ? 'selected' : '' }}>
                                                            {{ $status->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-6 mb-2">
                                                <label>Remarks</label>
                                                <input type="text" name="submission_types[{{ $index }}][remarks]" class="form-control" value="{{ old("submission_types.{$index}.remarks") }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Remarks -->
                    <div class="mt-4">
                        <h4 class="">
                            <i class="ti ti-bookmarks"></i> {{ __('Remarks') }}
                        </h4>
                        <textarea name="remarks" id="remarks" rows="6" class="form-control" placeholder="Enter Remarks">{{ old('remarks') }}</textarea>
                    </div>
                    
                    @php
                        $oldTimelines = old('timelines', [['timeline_date' => '', 'remark' => '']]);
                    @endphp

                    <div class="mt-4">
                        <h4>
                            <i class="ti ti-timeline"></i> {{ __('Timeline') }}
                        </h4>

                        <div id="timeline-wrapper" class="card p-4">
                            @foreach ($oldTimelines as $index => $timeline)
                                <div class="timeline-item row mb-3">
                                    <div class="col-md-4">
                                        <label>{{ __('Date') }}</label>
                                        <input type="date" name="timelines[{{ $index }}][timeline_date]" class="form-control"
                                            value="{{ old("timelines.$index.timeline_date", $timeline['timeline_date']) }}">
                                    </div>
                                    <div class="col-md-8">
                                        <label>{{ __('Remark') }}</label>
                                        <input type="text" name="timelines[{{ $index }}][remark]" class="form-control"
                                            placeholder="Enter remark"
                                            value="{{ old("timelines.$index.remark", $timeline['remark']) }}">
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <button type="button" id="add-timeline" class="btn btn-sm btn-outline-primary mt-2">
                            <i class="ti ti-plus"></i> {{ __('Add Another') }}
                        </button>
                    </div>

                    <hr>
                    <!-- File Upload -->
                    <div class="form-group mt-6">
                        <h4 class="mb-2">
                            <i class="ti ti-upload"></i> {{ __('Upload Image or Document') }}
                        </h4>
                        <div class="card p-3">
                            <input type="file" name="project_files[]" class="form-control" multiple accept=".jpg,.jpeg,.png,.pdf">
                            @error('project_file')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3 mt-4">
                        <label for="custom_progress" class="form-label">Custom Progress (%)</label>
                        <input type="number" name="custom_progress" id="custom_progress" class="form-control"
                            min="0" max="100" value="{{ old('custom_progress', $project->custom_progress ?? '') }}">
                    </div>

                </div>
            </div>

            <div class="d-flex justify-content-end mt-4">
                <a href="{{ route('project_list.index') }}" class="btn btn-outline-secondary mx-2">
                    {{ __('Back') }}
                </a>
                <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Handle submission type toggles
    document.querySelectorAll('.toggle-submission').forEach(toggle => {
        const targetId = toggle.getAttribute('data-target');
        const target = document.getElementById(targetId);

        // Set initial visibility based on checkbox state
        if (toggle.checked) {
            target.style.display = 'block';
        } else {
            target.style.display = 'none';
        }

        // Listen for changes
        toggle.addEventListener('change', function () {
            if (this.checked) {
                target.style.display = 'block';
            } else {
                target.style.display = 'none';
                // Clear form inputs
                target.querySelectorAll('input, select').forEach(input => {
                    input.value = '';
                });
            }
        });
    });

    // Auto-hide alerts after 3 seconds
    ['error-alert', 'success-alert', 'validation-alert'].forEach(function (id) {
        const alertElement = document.getElementById(id);
        if (alertElement) {
            setTimeout(() => {
                alertElement.classList.remove('show');
                alertElement.classList.add('hide');
                setTimeout(() => {
                    alertElement.remove();
                }, 500);
            }, 3000);
        }
    });

    document.querySelectorAll('.toggle-submission').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const target = document.getElementById(this.dataset.target);
            target.style.display = this.checked ? 'block' : 'none';
        });
    });

    let timelineIndex = document.querySelectorAll('#timeline-wrapper .timeline-item').length;

    document.getElementById('add-timeline').addEventListener('click', function () {
        const wrapper = document.getElementById('timeline-wrapper');
        const newItem = document.createElement('div');
        newItem.className = 'timeline-item row mb-1';
        newItem.innerHTML = `
            <div class="col-md-4">
                <label>{{ __('Date') }}</label>
                <input type="date" name="timelines[${timelineIndex}][timeline_date]" class="form-control" required>
            </div>
            <div class="col-md-8">
                <label>{{ __('Remark') }}</label>
                <input type="text" name="timelines[${timelineIndex}][remark]" class="form-control" placeholder="Enter remark" required>
            </div>
            <div class="col-md-12 text-end mt-2">
                <button type="button" class="btn btn-sm btn-outline-danger remove-timeline">
                    <i class="ti ti-x"></i>
                </button>
            </div>
        `;
        wrapper.appendChild(newItem);
        timelineIndex++;
    });

    // Remove timeline row
    document.getElementById('timeline-wrapper').addEventListener('click', function (e) {
        if (e.target.closest('.remove-timeline')) {
            e.target.closest('.timeline-item').remove();
        }
    });
    
});

let noteIndex = 0;

function addNewNote() {
    const wrapper = document.getElementById('notes-wrapper');

    const html = `
        <div class="d-flex justify-content-between note-item row align-items-center mb-3">
            <div class="col-md-6">
                <label class="form-label">License & Renewal</label>
                <input type="text" name="notes[new][${noteIndex}][notes]" class="form-control" placeholder="Add new license & renewal">
            </div>
            <div class="col-md-4">
                <label class="form-label">Due Date</label>
                <input type="date" name="notes[new][${noteIndex}][notes_duedate]" class="form-control">
            </div>
            <div class="d-flex justify-content-end align-items-center col-md-2">
                <button type="button" class="btn btn-danger btn-sm mt-4" onclick="removeNewNote(this)"><i class="ti ti-trash"></i></button>
            </div>
        </div>
    `;

    wrapper.insertAdjacentHTML('beforeend', html);
    noteIndex++;
}

function removeNewNote(button) {
    button.closest('.note-item').remove();
}

    
</script>
@endpush