@extends('layouts.app')
@section('title', __('lang_v1.add_stock_transfer'))

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('lang_v1.add_stock_transfer')</h1>
           @if (!empty($video) && auth()->user()->can('edu_videos.view'))
            @include('video.video_button', ['fileName' => $video ]) 
     @endif
    </section>
     @php
        
            $enabled_products_modules = (array) (!empty(session('business.enabled_products_modules'))
                ? session('business.enabled_products_modules')
                : []);
        @endphp
    <!-- Main content -->
    <section class="content no-print">
        {!! Form::open([
            'url' => action([\App\Http\Controllers\StockTransferController::class, 'store']),
            'method' => 'post',
            'id' => 'stock_transfer_form',
        ]) !!}

        @component('components.widget', ['class' => 'box-solid'])
            <div class="row">
                
                <div class="col-sm-4  @if(!auth()->user()->can('date.access')) hide @endif">
                    <div class="form-group">
                        {!! Form::label('transaction_date', __('messages.date') . ':*') !!}
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                            {!! Form::text('transaction_date', @format_datetime('now'), ['class' => 'form-control', 'readonly', 'required']) !!}
                        </div>
                    </div>
                </div>
               @can('stock_transfer.ref_no')
                    <div class="col-sm-4 @if (!in_array('enable_stock_pref_number', $enabled_products_modules)) hide @endif">
                        <div class="form-group">
                            {!! Form::label('ref_no', __('purchase.ref_no') . ':') !!}
                            {!! Form::text('ref_no', null, ['class' => 'form-control']) !!}
                        </div>
                    </div>
                 @endcan
                <div class="col-sm-4">
                    <div class="form-group">
                        {!! Form::label('status', __('sale.status') . ':*') !!} @show_tooltip(__('lang_v1.completed_status_help'))
                        {!! Form::select('status', $statuses, null, [
                            'class' => 'form-control select2',
                            'placeholder' => __('messages.please_select'),
                            'required',
                            'id' => 'status',
                        ]) !!}
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('location_id', __('lang_v1.location_from') . ':*') !!}
                        {!! Form::select('location_id', $business_locations, null, [
                            'class' => 'form-control select2',
                            'placeholder' => __('messages.please_select'),
                            'required',
                            'id' => 'location_id',
                        ]) !!}
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        {!! Form::label('transfer_location_id', __('lang_v1.location_to') . ':*') !!}
                        {!! Form::select('transfer_location_id', $business_locations, null, [
                            'class' => 'form-control select2',
                            'placeholder' => __('messages.please_select'),
                            'required',
                            'id' => 'transfer_location_id',
                        ]) !!}
                    </div>
                </div>
                 @can('stock_transfer.custom_fields')
                    <div class="col-sm-4 @if (!in_array('enable_stock_custom_fields', $enabled_products_modules)) hide @endif">
                        <div class="form-group">
                            {!! Form::label('custom_field1',  __('sale.custom_field_1') . ':') !!}
                            {!! Form::text('custom_field_1', null, ['class' => 'form-control',
                            'placeholder' =>  __('sale.custom_field_1') ]); !!}
                        </div>
                    </div>
                    <div class="col-sm-4 @if (!in_array('enable_stock_custom_fields', $enabled_products_modules)) hide @endif">
                        <div class="form-group">
                            {!! Form::label('custom_field1',  __('sale.custom_field_2') . ':') !!}
                            {!! Form::text('custom_field_2', null, ['class' => 'form-control',
                            'placeholder' =>  __('sale.custom_field_2') ]); !!}
                        </div>
                    </div>
                    <div class="col-sm-4 @if (!in_array('enable_stock_custom_fields', $enabled_products_modules)) hide @endif">
                        <div class="form-group">
                            {!! Form::label('custom_field1',  __('sale.custom_field_3') . ':') !!}
                            {!! Form::text('custom_field_3', null, ['class' => 'form-control',
                            'placeholder' =>  __('sale.custom_field_3') ]); !!}
                        </div>
                    </div>
                    <div class="col-sm-4 @if (!in_array('enable_stock_custom_fields', $enabled_products_modules)) hide @endif">
                        <div class="form-group">
                            {!! Form::label('custom_field1',  __('sale.custom_field_4') . ':') !!}
                            {!! Form::text('custom_field_4', null, ['class' => 'form-control',
                            'placeholder' =>  __('sale.custom_field_4') ]); !!}
                        </div>
                    </div>
                @endcan
               </div>
              @endcomponent

        <!-- end-->
        @component('components.widget', ['class' => 'box-solid'])
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-search"></i>
                            </span>
                            {!! Form::text('search_product', null, [
                                'class' => 'form-control',
                                'id' => 'search_product_for_srock_adjustment',
                                'placeholder' => __('stock_adjustment.search_product'),
                                'disabled',
                            ]) !!}
                            <span class="input-group-btn">
								<button type="button" 
										id="scan_barcode_btn" 
										class="btn btn-default bg-white btn-flat" 
										disabled>
									<i class="fa fa-barcode"></i> 
								</button>
							</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <input type="hidden" id="product_row_index" value="0">
                    <input type="hidden" id="total_amount" name="final_total" value="0">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-condensed" id="stock_adjustment_product_table">
                            <thead>
                                <tr>
                                    <th class="col-sm-4 text-center">
                                        @lang('sale.product')
                                    </th>
                                    <th class="col-sm-2 text-center">
                                        @lang('sale.qty')
                                    </th>
                                    <th class="col-sm-2 text-center show_price_with_permission">
                                        @lang('sale.unit_price')
                                    </th>
                                    <th class="col-sm-2 text-center show_price_with_permission">
                                        @lang('sale.subtotal')
                                    </th>
                                    <th class="col-sm-2 text-center"><i class="fa fa-trash" aria-hidden="true"></i></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr class="text-center show_price_with_permission">
                                    <td colspan="3"></td>
                                    <td>
                                        <div class="pull-right"><b>@lang('sale.total'): </b> <span
                                                id="total_adjustment">0.00</span></div>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        @endcomponent


        @component('components.widget', ['class' => 'box-solid'])
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        {!! Form::label('shipping_charges', __('lang_v1.shipping_charges') . ':') !!}
                        {!! Form::text('shipping_charges', 0, [
                            'class' => 'form-control input_number payment_amount',
                            'placeholder' => __('lang_v1.shipping_charges'),
                        ]) !!}
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        {!! Form::label('additional_notes', __('purchase.additional_notes')) !!}
                        {!! Form::textarea('additional_notes', null, ['class' => 'form-control', 'rows' => 3]) !!}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-right show_price_with_permission">
                    <b>@lang('stock_adjustment.total_amount'):</b> <span id="final_total_text">0.00</span>
                </div>
                <br>
                <br>
                <div class="col-sm-12 text-center">
                    <button type="submit" id="save_stock_transfer" class="tw-dw-btn tw-dw-btn-primary tw-dw-btn-lg tw-text-white">@lang('messages.save')</button>
                </div>
            </div>
        @endcomponent

        {!! Form::close() !!}
         @include('video.video_modal') 

         <div id="barcodeModal" class="custom-swal">
    <div class="custom-swal-content">
        <h3 class="custom-swal-title">ROOT</h3>
        <video id="video" autoplay muted playsinline style="width:100%; height:160px; object-fit:cover; border-radius:5px;"></video>
        <div class="scan-line"></div>
        <button class="custom-swal-cancel">إلغاء</button>
    </div>
