@extends('admin.layouts.app')
@section('title')
    Seo Setting Page
@endsection
@section('content')
@php
$stab_part = session('stab_part');
@endphp
<div class="container-fluid">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-2">
                    <ul class="nav nav-pills flex-column">
                        <li class="nav-item border rounded mb-1">
                            <a class="nav-link {{ $stab_part == 'pop_up' ? ' active' : 'active' }}" data-toggle="tab"
                                href="#pop_up">Home Page Pop Up</a>
                        </li>  
                        <li class="nav-item border rounded mb-1">
                            <a class="nav-link {{ $stab_part == 'media_link' ? 'active' : '' }}" data-toggle="tab"
                                href="#media_link">Media Link</a>
                        </li>   
                        <li class="nav-item border rounded mb-1">
                            <a class="nav-link {{ $stab_part == 'header_strip' ? 'active' : '' }}" data-toggle="tab"
                                href="#header_strip">Header Strip</a>
                        </li>
                        @if (userCan('setting.seoTestPrep'))
                            <li class="nav-item border rounded mb-1">
                                <a class="nav-link {{ $stab_part == 'test_preparation' ? 'active' : '' }}" data-toggle="tab"
                                    href="#test_preparation">Test Preparation</a>
                            </li>
                        @endif
                    </ul>
                </div>
                
                <div class="col-12 col-sm-12 col-md-10">
                    <form action="{{ route('seosetting.update', $seosetting->id) }}" method="POST" onsubmit="validateForm(event,'edit')" enctype="multipart/form-data" novalidate>
                        @csrf
                        @method('PUT')
                        <div class="tab-content no-padding">                          
                            {{-- Home page pop up --}}
                            <div class="tab-pane {{ $stab_part == 'pop_up' ? 'show active' : 'active' }}" id="pop_up">                    
                                <div class="card">
                                    <div class="card-header">
                                        <h4><b>Home Page Pop Up</b>
                                            @if (userCan('setting.seo'))
                                            <button type="submit" class="btn bg-success align-items-center justify-content-center float-end"><i class="fas fa-sync"></i> Update</button>
                                            @endif
                                        </h4>
                                    </div>
                                    <div class="card-body">            
                                        <div class="row row-cols-1">                    
                                            <div class="col">
                                                <div class="form-group mb-3">
                                                    <label for="">Blog Title <span class="form-label-required text-danger">*</span></label>
                                                    <input type="text" name="blog_title" class="form-control" placeholder="Enter Blog Title" value="{{@$seosetting->blog_title}}">
                                                </div>
                                            </div> 
                                            <div class="col">
                                                <div class="form-group mb-3">
                                                    <label for="">Blog Description<span class="form-label-required text-danger">*</span></label>
                                                    <input type="text" name="blog_description" class="form-control" placeholder="Enter Blog Description"  value="{{@$seosetting->blog_description}}">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group mb-3">
                                                    <label for="">Blog Button Name <span class="form-label-required text-danger">*</span></label>
                                                    <input type="text" name="blog_button_name" class="form-control" placeholder="Enter Button Name"  value="{{@$seosetting->blog_button_name}}">
                                                </div>
                                            </div>
                                         
                                            <div class="col">
                                                <div class="upload-btn-wrapper">
                                                    <input type="file"  id="image"  class="form-control dropify" id="image"
                                                        data-default-file="{{ asset(@$seosetting->blog_image) }}" name="blog_image"
                                                        accept="image/png, image/jpg, image/jpeg, image/gif"
                                                        data-allowed-file-extensions='["jpg", "jpeg","png", "gif"]'
                                                        data-max-file-size="3M">
                                                </div>
                                            </div>                             
                                        </div>
                                    </div>
                                </div>                                                                
                            </div>
                            {{-- Media Link --}}
                            <div class="tab-pane {{ $stab_part == 'media_link' ? ' active' : '' }}" id="media_link">
                                <div class="card">                         
                                    <div class="card-header">
                                        <h4><b>Media Link</b>
                                            @if (userCan('setting.seo'))
                                                <button type="submit" class="btn btn-success justify-content-center float-end">
                                                    <i class="fas fa-sync"></i>
                                                    {{ __('update') }}
                                                </button>
                                            @endif
                                        </h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>{{ __('facebook') }}:</label>
                                                    <input type="text"
                                                        class="form-control @error('facebook') is-invalid @enderror p-2"
                                                        name="facebook" value="{{ $seosetting->facebook }}">
                                                    @error('facebook')
                                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>{{ __('instagram') }}:</label>
                                                    <input type="text"
                                                        class="form-control @error('instagram') is-invalid @enderror p-2"
                                                        name="instagram" value="{{ $seosetting->instagram }}">
                                                    @error('instagram')
                                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>{{ __('twitter') }}:</label>
                                                    <input type="text"
                                                        class="form-control @error('twitter') is-invalid @enderror p-2"
                                                        name="twitter" value="{{ $seosetting->twitter }}">
                                                    @error('twitter')
                                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>{{ __('youtube') }}:</label>
                                                    <input type="text"
                                                        class="form-control @error('youtube') is-invalid @enderror p-2"
                                                        name="youtube" value="{{ $seosetting->youtube }}">
                                                    @error('youtube')
                                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>
        
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>{{ __('linkedin') }}:</label>
                                                    <input type="text"
                                                        class="form-control @error('linkedin') is-invalid @enderror p-2"
                                                        name="linkedin" value="{{ $seosetting->linkedin }}">
                                                    @error('linkedin')
                                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>{{ __('pinterest') }}:</label>
                                                    <input type="text"
                                                        class="form-control @error('pinterest') is-invalid @enderror p-2"
                                                        name="pinterest" value="{{ $seosetting->pinterest }}">
                                                    @error('pinterest')
                                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>
        
        
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>{{ __('snapchat') }}:</label>
                                                    <input type="text"
                                                        class="form-control @error('snapchat') is-invalid @enderror p-2"
                                                        name="snapchat" value="{{ $seosetting->snapchat }}">
                                                    @error('snapchat')
                                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>
        
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>{{ __('discord') }}:</label>
                                                    <input type="text"
                                                        class="form-control @error('discord') is-invalid @enderror p-2"
                                                        name="discord" value="{{ $seosetting->discord }}">
                                                    @error('discord')
                                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>
        
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label>{{ __('tumblr') }}:</label>
                                                    <input type="text"
                                                        class="form-control @error('tumblr') is-invalid @enderror p-2"
                                                        name="tumblr" value="{{ $seosetting->tumblr }}">
                                                    @error('tumblr')
                                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>                                    
                                        </div>
                                    </div>                                                               
                                </div>
                            </div> 
                            <div class="tab-pane {{ $stab_part == 'header_strip' ? 'show active' : '' }}" id="header_strip">                                
                                <div class="card">
                                    <div class="card-header">
                                        <h4><b>Header Strip</b>
                                            @if (userCan('setting.seo'))
                                            <button type="submit" class="btn bg-success align-items-center justify-content-center float-end"><i class="fas fa-sync"></i> Update</button>
                                            @endif
                                        </h4>
                                    </div>
                                    <div class="card-body">                                    
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label>Header Strip:</label>
                                                <input type="text" class="form-control @error('header_strip') is-invalid @enderror p-2"
                                                name="header_strip" value="{{ $seosetting->header_strip }}">
                                                @error('header_strip')
                                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                @enderror     
                                            </div>
                                        </div>                                     
                                    </div>
                                </div>
                            </div>
                            @if (userCan('setting.seoTestPrep'))
                                <div class="tab-pane {{ $stab_part == 'test_preparation' ? 'show active' : '' }}" id="test_preparation">
                                    <div class="card" style="height: 200px;">
                                        <div style="height:30px;">
                                            <label class="fs-5 pt-3 ps-3">Test Preparation Landing Page</label>
                                            @if (userCan('setting.seo'))
                                                <button type="submit" class="btn btn-success justify-content-center float-end">
                                                    <i class="fas fa-sync"></i>
                                                    {{ __('update') }}
                                                </button>
                                            @endif
                                        </div>  
                                        <div class="card-body" style="height: 37vh; overflow-y: auto;">
                                            <table class="table" style="width: 100%; border-collapse: collapse;">
                                                <thead>
                                                    <tr>
                                                        <th class='text-center'>Page</th>
                                                        <th class='text-center'>Ranking</th>
                                                        <th class='text-center'>Students</th>
                                                        <th class='text-center'>Educators</th>
                                                        <th class='text-center'>Training Hours</th>
                                                        <th class='text-center'>Free Resources</th>
                                                    </tr>
                                                </thead>                     
                                                @php
                                                    $test_preparation = json_decode($seosetting->test_prep_landing);                                                
                                                @endphp                   
                                                <tbody class="overflow-auto">
                                                    <tr>
                                                        <td class="col-xs-3">
                                                            <select class="form-control" style="width: 150px;" id="test_preparation" name="test_preparation">
                                                                <option value="test_preparation" selected>Test Preparation Landing Page</option>
                                                            </select>                                                
                                                        </td>
                                                        <td class="col-xs-2">
                                                            <input class="form-control" oninput="validateInput(this)" name="ranking" value="{{$test_preparation ? $test_preparation->ranking : ''}}" maxlength="5" type="text" id="ranking" placeholder="Ranking" />
                                                        </td>
                                                        <td class="col-xs-2">
                                                            <input class="form-control" oninput="validateInput(this)" name="students" value="{{$test_preparation ? $test_preparation->students : ''}}"  maxlength="10" type="text" id="students" placeholder="Students" />
                                                        </td>
                                                        <td class="col-xs-2">
                                                            <input class="form-control" oninput="validateInput(this)" maxlength="10" value="{{$test_preparation ? $test_preparation->educators : ''}}" type="text" name="educators" id="educators" placeholder="Educators" />
                                                        </td>
                                                        <td class="col-xs-2">
                                                            <input class="form-control" oninput="validateInput(this)" value="{{$test_preparation ? $test_preparation->training_hours : ''}}" name="training_hours" maxlength="10" type="text" id="training_hours" placeholder="Training Hours" />
                                                        </td>                                                     
                                                        <td class="col-xs-2">
                                                            <input class="form-control" oninput="validateInput(this)" value="{{$test_preparation ? $test_preparation->free_resources : ''}}" name="free_resources" maxlength="10" type="text" id="free_resources" placeholder="Free Resources" />
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <span class="text-danger" style="display: none" id="testPreparationError">Please Enter All the Details</span>
                                        </div>
                                    </div>
                                    <div class="card" style="height: 600px;">
                                        <div style="height:30px;">
                                            <label class="fs-5 pt-3 ps-3">Test Preparation Course Detail Page</label>                                    
                                        </div>
                                        <div class="card-body" style="height: 80vh; overflow-y: auto;">
                                            <table class="table" style="width: 100%; border-collapse: collapse;">
                                                <thead>
                                                    <tr>
                                                        <th >Exam</th>
                                                        <th >Type</th>
                                                            <th >Course Ranking</th>
                                                        <th >Ranking Count</th>
                                                        <th >Add</th>
                                                    </tr>
                                                </thead>                     
                                                @php
                                                    $test_preparation = json_decode(@$seosetting->test_prep_package, true);
                                                    $examNames = ['ielts', 'pte', 'toefl', 'sat', 'gmat', 'act', 'gre', 'detr'];
                                                    $selecteddata = [];
                                                    if(!empty($test_preparation)){
                                                        foreach ($test_preparation as $key => $value) {
                                                            $selecteddata[] = $key;
                                                        }                                             
                                                    }
                                                @endphp                   
                                                <tbody class="scoreTable overflow-auto">
                                                    <tr id="addScoreRow">
                                                        <td class="col-xs-2">                                                      
                                                            <select class="form-control" style="width: 150px;" id="languageSelect">
                                                                <option value="">Select Exam</option>
                                                                    @foreach ($examNames as $examName)
                                                                        <option value="{{$examName}}">{{strtoupper($examName)}}</option>
                                                                    @endforeach
                                                            </select>
                                                        </td>
                                                        <td class="col-xs-2">
                                                            <select class="form-control" style="width: 150px;" id="page_section">
                                                                <option value="">Select Section</option>
                                                                <option value="Page_Header">Page Header</option>
                                                                <option value="instructor1">Instructor 1st</option>
                                                                <option value="instructor2">Instructor 2nd</option>
                                                            </select>
                                                        </td>
                                                        <td class="col-xs-2">
                                                            <input class="form-control" oninput="validateInput(this)" maxlength="5" value="" type="text" id="courseRanking" placeholder="Course Ranking" />
                                                        </td>
                                                        <td class="col-xs-2">
                                                            <input class="form-control" oninput="validateInput(this)" value="" maxlength="5" type="text" id="rankingCount" placeholder="Ranking Count" />
                                                        </td>
                                                        <td class="col-xs-1 text-center">
                                                            <span class="addScore">
                                                                <i class="fa fa-plus">
                                                                </i>
                                                            </span>
                                                        </td>
                                                    </tr>
                                                    @if(!empty($test_preparation))                                                    
                                                        @php $outer_iteration = 0; @endphp
                                                        @foreach ($test_preparation as $exam => $subtest)
                                                        @foreach ($subtest as $key => $value)
                                                            <tr class="{{$exam.'_'.$value['page_section']}}">
                                                                <td class="col-xs-3">
                                                                    <input class="form-control" type="text" value="{{$exam}}" name="english_lpt[{{$outer_iteration}}][examName]" placeholder="{{$exam}}" readonly/>
                                                                </td>
                                                                <td class="col-xs-2">
                                                                    <input class="form-control" type="text" value="{{$value['page_section']}}" name="english_lpt[{{$outer_iteration}}][page_section]" oninput="validateInput(this)" maxlength="5" readonly />
                                                                </td>
                                                                <td class="col-xs-2">
                                                                    <input class="form-control" type="text" value="{{$value['courseRanking']}}" name="english_lpt[{{$outer_iteration}}][courseRanking]" oninput="validateInput(this)" maxlength="5"/>
                                                                </td>
                                                                <td class="col-xs-2">
                                                                    <input class="form-control" type="text" value="{{$value['rankingCount']}}" name="english_lpt[{{$outer_iteration}}][rankingCount]" oninput="validateInput(this)" maxlength="5" placeholder="PHD Score" />
                                                                </td>
                                                                <td class="col-xs-1 text-center">
                                                                    <span class="deleteScoreRow" onclick="deleteScoreRow('{{$exam.'_'.$value['page_section']}}')">
                                                                        <i class="fas fa-times">
                                                                        </i>
                                                                    </span>
                                                                </td>
                                                            </tr>
                                                        @php $outer_iteration++ @endphp
                                                        @endforeach
                                                        @endforeach
                                                    @endif
                                                </tbody>
                                            </table>
                                            <span class="text-danger" style="display: none" id="testPreparationCourse">Please Enter All the Details</span>
                                        </div>
                                    </div>                                                                    
                                </div>                                
                            @endif
                        </div>
                    </form>
                </div>           
            </div>
        </div>       
    </div>
