@extends('backend.layout')

@section('content')

<div class="panel panel-flat">
		<div class="panel-body" style="padding-top: 0px;">
			<legend class="text-bold">
				<div class="row">
					<div class="col-md-6">
						<a href="{{ route('backend.invoice.list') }}" data-popup="tooltip" title="Danh sách dịch vụ khách hàng"><i class="icon-arrow-left7 position-left"></i></a>&nbsp;
						Invoice: <a>#{{$invoice->invoice_code}}</a>
						@if($box)
						- Mã hợp đồng: <a href="{{ route('backend.box.get', $box->id) }}">{{ $box->code }}</a>
						&nbsp;&nbsp;- Khách hàng: <b>{{ $box->customer->fullname }}</b>
						&nbsp;&nbsp;- Đại lý: <b>{{ $box->customer->user->name }}</b>
						&nbsp;&nbsp;- Sử dụng: <b>{{ $box->devices->count() }} </b>
						@endif
					</div>
					<div class="col-md-6 text-right">
					</div>
				</div>
			</legend>
			
			<form action="" method="POST">
				{{ csrf_field() }}
				<div class="row">
					<div class="col-md-5">
						<div class="form-group has-feedback @if( @$errors->first('note') != null ) has-error  @endif ">
							<label class="control-label">Ghi chú</label>
							<textarea rows="5" placeholder="Ghi chú.." name="note" class="form-control">{{ old('note', $invoice->note) }}</textarea>
						</div>
						<div class="form-group pull-right mt-5" style="width: 120px;">
							<button type="submit" class="btn btn-primary form-control">Cập nhật<i class="icon-file-plus position-right"></i></button>
						</div>
					</div>
				</div>
			</form>

		</div>
	</div>

@endsection

@push('styles')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
	<style>
		
		.select-xs.select2-selection--single{
			height:36px;
		}
		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
			padding: 5px 5px;
			white-space: normal !important;
		}
		.select-xs.select2-selection--multiple .select2-search--inline .select2-search__field{
			min-width:200px;
		}
		.select2-selection--multiple .select2-search--inline .select2-search__field{
			padding:5px 0px !important;
			max-width: 200px;
		}
		.modal-header .close {
		    position: absolute;
		    right: 10px;
		    top: 9px;
		    margin-top: 0;
		}
		.modal.right .modal-dialog {
		  position: fixed;
		  margin: auto;
		  min-width: 350px; /* Điều chỉnh độ rộng của modal phù hợp với yêu cầu của bạn */
		  height: 100%;
		  top: 45%;
		  right: -370px; /* Khoảng cách từ phía bên phải màn hình */
		  transition: right 0.3s ease-in-out;
		}

		.modal.right.in .modal-dialog {
		  right: 0;
		}
	</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
	<script>
		$('.select2').select2();
	</script>
@endpush