</div>
<style>
	
    .scan-btn {
    display: flex;
    align-items: center;
    gap: 6px; /* space between icon and text */
    padding: 6px 12px;
    background-color: #28a745; /* green */
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover effect */
.scan-btn:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* Active / click effect */
.scan-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

/* Icon styling */
.scan-btn i {
    font-size: 16px;
}
</style>
<style>
/* Modal overlay like SweetAlert */
.custom-swal {
    display: none;
    position: fixed;
    z-index: 9999;
    left:0; top:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modal box */
.custom-swal-content {
    background:#fff;
    border-radius: 10px;
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Title like SweetAlert */
.custom-swal-title {
    margin:0 0 10px 0;
    font-size: 18px;
    color: #333;
}

/* Scan line */
.scan-line {
    position: absolute;
    top:50%;
    left: 10%;
    width:80%;
    height:2px;
    background: rgba(255,0,0,0.8);
    animation: scanLine 0.8s infinite;
}

/* Cancel button like SweetAlert */
.custom-swal-cancel {
    margin-top: 15px;
    background:#d33;
    color:#fff;
    border:none;
    border-radius:5px;
    padding:8px 15px;
    cursor:pointer;
    font-size:14px;
}
.custom-swal {
    display: none; /* hidden by default */
}
@keyframes scanLine {
    0% { transform: translateY(-50%); }
    50% { transform: translateY(50%); }
    100% { transform: translateY(-50%); }
}
</style>
    </section>
@stop
@section('javascript')
<script>
window.transfer = true;
</script>
    
    <script src="{{ asset('js/stock_transfer.js?v=' . $asset_v) }}"></script>
    <script src="https://unpkg.com/@zxing/library@latest"></script>
	

<script>
let codeReader;
let stream;

const modal = document.getElementById("barcodeModal");
const video = document.getElementById("video");
const cancelBtn = modal.querySelector(".custom-swal-cancel");

// Open modal and start scanning
$('#scan_barcode_btn').on('click', async function() {
    modal.style.display = "flex";
    codeReader = new ZXing.BrowserBarcodeReader();

    try {
        stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
        video.srcObject = stream;
        await video.play();

        const result = await codeReader.decodeOnceFromVideoDevice(undefined, video);

        // Fill input and trigger autocomplete
        $('#search_product_for_srock_adjustment').val(result.text).autocomplete('search', result.text);

        // Stop scanner and close modal
        if(stream) stream.getTracks().forEach(track=>track.stop());
        codeReader.reset();
        modal.style.display = "none";

    } catch(err) {
        console.error(err);
      toastr.error('تعذر الوصول إلى الكاميرا أو قراءة الباركود');
        modal.style.display = "none";
        if(stream) stream.getTracks().forEach(track=>track.stop());
        if(codeReader) codeReader.reset();
    }
});

// Cancel button closes modal and stops camera
cancelBtn.onclick = () => {
    if(stream) stream.getTracks().forEach(track=>track.stop());
    if(codeReader) codeReader.reset();
    modal.style.display = "none";
}

// Click outside content closes modal
window.onclick = (event) => {
    if(event.target === modal){
        if(stream) stream.getTracks().forEach(track=>track.stop());
        if(codeReader) codeReader.reset();
        modal.style.display = "none";
    }
}
</script>
    <script type="text/javascript">
        __page_leave_confirmation('#stock_transfer_form');
        $(document).ready(function () {
    $('.payment_amount').on('input', function () {
        let input = $(this);
        let val = input.val();

        // Allow only digits and one decimal point
        let cleaned = val.replace(/[^0-9.]/g, '');

        // Handle multiple dots (keep only the first)
        let parts = cleaned.split('.');
        let integerPart = parts[0];
        let decimalPart = parts[1] !== undefined ? parts[1].slice(0, 2) : '';

        // Add commas to integer part
        let formattedInt = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        // Don't add dot if user typed it but there's no decimal part yet
        let result = decimalPart !== ''
            ? `${formattedInt}.${decimalPart}`
            : cleaned.endsWith('.') ? `${formattedInt}.` : formattedInt;

        input.val(result);
    });

    // On form submit: remove commas
    $('form').on('submit', function () {
        $('.payment_amount').each(function () {
            $(this).val($(this).val().replace(/,/g, ''));
        });
    });
});

$('#stock_transfer_form').on('submit', function (e) {
    e.preventDefault();

    let form = $(this);
    let formData = new FormData(this);

    $('#save_stock_transfer').prop('disabled', true).text('جاري الحفظ...');

    $.ajax({
        url: form.attr('action'),
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {

            toastr.success('تم حفظ التحويل المخزني بنجاح');

            $('#save_stock_transfer').prop('disabled', false).text('حفظ');

            if (response.redirect_url) {
                window.location.href = response.redirect_url;
            }
        },
        error: function (xhr) {
            $('#save_stock_transfer').prop('disabled', false).text('حفظ');

            if (xhr.status === 422) {
                toastr.error('تأكد من تعبئة جميع الحقول المطلوبة');
            } else {
                toastr.error('حدث خطأ غير متوقع');
            }
        }
    });
});

    </script>
@endsection


@cannot('view_purchase_price')
    <style>
        .show_price_with_permission {
            display: none !important;
        }
    </style>
@endcannot