@extends('layouts.app')

@section('title', 'New Project')

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-1 small text-uppercase">
            <li class="breadcrumb-item"><a href="{{ route('projects.index') }}" class="text-decoration-none">Time Tracking</a></li>
            <li class="breadcrumb-item"><a href="{{ route('projects.index') }}" class="text-decoration-none">Projects</a></li>
            <li class="breadcrumb-item active">New Project</li>
        </ol>
    </nav>
    <h2 class="h4 mb-0 text-dark fw-bold">Create Project</h2>
</div>

<form action="{{ route('projects.store') }}" method="POST" id="projectForm">
    @csrf
    <div class="row g-4">
        <div class="col-lg-12">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white p-4 border-0">
                    <h5 class="card-title mb-0 fw-bold"><i class="fas fa-info-circle me-2 text-primary"></i> PROJECT DETAILS</h5>
                </div>
                <div class="card-body p-4 pt-0">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Project Name *</label>
                            <input type="text" name="name" class="form-control" placeholder="Enter project name..." required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Customer Name *</label>
                            <select name="customer_id" class="form-select select2" required>
                                <option value="">Select Customer</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Billing Type *</label>
                            <select name="billing_type" id="billing_type" class="form-select" required>
                                <option value="fixed">Fixed Cost</option>
                                <option value="hourly">Based on Task Hours</option>
                            </select>
                        </div>
                        <div class="col-md-4" id="rate_container" style="display: none;">
                            <label class="form-label small text-muted fw-bold text-uppercase">Project Rate (per hour) *</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white">{{ getCurrencySymbol() }}</span>
                                <input type="number" name="rate_per_hour" class="form-control" step="0.01" value="{{ old('rate_per_hour', 0) }}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Status *</label>
                            <select name="status" class="form-select" required>
                                <option value="active" selected>Active</option>
                                <option value="completed">Completed</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label small text-muted fw-bold text-uppercase">Description</label>
                            <textarea name="description" class="form-control" rows="2" placeholder="Tell us more about this project..."></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white p-4 border-0 d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0 fw-bold"><i class="fas fa-tasks me-2 text-primary"></i> TASK MANAGEMENT</h5>
                    <button type="button" class="btn btn-sm btn-outline-primary fw-bold" id="addTask">
                        <i class="fas fa-plus me-1"></i> Add Task
                    </button>
                </div>
                <div class="card-body p-4 pt-0">
                    <div class="table-responsive">
                        <table class="table align-middle" id="tasksTable">
                            <thead class="bg-light text-muted small text-uppercase fw-bold">
                                <tr>
                                    <th class="ps-3">Task Name *</th>
                                    <th style="width: 50px"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="task-row">
                                    <td><input type="text" name="tasks[0][name]" class="form-control" placeholder="e.g. Design, Development, Planning..." required></td>
                                    <td class="text-center"><button type="button" class="btn btn-sm btn-link text-danger remove-task"><i class="fas fa-times"></i></button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer bg-white p-4 border-top text-end">
                    <button type="submit" class="btn btn-primary px-5 py-2 fw-bold shadow-sm">Save Project</button>
                    Est. Amount: {{ getCurrencySymbol() }}<span id="txtTotalAmount">0.00</span>
                    <a href="{{ route('projects.index') }}" class="btn btn-light px-5 py-2 border fw-bold text-muted ms-2">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let taskCount = 1;

    // Toggle Rate Field
    const billingType = document.getElementById('billing_type');
    const rateContainer = document.getElementById('rate_container');
    
    billingType.addEventListener('change', function() {
        rateContainer.style.display = this.value === 'hourly' ? 'block' : 'none';
        if (this.value === 'fixed') {
            rateContainer.querySelector('input').value = 0;
        }
    });

    // Add Task Row
    document.getElementById('addTask').addEventListener('click', function() {
        const tbody = document.querySelector('#tasksTable tbody');
        const row = document.createElement('tr');
        row.className = 'task-row';
        row.innerHTML = `
            <td><input type="text" name="tasks[${taskCount}][name]" class="form-control" required></td>
            <td class="text-center"><button type="button" class="btn btn-sm btn-link text-danger remove-task"><i class="fas fa-times"></i></button></td>
        `;
        tbody.appendChild(row);
        taskCount++;
    });

    // Remove Task Row
    document.querySelector('#tasksTable').addEventListener('click', function(e) {
        if (e.target.closest('.remove-task')) {
            if (document.querySelectorAll('.task-row').length > 1) {
                e.target.closest('.task-row').remove();
            } else {
                alert('At least one task is required.');
            }
        }
    });

    // Form Validation (Simple)
    document.getElementById('projectForm').addEventListener('submit', function(e) {
        if (!this.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        this.classList.add('was-validated');
    });
});
</script>
@endsection