@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>

    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">
                    Projects - Assigned within 5 days
                </h2>
            </div>

        </div>
    </div>

    @if(\Gate::allows('campaigns'))
        <div class="card mt">
            {!! $campaignDataTableWithinPrevious5Days->table() !!}
        </div>
    @endif

    <div class="page-header d-print-none mt">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">
                    Projects - All
                </h2>
            </div>

        </div>
    </div>

    @if(\Gate::allows('campaigns'))
        <div class="card mt">
            {!! $campaignDataTable->table() !!}
        </div>
    @endif

    {{--<div class="row">
    @forelse($commands as $command)
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label class="form-label">Title</label>
                            {{ $command->title }}
                        </div>

                        @if(isUser(\App\User::TeamLead))
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Tech</label>
                                {{ $command->tech_id ? $command->tech->name : '-' }}
                            </div>
                        @endif

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Due Date</label>
                            {{ $command->due_date ? $command->due_date->toDateString() : '-' }}
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">End Date</label>
                            {{ $command->end_date ? $command->end_date->toDateString() : '-' }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Note</label>
                            {{ $command->note ?? '-' }}
                        </div>

                        <div class="text-center">
                            @if(\Gate::allows('campaigns-commands-mark-complete'))
                                <a class="btn btn-primary mr-1" onclick="fetchModal({el: this})" data-modal="#commandCompleteModal" data-modal-url="{{ route('panel.campaigns.commands.complete.modal', [$command->campaign_id, $command->id]) }}" title="{{ __('Mark As Complete') }}" href="javascript:void(0)">
                                    Mark As Complete
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-md-12">
            <div class="card">
                <div class="card-body text-center">
                    <p>No Commands Pending</p>
                </div>
            </div>
        </div>
    @endforelse
    </div>--}}

    <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'))
        {!! $campaignDataTableWithinPrevious5Days->scripts() !!}
        {!! $campaignDataTable->scripts() !!}
    @endif

    <script !src="">
        $('#type').selectize({
            placeholder: 'Select Attendance Type'
        });

        $('#campaigns-within-table').on('preXhr.dt', function(e, settings, data){
            data.withinPreviousDays = 5;
        })

        $(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