@extends('layouts/contentLayoutMaster')

@section('title', 'DataTables')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/base/plugins/forms/pickers/form-flat-pickr.css') }}">

@endsection


@section('content')
    <!-- Ajax Sourced Server-side -->
    <section id="ajax-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom d-flex " style="justify-content: space-between !important">
                        <h4 class="card-title">Edit Pengaturan Bantaran Sungai</h4>
                    </div>

                    @if (session()->get('success'))
                        <div class="alert alert-success m-2 p-1">{{ session()->get('success') }}</div>
                    @endif
                    @if (session()->get('error'))
                        <div class="alert alert-danger m-2 p-1">{{ session()->get('error') }}</div>
                    @endif
                    @if ($errors->any())
                        <div class="alert m-2 p-1 alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="card-body mt-2">
                        @if (!$pengaturan->max_normal || !$pengaturan->min_waspada || !$pengaturan->max_waspada || !$pengaturan->min_meluap)
                            <div class="alert-warning alert p-1">
                                Warning! Masih ada input status ketinggian air masih ada yang kosong.
                            </div>
                        @endif
                        <form method="POST" enctype="multipart/form-data"
                            action="{{ url('pengaturan_bantaran_sungai/update') }}">
                            @method('PUT')
                            @csrf
                            <input type="hidden" name="id" value="{{ $pengaturan->uuid }}">
                            <div class="row">
                                <div class="col-md-6 ">
                                    <div class="containers">
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                                <h5>Nama Bantaran Sungai*</h5>
                                            </label>
                                            <div class="input-groups">
                                                <input type="text" class="form-control" readonly
                                                    value="{{ $bantaran->nama }}"style="background: rgba(227, 226, 226, 0.504)">
                                            </div>
                                            @error('bantaran')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                                <h5>Hulu Sungai*</h5>
                                            </label>
                                            <div class="input-group">
                                                <input type="text"
                                                    class="form-control @error('hulu')
                                          is-invalid
                                      @enderror"
                                                    readonly style="background: rgba(227, 226, 226, 0.504)" placeholder=""
                                                    id="hulu" name="hulu" required
                                                    value="{{ $bantaran->device->nama_device }}">
                                            </div>
                                            @error('hulu')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                                <h5>Jangka Waktu(Menit)*</h5>
                                            </label>
                                            <div class="input-group">
                                                <input type="number" min="1"
                                                    class="form-control @error('waktu')
                                          is-invalid
                                      @enderror"
                                                    placeholder="Jangka Waktu(Menit)" name="waktu" required
                                                    value="{{ $pengaturan->waktu }}" min="1" max="360">
                                            </div>
                                            @error('waktu')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="containers">
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                                <h5>Status Ketinggian Air*</h5>
                                            </label>
                                            <div class="inpu">
                                                <input type="text" style="background: rgba(227, 226, 226, 0.504)"
                                                    required value="{{ $pengaturan->status_ketinggian_air }}"
                                                    class="form-control">
                                            </div>
                                            @error('status')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="mb-1">
                                            <label for="" style="margin-bottom: 5px !important;">
                                                <h5>Kecamatan*</h5>
                                            </label>
                                            <div class="input-group">
                                                <input type="text"
                                                    class="form-control  @error('kecamatan')
                                          is-invalid
                                      @enderror"
                                                    style="background: rgba(227, 226, 226, 0.504)" placeholder=""
                                                    name="kecamatan" id="kecamatan"
                                                    value="{{ $bantaran->kecamatan->nama }}" required readonly>
                                            </div>
                                            @error('kecamatan')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <h4>Status Normal</h4>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Minimal Ketinggian Air (Cm)*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                style="background: rgba(227, 226, 226, 0.504)" placeholder="" value="1"
                                                required readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Maksimal Ketinggian Air (Cm)*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                style="background: rgba(227, 226, 226, 0.504)" placeholder=""
                                                value="{{ $pengaturan->max_normal }}" required readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <h4>Status Waspada</h4>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Minimal Ketinggian Air (Cm)*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                style="background: rgba(227, 226, 226, 0.504)" placeholder=""
                                                value="{{ $pengaturan->min_waspada }}" required readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Maksimal Ketinggian Air (Cm)*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                style="background: rgba(227, 226, 226, 0.504)" placeholder=""
                                                value="{{ $pengaturan->max_waspada }}" required readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <h4>Status Meluap</h4>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="" style="margin-bottom: 5px !important;">
                                            <h5>Minimal Ketinggian Air (Cm)*</h5>
                                        </label>
                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                style="background: rgba(227, 226, 226, 0.504)" placeholder=""
                                                value="{{ $pengaturan->min_meluap }}" required readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <a href="{{ url('pengaturan_bantaran_sungai/index') }}"
                                    class="btn btn-warning">Kembali</a>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                                <a href="#" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#normal">Reset</a>
                                
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <form method="POST" enctype="multipart/form-data" action="{{ url('pengaturan_bantaran_sungai/normalisasi') }}" class="modal fade" id="normal" tabindex="-1"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    @method("PUT")
    @csrf
    <input type="hidden" name="id" value="{{ $pengaturan->uuid }}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Status Reset</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning p-2">
                    <p>Apakah Anda Yakin Ingin Mereset Semua Data Status Ketinggian Air</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Simpan</button>
            </div>
        </div>
    </div>
</form>
@endsection


@section('vendor-script')
    {{-- vendor files --}}
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection

@section('page-script')
    {{-- Page js files --}}
    <script src="{{ asset(mix('js/scripts/tables/table-datatables-advanced.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/components/components-modals.js')) }}"></script>
@endsection