@extends('layouts.dashboard')

@section('title', 'Manage Set Up')

@section('myJS')
	<script src="{{url('/')}}/js/admin/setup.js"></script>
@endsection

@section('content')

<div class="padding-top40"></div>

<div class="bs-example">

<!-- main part-->
<div class="container-fluid">
    @include('dashboard.MasterSetup.Header')
    @if($CatalogDetails->enableMultiLanguage == "1")
        @php 
            $checked = "checked"; 
            $hidden = '';
        @endphp
    @else
        @php 
            $checked = ""; 
            $hidden = 'display:none;';
        @endphp
    @endif
    <div class="row" style="margin: 0px; padding-top: 15px;">
        <div class="col-md-12">
            <label for="" class="radio-inline">Enable multi-language for this catalog</label>
            <label class="radio-inline switch enableML">
                <input type="checkbox" {{$checked}}>
                <span class="slider round"></span>
            </label>
        </div>
    </div>
    <div class="row selectLanguages" style="{{$hidden}} margin: 0px; padding-top: 15px;">
        <div class="col-md-1 text-center">
            <button type="button" id="btnAddLanguage" class="btn btn-default btn-xs btnAddLanguageModel" data-toggle="modal" data-target="#languageModal" title="Add Language"  style="font-size:14px !important;">Add Language</button>
        </div>
    </div>
    <div id="div_language_table" class="row table-catalog" style="margin: 0px;">
        <table data-page-length='50' id="languageTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th scope="col" class="set1 text-center">Flag</th>
                    <th scope="col" class="set1 text-center">Language Name</th>
                    <th scope="col" class="set1 text-center">Region</th>
                    <th scope="col" class="set1 text-center">Default</th>
                    <th scope="col" class="set1 text-center">Display In Collections</th>
                    <th scope="col" class="set2 text-center">Operations</th>
                </tr>
            </thead>
            <tbody>
                @foreach($CatalogLanguageList as $language)
                    <tr id="language_{{$language->CatalogLanguageID}}">
                        <td class="set-col1">
                            @if($language->FlagPath != '')
                                <img src="{{env('APP_URL')}}images/flags/{{$language->FlagPath}}" class="img-flag" width="20" />
                            @endif
                        </td>
                        <td class="set-col1">
                            {{$language->LanguageDescription}}
                        </td>
                        <td class="set-col1">
                            {{$language->RegionName}}
                        </td>
                        <td class="set-col1">
                            @if($language->IsDefault == "1")
                                Yes
                            @else
                                No
                            @endif
                        </td>
                        <td class="set-col1">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$language->DisplayInCollections == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col5">
                            <div class="bt-seperation">
                                <button type="button" class="btn btn-primary btn-xs edit_button_language"
                                data-toggle="modal" data-target="#languageModal"
                                data-cataloglanguageid="{{$language->CatalogLanguageID}}"
                                data-languageid="{{$language->LanguageID}}"
                                data-regionid="{{$language->RegionID}}"
                                data-showflagid="{{$language->ShowFlagID}}"
                                data-displayincollection="{{$language->DisplayInCollections}}"
                                data-isdefault="{{$language->IsDefault}}">
                                Edit</button> |

                                <button type="button" class="btn btn-primary btn-xs delete_button"
                                data-toggle="modal" data-target="#deleteModal"
                                data-tabname="Language"
                                data-id="{{$language->CatalogLanguageID}}">
                                Delete</button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="languageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog setup-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add / Edit Language</h4>
            </div>
            <form id="postLanguage">
            	@csrf
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4"> 
								<div class="padd-name">Language:</div> 
							</div>
							<div class="col-md-8">
								<select name="language" class="language form-control">
									<option></option>
									@foreach($languages as $language)
										<option value="{{$language->LanguageID}}">{{$language->LanguageDescription}}</option>
									@endforeach
								</select>
								<input class="form-control CatalogLanguageID" type="hidden" name="CatalogLanguageID" id="CatalogLanguageID">
							</div>
                        </div>
                    </div>
                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Enable Region:
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="AllowRegion" id="AllowRegion" class="AllowRegiontxt AllowRegion">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group nonRegionFields" style="display:none;">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Region :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
								<select name="region" class="region form-control">
									<option></option>
									@foreach($regions as $regions)
										<option value="{{$regions->LanguageID}}">{{$regions->LanguageDescription}}</option>
									@endforeach
								</select>
                    		</div>
                    	</div>
                    </div>

                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Show Flag:
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="AllowFlag" id="AllowFlag" class="AllowFlagtxt AllowFlag">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group nonFlagFields" style="display:none;">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Select Flag :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
								<select name="flags" class="flags form-control">
									<option></option>
									@foreach($flags as $flag)
										<option value="{{$flag->FlagID}}">{{$flag->FlagCountryName}}</option>
									@endforeach
								</select>
                    		</div>
                    	</div>
                    </div>
					<div class="form-group">
						<div class="row">
							<div class="col-md-4">
								<div class="padd-name">
									Display in Collection:
								</div>
							</div>
							<div class="col-md-8">
								<input type="checkbox" name="DisplayInCollection" id="DisplayInCollection" class="DisplayInCollectiontxt DisplayInCollection">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-md-4">
								<div class="padd-name">
									Default:
								</div>
							</div>
							<div class="col-md-8">
								<input type="checkbox" name="IsDefault" id="IsDefault" class="IsDefaulttxt IsDefault">
							</div>
						</div>
					</div>
					<div class="form-group">
                    	<div class="row">
                    		<div id="languageError" class="col-md-12 text-danger">

                    		</div>
                    	</div>
                    </div>
					<script> 
						function formatCountry (flag) {

							if (!flag.FlagID) {
								return flag.FlagCountryName;
							}

							var $flag = $(
								'<span><img src="' + base_url+'images/flags/'+flag.FlagImageName+'" class="img-flag" width="20" /> ' + flag.FlagCountryName + '</span>'
							);
							return $flag;
						};

						$(".flags").select2({
							placeholder: "Select Flag",
							templateResult: formatCountry,
							templateSelection: formatCountry,
							data: {!!json_encode($flags)!!},
							dropdownParent: $('#languageModal')
						}); 
					</script>
                </div>
                <div class="modal-footer setup-footer">
                    <button type="submit" class="btn btn-primary btn_update_properties">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection