@extends('dashboard.base')

@section('content')
<div class="container mt-4">
    <h3>Upload Standard</h3>

    <!-- Success & Error Messages -->
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <!-- Validation Errors -->
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form id="standardForm" action="{{ route('standards.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <!-- Standard Number -->
        <div class="mb-3">
            <label for="code" class="form-label">Standard Number <span class="text-danger">*</span></label>
            <input type="text" name="code" id="code" class="form-control" placeholder="e.g. MS 19:2001" value="{{ old('code') }}" required>
            @error('code')<small class="text-danger">{{ $message }}</small>@enderror
        </div>

        <!-- Standard Title -->
        <div class="mb-3">
            <label for="title" class="form-label">Standard Title <span class="text-danger">*</span></label>
            <input type="text" name="title" id="title" class="form-control" placeholder="e.g. Labelling of prepacked foods" value="{{ old('title') }}" required>
            @error('title')<small class="text-danger">{{ $message }}</small>@enderror
        </div>

        <!-- Sector -->
        <div class="mb-3">
            <label for="category_id" class="form-label">Sector <span class="text-danger">*</span></label>
            <select name="category_id" id="category_id" class="form-select" required>
                <option value="">Select Sector</option>
                @foreach($categories as $id => $name)
                    <option value="{{ $id }}" {{ old('category_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                @endforeach
            </select>
            @error('category_id')<small class="text-danger">{{ $message }}</small>@enderror
        </div>

        <!-- Date Gazetted -->
        <div class="mb-3">
            <label for="date_gazetted" class="form-label">Date Gazetted <span class="text-danger">*</span></label>
            <input type="date" name="date_gazetted" id="date_gazetted" class="form-control" value="{{ old('date_gazetted') }}" required>
            @error('date_gazetted')<small class="text-danger">{{ $message }}</small>@enderror
        </div>

        <!-- Number of Pages -->
        <div class="mb-3">
            <label for="number_of_pages" class="form-label">Number of Pages <span class="text-danger">*</span></label>
            <input type="number" name="number_of_pages" id="number_of_pages" class="form-control" value="{{ old('number_of_pages') }}" required>
            @error('number_of_pages')<small class="text-danger">{{ $message }}</small>@enderror
        </div>

        <!-- Price (display) -->
        <div class="mb-3">
            <label for="price" class="form-label">Price (MWK) <span class="text-danger">*</span></label>
            <input type="text" id="price" class="form-control" readonly>
        </div>

        <!-- Hidden numeric price -->
        <input type="hidden" name="price_numeric" id="price_numeric" value="{{ old('price_numeric') }}">
        @error('price_numeric')<small class="text-danger">{{ $message }}</small>@enderror

        <!-- Standard Description -->
        <div class="mb-3">
            <label for="description" class="form-label">Standard Description <span class="text-danger">*</span></label>
            <input type="text" name="description" id="description" class="form-control" value="{{ old('description') }}" required>
            @error('description')<small class="text-danger">{{ $message }}</small>@enderror
        </div>

        <!-- Standard File -->
        <div class="mb-3">
            <label for="file" class="form-label">Standard File (PDF) <span class="text-danger">*</span></label>
            <input type="file" name="file" id="file" class="form-control" accept="application/pdf" required>
            @error('file')<small class="text-danger">{{ $message }}</small>@enderror
        </div>

        <button type="submit" class="btn btn-primary">Save Standard</button>
    </form>
</div>

<script>
    const numberOfPagesInput = document.getElementById('number_of_pages');
    const priceInput = document.getElementById('price');
    const priceNumericInput = document.getElementById('price_numeric');

    const priceTable = [
        { min: 1, max: 2, price: 11250 },
        { min: 3, max: 4, price: 13125 },
        { min: 5, max: 6, price: 15000 },
        { min: 7, max: 8, price: 16875 },
        { min: 9, max: 10, price: 18750 },
        { min: 11, max: 13, price: 18750 },
        { min: 14, max: 16, price: 22500 },
        { min: 17, max: 19, price: 24375 },
        { min: 20, max: 22, price: 24375 },
        { min: 23, max: 25, price: 24375 },
        { min: 26, max: 28, price: 26250 },
        { min: 29, max: 30, price: 28125 },
        { min: 31, max: 35, price: 28125 },
        { min: 36, max: 40, price: 28125 },
        { min: 41, max: 45, price: 28125 },
        { min: 46, max: 50, price: 30000 },
        { min: 51, max: 60, price: 30000 },
        { min: 61, max: 70, price: 30000 },
        { min: 71, max: 80, price: 31875 },
        { min: 81, max: 90, price: 31875 },
        { min: 91, max: 100, price: 35625 },
        { min: 101, max: 120, price: 37500 },
        { min: 121, max: 140, price: 37500 },
        { min: 141, max: 160, price: 37500 },
        { min: 161, max: 180, price: 39375 },
        { min: 181, max: 200, price: 39375 },
        { min: 201, max: 225, price: 39375 },
        { min: 226, max: 250, price: 41875 },
        { min: 251, max: 275, price: 45000 },
        { min: 276, max: 300, price: 45000 }
    ];

    function formatNumberWithCommas(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    numberOfPagesInput.addEventListener('input', () => {
        const pages = parseInt(numberOfPagesInput.value);
        const entry = priceTable.find(p => pages >= p.min && pages <= p.max);

        if (entry) {
            priceInput.value = formatNumberWithCommas(entry.price);
            priceNumericInput.value = entry.price;
        } else {
            priceInput.value = '';
            priceNumericInput.value = '';
        }
    });

    @if(old('number_of_pages'))
        numberOfPagesInput.dispatchEvent(new Event('input'));
    @endif
</script>
@endsection