@extends("layouts.app")

@section('title', 'Dashboard')

@push('css')
    @include('panel.inc.datatable.css')
@endpush

@section('content')
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                    Overview
                </div>
                <h2 class="page-title">
                    Dashboard
                </h2>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb">
            <div class="card clock">
                <div class="card-body">
                    <div class="row g-2 align-items-center">
                        <div class="col-auto">
                            <span class="{{ $isClockRunning ? 'bg-green' : 'bg-red' }} text-white avatar">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15 15" /></svg>
                            </span>
                        </div>
                        <div class="col">
                            <div class="text-muted clock-text">
                                {{ $isClockRunning ? 'Clock started at: '.$attendance->clock_in->format('M d, Y - h:i A') : 'You are currently clocked out.' }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <a href="javascript:void(0)" class="btn {{ $isClockRunning ? 'btn-success clockOut' : 'btn-danger clockIn' }}">
                                {{ $isClockRunning ? 'Clock Out' : 'Clock In' }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb">
            @include('_announcements', ['announcements' => $announcements])
        </div>
    </div>


    @if(\Gate::allows('campaigns'))
        <div class="card mt">
            <div class="card-header">
                <h2 class="card-title">
                    Projects - Unassigned Support Agent
                </h2>
            </div>
            {!! $campaignDataTable->table() !!}
        </div>
    @endif


    <div class="modal modal-blur fade" id="clockOutModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="clockOutForm" method="post" action="{{ route('panel.clock-out') }}">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Clock Out')  }}</h5>
                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb">
                            <label class="form-label">{{ __('Type') }}</label>
                            <select name="type" id="type" class="form-control" required>
                                <option value=""></option>
                                @foreach(\App\AttendanceType::all() as $type)
                                    <option value="{{ $type->title }}">{{ $type->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb">
                            <label class="form-label">{{ __('Description') }}</label>
                            <textarea name="description" rows="3" placeholder="Enter Description" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger mr-auto" data-dismiss="modal">{{ __('Close') }}</button>
                        <button type="submit" class="btn btn-primary submission">{{ __('Submit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('script')
    @include('panel.inc.datatable.js')

    @if(\Gate::allows('campaigns'))
    {!! $campaignDataTable->scripts() !!}
    @endif

    <script !src="">
        $('#campaigns-table').on('preXhr.dt', function(e, settings, data){
            data.unassigned = 1;
        })

        $('#type').selectize({
            placeholder: 'Select Attendance Type'
        });

        $(document).on('click', '.clockIn', function(){
            let btn = this;
            $(btn).btnloading();
            axios.post('{{ route('panel.clock-in') }}')
            .then(function(r){
                $('.clock .avatar').removeClass('bg-red').addClass('bg-green');
                $('.clock .clock-text').text('Clock started at: '+ r.data.time);
                $('.clock .clockIn').removeClass('btn-danger clockIn').addClass('btn-success clockOut').text('Clock Out');
            }).catch(function(e){
                notify('error', e.response.data.message);
            })
            .then(function(){
                $(btn).btnreset();
            })
        })

        $(document).on('click', '.clockOut', function(){
            $('#clockOutModal').modal('show');
        });

        $('#clockOutForm').submit(function(e){
            let form = this;
            $(form).find('.submission').btnloading();

            formHandler({form, e }).then(function (r) {
                $('#clockOutModal').modal('hide');

                $('.clock .avatar').removeClass('bg-green').addClass('bg-red');
                $('.clock .clock-text').text('You are currently clocked out.');
                $('.clock .clockOut').removeClass('btn-success clockOut').addClass('btn-danger clockIn').text('Clock In');

                $('#clockOutModal #type').data('selectize').clear();
                $(form)[0].reset();
            }).catch(function (e) {
                notify('error', e.response.data.message);
            }).then(function () {
                $(form).find('.submission').btnreset();
            })
        });
    </script>
@endpush