@extends('layouts.admin')

@section('page-header', 'Add Training')

@section('styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/dragula.min.css')}}">

@endsection

@section('content')
<style type="text/css">
    .my-div {
        display:none;
    }
</style>
<form method="post" enctype="multipart/form-data">
    <div class="row">
        <div class="col-lg-9 col-md-8">
            @csrf
            <div class="white-component">
                <div class="form-group">
                    <label for="title">Title</label>
                    <input name="title" type="text" class="form-control{{ $errors->has('title') ? ' is-invalid' : '' }}"
                        id="title" placeholder="Enter title..." value="{{ old('title') }}">

                    @if ($errors->has('title'))
                    <span class="invalid-feedback">
                        {{ $errors->first('title') }}
                    </span>
                    @endif
                </div>


                @if ($errors->has('radio'))
                <span class="invalid-feedback" >
                    {{ $errors->first('radio') }}
                </span>
                @endif

                <div class="row">
                    <div class="col-md-6">
                        <label> Site Identification Sheet</label>
                        <div>
                            <input type="radio" {{(old('radio') == 'surface_sheet') ? 'checked' : ''}} value='surface_sheet' data-target-id="surface_sheet" name="radio" class="radioBtn">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label>Site Sketch Sheet </label>
                        <div>
                            <input type="radio" {{(old('radio') == 'mud_map') ? 'checked' : ''}} value='mud_map' data-target-id="mud_map" name="radio" class="radioBtn">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <label>Site and Conservation Data Sheet</label>
                        <div>
                            <input type="radio" {{(old('radio') == 'underwater_sheet') ? 'checked' : ''}}  value='underwater_sheet' data-target-id="underwater_sheet" name="radio" class="radioBtn">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <label>Photo condition</label>
                        <div>
                            <input type="radio" {{(old('radio') == 'photo_condition') ? 'checked' : ''}} value='photo_condition' data-target-id="photo_condition" name="radio" class="radioBtn">
                        </div>
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-6">
                        <label>Video transect</label>
                        <div>
                            <input type="radio" {{(old('radio') == 'video_transect') ? 'checked' : ''}} value='video_transect' data-target-id="video_transect" name="radio" class="radioBtn">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <label>Photogrammetry</label>
                        <div>
                            <input type="radio" {{(old('radio') == 'photogrammetry') ? 'checked' : ''}} value='photogrammetry' data-target-id="photogrammetry" name="radio" class="radioBtn">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <label>Other</label>
                        <div>
                            <input type="radio" {{(old('radio') == 'other') ? 'checked' : ''}} value='other' data-target-id="other" name="radio" class="radioBtn">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <label>Marine Survey</label>
                        <div>
                            <input type="radio" {{(old('radio') == 'marine') ? 'checked' : ''}} value='marine' data-target-id="marine" name="radio" class="radioBtn">
                        </div>
                    </div>


                </div>
                <br>


                <div class="my-div me_1" data-target="surface_sheet" style="display: {{(old('radio') == 'surface_sheet') ? 'block' : 'none'}}">
                    <div class="col-md-6">
                        <label>Choose Site Identification Sheet</label>
                        <input type="file" class="form-control{{ $errors->has('surface_sheet') ? ' is-invalid' : '' }}" name="surface_sheet">

                        @if ($errors->has('surface_sheet'))
                        <span class="invalid-feedback">
                            {{ $errors->first('surface_sheet') }}
                        </span>
                        @endif
                    </div>
                    <br><p style="color: red; margin-left: 35%">(Maximum file size 2GB) </p>
                </div>



                <div class="my-div me_2" data-target="mud_map" style="display: {{(old('radio') == 'mud_map') ? 'block' : 'none'}}">
                    <div class="col-md-6">
                        <label>Choose Site Sketch Sheet</label>
                        <input type="file" class="form-control{{ $errors->has('mud_map') ? ' is-invalid' : '' }}" name="mud_map">

                        @if ($errors->has('mud_map'))
                        <span class="invalid-feedback">
                            {{ $errors->first('mud_map') }}
                        </span>
                        @endif
                    </div>
                    <br><p style="color: red; margin-left: 35%">(Maximum file size 2GB) </p>
                </div>


                <div class="my-div me_3" data-target="underwater_sheet" style="display: {{(old('radio') == 'underwater_sheet') ? 'block' : 'none'}}">
                    <div class="col-md-6">
                        <label>Choose Site and Conservation Data Sheet</label>
                        <input type="file" class="form-control{{ $errors->has('underwater_sheet') ? ' is-invalid' : '' }}" name="underwater_sheet">

                        @if ($errors->has('underwater_sheet'))
                        <span class="invalid-feedback">
                            {{ $errors->first('underwater_sheet') }}
                        </span>
                        @endif
                    </div>
                    <br><p style="color: red; margin-left: 35%">(Maximum file size 2GB) </p>
                </div>


                <div class="my-div me_4" data-target="photo_condition" style="display: {{(old('radio') == 'photo_condition') ? 'block' : 'none'}}">
                    <div class="col-md-6">
                        <label>Choose Photo Condition</label>
                        <input type="file" class="form-control{{ $errors->has('photo_condition') ? ' is-invalid' : '' }}" name="photo_condition">

                        @if ($errors->has('photo_condition'))
                        <span class="invalid-feedback">
                            {{ $errors->first('photo_condition') }}
                        </span>
                        @endif
                    </div>
                    <br><p style="color: red; margin-left: 35%">(Maximum file size 2GB) </p>
                </div>


                <div class="my-div me_5" data-target="video_transect" style="display: {{(old('radio') == 'video_transect') ? 'block' : 'none'}}">
                    <div class="col-md-6">
                        <label>Choose Video Transect</label>
                        <input type="file" class="form-control{{ $errors->has('video_transect') ? ' is-invalid' : '' }}" name="video_transect">

                        @if ($errors->has('video_transect'))
                        <span class="invalid-feedback">
                            {{ $errors->first('video_transect') }}
                        </span>
                        @endif
                    </div>
                    <br><p style="color: red; margin-left: 35%">(Maximum file size 2GB) </p>
                </div>


                <div class="my-div me_6" data-target="photogrammetry" style="display: {{(old('radio') == 'photogrammetry') ? 'block' : 'none'}}">
                    <div class="col-md-6">
                        <label>Choose Photogrammetry</label>
                        <input type="file" class="form-control{{ $errors->has('photogrammetry') ? ' is-invalid' : '' }}" name="photogrammetry">

                        @if ($errors->has('photogrammetry'))
                        <span class="invalid-feedback">
                            {{ $errors->first('photogrammetry') }}
                        </span>
                        @endif
                    </div>
                    <br><p style="color: red; margin-left: 35%">(Maximum file size 2GB) </p>
                </div>


                <div class="my-div me_7" data-target="other" style="display: {{(old('radio') == 'other') ? 'block' : 'none'}}">
                    <div class="col-md-6">
                        <label>Choose Other</label>
                        <input type="file" class="form-control{{ $errors->has('other') ? ' is-invalid' : '' }}" name="other">

                        @if ($errors->has('other'))
                        <span class="invalid-feedback">
                            {{ $errors->first('other') }}
                        </span>
                        @endif
                    </div>
                    <br><p style="color: red; margin-left: 35%">(Maximum file size 2GB) </p>

                </div>


                <div class="my-div me_7" data-target="marine" style="display: {{(old('radio') == 'marine') ? 'block' : 'none'}}">
                    <div class="col-md-6">
                        <label>Choose Marine</label>
                        <input type="file" class="form-control{{ $errors->has('marine') ? ' is-invalid' : '' }}" name="marine">

                        @if ($errors->has('marine'))
                        <span class="invalid-feedback">
                            {{ $errors->first('marine') }}
                        </span>
                        @endif
                    </div>
                    <br><p style="color: red; margin-left: 35%">(Maximum file size 2GB) </p>

                </div>


            </div><br>

            <div class="form-group">
                <button  type="submit" class="btn btn-primary float-right">Save</button>
            </div>
            </div>

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

@endsection

@section('scripts')


<script>


    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content }
    });



    function deletFuntion(id) {
        swal({
            title: "Delete Carousel Image?",
            text: "Once deleted, you will not be able to recover this image file!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
            .then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        type: "POST",
                        url: '/deletfile',
                        data: { id: id },
                        success: function (msg) {
                            swal("Poof! Carousel image file has been deleted!", {
                                icon: "success",
                            });
                        }
                    });
                    setTimeout(function () {
                        window.location.reload(1);
                    }, 3000);
                } else {
                    swal("Image not deleted!");
                }
            });
    }


$(document).ready(function(){
    // $('.my-div').hide();
    $('.radioBtn').click(function(){
         var target = $(this).data('target-id');
         $('.my-div').hide();
         $('.my-div[data-target="'+target+'"]').show();
         $(".invalid-feedback").remove();
     });
});

</script>
@endsection