@extends('layouts.app')
@section('title') {{'Sub-Area Name'}} @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
    $district_name = DB::table('districts')->select('id','name as district_name')->orderBy('name','asc')->get();
            
@endphp 
<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">Sub-Area Name
            <a href="{{ url('SubAreaName') }}" 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>Area Name</h4>
                        </label>
                        <select id="district_id" name="district_id" class="form-control selectpicker" data-live-search="true">
                            <option value=""> Select... </option>
                             @foreach ($district_name as $row)
                                <option value="{{ $row->id }}"
                                    @if (request()->get('district_id') == $row->id) selected @endif>
                                    {{ $row->district_name }}
                                </option>
                            @endforeach
                        </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->name)) {
                $name = $data_set->name;                        
                $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 col-span-1 sm2:col-span-2">
						<label for="inputState">
							<h4>Area Name</h4>
						</label>
						<select id="district_id" name="district_id" class="form-control selectpicker" data-live-search="true" required>
							<option value="">Select...</option>
							@foreach ($district_name as $row)
								<option value="{{ $row->id }}" @if(isset($data_set->district_id) && $data_set->district_id==$row->id) selected @endif>
									{{ $row->district_name }}
								</option>
							@endforeach
						</select>
					</div>
                    <div class="form-group">
                        <label for="exampleInputEmail1"> Sub-Area Name </label>
                        <input type="text" class="form-control" name="name" value="{{ @$name }}" placeholder="Enter Sub-Area Name">
                    </div>	
                    <div class="form-group">
                        {{ 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>

                </form>
                <br /><br />
            </div>
            <div class="panel-body" id="myTablePrint">
                <div class="form-group mt-1" 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>Sl No.</th>
                                <th>Zone Name</th>
                                <th>Area Name</th>
                                <th>Sub-Area Name</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach($data as $k=>$row)
                            @php			
                                $name = $row->name;
                            @endphp
                            <tr>
                                <td>{{ ++$k }}</td>
                                <td>{{$row->divisions_name}}</td>
                                <td>{{$row->district_name}}</td>
                                <td>{{ $name }}</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%;">
                                    <a href="{!! url('SubAreaName/?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('SubAreaName/?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
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div><!-- /.container-fluid -->
            </div>
            <div class="flex justify-center">
                {{ $data->appends(request()->query())->links() }}
            </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>


@endsection