@extends('main-page')
@section('content')
    <div class="height-100">

        <div id="data-form" class="container mt-5 my-form">

            {{-- To update data --}}
            @if ($btnStatus == 'update')
                <form action="{{ route('deal-activity-data-updation', [$currentRowData1[0]->id]) }}" method="POST"
                    name="updateData" id="updateData">
                    @csrf

                    <input type="hidden" name="dataStore" id="dataStore" value="{{ $dataStore }}">

                    <div style="text-align: center;">
                        <label style="font-weight: bold;" for="deal_title">Deal Name</label>
                        <h3 style="font-weight: bold;color: darkblue;">{{ $currentRowData1[0]->name }}</h3>
                    </div>

                    <div class="form-group">
                        <label class="label-text" required for="detail">Activity detail</label>
                        <br>
                        <textarea cols="30" rows="5" type="text" class="form-control input-form" name="detail" id="detail"
                            placeholder="Enter activity detail" required>{{ $currentRowData1[0]->detail }}</textarea>
                    </div>

                    <div class="form-group">
                        <label required for="deal_activity_datetime" class="label-text">Activity datetime</label>
                        <div class="date-container">
                            <input id="deal_activity_datetime" name="deal_activity_datetime" class="form-control"
                                type="text" required> <i class="fas fa-calendar-alt date-icon" aria-hidden="true"></i>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="label-text" required for="status">Status</label>
                        <br>
                        <select name="status" id="status" required>
                            <option value="Select" disabled>Please select</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>

                    <script>
                        console.log(@json($currentRowData1[0]->datetime));
                        $("#deal_activity_datetime").flatpickr({
                            defaultDate: @json($currentRowData1[0]->datetime),
                            enableTime: true,
                            // dateFormat: "d/m/Y H:i",
                            time_24hr: true
                        });
                        document.getElementById("status").value = @json($currentRowData1[0]->status);
                    </script>

                    <div class="button-group">
                        <button type="submit" class="button-s4" style="width: 80px" id="btn-save"
                            onclick="btnSaveClicked()">Save</button>
                        <button class="button-s5" style="width: 80px" type="button"
                            onclick="window.location.href='{{ route('close-in-deal-activity') }}'">CLOSE</button>
                    </div>

                </form>
            @endif

            {{-- To add data --}}
            @if ($btnStatus == 'add')
                <form action="{{ route('deal-activity-data-insertion') }}" method="POST" name="addData" id="addData">
                    @csrf

                    <div style="text-align: center; margin-top: 10px">
                        <label style="font-weight: bold" for="deal_title">Deal Name</label>
                        <h3 style="font-weight: bold;color: darkblue">{{ $deal_data[0]->name }}</h3>
                    </div>

                    <div class="form-group">
                        <label class="label-text" required for="detail">Activity detail</label>
                        <textarea cols="30" rows="5" type="text" class="form-control input-form" name="detail" id="detail"
                            placeholder="Enter activity detail" required></textarea>
                    </div>

                    <div class="form-group">
                        <label required for="deal_activity_datetime" class="label-text">Activity datetime</label>
                        <div class="date-container">
                            <input id="deal_activity_datetime" name="deal_activity_datetime" class="form-control"
                                type="text" required> <i class="fas fa-calendar-alt date-icon" aria-hidden="true"></i>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="label-text" required for="status">Status</label>
                        <br>
                        <select name="status" id="status" required>
                            <option value="Select" disabled>Please select</option>
                            <option value="Active" selected>Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>

                    <script>
                        $("#deal_activity_datetime").flatpickr({
                            enableTime: true,
                            // dateFormat: "d/m/Y H:i",
                            time_24hr: true

                        });
                    </script>

                    <div class="button-group">
                        <button type="submit" class="button-s4" style="width: 80px" id="btn-save">Save</button>
                        <button class="button-s5" style="width: 80px" type="button"
                            onclick="window.location.href='{{ route('close-in-deal-activity') }}'">CLOSE</button>
                    </div>

                </form>
            @endif

        </div>

    </div>

    <script>
        $('.date-icon').on('click', function() {
            $('#deal_activity_datetime').focus();
        });

        document
            .addEventListener('DOMContentLoaded', function() {
                const form = document.querySelector('form');
                form.addEventListener('submit', function(event) {

                    if (document.getElementById('deal_activity_datetime').value == '' |
                        document.getElementById('deal_activity_datetime').value == null) {
                        event.preventDefault();
                        alert('Please input datetime deal activity.');
                        return;
                    }

                    if (document.getElementById('status').value == "Select") {
                        event.preventDefault();
                        alert('Please select an option of the status.');
                        return;
                    }

                });
            });
    </script>
@endsection