@extends('website.templates.master')

@section('content')
<div class="container" id="app">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <a class="nav-link active" id="home-tab"  @Click="submitedOfferRequest=false "  data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Offers</a>
        </li>
        <li class="nav-item" role="presentation">
          <a class="nav-link" id="Offer-details-tab" data-toggle="tab" href="#Offer-details" role="tab" aria-controls="Offer-details" aria-selected="false">Offer details</a>
        </li>
        
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<!---   العروض بداية  ---->
            <div class=" card mb-3 p-0 ">
            {{-- <div class="card-header text-center "> <div class="font-weight-bold">{{ __('welcome.offers') }}</div>  </div> --}}
            <div class="card-body p-0 ">
                <div class="text-center p-3">
               
                    <div class="row">
                    @foreach ( $data['offers']  as $item)
                    <div  class="col-sm-12 col-lg-4 ">
                        <img @Click="showOfferTab({{$item->OfferNo}},'{{$item->OfferImg}}','{{$item->Title}}','{{$item->StartDate}}','{{$item->EndDate}}')" src="{{ url('/public/offers/'.$item->OfferImg ) }}" class="d-block w-100" alt="...">
                    </div>
                    @endforeach 
                    </div>                   
                </div>
            </div>
            </div>
<!---  نهاية العروض  ---->
        </div>
        <div class="tab-pane fade" id="Offer-details" role="tabpanel" aria-labelledby="Offer-details-tab">
            

          <div class="row"> <div v-if="offerSelected && !offerSelected.title" class="  m-auto p-5 text-white text-center"> <i class=" h3 fas fa-spinner fa-spin"></i> </div> </div>

<!-- start Modal offer -->
<div v-if="offerSelected && offerSelected.title " >
      <div class="card" dir="ltr">
        <div class="card-header">
          <h5 class="card-title" id="exampleModalLabel">  @{{ offerSelected.title }}  </h5>
          
        </div>
        <div class="row"> <div v-if="OfferItemLoadinng" class="  m-auto p-3 text-dark text-center"> <i class=" h3 fas fa-spinner fa-spin"></i> </div> </div>
        
        <div v-if="form_offer_error && !submitedOfferRequest && !offer_item_selected.item_no " class="row m-3 alert alert-danger "> @{{ form_offer_error }} </div> 
        <div v-if="submitedOfferRequest" class="row m-3 alert alert-success "> Your request has been sent successfully </div>
        <div v-if="!OfferItemLoadinng && !submitedOfferRequest" class="modal-body" >
          <div class="row">
            <div class="col-sm-12 col-lg-6">  <img :src="URL+'/public/offers/'+ offerSelected.img" class="d-block w-100" alt="..."> </div>
            <div class="col-sm-12 col-lg-6"> 
            <div class="px-3" >
              <div> Offer period </div>
              <small>  Start date : @{{ offerSelected.startDate }}   End date : @{{ offerSelected.endDate }}  </small> 
              <hr>
              <div>Select item </div>
                <div class="row ">
                    <div class="col-5 card ml-2 mb-2 p-2" :class="offer_item_selected.item_no==item.ItemCode ? 'bg-dark' : ''" v-for="item in offerItemSelected"  :key="item.ItemCode">
                      <a href="#" :class="offer_item_selected.item_no==item.ItemCode ? 'text-light' : ''" @Click="offer_item_selected={price:item.Price,discount:item.Discount,item_no:item.ItemCode,AddDays:item.AddDays} " > @{{ item.ETitle }}</a> </div>    
                </div>  
                <hr>
                <div v-if="offer_item_selected.price" >
                  <div class="row">
                    <div class="col">Price : <del v-if="offer_item_selected.discount"> @{{ parseInt(offer_item_selected.discount + offer_item_selected.price) }} </del>  <span class="px-2"> <strong v-if="offer_item_selected.price">@{{ parseInt((offer_item_selected.price - offer_item_selected.discount).toString().replace('-','')) }} SR </strong>  </span> 
                    </div>
                    <div v-if=" offer_item_selected.AddDays  > 0 " class="col"> Add Days : <strong>@{{ offer_item_selected.AddDays }}</strong> Days </div>
                  </div>
                <hr>
                </div>
                
                <div >
                  <span class="pr-2">Select start date : </span>
                  <vuejs-datepicker   :input-class="classCal" :disabled-dates="offer_state.disabledDates" v-model="offer_date_start"  :format="customFormatter"></vuejs-datepicker>


                  <hr>
                </div>
                <div >
                  <label for=""> Choose Payment Method </label>
                  <select name="form_payment_method" v-model="form_payment_method" id="">
  
                    <option  value="cash"> Cash | Pay at the branch </option>  
                    <option disabled value="credit"> Credit card | Visa - Master Card </option>  
                  </select>  
                </div>  
                <div class=" pt-3">
                  <button type="button" @Click="setOfferRequest()" class="btn btn-primary form-control">Subscribe Now</button>
                </div>
            </div>  
            </div>
            
          </div>
        </div>
    </div>
  </div>
  <!-- end Modal offer -->
  
        
        </div>
      </div>
</div>
@endsection