@extends('layouts.app')

@section('title', 'Create New Trade')

@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.scr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border: 1.5px solid;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}
.scr-btn-submit {
    border-color: #f5a623;
    background: #f5a623;
    color: #fff;
}

.scr-btn-submit:hover {
    background: #e89600;
    border-color: #e89600;
    box-shadow: 0 4px 12px rgba(245,166,35,.35);
}

.scr-btn-submit:disabled {
    background: #999;
    border-color: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

.scr-wrap {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    padding: 2rem 1.2rem;
    color: #2d2f45;
}

/* ── header row ── */
.scr-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    /* max-width: 920px; */
    margin: 0 auto 1.6rem;
}
.scr-title-group { display: flex; align-items: center; gap: 14px; }
.scr-icon-box {
    width: 46px; height: 46px; border-radius: 13px;
    background: #414662;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.scr-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: #2d2f45; }
.scr-sub   { font-size: 12px; color: #9099b8; margin: 0; }
.scr-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #414662;
    text-decoration: none; padding: 8px 14px;
    border: 1.5px solid #dde0ef; border-radius: 9px;
    background: #fff; transition: all .18s;
    font-family: 'Poppins', sans-serif;
}
.scr-back:hover { background: #414662; color: #fff; border-color: #414662; }

/* ── card ── */
.scr-card {
    margin: 0 auto 1.4rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 36px rgba(65,70,98,.11);
    overflow: hidden;
}
.scr-bar {
    height: 5px;
    background: linear-gradient(90deg,#414662 0%,#f5a623 50%,#414662 100%);
    background-size: 200% 100%;
    animation: scr-shimmer 3s linear infinite;
}
@keyframes scr-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.scr-body { padding: 2rem 2.2rem; }

/* section head */
.scr-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.scr-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; flex-shrink: 0; }
.scr-stitle { font-size: 11px; font-weight: 700; color: #414662; letter-spacing: .09em; text-transform: uppercase; }
.scr-hr { border: none; border-top: 1.5px solid #f0f1f7; margin: 1.8rem 0; }

/* ── form grid ── */
.scr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 1.6rem;
}
.scr-form-grid.scr-single-col {
    grid-template-columns: 1fr;
}
.scr-form-group {
    display: flex;
    flex-direction: column;
}
.scr-label {
    font-size: 12px;
    font-weight: 600;
    color: #414662;
    letter-spacing: .04em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.scr-label span.scr-req { color: #dc2626; }

.scr-input, .scr-select, .scr-textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    padding: 12px 14px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #f7f8fc;
    color: #2d2f45;
    transition: border-color .2s, background .2s;
}
.scr-input:focus, .scr-select:focus, .scr-textarea:focus {
    outline: none;
    border-color: #f5a623;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245,166,35,.1);
}
.scr-input::placeholder, .scr-textarea::placeholder {
    color: #9099b8;
}
.scr-textarea {
    resize: vertical;
    min-height: 100px;
}

/* radio group */
.scr-radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 12px 14px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #f7f8fc;
}
.scr-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #2d2f45;
    cursor: pointer;
    user-select: none;
}
.scr-radio-label input[type="radio"] {
    accent-color: #f5a623;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.scr-error {
    font-size: 11px;
    color: #dc2626;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.scr-alert {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 1.6rem;
    font-size: 13px;
    color: #b91c1c;
}
.scr-alert ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}
.scr-alert li { margin-bottom: 4px; }

.scr-note {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-left: 4px solid #f5a623;
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
    font-size: 12px;
    color: #92400e;
    margin-bottom: 1.6rem;
    line-height: 1.6;
}

/* ── action buttons ── */
.scr-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-bottom: 1rem;
    border-top: 1.5px solid #f0f1f7;
}
.scr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.scr-btn-primary {
    background: linear-gradient(135deg, #414662 0%, #f5a623 100%);
    color: #fff;
}
.scr-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(65,70,98,.3);
    transform: translateY(-2px);
}
.scr-btn-secondary {
    background: #f7f8fc;
    color: #414662;
    border: 1.5px solid #eceef6;
}
.scr-btn-secondary:hover {
    background: #eceef6;
    border-color: #c0c5da;
}

@media(max-width:768px) {
    .scr-form-grid { grid-template-columns: 1fr; }
    .scr-body { padding: 1.4rem 1rem; }
    .scr-top-row { flex-direction: column; align-items: flex-start; }
    .scr-actions { flex-direction: column-reverse; }
    .scr-btn { width: 100%; justify-content: center; }
}
</style>

