@extends('layout')

@section('header')
@include('components.header-inner', [
    'title' => 'Add Note',
    'rightButton' => '
        <a href="'.route('add_note_history').'" class="link position-relative">
            <button class="btn btn-sm" style="border-radius: 6px; padding:4px 10px; color:#fff;font-size:12px;background: linear-gradient(180deg, rgba(51,176,44,0.88) 0%, #33B02C 100%);">
                History
            </button>
        </a>
    '
])
@endsection

@section('content')

<style>
/* Container */
.add-product-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 14px;
    box-sizing: border-box;
}

/* Labels & inputs */
.add-product-container label {
    display:block;
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
    color: #222;
}

.input-box, select, textarea, input[type="date"], input[type="time"] {
    width:100%;
    padding:12px;
    border-radius:10px;
    border:1px solid #e7e7e7;
    background:#fff;
    box-sizing:border-box;
    font-size:14px;
    margin-bottom:14px;
}

/* textarea size */
textarea {
    min-height:110px;
    resize:vertical;
    line-height:1.4;
    color:#444;
}

/* Select arrow smaller */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%), linear-gradient(to right, #eee, #eee);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
    background-size: 6px 6px, 6px 6px, 2.5em 2.5em;
    background-repeat: no-repeat;
    padding-right: 40px;
}

/* Submit button */
.submit-btn {
    width:100%;
    padding:14px;
    border-radius:10px;
    border:none;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    background: linear-gradient(180deg, rgba(51,176,44,0.88) 0%, #33B02C 100%);
    box-shadow: 0 6px 18px rgba(51,176,44,0.18);
    transition: transform .08s ease;
}

.submit-btn:active { transform: translateY(1px); }

/* Small helper text */
.helper {
    font-size:12px;
    color:#777;
    margin-top:-10px;
    margin-bottom:10px;
}

/* Row for date/time */
.row { display:flex; gap:10px; }
.row .col { flex:1; }

/* Card preview (optional) */
.preview-card {
    background:#fff;
    border-radius:12px;
    padding:10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    margin-bottom:14px;
}

/* Responsive */
@media (max-width:480px) {
    .add-product-container { padding:12px; }
    .input-box, select, textarea { padding:11px; font-size:14px; }
    .submit-btn { padding:12px; font-size:15px; }
    .row { flex-direction:column; }
}
</style>

<div class="add-product-container mt-4 mb-3">

    <form id="addProductForm" onsubmit="return handleSubmit(event)">

        <!-- Customs Name -->
        <label for="custName">Customs Name</label>
        <input id="custName" name="custName" class="input-box" type="text" placeholder="John" required>

        <!-- Customs Number -->
        <label for="custNumber">Customs Number</label>
        <input id="custNumber" name="custNumber" class="input-box" type="tel" placeholder="+91 9876543212"
               pattern="^\+?\d[\d\s-]{6,}$" title="Phone number" required>

        <!-- Material -->
        <label for="material">Material</label>
        <select id="material" name="material" class="input-box" required>
            <option value="Neem Wood">Neem Wood</option>
            <option value="Teak Wood">Teak Wood</option>
            <option value="Plywood">Plywood</option>
            <option value="MDF">MDF</option>
            <option value="Other">Other</option>
        </select>

        <!-- Description -->
        <label for="description">Description</label>
        <textarea id="description" name="description" class="input-box" placeholder="Enter description..."></textarea>

        <!-- Select Type -->
        <label for="selectType">Select Type</label>
        <select id="selectType" name="selectType" class="input-box" onchange="onTypeChange()" required>
            <option value="Order Note">Order Note</option>
            <option value="Quote">Quote</option>
        </select>

        <!-- Department (visible for Order Note) -->
        <div id="departmentBlock">
            <label for="department">Select Department</label>
            <select id="department" name="department" class="input-box">
                <option>Sales</option>
                <option>Purchase</option>
                <option>Production</option>
                <option>Admin</option>
            </select>
        </div>

        <!-- Date & Time (visible for Quote) -->
        <div id="dateTimeBlock" style="display:none;">
            <label>Date & Time</label>
            <div class="row">
                <div class="col">
                    <input id="date" name="date" type="date" class="input-box">
                </div>
                <div class="col">
                    <input id="time" name="time" type="time" class="input-box">
                </div>
            </div>
        </div>

        <button id="submitBtn" class="submit-btn" type="submit">Submit</button>

    </form>
</div>

<script>
function onTypeChange() {
    const type = document.getElementById('selectType').value;
    const dept = document.getElementById('departmentBlock');
    const dt = document.getElementById('dateTimeBlock');

    if (type === 'Order Note') {
        dept.style.display = 'block';
        dt.style.display = 'none';
        document.getElementById('date').required = false;
        document.getElementById('time').required = false;
    } else {
        dept.style.display = 'none';
        dt.style.display = 'block';
        document.getElementById('date').required = true;
        document.getElementById('time').required = true;
    }
}

const LS_KEY = 'productHistory_v1';

function handleSubmit(e) {
    e.preventDefault();

    const form = e.target;
    const data = {
        id: Date.now(),
        name: form.custName.value.trim(),
        number: form.custNumber.value.trim(),
        material: form.material.value,
        description: form.description.value.trim(),
        type: form.selectType.value,
        department: form.department ? form.department.value : '',
        date: form.date ? form.date.value : '',
        time: form.time ? form.time.value : '',
        createdAt: new Date().toISOString()
    };

    if (!data.name || !data.number) {
        alert('Please fill required fields.');
        return;
    }

    let arr = [];
    try {
        arr = JSON.parse(localStorage.getItem(LS_KEY)) || [];
    } catch (err) { arr = []; }

    arr.unshift(data);
    localStorage.setItem(LS_KEY, JSON.stringify(arr));

    // success UI
    const originalText = document.getElementById('submitBtn').innerText;
    document.getElementById('submitBtn').innerText = 'Saved ';
    setTimeout(() => {
        document.getElementById('submitBtn').innerText = originalText;
        form.reset();
        onTypeChange(); 
    }, 700);
}

document.addEventListener('DOMContentLoaded', function () {
    onTypeChange();
});
</script>

@endsection