@extends('layouts.app')

@section('content')
<div class="row py-5">
    <div class="col-md-12">
        @include('components.alert_success')
        @include('components.alert_error')

        <div class="text-end mb-3">
            @can('short_url_write')
                <a href="{{ route('short_url.create') }}" class="btn btn-primary">Nouvelle URL</a>
            @endcan
            <button class="btn btn-dark" id="table-form-submit">Exporter</button>
            @can('short_url_write')
            <a href="{{ route('short_url.import_show') }}" class="btn btn-dark">Importer</a>
            @endcan
        </div>

        <form class="form-horizontal" method="GET" action="{{ route('short_url.index') }}">
            <div class="mb-3">
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="fas fa-search" aria-hidden="true"></i>
                    </span>
                    <input type="search" id="search-input" name="search" value="{{ $search }}" class="form-control" placeholder="Rechercher">
                </div>
            </div>
        </form>

        @if($shortUrls->count())
        <form class="form-horizontal" id="table-form" method="POST" action="{{ route('short_url.export') }}">
            {{ csrf_field() }}
            <input type="search" id="search-input-hidden" name="search" class="form-control d-none" placeholder="Rechercher">

            <table class="table table-hover table-align-middle table-light">
                <thead class="table-dark">
                <tr>
                    <th scope="col" class="">
                        <div class="form-check">
                            <input type="checkbox" id="master" name="ids[]" class="form-check-input">
                            <label class="form-check-label" for="master">&nbsp;</label>
                        </div>
                    </th>
                    <th scope="col" class="">#</th>
                    <th scope="col" class="">URL courte</th>
                    <th scope="col" class="">URL longue</th>
                    <th scope="col" class=" text-center">Stats</th>
                    <th scope="col" class=" text-center">MB</th>
                    <th scope="col" class=" text-center">id campagne</th>
                    @if(config('app.trigger_is_enabled') && !config('app.short_url_is_fully_traceable'))
                        <th scope="col" class=" text-center">Suivi par destinataire</th>
                    @endif
                    <th scope="col" class=" text-center">Activé</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @foreach($shortUrls as $shortUrl)
                    <tr>
                        <td style="width: 10px">
                            <div class="form-check">
                                <input type="checkbox"
                                       id="short-url-ids-{{$shortUrl->id}}"
                                       name="ids[]"
                                       class="form-check-input short-url-ids"
                                       value="{{$shortUrl->id}}">
                                <label class="form-check-label" for="short-url-ids-{{$shortUrl->id}}">
                                    &nbsp;
                                </label>
                            </div>
                        </td>
                        <th scope="row" style="max-width: 110px">{{ $shortUrl->id }}</th>
                        <td style="max-width: 200px" class="">
                            <a href="{{ $shortUrl->short_url_with_domain }}"
                               target="_blank">{{ $shortUrl->short_url_with_domain }}
                            </a>
                        </td>
                        <td style="max-width: 300px"
                            class="text-truncate">
                            <a href="{{ $shortUrl->final_link }}" target="_blank">{{ $shortUrl->final_link }}</a>
                        </td>
                        <td class="text-center">
                            <a href="{{ route('short_url.show_analytics', ['shortUrl' => $shortUrl]) }}">
                                <i class="fas fa-chart-line"></i>
                            </a>
                        </td>
                        <td class="text-center">
                            @if(isset($shortUrl->partner))
                                {{ $shortUrl->partner->name }}
                            @endif
                        </td>
                        <td class="text-center">
                            {{ $shortUrl->campaign_id }}
                        </td>
                        @if(config('app.trigger_is_enabled') && !config('app.short_url_is_fully_traceable'))
                            <td class="text-center">
                                @if($shortUrl->is_traceable_by_recipient)
                                    <i class="fas fa-check text-success"></i>
                                @else
                                    <i class="fas fa-times text-danger"></i>
                                @endif
                            </td>
                        @endif
                        <td class="text-center">
                            @if($shortUrl->is_enabled)
                                <i class="fas fa-check text-success"></i>
                            @else
                                <i class="fas fa-times text-danger"></i>
                            @endif
                        </td>
                        <td class="text-end">
                            @can('short_url_write')
                                <div class="dropdown dropleft">
                                    <button class="btn btn-light btn-sm dropdown-toggle text-nowrap"
                                            type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                        <i class="fas fa-cog" aria-hidden="true"></i>
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item"
                                           href="{{ route('short_url.edit', ['shortUrl' => $shortUrl]) }}">Modifier</a>
                                        @if(!$shortUrl->is_internal_link)
                                        <a class="js-delete-link dropdown-item text-danger"
                                           href="{{ route('short_url.destroy', ['shortUrl' => $shortUrl]) }}">Supprimer</a>
                                        @endif
                                    </div>
                                </div>
                            @endcan
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            {{ $shortUrls->links() }}
        </form>

        @else
            <div class="card">
                <div class="card-body text-center">
                    @if(isset($search))
                    Aucune URL ne correspond à votre recherche. <a href="{{ route('short_url.index') }}">Tout voir.</a>
                    @else
                    Vous n'avez pas encore d'URL courtes. <a href="{{ route('short_url.create') }}">Créer votre première URL</a>
                    @endif
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            $('#table-form-submit').click(function() {
                const searchValue = $('#search-input').val();
                $('#search-input-hidden').val(searchValue);
                $('#table-form').submit();
            });

            $('#master').click(function() {
                if ($(this).is(':checked', true)) {
                    $('.short-url-ids').prop('checked', true);
                } else {
                    $('.short-url-ids').prop('checked', false);
                }
            });
        });
    </script>
@endpush