@extends('layouts.app')
@section('title') {{'Material Registration'}} @endsection

@section('content')
<script>
	function ShowFormDiv() {
		var x = document.getElementById("form");
		if (x.style.display === "none") {
			x.style.display = "block";
		} else {
			x.style.display = "none";
		}
	}
</script>
<style>

    table#myTable thead#myHeader{
        background: #D9E5D8;
        font-size: 16px !important;
    }
    div#myTablePrint table#myTable tbody tr td {
        font-size: 16px!important;
        border: 1px solid;
    }
</style>
@php
    $users_name = DB::table('users')->select('id','name')->orderBy('name','asc')->get();
            
@endphp 
<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">Material Registration
            <a href="{{ url('material') }}" class="pull-right"> Back </a>
        </div>
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        <!-- Main content -->
        <div class="panel-body">
            <form action="" method="GET">
                <div class="col-lg-6">
                    <div class="form-group col-lg-6">
                        <label for="inputState">
                            <h4>Search Material</h4>
                        </label>
                        <br/>
                        <select name="id" class="form-control selectpicker" onchange="this.form.submit()" data-live-search="true" >
                            <option value=""> All </option>
                            @if(isset($all_material_list))
                                @foreach($all_material_list as $val)
                                    <option value="{{ $val->id }}"  @if(isset($_GET['id']) && $_GET['id'] == $val->id) selected="selected" @endif >{{ $val->material_name }} </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
            </form>
            <!-- Small boxes (Stat box) -->
        <div class="col-lg-12 p-3">
            <button type="button" class="btn btn-primary" onclick="ShowFormDiv()" style="float:right;">+ Add New</button>
            <br>
            @php
            if (isset($data_set->id)) {                  
                $display = 'block';
            } else {
                $display = 'none';
            }      
            @endphp
            
            <div id="form" style="display:{{ $display }}; margin-bottom:15px;">
                <form action="" method="post" enctype="multipart/form-data">
                    <div class="form-group row">
                        <div class="col-md-2"> 
                            Sub Group Name  
                            <select name="material_type" id="material_type" class="form-control selectpicker" data-live-search="true">
                                <option value=""> Select </option>
                                @if(isset($category_list))
                                    @foreach($category_list as $val)
                                        <option value="{{ $val->id }}"  @if(isset($data_set->material_type) && $data_set->material_type == $val->id) selected="selected" @endif >{{ $val->values }} </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-3">
                            Material Name
                            <input id="material_name" type="text" class="form-control" name="material_name" value="{!! @$data_set->material_name !!}"  >
                        </div>
                        <div class="col-md-2"> 
                            Unit 
                            <select name="pack_type" id="pack_type" class="form-control selectpicker" data-live-search="true">
                                <option value=""> Select </option>
                                @if(isset($pack_list))
                                    @foreach($pack_list as $val)
                                        <option value="{{ $val->id }}"  @if(isset($data_set->pack_type) && $data_set->pack_type == $val->id) selected="selected" @endif >{{ $val->values }} </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        
                        <div class="col-md-2">
                            Pack Size
                            <input id="pack_size" type="text" class="form-control" name="pack_size" value="{!! @$data_set->pack_size !!}"  >
                        </div>
                        <div class="col-md-2">
                            Free
                            <input id="free" type="text" class="form-control" name="free" value="{!! @$data_set->free !!}"  >
                        </div>
                        <div class="col-md-2">
                            Dollar Price
                            <input id="dollar" type="text" class="form-control" name="dollar" value="{!! @$data_set->dollar !!}"  >
                        </div>
                        <div class="col-md-2">
                            Purchase Price
                            <input id="dp_price" type="text" class="form-control" name="dp_price" value="{!! @$data_set->dp_price !!}"  >
                        </div>
                        <div class="col-md-2">
                            H.S Code
                            <input id="hs_code" type="text" class="form-control" name="hs_code" value="{!! @$data_set->hs_code !!}"  >
                        </div>
                        <div class="col-md-2">
                            Item Number
                            <input id="item_number" type="text" class="form-control" name="item_number" value="{!! @$data_set->item_number !!}"  >
                        </div>
                        <div class="col-md-2">
                            Alert Stock Qty
                            <input id="low_s_q" type="text" class="form-control" name="low_s_q" value="{!! @$data_set->low_s_q !!}"  >
                        </div>   
                        <div class="col-md-2"><br/> &nbsp;
                            {{ csrf_field() }}

                            @if(isset($data_set->id))
                            <input type="hidden" name="id" value="{{ $data_set->id }}">
                            <input type="submit" class="btn btn-primary" name="submit" value="Update">
                            @else
                            <input type="submit" class="btn btn-primary" name="submit" value="Submit">
                            @endif
                        </div>
                    </div>
                </form>
                <br/> &nbsp;
            </div>
            <br/> &nbsp;
            <div class="panel-body mt-5" id="myTablePrint">
                <div class="form-group mt-5" style="width:100%; overflow: scroll;" >
                    <table id="myTable" cellpadding="6" cellspacing="0" width="100%" class="table table-striped table-hover">
                        <thead class="header" id="myHeader">
                            <tr>
                                <th> S.N.</th>
                                <th> ID </th>
                                <th> Sub Group Name</th>
                                <th> Material Name</th>
                                <th> Unit</th>
                                <th> Pack Size</th>
                                <th> Free</th>
                                <th> $ Price</th>
                                <th> Purchase Price</th>
                                <th> H.S Code</th>
                                <th> Item Number</th>
                                <th> Alert Stock Qty</th>
                                <th> Status </th>
                                <th> Action </th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i=0; @endphp

                            @foreach($material_list as $row)
                            @php $i++; @endphp
                                <tr>
                                    <td>{{$i}}</td>
                                    <td>{{$row->id}}</td>
                                    <td>{{$row->material_type}}</td>
                                    <td>{{$row->material_name}}</td>
                                    <td>{{$row->pack_type}}</td>
                                    <td>{{$row->pack_size}}</td>
                                    <td>{{$row->free}}</td>
                                    <td>{{$row->dollar}}</td>
                                    <td>{{$row->dp_price}}</td>
                                    <td>{{$row->hs_code}}</td>
                                    <td>{{$row->item_number}}</td>
                                    <td>{{$row->low_s_q}}</td>
                                    <td class="p-1 border border-gray-300 text-center text-sm sm:text-base">
                                            <button data-id="{{ $row->id }}" class="btn {{ $row->status == 1 ? "btn-success" : "btn-danger"}} change-status"  > {{ $row->status == 1 ? "On" : "Off"}} </button>
                                    </td>
                                    <td style="width: 10%;">
                                        @if(isset($row->id))
                                        <a href="{!! url('material/?action=edit&id='.$row->id) !!}" class="table-link">
                                            <span class="fa-stack">
                                                <i class="fa fa-square fa-stack-2x"></i>
                                                <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
                                            </span>
                                        </a>
                                        @if (Auth::user()->id == "2")
                                        <a href="{{ url('material/?action=delete&id='.$row->id) }}" class="table-link danger" onclick="return confirm('Do you want to delete?')">
                                            <span class="fa-stack">
                                                <i class="fa fa-square fa-stack-2x"></i>
                                                <i class="fa fa-trash-o fa-stack-1x fa-inverse"></i>
                                            </span>
                                        </a>                                    
                                        @endif
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div><!-- /.container-fluid -->
            </div>
        </div>
        <!-- /.content -->
    </div>
