@extends('layouts.app')

@section('content')
	<div class="row">
	    <div class="col-lg-12 margin-tb">
	        <div class="pull-left">
	            <h2>Edit Channel</h2>
	        </div>
	        <div class="pull-right">
	            <a class="btn btn-primary btn-sm" href="{{ route('channels.index') }}"> Back</a>
	        </div>
	    </div>
	</div>

	@if (count($errors) > 0)
		<div class="alert alert-danger">
			<strong>Whoops!</strong> There were some problems with your input.<br><br>
			<ul>
				@foreach ($errors->all() as $error)
					<li>{{ $error }}</li>
				@endforeach
			</ul>
		</div>
	@endif

	<form id="editChannelID" class="form-horizontal form-channel" enctype="multipart/form-data" method="POST" action="{{ route('channels.update', $channel->id) }}">
	<input type="hidden" name="_token" value="{{ csrf_token() }}">
	<input type="hidden" name="_method" value="PATCH">	
	<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-2">Channel Name:</label>
                <input type="text" class="col-md-4" name="name" value="{{ $channel->name }}">
                <div class="col-md-3"></div>
            </div>
        </div>
        
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-2">Channel Resolution:</label>
                <select class="col-md-4" name="resolution">
                    <option value="">Select Resolution</option>
                    @foreach($resolution as $res)
                    <option value="{{ $res->id }}" @if ($channel->resolution == $res->id) selected="selected" @endif>{{ $res->name }}</option>
                    @endforeach
                </select>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add-resolution-modal"><b>Add Resolution</b></button>
                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-2">Channel Description:</label>
                <textarea type="textarea" name="description" class="col-md-4" rows="5" cols="45">{{ $channel->description }}</textarea>
                <div class="col-md-3"></div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-2">Channel Logo:</label>
                <input id="newImg" type="file" class="col-md-2" name="logo">
                <!-- @if($channel->image)
                <div class="col-md-5 remPrevImg">
                    <input id="oldImg" type="hidden" name="old_logo" value="{{ $channel->image }}">                        
                    <span class="col-md-2 fileImg">
                    <img class="img-responsive menu-thumbnails" src="{{ asset("uploads/$channel->image") }}" width="100" height="100"/>
                    </span>
                    <button class="btn btn-primary btn-xs col-md-2 delPImg">Delete</button>
                </div>
                @endif -->
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-2">Language:</label>
                <select class="col-md-4" name="language">
                    <option value="">Select Language</option>
                    @foreach($language as $lang)
                    <option value="{{ $lang->id }}" @if ($channel->language == $lang->id) selected="selected" @endif>{{ $lang->name }}</option>
                    @endforeach
                </select>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add-lang-modal"><b>Add Language</b></button>
                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-2">Country of Origin:</label>
                <select class="col-md-4" name="origin">
                    <option value="">Select Origin</option>
                    @foreach($countries as $origin)
                    <option value="{{ $origin->id }}" @if ($channel->origin == $origin->id) selected="selected" @endif>{{ $origin->name }}</option>
                    @endforeach
                </select>
                <div class="col-md-3">
                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-2">Genre:</label>
                <select class="col-md-4" name="genre">
                    <option value="">Select Genre</option>
                    @foreach($genre as $gen)
                    <option value="{{ $gen->id }}" @if ($channel->genre == $gen->id) selected="selected" @endif>{{ $gen->name }}</option>
                    @endforeach
                </select>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add-genre-modal"><b>Add Genre</b></button>
                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-2">Server IP:</label>
                <input type="text" class="col-md-4" name="server_ip" value="{{ $channel->server_ip }}">
                <div class="col-md-3"></div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-2">Georestrictions:</label>
                <label id="channelCountryId-error" class="error col-md-4" for="channelCountryId"></label>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">

            @if(count($georestrictions) >= 1)
                                @foreach($georestrictions as $key=>$georestriction)
                    
                    @if($key == 0)
                    <div class="form-group">
                        <div class="col-md-1"></div>
                        <select class="col-md-2 channelCountryId" name="country[0]" >
                            <option value="">Select Country</option>
                            @foreach($countries as $country)
                            <option value="{{ $country->id }}" @if ($georestriction->country_id == $country->id) selected="selected" @endif>{{ $country->name }}</option>
                            @endforeach
                        </select>

                        <select class="col-md-2 channelStateId" name="state[0]" >
                            <option value="{{ $georestriction->state_id }}" @if ($georestriction->state_id) selected="selected" @endif>{{ (new \App\Http\Helper)->getStateName($georestriction->state_id) }}</option>   
                        </select>

                        <select class="col-md-2 channelCityId" name="city[0]" >
                            <option value="{{ $georestriction->city_id }}" @if ($georestriction->city_id) selected="selected" @endif>{{ (new \App\Http\Helper)->getCityName($georestriction->city_id) }}</option>
                        </select>

                        <div class="col-md-2">
                            <input type="radio" name="allow" value="allowed" @if ($channel->allow == 'allowed') checked="checked" @endif>Allow
                            <input type="radio" name="allow" value="not_allowed" @if ($channel->allow == 'not_allowed') checked="checked" @endif> Not Allow
                        </div>

                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_location">Add Location</button>
                        </div>
                        
                    </div>
                    @else
                    <div class="input_fields_container2 form-group">
                    <div class="addLoc2">
                        <div class="col-md-1"></div>
                        <select class="col-md-2 channelCountryId" name="country[0]" >
                            <option value="">Select Country</option>
                            @foreach($countries as $country)
                            <option value="{{ $country->id }}" @if ($georestriction->country_id == $country->id) selected="selected" @endif>{{ $country->name }}</option>
                            @endforeach
                        </select>

                        <select class="col-md-2 channelStateId" name="state[0]" >
                            <option value="{{ $georestriction->state_id }}" @if ($georestriction->state_id) selected="selected" @endif>{{ (new \App\Http\Helper)->getStateName($georestriction->state_id) }}</option>   
                        </select>

                        <select class="col-md-2 channelCityId" name="city[0]" >
                            <option value="{{ $georestriction->city_id }}" @if ($georestriction->city_id) selected="selected" @endif>{{ (new \App\Http\Helper)->getCityName($georestriction->city_id) }}</option>
                        </select>

                        <div class="col-md-2">
                            <button class="btn btn-sm btn-danger remove_field">Remove</button>
                        </div>
                        <div class="col-md-2"></div>
                    </div>
                    </div>    
                    @endif

                                                        @endforeach
            @else
            <div class="form-group">
                <div class="col-md-1"></div>
                <select class="col-md-2 channelCountryId" name="country[0]" >
                    <option value="">Select Country</option>
                    @foreach($countries as $country)
                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                    @endforeach
                </select>

                <select class="col-md-2 channelStateId" name="state[0]" >
                    <option value="">Select State</option>   
                </select>

                <select class="col-md-2 channelCityId" name="city[0]" >
                    <option value="">Select City</option>
                </select>

                <div class="col-md-2">
                    <input type="radio" name="allow" value="allowed">Allow
                    <input type="radio" name="allow" value="not_allowed"> Not Allow
                </div>

                <div class="col-md-2">
                    <button id="add_loc_btn" class="btn btn-sm btn-primary add_location" disabled="true">Add Location</button>
                </div>
            </div>
            @endif

            <div class="input_fields_container"></div>

        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 text-left">
			<button type="submit" class="btn btn-primary btn-sm">Update</button>
        </div>
	</div>
	</form>

	@include('elements.popup')

    <script src="{{ asset('/js/custom.js') }}"></script>
    <script type="text/javascript">

    $(document).ready(function() {
        var max_fields_limit      = 6; //set limit for maximum input fields
        var x = 0; //initialize counter for text box
        $('.add_location').click(function(e){ //click event on add more fields button
            e.preventDefault();
            if(x < max_fields_limit){ //check conditions
                x++; //counter increment
                $('.input_fields_container').append('<div class="addLoc form-group"><div class="col-md-1"></div> <select class="col-md-2 channelCountryId" id="country_'+x+'" name="country[]" ><option value="">Select Country</option>@foreach($countries as $country)<option value="{{ $country->id }}">{{ $country->name }}</option>@endforeach</select> <select class="col-md-2 channelStateId" id="state_'+x+'" name="state[]" ><option value="">Select State</option></select><select class="col-md-2 channelCityId" id="city_'+x+'" name="city[]" ><option value="">Select City</option></select><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div><div class="col-md-2"></div></div>');

                $('#country_'+x).rules('add', {required: true, notEqualToGroup: ['.channelCountryId'], messages: {required: "Please select country"}});
                $('#city_'+x).rules('add', {required: validateState('#country_'+x+',#city_'+x), messages: {required: "Please select city"}});
            }
        });  
        $('.input_fields_container').on("click",".remove_field", function(e){ 
        //user click on remove text links
        e.preventDefault(); $(this).parents('div[class^="addLoc"]').remove(); x--;
        })
    });

    //Get states
    $(document).on('change', '.channelCountryId', function(e) {
        e.preventDefault();

        var that = $(this);

        $.ajax({
            type: "POST",
            url: '/channels/get_states',
            data: { "_token": "{{ csrf_token() }}", "country_id": $(this).val() },
            success: function(response){
                if(response.status == 'success') {
                    var markUp = '';
                    for(index in response.data) {
                        markUp += '<option value="'+index+'">'+response.data[index]+'</option>';
                    }
                    
                    that.next('.channelStateId').empty().html(markUp);
                    $('#add_loc_btn').prop('disabled', true);
                }
                else {
                    var markUp = '';
                    markUp += '<option value="">Select State</option>';
                    that.next('.channelStateId').empty().html(markUp);

                    var markUp1 = '';
                    markUp1 += '<option value="">Select City</option>';
                    that.nextAll(".channelCityId").eq(0).empty().html(markUp1);

                    $('#add_loc_btn').prop('disabled', false);
                }
            }
        });
    });


    //Get states
    $(document).on('change', '.channelStateId', function(e) {
        e.preventDefault();

        var that = $(this);
        $.ajax({
            type: "POST",
            url: '/channels/get_cities',
            data: { "_token": "{{ csrf_token() }}", "state_id": $(this).val() },
            success: function(response){
                if(response.status == 'success') {
                    var markUp = '';
                    for(index in response.data) {
                        markUp += '<option value="'+index+'">'+response.data[index]+'</option>';
                    }
                    
                    that.next('.channelCityId').empty().html(markUp);
                    $('#add_loc_btn').prop('disabled', false);
                }
                else {
                    var markUp = '';
                    markUp += '<option value="">Select City</option>';
                    that.next('.channelCityId').empty().html(markUp);
                }
            }
        });
    });

    $(document).on('click', '.delPImg', function(e) {
        e.preventDefault();
        $(this).parents('.remPrevImg').remove();
    });

    </script>
@endsection