@extends('layouts.main-layout')

@section('title', 'Create Forecast')

@section('content')
<style>
    #submit_btn{
        width: 100%;
        background-color: #008080;
        color: #fff;
    }
</style>
    {{-- <div class="container"> --}}
        {{-- <!--ERROR DISPLAY-->
        <div class="row d-flex justify-content-center mb-5">
            <div class="col-md-8">
                @if ($errors->any())
                <div class="alert alert-danger">
                    @foreach ($errors->all() as $error)
                        <li style="color: #fff">{{$error}}</li>
                    @endforeach
                </div>
            @endif
                @if (Session::has('error'))
                <div class="alert alert-danger">
                    <li style="color: #fff;">{{ Session::get('error') }}</li>
                </div>
            @endif
            @if (Session::has('success'))
                <div class="alert alert-success">
                    <li style="color: #fff;">{{ Session::get('success') }}</li>
                </div>
            @endif
            </div>
        </div>
        <!--END OF ERROR DISPLAY--> --}}
        <div class="row  d-flex justify-content-center align-items-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body" style="display: flex; flex-direction: column; align-items: center;">
                        <div class="row mb-4">
                            <h3 class="text-muted">Create Forecast</h3>
                        </div>
                        {{-- <div class="row mb-4 d-flex justify-content-center">
                            <div>
                                <b>NB:</b><br><small style="font-size: 13px; color:red;"
                            >Please, ensure that the lotto categories follow the example below</small>
                            <p>
                                <small>
                                    <b>Banker: -----</b> <br>
                                    <b>Two Sure: -----</b> <br>
                                    <b>Three Direct: -----</b> <br>
                                    <b>Permutations: -----</b> <br>
                                    <b>Add whatever you want here</b>
                                </small>
                            </p>
                            <p>If you fail to type the colon (<span style="font-size: 30px; color: red;">:</span>), You may encounter errors</p>
                            </div>
                        </div> --}}
                        <div class="row">
                           <form action="{{ route('forecast.create.new_directive') }}"  method="POST">
                            @csrf
                            <div class="mb-3" style="width: 250px;">
                                    <label class="form-label" for="">Title</label>
                                    <input class="form-control"
                                    value="@if(session()->has('lotto_title')) {{ session('lotto_title') }} @endif"
                                    type="text" name="title" id="title">
                                </div>
                                <div class="mb-3" style="width: 250px;">
                                    <label class="form-label" for="">Message</label>
                                    <textarea class="text-muted" type="text" name="message" id="message"
                                    style="width: 250px; resize:none;" rows="8">@if(session()->has('lotto_message')) {{ session('lotto_message') }} @endif</textarea>
                                </div>
                                <div class="mb-3">
                                    @if(session()->has('lotto_schedule'))
                                        @php
                                            $dateString = session('lotto_schedule'); // Replace this with your actual date string
                                            $date = \Carbon\Carbon::parse($dateString)->format('Y-m-d');
                                        @endphp
                                        <label class="form-label" for="">Schedule</label>
                                        <input class="form-control" min="{{ now()->format('Y-m-d') }}" value="{{ $date }}" type="date"
                                        name="schedule" id="schedule" style="width: 250px;">
                                    @else
                                        <label class="form-label" for="">Schedule</label>
                                        <input class="form-control" min="{{ now()->format('Y-m-d') }}" value="" type="date"
                                        name="schedule" id="schedule" style="width: 250px;">
                                    @endif
                                </div>
                                <div class="mb-3" style="margin-top: 20px;">
                                    <button class="btn" id="submit_btn">Submit</button>
                                </div>
                            </form>
                        </div>
                        {{-- <div class="row mb-4">
                            <b>NB:</b><small style="font-size: 13px; color:red;"
                            >Please, ensure that every lotto number is greater than <span style="font-size: 20px;">0</span>.
                            Again, the number should either be less than or equal to <span style="font-size: 20px;">90</span></small>
                        </div>
                        <form action="{{ route('forecast.store') }}" method="POST">
                            @csrf
                            <div class="row mb-3">
                                <div class="col-md-6 col-sm-11 col-xs-12 mb-3">
                                    <label class="form-label" for="">Title</label>
                                    <input class="form-control" type="text"
                                    value="@if(session()->has('title')) {{ session('title') }} @endif" name="title" id="my_title">
                                </div>
                                <div class="col-md-6 col-sm-11 col-xs-12 mb-3">
                                    <label class="form-label" for="">Banker</label>
                                    <input class="form-control" value="@if(session()->has('banker')) {{ session('banker') }} @endif" onkeyup="appendHyphen(event, 'my_banker')" type="text" name="banker" id="my_banker">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6 col-sm-11 col-xs-12 mb-3">
                                    <label class="form-label" for="">Two Sure</label>
                                    <input class="form-control" value="@if(session()->has('two_sure')) {{ session('two_sure') }} @endif" onkeyup="appendHyphen(event, 'my_two_sure')" type="text" name="two_sure" id="my_two_sure">
                                </div>
                                <div class="col-md-6 col-sm-11 col-xs-12 mb-3">
                                    <label class="form-label" for="">Three Direct</label>
                                    <input class="form-control" value="@if(session()->has('three_direct')) {{ session('three_direct') }} @endif" onkeyup="appendHyphen(event, 'my_three_direct')" type="text" name="three_direct" id="my_three_direct">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6 col-sm-11 col-xs-12 mb-3">
                                    <label class="form-label" for="">Permutations</label>
                                    <input class="form-control" value="@if(session()->has('permutations')) {{ session('permutations') }} @endif" onkeyup="appendHyphen(event, 'my_permutations')" type="text" name="permutations" id="my_permutations">
                                </div>
                                <div class="col-md-6 col-sm-11 col-xs-12 mb-3">
                                    @if(session()->has('schedule'))
                                        @php
                                            $dateString = session('schedule'); // Replace this with your actual date string
                                            $date = \Carbon\Carbon::parse($dateString)->format('Y-m-d');
                                        @endphp
                                        <label class="form-label" for="">Schedule</label>
                                        <input class="form-control" min="{{ now()->format('Y-m-d') }}" value="{{ $date }}" type="date" name="schedule" id="schedule">
                                    @else
                                        <label class="form-label" for="">Schedule</label>
                                        <input class="form-control" min="{{ now()->format('Y-m-d') }}" value="" type="date" name="schedule" id="schedule">
                                    @endif
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-11 col-xs-12 mb-3" style="margin-top: 30px;">
                                </div>
                                <div class="col-md-6 col-sm-11 col-xs-12 mb-3" style="margin-top: 20px;">
                                    <button class="btn" id="submit_btn">Submit</button>
                                </div>
                            </div>
                        </form> --}}
                    </div>
                </div>
            </div>
        </div>
    {{-- </div> --}}

  <script>
    function appendHyphen(event, my_element) {
      if (event.key === " ") {
        const inputElement = document.getElementById(my_element);
        // inputElement.value += "-";
        inputElement.value = inputElement.value.replace(/\s+/g, '-');
      }
    }

    $(document).ready(function() {
    // Iterate through each input field
    $('input').each(function() {
        // Trim and update the value
        var trimmedValue = $(this).val().trim();
        $(this).val(trimmedValue);
    });

    //The mechanism below is implemented so that I can explode the content
    //into an array in the controller
    /*$("#submit_btn").click(function() {
        $("#message").val($("#message").val().replace(/\n/g, "<br>---<br>"));
    });*/
});

  </script>

@endsection