</div>

@endsection 
@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/dropify/css/dropify.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <style>
        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .deleteScoreRow {
            cursor: pointer;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }
        .addScore {
            cursor: pointer;
        }
    </style>
@endsection


@section('script')
    <script src="{{ asset('backend/plugins/dropify/js/dropify.min.js') }}"></script> 
    <link rel="stylesheet" href="{{ asset('backend/plugins/dropify/css/dropify.min.css') }}">
<script>
    $('.dropify').dropify();
    function validateInput(input) {
        input.value = input.value.replace(/[^\d.]/g, '');

        var decimalIndex = input.value.indexOf('.');
        if (decimalIndex !== -1) {
            var count = input.value.slice(decimalIndex + 1).split('.').length;
            if (count > 1) {
                input.value = input.value.slice(0, decimalIndex + 1) + input.value.slice(decimalIndex + 1).replace(/\./g, '');
            }
        }

        if (input.value.length > 10) {
            input.value = input.value.slice(0, 10);
        }
    }

    function validateForm(event) {
        event.preventDefault();
        $('#testPreparationError').hide();
        let variables = ['ranking', 'students', 'educators', 'training_hours', 'free_resources'];
        let isValid = true;
        let hasValue = false;

        for (let i = 0; i < variables.length; i++) {
            let value = $('#' + variables[i]).val();
            if (value != '') {
                hasValue = true;
                break;
            }
        }

        if(hasValue){
            for (let i = 0; i < variables.length; i++) {
                let value = $('#' + variables[i]).val();
                if (value == '') {
                $('#testPreparationError').show();
                    isValid = false;
                    break;
                }
            }
        }

        if(isValid){
            event.target.submit();
        }
    }

    var i = {{$outer_iteration ?? 0}};
    $('.addScore').on('click', function () {
        let languageSelect = $('#languageSelect').val();
        let page_section = $('#page_section').val();
        let courseRanking = $('#courseRanking').val();
        let rankingCount = $('#rankingCount').val();           
        if(languageSelect == null || languageSelect == ''  || page_section == '' || courseRanking == '' || rankingCount == ''){
            $('.ErrorMessage').remove();
            $('#addScoreRow').after('<span class="ErrorMessage" style="color:red;">Please Enter All the Details</span>');
        }else{
            $('.ErrorMessage').remove();
            scoreHTML = 
            `
                <tr class="${languageSelect}_${page_section}">
                    <td class="col-xs-3">
                        <input class="form-control" type="text" value="${languageSelect}" name="english_lpt[${i}][examName]" placeholder="UG Score" readonly/>
                    </td>
                    <td class="col-xs-2">
                        <input class="form-control" type="text" value="${page_section}" name="english_lpt[${i}][page_section]" oninput="validateInput(this)" maxlength="5" placeholder="PG Score" readonly/>
                    </td>
                    <td class="col-xs-2">
                        <input class="form-control" type="text" value="${courseRanking}" name="english_lpt[${i}][courseRanking]" oninput="validateInput(this)" maxlength="5" placeholder="PHD Score" />
                    </td>
                    <td class="col-xs-2">
                        <input class="form-control" type="text" value="${rankingCount}" name="english_lpt[${i}][rankingCount]" oninput="validateInput(this)" maxlength="5" placeholder="PHD Score" />
                    </td>
                    <td class="col-xs-1 text-center">
                        <span class="deleteScoreRow" onclick="deleteScoreRow('${languageSelect}_${page_section}')">
                            <i class="fas fa-times">
                            </i>
                        </span>
                    </td>
                </tr>
            `
            i++;
            $('.scoreTable').append(scoreHTML);
            $('#languageSelect, #page_section, #courseRanking, #rankingCount').val('');            
        }
    });

    function deleteScoreRow(className) {
        $(`[value='${className}']`).attr('disabled',false);
        $('.'+className).remove();
    }
</script>
     
@endsection