@extends('layouts.seller')
@section('css')

@endsection
@section('content')

<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>{{ __('punch_clock.punch_clocks')}}</p>

        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{!! route('seller.dashboard', getStoreSlug()) !!}">{!! __('common.home') !!}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{!! __('punch_clock.punch_clock') !!}</li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">
    <div class="row employee-list-view">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 employee-list-full">
            <div class="round-white-bg box-shadow">
                <div class="d-block">
                    <ul class="list-inline justified-header bordered-header border-0">
                        <li>
                            <div class="punch-random-string" style="min-width: 550px;max-width: 550px;">
                                {!! Form::open(array('route' => 'seller.punch.store-slug', 'method' => 'POST' ,'id' => 'ajaxSave')) !!}
                                <div class="input-group">
                                    <div class="input-group-append">
                                        @php $url = getHost(false).'/punch/'; @endphp
                                        <span class="input-group-text" id="basic-addon1" style="padding: 10px;">
                                            <b>{!! $url !!}</b>
                                        </span>
                                    </div>
                                    {!! Form::hidden('full_url',$url.($punchSlug ?? ''),['id' => 'full_url'])!!}
                                    {!! Form::text('slug', $punchSlug ?? '', ['class' => 'form-control p-4' , 'placeholder' => 'slug', 'id' => 'punch_slug', 'style' => 'padding: 21px;']) !!}
                                    <i class="fas fa-copy __copy_text_btn _copy_this" style="top: 14px;right: 8px;" data-field_id="full_url"></i>
                                </div>
                                <input type="submit" class="btn btn-primary width80" value="{!! __('seller.save') !!}">
                                {!! Form::close() !!}
                            </div>
                        </li>
                        <li>
                            <ul class="list-inline">
                                <li class="list-inline-punch_clock text-right">
                                    <a href="{{ route('seller.punch-clock.create') }}" class="btn btn-primary width80">{{ __('common.add-btn')}}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    @include('layouts.partials.messages')
                </div>
                <div class="table-responsive">
                    <table id="dTable" data-url="{{route('seller.punch-clock.paginate')}}" class="striped-table w-100 custom-datatable font13">
                        <thead>
                            <tr>
                                <th class="font-medium font13 no-sort">{{ __('common.sr-no') }}</th>
                                <th class="font-medium font13">{{ __('punch_clock.name') }}</th>
                                <th class="font-medium font13">{{ __('punch_clock.ip_address') }}</th>
                                <th class="font-medium font13">{{ __('common.status') }}</th>
                                <th class="font-medium font13 no-sort">{{ __('common.action') }}</th>
                            </tr>
                        </thead>
                        <tbody class="text-muted font-medium">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('script')
    <script>
        $(document).on('input','#punch_slug',function () {
            let slug = $(this).val();
            let fullUrl = "{!! $url !!}"+ slug;
            $("#full_url").val(fullUrl);
        });

        $(document).on('change','#punch_slug',function () {
            let slug = ($(this).val()).split(' ').join('-');
            $(this).val(slug);
            let fullUrl = "{!! $url !!}"+ slug;
            $("#full_url").val(fullUrl);
        });
    </script>
@endsection