@php
$offers = $data['offers'];
@endphp

@extends('layouts.admin.app')

@section('page-title')
{{ __('offers') }}
@endSection

@section('page-nav-title')
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{ __('offers') }}</h1>
        <p>{{ __('control') }}</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{ __('offers') }}</a></li>
    </ul>
</div>
@endsection

@section('content')
@include('includes.dialog')
<div class="row">
    <div class="col-lg-12 mb-3" style="display: flex; gap: 1rem; align-items: center;">
        <a href="{{ route('admin.offers.create') }}" class="btn btn-primary float-left"><i
                class="far fa-fw fa-lg fas fa-plus"></i></i>{{ __('add-offer') }}</a>

        <div class="toggle-flip">
            <form action="{{ route('admin.offers.toggle') }}" method="post">@csrf
                <label>
                    <input id="offers-enable-switch" type="checkbox" class="checked-action" name="enabled" @if ($data['enabled']) checked @endif /><span class="flip-indecator" data-toggle-on="{{__('ON')}}" data-toggle-off="{{__('OFF')}}"></span>
                </label>
            </form>
        </div>

        <form id="copy-link-form" style="display: flex; margin-inline-start: auto; align-items: center; gap: 0.4rem;">
            <input class="form-control"
                type="text" name="platform" placeholder="{{ __('target-platform') }}">
            <button class="btn btn-primary" style="display: flex; align-items: center; gap: 0.4rem;">
                <!-- Clipboard Icon -->
                <svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.5 14L17 14" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                    <path d="M7 14H7.5" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                    <path d="M7 10.5H7.5" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                    <path d="M7 17.5H7.5" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                    <path d="M10.5 10.5H17" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                    <path d="M10.5 17.5H17" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                    <path d="M8 3.5C8 2.67157 8.67157 2 9.5 2H14.5C15.3284 2 16 2.67157 16 3.5V4.5C16 5.32843 15.3284 6 14.5 6H9.5C8.67157 6 8 5.32843 8 4.5V3.5Z" stroke="#FFFFFF" stroke-width="1.5" />
                    <path d="M21 16.0002C21 18.8286 21 20.2429 20.1213 21.1215C19.2426 22.0002 17.8284 22.0002 15 22.0002H9C6.17157 22.0002 4.75736 22.0002 3.87868 21.1215C3 20.2429 3 18.8286 3 16.0002V13.0002M16 4.00195C18.175 4.01406 19.3529 4.11051 20.1213 4.87889C21 5.75757 21 7.17179 21 10.0002V12.0002M8 4.00195C5.82497 4.01406 4.64706 4.11051 3.87868 4.87889C3.11032 5.64725 3.01385 6.82511 3.00174 9" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                </svg>

                {{ __('copy-link') }}
            </button>
        </form>
    </div>

    <div class="col-md-12">
        <div class="tile">
            <div class="tile-body">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered" id="sampleTable">
                        <thead>
                            <tr>
                                <th>{{ __('images') }}</th>
                                <th>{{ __('name') }}</th>
                                <th style="width: 24px">{{ __('link') }}</th>

                                @if (isPermissionsAllowed('edit-gallery', 'delete-gallery'))
                                <th>{{ __('control') }}</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($offers as $r)
                            <tr>
                                <td>
                                    <img alt="image" width="64px" src="{{ $r->image }}"
                                        style="margin-inline: 4px; object-fit: cover;" />
                                </td>
                                <td>
                                    {{ $r['name_' . app()->getLocale()]  }}
                                </td>

                                <td>
                                    <form id="copy-offer-link-form" style="display: flex; flex-direction: column; align-items: center; gap: 0.4rem;">
                                        <input type="hidden" name="offer_id" value="{{ $r->id }}">
                                        <input class="form-control"
                                            type="text" name="platform" placeholder="{{ __('platform') }}">
                                        <button class="btn btn-primary" style="display: flex; align-items: center; gap: 0.4rem; margin-inline: 0;">
                                            <!-- Clipboard Icon -->
                                            <svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M10.5 14L17 14" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                                                <path d="M7 14H7.5" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                                                <path d="M7 10.5H7.5" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                                                <path d="M7 17.5H7.5" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                                                <path d="M10.5 10.5H17" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                                                <path d="M10.5 17.5H17" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                                                <path d="M8 3.5C8 2.67157 8.67157 2 9.5 2H14.5C15.3284 2 16 2.67157 16 3.5V4.5C16 5.32843 15.3284 6 14.5 6H9.5C8.67157 6 8 5.32843 8 4.5V3.5Z" stroke="#FFFFFF" stroke-width="1.5" />
                                                <path d="M21 16.0002C21 18.8286 21 20.2429 20.1213 21.1215C19.2426 22.0002 17.8284 22.0002 15 22.0002H9C6.17157 22.0002 4.75736 22.0002 3.87868 21.1215C3 20.2429 3 18.8286 3 16.0002V13.0002M16 4.00195C18.175 4.01406 19.3529 4.11051 20.1213 4.87889C21 5.75757 21 7.17179 21 10.0002V12.0002M8 4.00195C5.82497 4.01406 4.64706 4.11051 3.87868 4.87889C3.11032 5.64725 3.01385 6.82511 3.00174 9" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" />
                                            </svg>

                                            {{ __('copy-link') }}
                                        </button>
                                    </form>
                                </td>

                                @if (isPermissionsAllowed('edit-gallery', 'delete-gallery'))
                                <td style="width: 8rem">
                                    @if (isPermissionsAllowed('delete-gallery'))
                                    <form action="{{ route('admin.offers.destroy', ['offer' => $r->id]) }}"
                                        method="post" id="delete{{ $r->id }}" style="display: none"
                                        data-swal-title="{{ __('delete') }}"
                                        data-swal-text="{{ __('delete-confirmation') }}"
                                        data-yes="{{ __('yes') }}" data-no="{{ __('no') }}"
                                        data-success-msg="{{ __('deletion-success') }}">@csrf
                                        @method('delete')</form>
                                    <span href="#" class="control-link remove form-confirm"
                                        data-form-id="#delete{{ $r->id }}"><i
                                            class="far fa-trash-alt"></i></span>
                                    @endif
                                </td>
                                @endif

                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<!-- Data table plugin-->
