@extends('Admin.layout')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        {{-- PAGE HEADER --}}
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">

            <div class="d-flex align-items-center gap-3">

                {{-- BACK BUTTON --}}
                <a href="{{ route('product') }}" class="back-btn" title="Back to Product">

                    <i class="fas fa-chevron-left"></i>

                </a>

                <div>

                    <h4 class="fw-bold mb-1">
                        Add Product
                    </h4>

                </div>

            </div>

        </div>


        {{-- PRODUCT CARD --}}
        <div class="card">

            <div class="card-body">

                <form action="{{ route('product_store') }}" method="POST" enctype="multipart/form-data" id="SubmitForm">

                    @csrf

                    <div class="row g-4">

                        {{-- SERIAL NUMBER --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Serial Number
                            </label>

                            <input type="text" name="serial_no"
                                class="form-control @error('serial_no') is-invalid @enderror"
                                placeholder="Enter serial number" value="{{ old('serial_no') }}">

                            @error('serial_no')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                        {{-- CATEGORY --}}
                        <div class="col-md-6">
                            <label for="category_id" class="form-label">
                                Category
                            </label>

                            <select name="category_id" id="category_id"
                                class="form-select @error('category_id') is-invalid @enderror" required>
                                <option value="">Select Category</option>

                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>

                            @error('category_id')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        {{-- PRODUCT NAME --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Product Name
                            </label>

                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                placeholder="Enter product name" value="{{ old('name') }}">

                            @error('name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                        {{-- PRODUCT IMAGE --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Product Images
                            </label>

                            {{-- MOBILE ONLY --}}
                            <div class="d-grid gap-2 d-md-none">

                                {{-- CAPTURE PHOTO (IN-APP CAMERA) --}}
                                <button type="button" id="capturePhotoBtn" class="btn btn-primary">
                                    <i class="icon-base ti tabler-camera me-1"></i>
                                    Capture Photo
                                </button>

                                {{-- CHOOSE FROM GALLERY --}}
                                <label for="galleryInput" class="btn btn-outline-primary mb-0">
                                    <i class="icon-base ti tabler-photo me-1"></i>
                                    Choose from Gallery
                                </label>

                                <input type="file" id="galleryInput" accept="image/jpeg,image/png,image/webp" multiple
                                    hidden>

                            </div>


                            {{-- DESKTOP ONLY --}}
                            <div class="d-none d-md-block">

                                <input type="file" name="image[]" id="productImage" class="form-control"
                                    accept="image/jpeg,image/png,image/webp" multiple>

                            </div>


                            <small class="text-muted d-block mt-1">
                                JPG, PNG, WEBP | Maximum 5MB per image
                            </small>


                            @error('image')
                                <div class="text-danger small mt-1">
                                    {{ $message }}
                                </div>
                            @enderror

                            @error('image.*')
                                <div class="text-danger small mt-1">
                                    {{ $message }}
                                </div>
                            @enderror


                            {{-- IMAGE PREVIEW --}}
                            <div id="imagePreviewWrapper" class="mt-3 d-flex flex-wrap gap-2">
                            </div>

                        </div>

                        {{-- QUANTITY --}}
                        <div class="col-md-3">

                            <label class="form-label">
                                Quantity
                            </label>

                            <div class="input-group">

                                <button type="button" class="btn btn-outline-danger" id="reduceQuantity">

                                    <i class="ti tabler-minus"></i>

                                </button>


                                <input type="number" name="quantity" id="quantity"
                                    class="form-control text-center @error('quantity') is-invalid @enderror"
                                    value="{{ old('quantity', 0) }}" min="0">


                                <button type="button" class="btn btn-outline-success" id="addQuantity">

                                    <i class="ti tabler-plus"></i>

                                </button>

                            </div>

                            @error('quantity')
                                <div class="text-danger small mt-1">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                        {{-- LOW STOCK LIMIT --}}
                        <div class="col-md-3">

                            <label class="form-label">
                                Low Stock Limit
                            </label>

                            <input type="number" name="low_stock_limit"
                                class="form-control @error('low_stock_limit') is-invalid @enderror"
                                placeholder="Enter low stock limit" value="{{ old('low_stock_limit', 3) }}" min="0">

                            <small class="text-muted">
                                Product is low stock when quantity reaches this limit.
                            </small>

                            @error('low_stock_limit')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                        {{-- BUYING PRICE --}}
                        <div class="col-md-3">

                            <label class="form-label">
                                Buying Price
                            </label>

                            <div class="input-group">

                                <span class="input-group-text">
                                    ₹
                                </span>

                                <input type="number" name="buying_price"
                                    class="form-control @error('buying_price') is-invalid @enderror"
                                    placeholder="Enter buying price" value="{{ old('buying_price') }}" min="0"
                                    step="0.01">

                            </div>

                            @error('buying_price')
                                <div class="text-danger small mt-1">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- SELLING PRICE --}}
                        <div class="col-md-3">

                            <label class="form-label">
                                Selling Price
                            </label>

                            <div class="input-group">

                                <span class="input-group-text">
                                    ₹
                                </span>

                                <input type="number" name="selling_price"
                                    class="form-control @error('selling_price') is-invalid @enderror"
                                    placeholder="Enter selling price" value="{{ old('selling_price') }}" min="0"
                                    step="0.01">

                            </div>

                            @error('selling_price')
                                <div class="text-danger small mt-1">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- DESCRIPTION --}}
                        <div class="col-12">

                            <label class="form-label">
                                Description
                            </label>

                            <textarea name="description" class="form-control @error('description') is-invalid @enderror" rows="4"
                                placeholder="Enter product description">{{ old('description') }}</textarea>

                            @error('description')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- BUTTONS --}}
                        <div class="col-12">

                            <div class="d-flex justify-content-center gap-2">

                                <a href="{{ route('product') }}" class="btn btn-outline-primary">

                                    Cancel

                                </a>

                                <button type="submit" class="btn btn-primary" id="submit_btn">

                                    <span class="updateProductText">
                                        Save Product

                                    </span>

                                    <span class="updateProductLoader d-none">

                                        <span class="spinner-border spinner-border-sm me-1"></span>

                                        Saving...

                                    </span>

                                </button>


                            </div>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

    {{-- FULL-SCREEN IN-APP CAMERA (CHATGPT / GEMINI STYLE) --}}
    <div id="fullScreenCameraOverlay"
        style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 999999; flex-direction: column; justify-content: space-between; touch-action: none;">

        {{-- TOP HEADER BAR --}}
        <div class="d-flex justify-content-between align-items-center px-3 py-3"
            style="position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);">
            <button type="button" id="fsCloseBtn"
                class="btn btn-dark rounded-circle p-0 d-flex align-items-center justify-content-center"
                style="width: 44px; height: 44px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3); color: #fff;">
                <i class="ti tabler-x fs-3"></i>
            </button>

            <span class="text-white fw-bold small" style="letter-spacing: 1px;">CAMERA</span>

            <button type="button" id="fsSwitchCamBtn"
                class="btn btn-dark rounded-circle p-0 d-flex align-items-center justify-content-center"
                style="width: 44px; height: 44px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3); color: #fff;">
                <i class="ti tabler-refresh fs-3"></i>
            </button>
        </div>

        {{-- VIEWFINDER / CAPTURED PHOTO --}}
        <div
            style="width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000;">
            <video id="fsVideo" autoplay playsinline muted
                style="width: 100%; height: 100%; object-fit: cover;"></video>
            <canvas id="fsCanvas" style="display: none;"></canvas>
            <img id="fsPhotoPreview" alt="Captured Photo"
                style="display: none; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 50;" />

            {{-- FLASH EFFECT --}}
            <div id="fsFlashEffect"
                style="display: none; position: absolute; inset: 0; background: #fff; z-index: 60; opacity: 0.8;"></div>

            {{-- ERROR / FALLBACK --}}
            <div id="fsErrorBox" class="alert alert-danger position-absolute m-3 text-center"
                style="display: none; z-index: 90; max-width: 90%;"></div>
        </div>

        {{-- BOTTOM CONTROLS --}}
        <div class="d-flex justify-content-center align-items-center pb-5 pt-3"
            style="position: absolute; bottom: 0; left: 0; right: 0; z-index: 100; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);">

            {{-- LIVE SHUTTER BUTTON --}}
            <div id="fsLiveControls" class="d-flex align-items-center justify-content-center w-100">
                <button type="button" id="fsShutterBtn" class="btn p-0"
                    style="width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: transparent; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(0,0,0,0.5);">
                    <span style="width: 60px; height: 60px; background: #fff; border-radius: 50%; display: block;"></span>
                </button>
            </div>

            {{-- REVIEW CONTROLS (After Taking Photo) --}}
            <div id="fsReviewControls" class="justify-content-around align-items-center w-100 px-4"
                style="display: none;">
                <button type="button" id="fsRetakeBtn"
                    class="btn btn-outline-light rounded-pill px-4 py-2 d-flex align-items-center gap-1 shadow">
                    <i class="ti tabler-arrow-back-up fs-5"></i> Retake
                </button>

                <button type="button" id="fsAcceptBtn"
                    class="btn btn-success rounded-pill px-4 py-2 d-flex align-items-center gap-1 shadow">
                    <i class="ti tabler-check fs-5"></i> Use Photo
                </button>
            </div>

        </div>

    </div>
