@extends('layouts.app')
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <div class="w-100">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                            <span class="text-capitalize breadcrumb-sub-title"><small>{{ $pageDescription }}</small></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Create Inventory</h5>
                        </div>
                        <div class="card-body">
                            <form id="inventory-create-form" action="{{ route('inventory.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="gold_type">Gold Type <span class="text-danger">*</span></label>
                                            <select name="gold_type" id="gold_type" class="form-control" required>
                                                <option value="">Please select</option>
                                                @foreach ($goldPrices as $goldType)
                                                    <option value="{{ $goldType->purity }}" @selected($goldType->purity == 999)>
                                                        {{ $goldType->purity }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="type">Type <span class="text-danger">*</span></label>
                                            <select name="type" id="type" class="form-control" required>
                                                <option value="">Please select</option>
                                                @foreach ($Types as $type)
                                                    <option value="{{ $type->code }}">{{ $type->type }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="category">Category <span class="text-danger">*</span></label>
                                            <select name="category" id="category" class="form-control" required>
                                                <option value="">Please select</option>
                                                @foreach ($Categories as $category)
                                                    <option value="{{ $category->code }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="weight">Weight (g) <span class="text-danger">*</span></label>
                                            <input type="number" name="weight" id="weight" class="form-control"
                                                step="0.01" min="0" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label>Item Image</label>

                                            <div id="image-dropzone" class="image-dropzone">
                                                <input type="file" name="image" id="image" accept="image/png,image/jpeg,image/jpg" hidden>

                                                <div id="dropzone-placeholder" class="image-dropzone__placeholder">
                                                    <i class="las la-cloud-upload-alt image-dropzone__icon"></i>
                                                    <p class="mb-1"><strong>Drag &amp; drop</strong> an image here, or <span class="image-dropzone__browse">browse</span></p>
                                                    <small class="text-muted">PNG or JPG — up to 2MB</small>
                                                </div>

                                                <div id="dropzone-preview" class="image-dropzone__preview d-none">
                                                    <img id="dropzone-preview-img" src="" alt="Preview">
                                                    <div class="image-dropzone__file-info">
                                                        <span id="dropzone-file-name" class="image-dropzone__file-name"></span>
                                                        <span id="dropzone-file-size" class="image-dropzone__file-size"></span>
                                                    </div>
                                                    <button type="button" id="dropzone-remove" class="image-dropzone__remove" title="Remove image">
                                                        <i class="las la-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <small id="image-error" class="text-danger d-none"></small>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="price">Price (MYR) <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="price" id="price" class="form-control"
                                                inputmode="decimal" autocomplete="off" step="0.01" min="0"
                                                value="0.00" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex" style="gap: 10px;">
                                    <button type="submit" class="btn btn-primary px-30">Request Inventory</button>
                                    <a href="{{ route('inventory.list') }}" class="btn btn-light px-30">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .image-dropzone {
            position: relative;
            border: 2px dashed #d0d5dd;
            border-radius: 10px;
            background-color: #f9fafb;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color .2s ease, background-color .2s ease;
        }

        .image-dropzone:hover {
            border-color: #19bdb4;
        }

        .image-dropzone.is-dragover {
            border-color: #19bdb4;
            background-color: rgba(25, 189, 180, 0.08);
        }

        .image-dropzone.has-error {
            border-color: #dc3545;
            background-color: rgba(220, 53, 69, 0.05);
        }

        .image-dropzone__icon {
            font-size: 42px;
            color: #19bdb4;
            display: block;
            margin-bottom: 8px;
        }

        .image-dropzone__browse {
            color: #19bdb4;
            font-weight: 600;
            text-decoration: underline;
        }

        .image-dropzone__preview {
            display: flex;
            align-items: center;
            gap: 15px;
            text-align: left;
            position: relative;
        }

        .image-dropzone__preview img {
            width: 90px;
            height: 90px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            background-color: #fff;
        }

        .image-dropzone__file-info {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .image-dropzone__file-name {
            font-weight: 600;
            color: #344054;
            max-width: 320px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .image-dropzone__file-size {
            font-size: 12px;
            color: #667085;
        }

        .image-dropzone__remove {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background-color: #fff;
            color: #dc3545;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .image-dropzone__remove:hover {
            background-color: #dc3545;
            color: #fff;
        }
    </style>
@endsection

@section('scripts')
    <script>
        $(function() {
            var goldPrices = @json($goldPrices->keyBy('purity'));
            var DEFAULT_PURITY = '999';

            var $goldType = $('#gold_type');
            var $weight = $('#weight');
            var $askPrice = $('#ask_price');
            var $bidPrice = $('#bid_price');

            // ----- Price: digits and single decimal point only -----
            var $price = $('#price');

            $price.on('keydown', function(e) {
                // Allow control/navigation keys (backspace, delete, tab, arrows, etc.)
                if ($.inArray(e.key, ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
                        'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'
                    ]) !== -1 ||
                    // Allow copy/paste/select-all/cut shortcuts
                    ((e.ctrlKey || e.metaKey) && ['a', 'c', 'v', 'x'].indexOf(e.key.toLowerCase()) !== -1)) {
                    return;
                }

                // Allow a single '.' only if one doesn't already exist
                if (e.key === '.') {
                    if (this.value.indexOf('.') !== -1) {
                        e.preventDefault();
                    }
                    return;
                }

                // Block anything that isn't a digit
                if (!/^[0-9]$/.test(e.key)) {
                    e.preventDefault();
                }
            });

            $price.on('input', function() {
                var value = this.value;
                // Strip anything that isn't a digit or a dot
                value = value.replace(/[^0-9.]/g, '');
                // Keep only the first decimal point
                var parts = value.split('.');
                if (parts.length > 2) {
                    value = parts[0] + '.' + parts.slice(1).join('');
                }
                this.value = value;
            });

            // ----- Image drag & drop upload -----
            var MAX_IMAGE_SIZE = 2 * 1024 * 1024; // 2MB
            var ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/jpg'];

            var dropzone = document.getElementById('image-dropzone');
            var fileInput = document.getElementById('image');
            var placeholder = document.getElementById('dropzone-placeholder');
            var preview = document.getElementById('dropzone-preview');
            var previewImg = document.getElementById('dropzone-preview-img');
            var fileName = document.getElementById('dropzone-file-name');
            var fileSize = document.getElementById('dropzone-file-size');
            var removeBtn = document.getElementById('dropzone-remove');
            var errorBox = document.getElementById('image-error');

            function formatFileSize(bytes) {
                if (bytes >= 1024 * 1024) {
                    return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
                }
                return (bytes / 1024).toFixed(0) + ' KB';
            }

            function showError(message) {
                errorBox.textContent = message;
                errorBox.classList.remove('d-none');
                dropzone.classList.add('has-error');
            }

            function clearError() {
                errorBox.textContent = '';
                errorBox.classList.add('d-none');
                dropzone.classList.remove('has-error');
            }

            function resetImage() {
                fileInput.value = '';
                previewImg.src = '';
                preview.classList.add('d-none');
                placeholder.classList.remove('d-none');
                clearError();
            }

            function handleFile(file) {
                if (!file) {
                    return;
                }

                if (ALLOWED_TYPES.indexOf(file.type) === -1) {
                    resetImage();
                    showError('Please upload a PNG or JPG image.');
                    return;
                }

                if (file.size > MAX_IMAGE_SIZE) {
                    resetImage();
                    showError('Image must be smaller than 2MB.');
                    return;
                }

                clearError();

                var reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    fileName.textContent = file.name;
                    fileSize.textContent = formatFileSize(file.size);
                    placeholder.classList.add('d-none');
                    preview.classList.remove('d-none');
                };
                reader.readAsDataURL(file);
            }

            dropzone.addEventListener('click', function(e) {
                if (e.target === removeBtn || removeBtn.contains(e.target)) {
                    return;
                }
                fileInput.click();
            });

            fileInput.addEventListener('change', function() {
                handleFile(this.files[0]);
            });

            ['dragenter', 'dragover'].forEach(function(evt) {
                dropzone.addEventListener(evt, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    dropzone.classList.add('is-dragover');
                });
            });

            ['dragleave', 'dragend'].forEach(function(evt) {
                dropzone.addEventListener(evt, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    dropzone.classList.remove('is-dragover');
                });
            });

            dropzone.addEventListener('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropzone.classList.remove('is-dragover');

                var files = e.dataTransfer.files;
                if (files && files.length) {
                    fileInput.files = files;
                    handleFile(files[0]);
                }
            });

            removeBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                resetImage();
            });

            var form = document.getElementById('inventory-create-form');

            form.addEventListener('submit', function(e) {
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                e.preventDefault();

                Swal.fire({
                    icon: 'question',
                    title: 'Submit this inventory request?',
                    text: 'Please confirm the details are correct before submitting.',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, submit',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#19bdb4',
                }).then(function(result) {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
@endsection