@extends('layouts.app')
@section('title') {{'Distributor Integration'}} @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">Distributor Integration
            <a href="{{ url('DistributorIntegration') }}" 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>Employee Name</h4>
                        </label>
                        <select id="emp_id" name="emp_id" class="form-control selectpicker" data-live-search="true">
                            <option value=""> Select... </option>
                                @if(isset($users_name))
                                    @foreach($users_name as $val)
                                        <option value="{{ $val->id}}" @if(isset($_GET['emp_id']) && $_GET['emp_id'] == $val->id) selected="selected" @endif>  {{ $val->name }} </option>
                                    @endforeach
                                @endif
                        </select>
                    </div>
                    <div class="form-group col-lg-6">
                        <label for="name">
                            <h4> &nbsp;</h4>
                        </label> <br />
                        <button type="submit" class="btn btn-success">Search</button>
                    </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">
                            
                        @php $Zone_Name = DB::table('divisions')->select('divisions.*')->orderBy('name', 'ASC')->get();@endphp
                        <div class="col-md-2">
                            Zone Name 
                            <select name="zone_id" id="zone_id" class="form-control selectpicker" data-live-search="true" required autofocus >
                                <option value=""> Select </option>
                                    @foreach($Zone_Name as $row)
                                        <option value="{{ $row->id }}"  @if(isset($data_set->zone_id) && $data_set->zone_id == $row->id) selected @endif > 
                                            {{ $row->name }} </option>
                                    @endforeach
                            </select>
                        </div>
                        <!-- District Dropdown -->
                        <div class="col-md-2">
                            Area Name 
                            <select name="area_id" id="area_id" class="form-control selectpicker" data-live-search="true">
                                <option value="">Select</option>
                                {{-- Districts will be loaded dynamically --}}
                            </select>
                        </div>

                        <!-- Upazila Dropdown -->
                        <div class="col-md-2">
                            Sub-Area Name
                            <select name="sub_area_id" id="sub_area_id" class="form-control selectpicker" data-live-search="true">
                                <option value="">Select</option>
                                {{-- Upazilas will be loaded dynamically --}}
                            </select>
                        </div>

                        @php $rsm_list =  DB::table('users')->select('users.*')->where('user_types','=', 3 )->orderBy('id', 'ASC')->get();@endphp
                        <!-- RSM Name Dropdown -->
                        <div class="col-md-2">
                            NSM/RSM Name
                            <select name="rsm_id" id="rsm_id" class="form-control selectpicker" data-live-search="true" autofocus >
                                <option value=""> Select </option>
                                @if(isset($rsm_list))
                                    @foreach($rsm_list as $row)
                                        <option value="{{ $row->id }}"  @if(isset($data_set->rsm_id) && $data_set->rsm_id == $row->id) selected="selected" @endif >{{ $row->name }} </option>
                                    @endforeach
                                @endif
                            </select> 
                        </div>
                        <!-- SE Name Dropdown -->
                        <div class="col-md-2">
                            TSM/ASM Name
                            <select name="se_id" id="se_id" class="form-control selectpicker" data-live-search="true" >
                                <option value=""> Select </option>                                   
                                {{-- SE Name will be loaded dynamically --}}
                            </select> 
                        </div>
                        <div class="col-md-2">
                            SO Name
                            <select name="so_id" id="so_id" class="form-control selectpicker" data-live-search="true" autofocus >
                                <option value=""> Select </option>                              
                                {{-- SO Name will be loaded dynamically --}}
                            </select> 
                        </div>
                        @php $Distributor_Name =  DB::table('suppliers')->select('suppliers.*')->where('customer_id','=', 24 )->orderBy('id', 'ASC')->get();@endphp
                        <div class="col-md-2">
                            Distributor Name
                            <select name="distributor_id" id="distributor_id" class="form-control selectpicker" data-live-search="true" autofocus >
                                <option value=""> Select </option>
                                @if(isset($Distributor_Name))
                                    @foreach($Distributor_Name as $row)
                                        <option value="{{ $row->id }}"  @if(isset($data_set->distributor_id) && $data_set->distributor_id == $row->id) selected="selected" @endif >{{ $row->name }} </option>
                                    @endforeach
                                @endif
                            </select> 
                        </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>#</th>
                                <th>Designation</th>
                                <th>Employee ID</th>
                                <th>Employee Name</th>
                                <th>Reporting Officer</th>
                                <th>User Type</th>
                                <th>Sub-Area Name</th>
                                <th>Distributor Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $serial = 1; @endphp
                            @foreach($userTree as $user)
                                @include('components.distributor-row', ['user' => $user, 'serial' => &$serial]) 
                            @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 upazilaStatus = $(this);
            const url = `/change-status-upazilas/${id}`;
            $.ajax({
                type: "GET",
                url: url,
                success: function(response){
                    if(response && response.upazila){
                        const upazila = response.upazila;
                        if(upazila.status == 1){
                            upazilaStatus.removeClass('btn-danger');
                            upazilaStatus.addClass('btn-success');
                            upazilaStatus.text('On');
                        }else{
                            upazilaStatus.removeClass('btn-success');
                            upazilaStatus.addClass('btn-danger');
                            upazilaStatus.text('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