@endsection


@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            /*
            |--------------------------------------------------------------------------
            | ELEMENTS
            |--------------------------------------------------------------------------
            */

            const productImage = document.getElementById('productImage');
            const galleryInput = document.getElementById('galleryInput');
            const previewWrapper = document.getElementById('imagePreviewWrapper');
            const capturePhotoBtn = document.getElementById('capturePhotoBtn');

            // Fullscreen Camera Elements
            const cameraOverlay = document.getElementById('fullScreenCameraOverlay');
            const fsVideo = document.getElementById('fsVideo');
            const fsCanvas = document.getElementById('fsCanvas');
            const fsPhotoPreview = document.getElementById('fsPhotoPreview');
            const fsFlashEffect = document.getElementById('fsFlashEffect');
            const fsErrorBox = document.getElementById('fsErrorBox');
            const fsShutterBtn = document.getElementById('fsShutterBtn');
            const fsLiveControls = document.getElementById('fsLiveControls');
            const fsReviewControls = document.getElementById('fsReviewControls');
            const fsRetakeBtn = document.getElementById('fsRetakeBtn');
            const fsAcceptBtn = document.getElementById('fsAcceptBtn');
            const fsCloseBtn = document.getElementById('fsCloseBtn');
            const fsSwitchCamBtn = document.getElementById('fsSwitchCamBtn');


            /*
            |--------------------------------------------------------------------------
            | FILE STORAGE & CAMERA STATE
            |--------------------------------------------------------------------------
            */

            let selectedFiles = [];
            let activeStream = null;
            let currentFacingMode = 'environment';
            let tempCapturedFile = null;


            /*
            |--------------------------------------------------------------------------
            | START / STOP IN-APP CAMERA
            |--------------------------------------------------------------------------
            */

            async function startCamera() {

                fsErrorBox.style.display = 'none';
                fsPhotoPreview.style.display = 'none';
                fsVideo.style.display = 'block';

                fsLiveControls.style.display = 'flex';
                fsReviewControls.style.display = 'none';

                if (activeStream) {

                    activeStream.getTracks().forEach(function(track) {
                        track.stop();
                    });

                    activeStream = null;
                }

                if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {

                    fsErrorBox.textContent =
                        'Camera is not supported on this browser or requires HTTPS.';

                    fsErrorBox.style.display = 'block';

                    return;
                }

                try {

                    const constraints = {
                        video: {
                            facingMode: {
                                ideal: currentFacingMode
                            },
                            width: {
                                ideal: 1920
                            },
                            height: {
                                ideal: 1080
                            }
                        },
                        audio: false
                    };

                    activeStream =
                        await navigator.mediaDevices.getUserMedia(constraints);

                    fsVideo.srcObject = activeStream;

                    await fsVideo.play();

                } catch (err) {

                    console.error('Camera error:', err);

                    fsErrorBox.textContent =
                        'Unable to access camera. Please allow camera permissions.';

                    fsErrorBox.style.display = 'block';
                }
            }


            function stopCamera() {

                if (activeStream) {

                    activeStream.getTracks().forEach(function(track) {
                        track.stop();
                    });

                    activeStream = null;
                }

                fsVideo.srcObject = null;

                cameraOverlay.style.display = 'none';
            }


            /*
            |--------------------------------------------------------------------------
            | CAMERA CONTROLS
            |--------------------------------------------------------------------------
            */

            if (capturePhotoBtn) {

                capturePhotoBtn.addEventListener('click', function() {

                    cameraOverlay.style.display = 'flex';

                    startCamera();
                });
            }


            if (fsCloseBtn) {

                fsCloseBtn.addEventListener('click', function() {

                    stopCamera();
                });
            }


            if (fsSwitchCamBtn) {

                fsSwitchCamBtn.addEventListener('click', function() {

                    currentFacingMode =
                        currentFacingMode === 'environment' ?
                        'user' :
                        'environment';

                    startCamera();
                });
            }


            /*
            |--------------------------------------------------------------------------
            | SHUTTER - CAPTURE PHOTO
            |--------------------------------------------------------------------------
            */

            if (fsShutterBtn) {

                fsShutterBtn.addEventListener('click', function() {

                    if (!activeStream || !fsVideo.videoWidth) {
                        return;
                    }

                    // Flash animation
                    fsFlashEffect.style.display = 'block';

                    setTimeout(function() {

                        fsFlashEffect.style.display = 'none';

                    }, 100);


                    const width = fsVideo.videoWidth;
                    const height = fsVideo.videoHeight;

                    fsCanvas.width = width;
                    fsCanvas.height = height;

                    const ctx = fsCanvas.getContext('2d');


                    // Mirror front camera
                    if (currentFacingMode === 'user') {

                        ctx.translate(width, 0);
                        ctx.scale(-1, 1);
                    }


                    ctx.drawImage(
                        fsVideo,
                        0,
                        0,
                        width,
                        height
                    );


                    fsCanvas.toBlob(function(blob) {

                        if (!blob) {
                            return;
                        }


                        const fileName =
                            'product_' + Date.now() + '.jpg';


                        tempCapturedFile = new File(
                            [blob],
                            fileName, {
                                type: 'image/jpeg',
                                lastModified: Date.now()
                            }
                        );


                        // Show captured image
                        fsPhotoPreview.src =
                            URL.createObjectURL(blob);

                        fsPhotoPreview.style.display = 'block';

                        fsVideo.style.display = 'none';


                        // Show review controls
                        fsLiveControls.style.display = 'none';

                        fsReviewControls.style.display = 'flex';

                    }, 'image/jpeg', 0.92);

                });
            }


            /*
            |--------------------------------------------------------------------------
            | RETAKE PHOTO
            |--------------------------------------------------------------------------
            */

            if (fsRetakeBtn) {

                fsRetakeBtn.addEventListener('click', function() {

                    tempCapturedFile = null;

                    fsPhotoPreview.style.display = 'none';

                    fsVideo.style.display = 'block';

                    fsLiveControls.style.display = 'flex';

                    fsReviewControls.style.display = 'none';
                });
            }


            /*
            |--------------------------------------------------------------------------
            | USE CAPTURED PHOTO
            |--------------------------------------------------------------------------
            */

            if (fsAcceptBtn) {

                fsAcceptBtn.addEventListener('click', function() {

                    if (tempCapturedFile) {

                        // Add file only
                        addImage(tempCapturedFile);

                        // Render once
                        renderPreview();

                        // Update actual input
                        updateInputFiles();

                        tempCapturedFile = null;
                    }

                    stopCamera();
                });
            }


            /*
            |--------------------------------------------------------------------------
            | DESKTOP FILE INPUT
            |--------------------------------------------------------------------------
            */

            if (productImage) {

                productImage.addEventListener('change', function() {

                    const files = Array.from(this.files);

                    // Clear browser input value
                    this.value = '';


                    // Add all selected files first
                    files.forEach(function(file) {

                        addImage(file);

                    });


                    // Render ONLY ONCE
                    renderPreview();


                    // Update actual form input
                    updateInputFiles();

                });
            }


            /*
            |--------------------------------------------------------------------------
            | GALLERY INPUT
            |--------------------------------------------------------------------------
            */

            if (galleryInput) {

                galleryInput.addEventListener('change', function() {

                    const files = Array.from(this.files);

                    // Clear browser input value
                    this.value = '';


                    // Add all selected files first
                    files.forEach(function(file) {

                        addImage(file);

                    });


                    // Render ONLY ONCE
                    renderPreview();


                    // Update actual form input
                    updateInputFiles();

                });
            }


            /*
            |--------------------------------------------------------------------------
            | ADD IMAGE
            |--------------------------------------------------------------------------
            */

            function addImage(file) {

                const allowedTypes = [
                    'image/jpeg',
                    'image/png',
                    'image/webp'
                ];


                /*
                |--------------------------------------------------------------------------
                | FILE TYPE VALIDATION
                |--------------------------------------------------------------------------
                */

                if (!allowedTypes.includes(file.type)) {

                    alert(
                        'Only JPG, PNG and WEBP images are allowed.'
                    );

                    return false;
                }


                /*
                |--------------------------------------------------------------------------
                | FILE SIZE VALIDATION
                |--------------------------------------------------------------------------
                */

                if (file.size > 5 * 1024 * 1024) {

                    alert(
                        'Each image must be less than 5MB.'
                    );

                    return false;
                }


                /*
                |--------------------------------------------------------------------------
                | DUPLICATE CHECK
                |--------------------------------------------------------------------------
                */

                const duplicate = selectedFiles.some(
                    function(existingFile) {

                        return (
                            existingFile.name === file.name &&
                            existingFile.size === file.size &&
                            existingFile.lastModified === file.lastModified
                        );

                    }
                );


                if (duplicate) {

                    return false;
                }


                /*
                |--------------------------------------------------------------------------
                | ADD FILE
                |--------------------------------------------------------------------------
                */

                selectedFiles.push(file);

                return true;
            }


            /*
            |--------------------------------------------------------------------------
            | RENDER PREVIEW
            |--------------------------------------------------------------------------
            */

            function renderPreview() {

                // Completely clear existing previews
                previewWrapper.innerHTML = '';


                selectedFiles.forEach(function(file, index) {

                    const reader = new FileReader();


                    reader.onload = function(event) {

                        const imageBox =
                            document.createElement('div');


                        imageBox.className =
                            'position-relative';


                        imageBox.style.width = '140px';
                        imageBox.style.height = '140px';


                        /*
                        |--------------------------------------------------------------------------
                        | IMAGE
                        |--------------------------------------------------------------------------
                        */

                        const image =
                            document.createElement('img');


                        image.src =
                            event.target.result;


                        image.alt =
                            'Product Image';


                        image.className =
                            'rounded border';


                        image.style.width =
                            '140px';


                        image.style.height =
                            '140px';


                        image.style.objectFit =
                            'cover';


                        /*
                        |--------------------------------------------------------------------------
                        | REMOVE BUTTON
                        |--------------------------------------------------------------------------
                        */

                        const removeButton =
                            document.createElement('button');


                        removeButton.type =
                            'button';


                        removeButton.className =
                            'btn btn-danger btn-sm position-absolute top-0 end-0 rounded-circle remove-image';


                        removeButton.style.width =
                            '32px';


                        removeButton.style.height =
                            '32px';


                        removeButton.style.padding =
                            '0';


                        removeButton.style.zIndex =
                            '5';


                        removeButton.innerHTML =
                            '&times;';


                        /*
                        |--------------------------------------------------------------------------
                        | REMOVE IMAGE
                        |--------------------------------------------------------------------------
                        */

                        removeButton.addEventListener(
                            'click',
                            function() {

                                selectedFiles.splice(index, 1);

                                renderPreview();

                                updateInputFiles();

                            }
                        );


                        /*
                        |--------------------------------------------------------------------------
                        | APPEND IMAGE
                        |--------------------------------------------------------------------------
                        */

                        imageBox.appendChild(image);

                        imageBox.appendChild(removeButton);

                        previewWrapper.appendChild(imageBox);

                    };


                    reader.readAsDataURL(file);

                });

            }


            /*
            |--------------------------------------------------------------------------
            | UPDATE REAL FORM INPUT
            |--------------------------------------------------------------------------
            */

            function updateInputFiles() {

                if (!productImage) {
                    return;
                }


                const dataTransfer =
                    new DataTransfer();


                selectedFiles.forEach(function(file) {

                    dataTransfer.items.add(file);

                });


                productImage.files =
                    dataTransfer.files;

            }


            /*
            |--------------------------------------------------------------------------
            | QUANTITY ADD
            |--------------------------------------------------------------------------
            */

            $('#addQuantity').on('click', function() {

                let quantity =
                    parseInt($('#quantity').val()) || 0;


                $('#quantity').val(
                    quantity + 1
                );

            });


            /*
            |--------------------------------------------------------------------------
            | QUANTITY REDUCE
            |--------------------------------------------------------------------------
            */

            $('#reduceQuantity').on('click', function() {

                let quantity =
                    parseInt($('#quantity').val()) || 0;


                if (quantity > 0) {

                    $('#quantity').val(
                        quantity - 1
                    );

                }

            });


            /*
            |--------------------------------------------------------------------------
            | PREVENT NEGATIVE QUANTITY
            |--------------------------------------------------------------------------
            */

            $('#quantity').on('input', function() {

                if ($(this).val() < 0) {

                    $(this).val(0);

                }

            });


            /*
            |--------------------------------------------------------------------------
            | SUBMIT BUTTON
            |--------------------------------------------------------------------------
            */

            $('#SubmitForm').on('submit', function(e) {

                const submitButton =
                    $('#submit_btn');


                if (submitButton.prop('disabled')) {

                    e.preventDefault();

                    return false;
                }


                submitButton.prop(
                    'disabled',
                    true
                );


                submitButton
                    .find('.updateProductText')
                    .addClass('d-none');


                submitButton
                    .find('.updateProductLoader')
                    .removeClass('d-none');

            });

        });
    </script>
@endsection