@extends('layouts.app')

@section('content')
    <div class="row justify-content-center" style="margin-top:1em">
        <div class="col-10">

            <div class="card shadow p-3 mb-5 bg-body rounded">
                <div class="row justify-content-center" style="margin-top:0em;margin-bottom:0em;padding:0em">
                    <div class="col-12" align="center" style="color:#222222;font-family:Soho Std;font-size:2.2em">
                        Registro de Detenidos (Falta Administrativa)
                    </div>
                </div>
                <hr />
                
                <!-- Mensajes de error o éxito -->
                @if (session('alertType') == 'error')
                    <div class="alert alert-danger">
                        {{ session('msgAlert') }}
                    </div>
                @endif
                @if (session('alertType') == 'success')
                    <div class="alert alert-success">
                        {{ session('msgAlert') }}
                    </div>
                @endif

                <div class="card-body" style="padding:0em 2em 2em 2em">
                    <form id="currentForm" method="POST" action="{{ route('storeArrestedFault') }}">
                        
                        @csrf

                        <div class="row justify-content-center">
                            <div class="col-12">
                                <a href="{{ route('detenidos') }}"
                                    style="cursor: pointer;text-decoration: none;color:darkslateblue;font-size:1.1em">
                                    <strong>
                                        <i class="fas fa-arrow-left"></i> Volver
                                    </strong>
                                </a>
                            </div>
                        </div>

                        @include('arrested_fault.nav-tab')

                        <div class="tab-content" id="myTabContent">

                            <div id="general_section_1" class="tab-pane fade show active" role="tabpanel"
                                aria-labelledby="tab_general_1">
                                <div class="row justify-content-center" style="margin-top:1em">
                                    <div class="col-12">

                                        @if (auth()->user()->userType->user_type == 'Juez')
                                            <div class="row justify-content-center" style="margin-top:1em">
                                                <div class="col-12">
                                                    <label class="form-label">Código</label>
                                                    <input name="code" hidden
                                                        value="{{ isset($data->general_data_fault_id) ? $data->general_data_fault_id : '' }}">
                                                    <select id="code" name="code" class="form-control select2"
                                                        disabled>
                                                        <option value="">-- Seleccione un valor --</option>
                                                        @foreach ($codes as $item)
                                                            <option value="{{ $item['id'] }}">{{ ucfirst($item['code']) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        @else
                                            <div class="row justify-content-center" style="margin-top:1em">
                                                <div class="col-5">
                                                    <label class="form-label">Buscar código</label>
                                                    <input id="search_code" name="search_code" type="text"
                                                        class="form-control">
                                                </div>
                                                <div class="col-1" style="padding-top:2em" align="right">
                                                    <button type="button" class="btn btn-primary btn-block"
                                                        onclick="searchCode()">
                                                        <i class="fas fa-search"></i>
                                                    </button>
                                                </div>
                                                <div class="col-6">
                                                    <label class="form-label">Código</label>
                                                    <select id="code" name="code" class="form-control select2"
                                                        onchange="getDataByCode()">
                                                        <option value="">-- Seleccione un valor --</option>
                                                        @foreach ($codes as $item)
                                                            <option value="{{ $item['id'] }}"
                                                            {{ old('code') == $item['id'] ? 'selected' : '' }}>
                                                                {{ ucfirst($item['code']) }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="row justify-content-center" style="margin-top:1em">
                                            <div class="col-11">
                                                <label for="element" class="form-label">Primer respondiente</label>
                                                <input id="element" name="element" type="text" class="form-control"
                                                    readonly>
                                            </div>
                                            <div class="col-1" style="padding-top:2em" align="right">
                                                <button type="button" class="btn btn-primary btn-block"
                                                    onclick="viewMoreData()">
                                                    <i class="fas fa-info"></i>
                                                </button>
                                            </div>
                                        </div>

                                        @include('arrested_fault.form1ArrestedFault')

                                    </div>
                                </div>
                            </div>

                            <div id="general_section_2" class="tab-pane fade" role="tabpanel"
                                aria-labelledby="tab_general_2">

                                <div class="row justify-content-center" style="margin-top:1em">
                                    <div class="col-11">

                                        @include('arrested_fault.form2ArrestedFault')

                                    </div>
                                </div>
                            </div>
                        </div>

						<div class="row justify-content-center" style="margin-top:1.5em">
							<div class="col-6" align="left" style="padding-left:6%">
								<button id="buttonPrev" type="button" class="btn btn-primary btn-block" onclick="prevSection()" style="display:none">Anterior</button>
							</div>
							<div class="col-6" align="right" style="padding-right:6%">
								<button id="buttonNext" type="button" class="btn btn-primary btn-block" onclick="nextSection()">Siguiente</button>
								<button id="buttonSubmit" type="button" class="btn btn-primary btn-block" style="display:none" onclick="sendForm()">Registrar</button>
							</div>
						</div>

                    </form>
                </div>
            </div>

        </div>
    </div>

    @include('partials.modals')

@endsection

@section('js-files')
    <script src="{{ asset('assets/js/minimap.js') }}"></script>
    <script src="{{ asset('assets/js/info-elements.js') }}"></script>
    <script src="{{ asset('assets/js/modals.js') }}"></script>
    <script src="{{ asset('assets/js/navigation-tab.js') }}"></script>
    <script src="{{ asset('assets/js/views/arrested_fault/form.js') }}"></script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
            addReqFieldsInSection("#general_section_1","code");
            let oldExist = "{{ old() ? true : false }}";
            if (oldExist == '') {
                fillDefaultData();
            }
            else {
                getDataByCode();
                fillDinamicDataOld();
            }
        });
    </script>
@endsection