@extends('partner.layouts.master')

@section('css')
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">عملية بيع جديدة</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('partner.index')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">عملية بيع جديدة</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    @if(Session::has('alert'))
                        <p>{{Session::get('alert')}}</p>
                    @endif
                    <form action="{{route('partner.orders.store')}}" method="post">
                        @csrf
                        <div class="form-group">
                            <label>{{trans('labels.phone')}}</label>
                            <input type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" required>
                            @error('phone')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        
                        <div class="form-group">
                            <label>الاصناف</label>
                            <select name="item_id" class="form-control @error('item_id') is-invalid @enderror" id="item_id" required>
                                <option value="">----- حدد الصنف -----</option>
                                @foreach($items as $item)
                                    <option value="{{$item->id}}" data-amount="{{$item->price}}">{{$item->title}} ({{$item->price}})</option>
                                @endforeach
                            </select>
                            @error('item_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>العدد</label>
                            <select name="number" class="form-control @error('number') is-invalid @enderror" id="number" required>
                                @foreach($numbers as $number)
                                    <option value="{{$number}}">{{$number}}</option>
                                @endforeach
                            </select>
                            @error('number')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div style="margin-top: 20px; margin-bottom: 20px;">
                            <span style="font-size: 20px;">المبلغ المطلوب: </span>
                            <span  style="font-size: 30px; font-weight: bold;" id="amount">0</span> 
                            <span style="font-size: 20px;"> جنية مصري</span>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary waves-effect waves-light" type="submit" aria-haspopup="true" aria-expanded="false">
                                تنفيذ
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')

<script type="text/javascript">
    document.getElementById("item_id").addEventListener("change", setAmountValue);
    document.getElementById("number").addEventListener("change", setAmountValue);

    function setAmountValue(){

        let item = document.getElementById("item_id");
        let selectedItemOption =item.options[item.selectedIndex];
        let dataValue = selectedItemOption.getAttribute("data-amount");

        let number = document.getElementById("number");
        let selectedNumberption =number.options[number.selectedIndex];
        let numberValue = selectedNumberption.value;

      // Set value to another input
      document.getElementById("amount").innerText = dataValue * numberValue;
    }
</script>
@endsection