@extends('layouts.main')

@section('content')
  <h1>{{$title}}</h1> 
 
    <a href="{{route('stock.index')}}" class="btn btn-dark">View Product</a>
    
    <a href="{{route('import-products.create')}}" class="btn btn-dark">Import Product</a>
   <hr>
    <div class="row">

        <div class="col-md-6 col-lg-6 col-sm-12">

          <label>Choose category</label>
          <select id="category_id" class="form-control">
              <option></option>
              @foreach($categories as $category)
                <option value="{{$category->id}}">{{$category->name}}</option>
              @endforeach
          </select>

          <div class="row">
            <div class="col-6">
              <label for="car_type">Car type</label>
              <input type="text"   id="car_type" class="form-control">              
            </div>

            <div class="col-6">
              <label>Item name</label>
              <input type="text" id="item_name" class="form-control">              
            </div>
          </div>          

          <div class="row">
            <div class="col-6">
              <label for="car_model">Car Model</label>
              <input type="text"  id="car_model" class="form-control">
            </div>

            <div class="col-6">
              <label for="year_of_manufucturing">Year</label>
              <input type="text"  id="year_of_manufucturing" class="form-control">
            </div>
          </div>

          <span id="part_number_section">
            <label for="part_number">Part Number</label>
            <input type="text" id="part_number" class="form-control">
          </span>         
          
        </div>

        <div class="col-md-6 col-lg-6 col-sm-12">

          <span id="level_section">
            <label for="level">Select Level</label>
            <select  id="level" class="form-control">
              <option value=""></option>
              <option value="parent">Main Part</option>
              <option value="child">A piece from a main part</option>
            </select>
          </span>
          
          <span id="parent_section">
            <label for="parent_id">Main parts</label>
            <select  id="parent_id" class="form-control">
              <option value=""></option>
              @foreach ($main_parts as $main_part)
              <option value="{{ $main_part->id }}">{!! $main_part->name($main_part) !!}</option>                            
              @endforeach
            </select>
          </span>            

            <div class="row">
              <div class="col-6" id="buying_price_section">
                <label for="buying_price">Buying price (Optional)</label>
                <input type="text" id="buying_price" class="form-control">
              </div>
              <div class="col-6">
                <label for="salling_price">Selling price</label>
                <input type="text" id="selling_price" class="form-control">                
              </div>
            </div>

            <span id="stock_size_section">

              <div class="row">
                <div class="col-6">
                  <label for="stock_size">Quantity in stock </label>
                  <input type="number" id="stock_size" class="form-control">
                </div>
                <div class="col-6">
                  <label for="shelf">Shelf</label>
                  <input type="text" id="shelf" class="form-control">
                </div>
              </div>              
            </span>
        
            <hr>
            <p id="display" style="color: green;"></p>
            <button class="btn btn-dark" id="saveBtn">Save</button>          
        </div>                   
    </div>
</div>
@endsection

@push('scripts')
 

<script>

  $(document).ready(function() {

    $("#parent_id").chosen({
      width:"100%"
    })

    $("#stock_size_section,#buying_price_section,#parent_section,#level_section,#part_number_section").hide();
 
    $("#category_id").change(function() {
        let selected = $(this).val();
        if (selected == 1) //good
            $("#stock_size_section,#buying_price_section,#level_section,#part_number_section").show();
        if (selected == 2) //service 
            $("#stock_size_section,#buying_price_section,#parent_section,#level_section,#part_number_section").hide();
    });


    $("#level").change(function() {

        let section = $(this).val();

        if (section == "parent") 
          $("#parent_section").hide(); 

        if (section == "child") 
          $("#parent_section").show();
    });

  });


    $(document).ready(function() {
      
       $("#saveBtn").click(function() {
         $("#saveBtn").text("Processing...");
         $("#display").text("");
         $("#saveBtn").attr("disabled","disabled");     

         $("#selling_price").val(
              $("#selling_price").val().replace(/,/g, "")
          );

          $("#buying_price").val(
              $("#buying_price").val().replace(/,/g, "")
          );

         $.ajax({
                type: "POST",
                url: "{{ route('stock.store') }}",
            data: {
                  item_name: $("#item_name").val(),
                  keeping_limit: $("#keeping_limit").val(),
                  category_id: $("#category_id").val(),                           
                  stock_size: $("#stock_size").val(),                           
                  buying_price: $("#buying_price").val(),                           
                  selling_price: $("#selling_price").val(),
                  car_type: $("#car_type").val(), 
                  car_model: $("#car_model").val(), 
                  year_of_manufucturing: $("#year_of_manufucturing").val(),
                  part_number: $("#part_number").val(),
                  parent_id:$("#parent_id").val(), 
                  level: $("#level").val(),    
                  shelf: $("#shelf").val(),     
                  _token: "{{Session::token()}}"
            },
                success: function(result){
                    $("#saveBtn").removeAttr("disabled");

                      $("#display").text(result);
                 
                    $("#saveBtn").text("Add new stock item");
                  }
        })
    });


    });
  </script>


  <script>
      document.addEventListener("DOMContentLoaded", function () {
          const selling_price = document.getElementById("selling_price");
          addCommas(selling_price); 
      });
  </script>

   <script>
      document.addEventListener("DOMContentLoaded", function () {
          const buying_price = document.getElementById("buying_price");
          addCommas(buying_price); 
      });
  </script>
 
@endpush