<script type="text/javascript" src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/plugins/dataTables.bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $('#sampleTable').DataTable();
</script>

<script>
    $(document).ready(function() {
        $('#offers-enable-switch').change(function() {
            $(this).closest('form').submit();
        });

        $('#copy-link-form').submit(function(e) {
            e.preventDefault();
            const platform = $(this).find('input[name="platform"]').val();
            let url = "{{ $data['offers_url'] }}";
            if (platform) {
                url += '?s=' + platform;
            }
            navigator.clipboard.writeText(url);

            const originalButtonContent = $(this).find('button').html();
            $(this).find('button').html("{{ __('copied') }}");
            $(this).find('input[name="platform"]').val('');

            setTimeout(() => {
                $(this).find('button').html(originalButtonContent);
            }, 1500);

        });

        $('#copy-offer-link-form').submit(function(e) {
            e.preventDefault();
            const platform = $(this).find('input[name="platform"]').val();
            const offer = $(this).find('input[name="offer_id"]').val();
            let url = "{{ $data['offers_url'] }}";
            url += '?o=' + offer;

            if (platform) {
                url += '&s=' + platform;
            }

            navigator.clipboard.writeText(url);

            const originalButtonContent = $(this).find('button').html();
            $(this).find('button').html("{{ __('copied') }}");
            $(this).find('input[name="platform"]').val('');

            setTimeout(() => {
                $(this).find('button').html(originalButtonContent);
            }, 1500);

        });
    });
</script>
<!-- Google analytics script-->
@endsection