<div class="scr-wrap">

    {{-- ── Top row ── --}}
    <div class="scr-top-row">
        <div class="scr-title-group">
            <div class="scr-icon-box">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
                    <path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
                    <line x1="12" y1="12" x2="12" y2="16"/>
                    <line x1="10" y1="14" x2="14" y2="14"/>
                </svg>
            </div>
            <div>
                <p class="scr-title uppercase">Create New Trade</p>
                <p class="scr-sub">Add a new trade to the system</p>
            </div>
        </div>
        <a href="{{ route('trade.list') }}" class="scr-back">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 12H5M12 5l-7 7 7 7"/>
            </svg>
            Back
        </a>
    </div>

    {{-- ── Main card ── --}}
    <div class="scr-card">
        <div class="scr-bar"></div>
        <div class="scr-body">

            @if ($errors->any())
                <div class="scr-alert">
                    <strong>⚠️ Please correct the following errors:</strong>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('trade.store') }}" method="POST">
                @csrf

                {{-- Section: Trade Details --}}
                <div class="scr-sh">
                    <div class="scr-dot"></div>
                    <span class="scr-stitle">🛠️ Trade Details</span>
                </div>

                <div class="scr-form-grid">

                    {{-- Trade Name --}}
                    <div class="scr-form-group">
                        <label class="scr-label">Trade Name <span class="scr-req">*</span></label>
                        <input type="text"
                               name="trade_name"
                               class="scr-input"
                               placeholder="e.g., Electrician"
                               value="{{ old('trade_name') }}"
                               required>
                        @error('trade_name')
                            <div class="scr-error">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- Trade Code --}}
                    <div class="scr-form-group">
                        <label class="scr-label">Trade Code <span class="scr-req">*</span></label>
                        <input type="text"
                               name="trade_code"
                               class="scr-input"
                               placeholder="e.g., ELEC"
                               value="{{ old('trade_code') }}"
                               required>
                        @error('trade_code')
                            <div class="scr-error">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- Duration --}}
                    <div class="scr-form-group">
                        <label class="scr-label">Duration <span class="scr-req">*</span></label>
                        <input type="text"
                               name="duration"
                               class="scr-input"
                               placeholder="e.g., 2 Year"
                               value="{{ old('duration') }}"
                               required>
                        @error('duration')
                            <div class="scr-error">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- Status --}}
                    <div class="scr-form-group">
                        <label class="scr-label">Status <span class="scr-req">*</span></label>
                        <div class="scr-radio-group">
                            <label class="scr-radio-label">
                                <input type="radio"
                                       name="status"
                                       value="1"
                                       {{ old('status', 1) == 1 ? 'checked' : '' }}>
                                Active
                            </label>
                            <label class="scr-radio-label">
                                <input type="radio"
                                       name="status"
                                       value="0"
                                       {{ old('status') == '0' ? 'checked' : '' }}>
                                Inactive
                            </label>
                        </div>
                        @error('status')
                            <div class="scr-error">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                </div>

                <hr class="scr-hr">

                {{-- Section: Additional Info --}}
                <div class="scr-sh">
                    <div class="scr-dot"></div>
                    <span class="scr-stitle">📋 Additional Information</span>
                </div>

                <div class="scr-form-grid scr-single-col">
                    {{-- Description --}}
                    <div class="scr-form-group">
                        <label class="scr-label">Description</label>
                        <textarea name="description"
                                  class="scr-textarea"
                                  rows="3"
                                  placeholder="Optional description about the trade">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="scr-error">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                </div>

                <div class="scr-note">
                    <strong>📝 Note:</strong> Trade Code should be a short uppercase abbreviation (e.g., ELEC, WELDER). It must be unique across the system.
                </div>

                {{-- Form Actions --}}
                <div class="scr-actions pt-10">
                    <a href="{{ route('trade.list') }}" class="scr-btn scr-btn-secondary">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6l-12 12M6 6l12 12"/></svg>
                        Cancel
                    </a>
                    <button type="submit" class="scr-btn scr-btn-submit">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
                        Create Trade
                    </button>
                </div>

            </form>

        </div>{{-- /card-body --}}
    </div>{{-- /card --}}

</div>{{-- /wrap --}}

<script>
// Trade Code — auto uppercase + alphanumeric only
document.querySelector('input[name="trade_code"]').addEventListener('input', function(e) {
    e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
});

// Trade Name — no numbers
document.querySelector('input[name="trade_name"]').addEventListener('input', function(e) {
    const value = e.target.value;
    const filtered = value.replace(/[0-9]/g, '');
    if (value !== filtered) {
        e.target.value = filtered;
        alert('❌ Trade Name cannot contain numbers');
    }
});

// Form submit validation
document.querySelector('form').addEventListener('submit', function(e) {
    const tradeName = document.querySelector('input[name="trade_name"]').value.trim();
    const tradeCode = document.querySelector('input[name="trade_code"]').value.trim();
    const duration  = document.querySelector('input[name="duration"]').value.trim();
    const status    = document.querySelector('input[name="status"]:checked');

    if (!tradeName) { alert('❌ Trade Name is required'); e.preventDefault(); return; }
    if (tradeName.length < 2) { alert('❌ Trade Name must be at least 2 characters'); e.preventDefault(); return; }
    if (/[0-9]/.test(tradeName)) { alert('❌ Trade Name cannot contain numbers'); e.preventDefault(); return; }

    if (!tradeCode) { alert('❌ Trade Code is required'); e.preventDefault(); return; }
    if (tradeCode.length < 2 || tradeCode.length > 10) { alert('❌ Trade Code must be 2–10 characters'); e.preventDefault(); return; }
    if (!/^[A-Z0-9]+$/.test(tradeCode)) { alert('❌ Trade Code must be uppercase letters/numbers only'); e.preventDefault(); return; }

    if (!duration) { alert('❌ Duration is required'); e.preventDefault(); return; }
    if (!status) { alert('❌ Please select a status'); e.preventDefault(); return; }
});
</script>

@endsection