@extends('admin.layouts.app')
@section('title')
    {{ __('country_list') }}
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title line-height-36">{{ __('country_list') }}
                            <span class="ml-1 badge bg-primary"> 
                                {{ $allCountries->count() }}
                            </span>
                        </h3>
                        <div class="align-items-center  ml-auto">
                            @if (userCan('country.create'))
                                <a href="{{ route('module.country.create') }}"
                                    class="btn bg-primary float-right d-flex align-items-center justify-content-center">
                                    <i class="fas fa-plus"></i>
                                    &nbsp; {{ __('create') }}
                                </a>
                            @endif
                            <a href="{{route('module.state.index')}}">
                                <button type="submit" class="btn bg-primary float-right align-items-center justify-content-center mr-1">                               
                                <i class="fas fa-map"></i> State
                            </button></a>
                            <a href="{{route('module.city.index')}}">
                                <button type="submit" class="btn bg-primary float-right align-items-center justify-content-center mr-1">
                                <i class="fas fa-map"></i> City
                            </button></a>
                            <button id="DeleteButton" onclick="MultiDelete()" data-toggle="tooltip" data-placement="top"
                                title="{{ __('delete_selected_countries') }}"
                                class="d-none mr-1 btn bg-danger float-right align-items-center justify-content-center">
                                <i class="fas fa-trash"></i>
                                <span class="ml-1">
                                    {{ __('delete') }}
                                    <span id="selectedCount"
                                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">
                                    </span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div
                        class="row {{ setting('app_country_type') === 'single_base' ? 'justify-content-between' : 'justify-content-end' }}">
                        @if (setting('app_country_type') === 'single_base')
                            <div class="col-md-6 col-sm-12 col-lg-4">
                                <div class="px-3">{{ __('app_country') }}</div>
                                <form action="{{ route('module.set.app.country') }}" method="POST">
                                    @csrf
                                    <div class="d-flex justify-space-between px-3">
                                        <select name="country" class="form-control form-control mr-2">
                                            @foreach ($allCountries as $country)
                                                <option {{ setting('app_country') == $country->id ? 'selected' : '' }}
                                                    value="{{ $country->id }}" class="">
                                                    {{ $country->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <button class="btn btn-primary btn bg-primary" type="submit">
                                            {{ __('save') }}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        @endif
                        <div class="col-md-6 col-sm-12 col-lg-4">
                            <form id="formSubmit" action="{{ route('module.country.index') }}" method="GET">
                                <div class="d-flex justify-space-between px-3 my-4">
                                    <input type="text"
                                        @if (request('name')) value="{{ request('name') }}" @endif
                                        id="name" class="form-control mr-2"
                                        placeholder="{{ __('enter') }} {{ __('search') }}..." name="name"
                                        aria-label="">
                                    <button class="btn btn-primary btn bg-primary" type="submit">
                                        {{ __('search') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="example1_wrapper" class="">
                        <div class="row">
                            <div class="col-sm-12">
                                <table
                                    class="table table-hover responsive {{ $countries->count() > 1 ? 'table-bordered' : '' }}">
                                    <thead>
                                        <tr class="text-center">
                                            @if ($countries->count() > 1)
                                                <th width="4%">
                                                    <div class="icheck-primary ml-1">
                                                        <input type="checkbox" id="checkboxAll">
                                                        <label for="checkboxAll">
                                                        </label>
                                                    </div>
                                                </th>
                                            @endif
                                            <th width="5%">#</th>
                                            <th>{{ __('image') }}</th>
                                            <th>{{ __('name') }}</th>
                                            <th>{{ __('URL') }}</th>
                                            <th>{{ __('status') }}</th>
                                            <th>{{ __('Preferred status') }}</th>
                                            <th>{{ __('Website status') }}</th>
                                            {{-- <th>{{ __('preferred_status') }}</th> --}}
                                            
                                            {{-- <th>{{ __('states_count') }}</th> --}}
                                            @if (userCan('country.update') || userCan('country.delete'))
                                                <th>{{ __('action') }}</th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if ($countries->count() > 0)
                                            @foreach ($countries as $country)
                                          
                                                <tr role="row" class="text-center items-center">
                                                    @if ($countries->count() > 1)
                                                        <td class="text-center items-center">
                                                            <div class="icheck-primary ml-1">
                                                                <input type="checkbox" data-id={{ $country->id }}
                                                                    class="sub_chk" id="checkbox{{ $country->id }}">
                                                                <label for="checkbox{{ $country->id }}">
                                                                </label>
                                                            </div>
                                                        </td>
                                                    @endif
                                                    <td class="text-center" tabindex="0">
                                                        {{ $country->id }}
                                                    </td>
                                                    <td>
                                                        <div>
                                                            <img src="{{ asset($country->image) }}" alt=""
                                                                width="50px" height="50px">
                                                        </div>
                                                    </td>
                                                    <td class="sorting_1 text-center">
                                                        <span>
                                                            {{ $country->name }}
                                                        </span>
                                                    </td>
                                                    <td class="sorting_1 text-center">
                                                        <span>
                                                            {{ $country->url}}
                                                        </span>
                                                    </td>
                                                    <td tabindex="0"  class="center">
                                                        <div class="d-flex justify-content-center">
                                                            <a href="javascript:void(0)" class="active-status">
                                                                <label class="switch ">
                                                                    <input data-id="{{ $country->id }}" data-class="status" type="checkbox"
                                                                        class="success status-switch change-active-status"
                                                                        {{ $country->status == 1 ? 'checked' : '' }}>
                                                                    <span class="slider round"></span>
                                                                </label>
                                                                <p class="{{ $country->status == 1 ? 'active' : '' }}" id="status_{{ $country->id }}">
                                                                    {{ $country->status == 1 ? __('activated') : __('deactivated') }}</p>
                                                            </a>
                                                        </div>
                                                    </td>
                                                    <td tabindex="0"  class="center">
                                                        <div  class="d-flex justify-content-center">
                                                            <a href="javascript:void(0)" class="active-status">
                                                                <label class="switch ">
                                                                    <input data-id="{{ $country->id }}" data-class="preferred_status" type="checkbox"
                                                                        class="success status-switch change-active-status"
                                                                        {{ $country->preferred_status == 1 ? 'checked' : '' }}>
                                                                    <span class="slider round"></span>
                                                                </label>
                                                                <p class="{{ $country->preferred_status == 1 ? 'active' : '' }}" id="preferred_status_{{ $country->id }}">
                                                                    {{ $country->preferred_status == 1 ? __('activated') : __('deactivated') }}</p>
                                                            </a>
                                                        </div>                                                       
                                                    </td>
                                                    <td tabindex="0"  class="center text-center">
                                                        <div class="d-flex justify-content-center">
                                                            <a href="javascript:void(0)" class="active-status">
                                                                <label class="switch ">
                                                                    <input data-id="{{ $country->id }}" data-class="website_status" type="checkbox"
                                                                        class="success status-switch change-active-status"
                                                                        {{ $country->website_status == 1 ? 'checked' : '' }}>
                                                                    <span class="slider round"></span>
                                                                </label>
                                                                <p class="{{ $country->website_status == 1 ? 'active' : '' }}" id="website_status_{{ $country->id }}">
                                                                    {{ $country->website_status == 1 ? __('activated') : __('deactivated') }}</p>
                                                            </a>
                                                        </div>                                                     
                                                    </td>
                                                    @if (userCan('country.update') || userCan('country.delete'))
                                                        <td class="sorting_1 text-center" tabindex="0">
                                                            @if (userCan('country.update'))
                                                                <a data-toggle="tooltip" data-placement="top"
                                                                    title="{{ __('edit') }}"
                                                                    href="{{ route('module.country.edit', $country->id) }}"
                                                                    class="btn bg-info"><i class="fas fa-edit"></i>
                                                                </a>
                                                            @endif
                                                            @if (userCan('country.delete'))
                                                                <form
                                                                    action="{{ route('module.country.delete', $country->id) }}"
                                                                    method="POST" class="d-inline">
                                                                    @method('DELETE')
                                                                    @csrf
                                                                    <button data-toggle="tooltip" data-placement="top"
                                                                        title="{{ __('delete') }}"
                                                                        onclick="return confirm('{{ __('are_you_sure_you_want_to_delete_this_item') }}');"
                                                                        class="btn bg-danger"><i
                                                                            class="fas fa-trash"></i></button>
                                                                </form>
                                                            @endif
                                                        </td>
                                                    @endif
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td class="text-center" colspan="5">
                                                    {{ __('no_data_found') }}
                                                </td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @if (request('perpage') != 'all' && $countries->total() > $countries->count())
                            <div class="mt-3 d-flex justify-content-center">
                                {{ $countries->links() }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style>
        /* Extra small devices (phones, 600px and down) */
        @media only screen and (max-width: 600px) {
            .customRow1 {
                margin-top: 10px;
            }

            .customRow2 {
                margin-top: 10px;
                padding-left: 15px;
                padding-right: 15px;
            }

            .customdiv1 {
                margin-top: 5px;
                margin-right: .5rem !important;
            }

            .customdiv2 {
                margin-top: 5px;
                margin-right: .5rem !important;
            }

            .customdiv3 {
                margin-top: 5px;
                margin-bottom: 5px;
                margin-right: .5rem !important;
            }
        }


    /* on of button */
    .switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 19px;
    }

    /* Hide default HTML checkbox */
    .switch input {
        display: none;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 3px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input.success:checked+.slider {
        background-color: #28a745;
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(15px);
        -ms-transform: translateX(15px);
        transform: translateX(15px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
    </style>
    {{-- Flat Icon Css Link --}}
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/flagicon/dist/css/flag-icon.min.css" />
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/flagicon/dist/css/bootstrap-iconpicker.min.css" />
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
@endsection

@section('script')
    {{-- Flat Icon Css Link --}}
    <script src="{{ asset('backend') }}/plugins/flagicon/dist/js/bootstrap-iconpicker.bundle.min.js"></script>

    <script>
        $("#checkboxAll").on('click', function() {
            $('input:checkbox').not(this).prop('checked', this.checked);
            SelectIds();
        });
        $(".sub_chk").on('click', function() {
            SelectIds();
        });

        function SelectIds() {

            var Ids = [];
            $(".sub_chk:checked").each(function() {
                Ids.push($(this).attr('data-id'));
            });
            $('#selectedCount').html(parseInt(Ids.length));
            if (Ids != 0) {
                // Show Delete Button
                $('#DeleteButton').removeClass('d-none');
            } else {
                // Hide Delete Button
                $('#DeleteButton').addClass('d-none');
            }
        }

        function MultiDelete() {

            var Ids = [];
            $(".sub_chk:checked").each(function() {
                Ids.push($(this).attr('data-id'));
            });

            if (Ids != 0) {

                if (confirm("{{ __('are_you_sure_you_want_to_delete_this_item') }}") == true) {
                    AjaxCall(Ids);
                } else {
                    return false;
                }

            } else {
                alert('Please Select First');
            }
        }

        function AjaxCall(value) {
            $.ajax({
                url: "{{ route('module.country.multiple.delete') }}",
                type: "Delete",
                data: {
                    ids: value,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    location.reload();
                }
            });
        }


        $('.status-switch').on('change', function() {
            var status = $(this).prop('checked') == true ? 1 : 0;
            var id = $(this).data('id');
            var type = $(this).data('class');

            $.ajax({
                type: "GET",
                dataType: "json",
                url: '{{ route('module.country.status.change') }}',
                data: {
                    'status': status,
                    'type': type,
                    'id': id
                },
                success: function(response) {
                    toastr.success(response.message, 'Success');
                }
            });   

            if(type == 'status'){
                if (status == 1 ) {
                $(`#status_${id}`).text("{{ __('activated') }}")
            }else{
                $(`#status_${id}`).text("{{ __('deactivated') }}")
            }
            }else if(type == 'preferred_status'){
                if (status == 1 ) {
                    $(`#preferred_status_${id}`).text("{{ __('activated') }}")
                }else{
                    $(`#preferred_status_${id}`).text("{{ __('deactivated') }}")
                }
            }else if(type == 'website_status'){
                if (status == 1 ) {
                    $(`#website_status_${id}`).text("{{ __('activated') }}")
                }else{
                    $(`#website_status_${id}`).text("{{ __('deactivated') }}")
                }
            }      
      
        });
         
    </script>
    
@endsection