@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-type-data-updation', [$currentRowData['deal_type_id']]) }}" method="POST">
                    @csrf

                    <div class="form-group">
                        <label class="label-text" required for="deal_type_name">Deal type</label>
                        <input type="text" class="form-control input-form" name="deal_type_name" id="deal_type_name"
                            placeholder="Enter deal type" required value="{{ $currentRowData['deal_type_name'] }}">
                    </div>

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

                    <script>
                        document.getElementById("deal_type_status").value = @json($currentRowData['deal_type_status']);
                    </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="location.href='{{ route('deal-type') }}'">CLOSE</button>
                    </div>

                </form>
            @endif

            {{-- To add data --}}
            @if ($btnStatus == 'add')
                <form action="{{ route('deal-type-data-insertion') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label class="label-text" required for="deal_type_name">Deal type</label>
                        <input type="text" class="form-control input-form" name="deal_type_name" id="deal_type_name"
                            placeholder="Enter deal type" required>
                    </div>

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

                    <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="location.href='{{ route('deal-type') }}'">CLOSE</button>
                    </div>

                </form>
            @endif

        </div>

    </div>

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

                    if (document.getElementById('deal_type_status').value == "Select") {
                        event.preventDefault();
                        alert('Please select an option of the status.');
                        return;
                    }
                });
            });
    </script>
@endsection