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

@section('content')

<style>
/* Modern Stock Transfer Page */
.stock-transfer-page {
    background: linear-gradient(181deg, #ffffff, #a9daa3);
    min-height: 100vh;
    padding: 30px 15px;
}
.stock-transfer-header {
    background: linear-gradient(135deg, #416d19, #393e46);
    color: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.stock-transfer-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #fff !important;
}
.stock-transfer-header i {
    margin-right: 10px;
    font-size: 26px;
}
.modern-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.modern-card .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}
.modern-card .form-control,
.modern-card .select2-container .select2-selection {
    border-radius: 10px !important;
    border: 1px solid #ddd !important;
    padding: 10px 15px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.modern-card .form-control:hover,
.modern-card .select2-container .select2-selection:hover {
    border-color: #416d19 !important;
}
.modern-card .form-control:focus,
.modern-card .select2-container.select2-container--open .select2-selection {
    border-color: #416d19 !important;
    box-shadow: 0 0 0 0.2rem rgba(65, 109, 25, 0.15) !important;
}
.modern-card label {
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
    font-size: 13px;
}
.modern-table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}
.modern-table table {
    margin-bottom: 0;
}
.modern-table thead th {
    background: linear-gradient(135deg, #416d19, #393e46) !important;
    color: #fff !important;
    font-weight: 600;
    padding: 12px 8px !important;
    border: none !important;
    font-size: 13px;
}
.modern-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}
.modern-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}
.modern-table tbody td {
    padding: 10px 8px;
    vertical-align: middle;
    border-color: #f0f0f0 !important;
}
.modern-table tfoot {
    background: #f9f9f9;
    font-weight: 600;
}
.modern-btn {
    background: linear-gradient(135deg, #416d19, #393e46) !important;
    border: none !important;
    padding: 12px 35px !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(65, 109, 25, 0.3) !important;
}
.modern-btn:hover {
    filter: brightness(1.1) !important;
    box-shadow: 0 6px 12px rgba(65, 109, 25, 0.4) !important;
    transform: translateY(-2px);
}
.modern-btn i {
    margin-right: 8px;
}
.input-group-addon {
    background: linear-gradient(135deg, #416d19, #393e46) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px 0 0 10px !important;
}
.input-group .form-control:first-child {
    border-radius: 0 10px 10px 0 !important;
}
/* Highlight Quantity Column */
.modern-table thead th.qty-header {
    background: linear-gradient(135deg, #ffffff, #239806) !important;
    position: relative;
    animation: pulse-glow 2s ease-in-out infinite;
}
.modern-table thead th.qty-header::after {
    content: "⚠️";
    margin-left: 8px;
    font-size: 16px;
}
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(35, 152, 6, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(35, 152, 6, 0.8);
    }
}
.modern-table tbody td.qty-cell {
    background: linear-gradient(135deg, #fafffe, #f0f8f0) !important;
    border-left: 3px solid #239806 !important;
    border-right: 3px solid #239806 !important;
    font-weight: 600;
}
.modern-table tbody td.qty-cell input,
.modern-table tbody td.qty-cell select {
    background: #ffffff !important;
    border: 2px solid #239806 !important;
    font-weight: 600;
    border-radius: 8px !important;
    color: #000 !important;
}
.modern-table tbody td.qty-cell select {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
}
.modern-table tbody td.qty-cell select option {
    background: #ffffff !important;
    color: #000 !important;
    font-weight: 600;
}
.modern-table tbody td.qty-cell .sub_unit {
    background: #ffffff !important;
    color: #000 !important;
    font-weight: 600 !important;
}
/* Highlight Current Stock */
.qty_available_text {
    background: linear-gradient(135deg, #fff3cd, #ffc107);
    padding: 4px 10px;
    border-radius: 8px;
    border: 2px solid #ff9800;
    font-weight: 700;
    color: #000;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
    animation: stock-pulse 2s ease-in-out infinite;
}
@keyframes stock-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
    }
    50% {
        box-shadow: 0 2px 12px rgba(255, 152, 0, 0.6);
    }
}
.text-muted {
    padding: 6px 12px;
    background: linear-gradient(135deg, #ffffff, #fff8e1);
    border-radius: 8px;
    border: 2px solid #ffc107;
    display: inline-block;
    margin-top: 5px;
}
@media (max-width: 768px) {
    .stock-transfer-page {
        padding: 15px 10px;
    }
    .modern-card {
        padding: 15px;
    }
}
</style>

	<!-- Main content -->
	<section class="content no-print stock-transfer-page">
		<div class="container-fluid">
			<!-- Header -->
			<div class="stock-transfer-header">
				<h1><i class="fa fa-exchange-alt"></i> @lang('lang_v1.add_stock_transfer')</h1>
			</div>

			{!! Form::open(['url' => action('StockTransferController@store'), 'method' => 'post', 'id' => 'stock_transfer_form' ]) !!}
			
			<!-- Basic Information Card -->
			<div class="modern-card">
				<div class="card-title"><i class="fa fa-info-circle"></i> Basic Information</div>
				<div class="row">
					<div class="col-sm-4">
						<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>
					<div class="col-sm-4">
						<div class="form-group">
							{!! Form::label('ref_no', __('purchase.ref_no').':') !!}
							{!! Form::text('ref_no', null, ['class' => 'form-control']); !!}
						</div>
					</div>
					<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>

				</div>
			</div>
			
			<!-- Product Search Card -->
			<div class="modern-card">
				<div class="card-title"><i class="fa fa-search"></i> {{ __('stock_adjustment.search_products') }}</div>
				<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">
								@show_tooltip(__('tooltip.come_first'))
								<input type="checkbox" id="come_first" class="input-icheck">
								<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']); !!}
							</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="modern-table table-responsive">
							<table class="table table-bordered 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 qty-header">
										@lang('sale.qty')
									</th>
									@if (auth()->user()->can('stock_transfer.view_stock_value'))
										<th class="col-sm-2 text-center">
											@lang('sale.unit_price')
										</th>

										<th class="col-sm-2 text-center">
											@lang('sale.subtotal')
										</th>
									@endif
									<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">
									<td colspan="2">
										<div class="text-center">
											<b>Total Quantity:</b>
											<span id="total_adjustment_quantity">0.00</span>
										</div>
									</td>
									@if (auth()->user()->can('stock_transfer.view_stock_value'))
										<td colspan="2">
											<div class="pull-right"><b>@lang('sale.total'):</b> <span id="total_adjustment">0.00</span></div>
										</td>
									@endif
									<td ></td>
								</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
			
			<!-- Delivery & Notes Card -->
			<div class="modern-card">
				<div class="card-title"><i class="fa fa-sticky-note"></i> Additional Details</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group">
							{!! Form::label('shipping_charges', __('lang_v1.shipping_charges') . ':') !!}
							{!! Form::text('shipping_charges', 0, ['class' => 'form-control input_number', 'placeholder' => __('lang_v1.shipping_charges')]); !!}
						</div>
					</div>
					<div class="col-sm-6">
						<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">
					@if (auth()->user()->can('stock_transfer.view_stock_value'))
						<div class="col-md-12 text-right">
							<b>@lang('stock_adjustment.total_amount'):</b> <span id="final_total_text">0.00</span>
						</div>
					@endif
					<br>
					<br>
					<div class="col-sm-12 text-right">
						<button type="submit" id="save_stock_transfer" class="modern-btn">
							<i class="fa fa-save"></i> @lang('messages.save')
						</button>
					</div>
				</div>

			</div>
			{!! Form::close() !!}
		</div>
	</section>
@stop
@section('javascript')
	<script src="{{ asset('js/stock_transfer.js?v=' . time()) }}"></script>
	<script type="text/javascript">
		__page_leave_confirmation('#stock_transfer_form');
	</script>
@endsection