</div>
<script>
    $(document).ready(function(){
        $('.change-status').on('click',function(event){
            event.preventDefault();
            const id=$(this).data('id');
            const materialStatus = $(this);
            const url = `/change-material-status/${id}`;
            $.ajax({
                type: "GET",
                url: url,
                success: function(response){
                    if(response && response.material){
                        const material = response.material;
                        if(material.status == 1){
                            materialStatus.removeClass('btn-danger');
                            materialStatus.addClass('btn-success');
                            materialStatus.text('On');
                            alert("Do you want to on?");
                        }else{
                            materialStatus.removeClass('btn-success');
                            materialStatus.addClass('btn-danger');
                            materialStatus.text('Off');
                            alert("Do you want to off?");
                        }
                    }
                },
                error: function(xhr, status, error) {
                    alert("There was an error");
                }
            })
        })
    })
</script>
<script>
    function ChangeStatusAsOn(id)
    {
        //alert(id);
        $.ajax({
            type:'GET',
            url:'{!! url('/change-status-as-on/?id=') !!}'+id,
            success:function(data){
                //
            }
        });
    }
    function ChangeStatusAsOff(id)
    {
        //alert(id);
        $.ajax({
            type:'GET',
            url:'{!! url('/change-status-as-off/?id=') !!}'+id,
            success:function(data){
                //
            }
        });
    }
