@extends('layouts.app')

@section('content')
<div class="relative" x-data="{loading: false}">

    <div :class="loading ? 'block' : 'd-none'" class="d-none position-absolute w-100 h-100" style="z-index: 1000">
        <div class="position-absolute" style="top: 50%; left: 50%; transform:translate(-50%, -50%); z-index: 1000">
            <div class="d-flex flex-column align-items-center justify-content-center">
                <div class="spinner-border" style="width: 5rem; height: 5rem;" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>

                <p class="mt-3 fw-bold">Your report is being prepared. This may take a few moments.</p>
            </div>
        </div>
    </div>

    <header class="navbar sticky-top bg-white flex-md-nowrap border-bottom px-3">
        <a class="navbar-brand col-md-3 col-lg-2 d-flex flex-column align-items-end fs-6 text-white" href="#">
            <img src="{{ asset('images/AuditMyAds.png') }}" alt="audit my ads" />
            <img src="{{ asset('images/clutch-logo.png') }}" alt="clutch" style="width: 130px" />
        </a>
    </header>

    <div :class="loading ? 'opacity-25' : ''" class="d-flex align-items-center justify-content-center position-absolute vertical-center w-100 px-5">
        <form @submit="loading=true" action="{{ route('reports.store') }}" method="POST">
            @csrf

            @if ($errors->any())
            <div class="alert alert-danger my-5">
                <div class="d-flex align-items-center mb-3">
                    <svg style="width: 20px; height: 20px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                    </svg>

                    <p class="mb-0 ms-1">There were {{ $errors->count() }} error with your submission</p>
                </div>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <div class="row mb-3">
                <label for="customer_id" class="col-sm-6 col-form-label">
                    Select the Google Ads account to Analyse
                </label>
                <div class="col-sm-6">
                    <select @class([ 'form-select' , 'is-invalid'=> $errors->has('customer_id') ]) name="customer_id">
                        @foreach ($customers as $customer)
                        <option value="{{ $customer['id'] }}">
                            {{ $customer['customer_id'] }} - {{ $customer['name'] }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row mb-3">
                <label for="customer_id" class="col-sm-6 col-form-label">
                    Select Time period (Default is last 12 months)
                </label>
                <div class="col-sm-6">
                    <input type="text" name="dates" class="form-control" @class([ 'form-control' , 'is-invalid'=> $errors->has('start_date') ])>
                    <input type="hidden" name="start_date" id="start_date">
                    <input type="hidden" name="end_date" id="end_date">
                </div>
            </div>

            <div class="row mb-3">
                <label for="customer_id" class="col-sm-6 col-form-label">
                    Enter your email address
                </label>
                <div class="col-sm-6">
                    <input type="text" name="email" @class([ 'form-control' , 'is-invalid'=> $errors->has('email') ])>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-sm-4">
                    <button type="submit" class="btn btn-primary w-100">
                        Click to Start Audit
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush

@push('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
    $('input[name="dates"]').daterangepicker({
        startDate: moment().subtract(1, 'months'),
        endDate: moment(),
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        locale: {
            format: 'Do MMMM YYYY'
        }
    }, function(start, end) {
        $('#start_date').val(start.format('YYYY-MM-DD'))
        $('#end_date').val(end.format('YYYY-MM-DD'))
    });

    $(document).ready(function() {
        $('#start_date').val(moment().subtract(1, 'months').format('YYYY-MM-DD'))
        $('#end_date').val(moment().format('YYYY-MM-DD'))
    })
</script>
@endpush