@extends('User.layout')

@section('header')
@include('components.header-inner', [
'title' => 'Order Note',
'backUrl' => route('welcome'),
'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%);">
        View 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="addNoteForm" action="{{ route('add_order_note') }}" method="POST">
        @csrf

        <label for="customer_name">Customer Name</label>
        <input id="customer_name"
            name="customer_name"
            class="input-box"
            type="text"
            value="{{ old('customer_name') }}"
            placeholder="Name">
        @error('customer_name') <div class="text-danger">{{ $message }}</div> @enderror

        <label for="customer_number">Customer Number</label>
        <input id="customer_number"
            name="customer_number"
            class="input-box"
            type="tel"
            placeholder="Phone"
            value="{{ old('customer_number') }}"
            pattern="^\+?\d[\d\s-]{6,}$" title="Phone number">
        @error('customer_number') <div class="text-danger">{{ $message }}</div> @enderror


        <label for="material">Material</label>
        <select id="material_id" name="material_id" class="input-box">
            <option value="">--Select Material--</option>
            @foreach($materials as $m)
            <option value="{{ $m->id }}" {{ old('material_id') == $m->id ? 'selected' : '' }}>{{ $m->material }}</option>
            @endforeach
        </select>
        @error('material_id') <div class="text-danger">{{ $message }}</div> @enderror


        <label for="description">Description</label>
        <textarea id="description"
            name="description"
            class="input-box"
            placeholder="Enter description...">{{ old('description') }}</textarea>
        @error('description') <div class="text-danger">{{ $message }}</div> @enderror


        <label for="selectType">Select Type</label>
        <select id="selectType" name="type" class="input-box" onchange="onTypeChange()">
            <option value="" disabled selected>--Select--</option>
            <option value="order_note" {{ old('type')=='order_note'?'selected':'' }}>
                Order Note
            </option>
            <option value="quote" {{ old('type')=='quote'?'selected':'' }}>
                Quote
            </option>
        </select>
        @error('type') <div class="text-danger">{{ $message }}</div> @enderror


        <!-- Department (Order Note) -->
        <div id="departmentBlock"
            style="{{ old('type')=='order_note' ? '' : 'display:none;' }}">
 <label for="Department">Department</label>
            <select name="department_id"
                class="input-box @error('department_id') is-invalid @enderror">
                <option value="">--Select Department--</option>

                @foreach($departments as $d)
                <option value="{{ $d->id }}"
                    {{ old('department_id')==$d->id?'selected':'' }}>
                    {{ $d->dept_name }}
                </option>
                @endforeach
            </select>
        </div>
        @error('department_id') <div class="text-danger">{{ $message }}</div> @enderror



        <!-- Date & Time (Quote) -->
        <div id="dateTimeBlock"
            style="{{ old('type')=='quote' ? '' : 'display:none;' }}">
 <label for="date">Date</label>
            <input type="date" name="date"
                class="input-box @error('date') is-invalid @enderror"
                value="{{ old('date') }}">
 <label for="time">Time</label>
            <input type="time" name="time"
                class="input-box @error('time') is-invalid @enderror"
                value="{{ old('time') }}">
        </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 if (type === "quote") {
            dept.style.display = "none";
            dt.style.display = "block";
            document.getElementById('date').required = true;
            document.getElementById('time').required = true;
        } else {
            dept.style.display = "none";
            dt.style.display = "none";
            document.getElementById('date').required = false;
            document.getElementById('time').required = false;
        }
    }

    document.addEventListener("DOMContentLoaded", onTypeChange);

    document.getElementById('addNoteForm').addEventListener('submit', function() {
        const btn           = document.getElementById('submitBtn');
              btn.disabled  = true;
              btn.innerText = "Please wait...";
        btn.blur();
    });
</script>


@endsection