</script>

<script>
	/**
	 * Create an arrow function that will be called when an image is selected.
	 */
	const previewImage = (event) => {
		/**
		 * Get the selected files.
		 */
		const imageFiles = event.target.files;
		/**
		 * Count the number of files selected.
		 */
		const imageFilesLength = imageFiles.length;
		/**
		 * If at least one image is selected, then proceed to display the preview.
		 */
		if (imageFilesLength > 0) {
			/**
			 * Get the image path.
			 */
			const imageSrc = URL.createObjectURL(imageFiles[0]);
			/**
			 * Select the image preview element.
			 */
			const imagePreviewElement = document.querySelector("#preview-selected-image");
			/**
			 * Assign the path to the image preview element.
			 */
			imagePreviewElement.src = imageSrc;
			/**
			 * Show the element by changing the display value to "block".
			 */
			imagePreviewElement.style.display = "block";
		}
	};
</script>
<script>
    $('#zone_id').on('change', function () {
        var districtId = $(this).val();

        if (districtId) {
            $.ajax({
                url: "{{ url('/get-district-by-divisions') }}/" + districtId,
                type: "GET",
                success: function (data) {
                    $('#area_id').empty();
                    $('#area_id').append('<option value="">Select</option>');
                    $.each(data, function (key, value) {
                        $('#area_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });

                    $('.selectpicker').selectpicker('refresh'); // for bootstrap-select
                }
            });
        } else {
            $('#area_id').empty();
            $('#area_id').append('<option value="">Select</option>');
            $('.selectpicker').selectpicker('refresh');
        }
    });
    $('#area_id').on('change', function () {
        var districtId = $(this).val();

        if (districtId) {
            $.ajax({
                url: "{{ url('/get-upazilas-by-district') }}/" + districtId,
                type: "GET",
                success: function (data) {
                    $('#sub_area_id').empty();
                    $('#sub_area_id').append('<option value="">Select</option>');
                    $.each(data, function (key, value) {
                        $('#sub_area_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });

                    $('.selectpicker').selectpicker('refresh'); // for bootstrap-select
                }
            });
        } else {
            $('#sub_area_id').empty();
            $('#sub_area_id').append('<option value="">Select</option>');
            $('.selectpicker').selectpicker('refresh');
        }
    });
    $('#rsm_id').on('change', function () {
        var rsmId = $(this).val();

        if (rsmId) {
            $.ajax({
                url: "{{ url('/get-se-by-rsm') }}/" + rsmId,
                type: "GET",
                success: function (data) {
                    $('#se_id').empty();
                    $('#se_id').append('<option value="">Select</option>');
                    $.each(data, function (key, value) {
                        $('#se_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });

                    $('.selectpicker').selectpicker('refresh'); // for bootstrap-select
                }
            });
        } else {
            $('#se_id').empty();
            $('#se_id').append('<option value="">Select</option>');
            $('.selectpicker').selectpicker('refresh');
        }
    });
    $('#se_id').on('change', function () {
        var seId = $(this).val();

        if (seId) {
            $.ajax({
                url: "{{ url('/get-so-by-se') }}/" + seId,
                type: "GET",
                success: function (data) {
                    $('#so_id').empty();
                    $('#so_id').append('<option value="">Select</option>');
                    $.each(data, function (key, value) {
                        $('#so_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });

                    $('.selectpicker').selectpicker('refresh'); // for bootstrap-select
                }
            });
        } else {
            $('#so_id').empty();
            $('#so_id').append('<option value="">Select</option>');
            $('.selectpicker').selectpicker('refresh');
        }
    });
</script>

@endsection