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

@endsection
@section('content')
<div class="page-header-banner" style="background-image: url('{{ asset('images/slider-2.jpg') }}');">
  <div class="overlay">
    <h1>New Post</h1>
  </div>
</div>
@include('flash::message')
<div class="page-section">
    <div class="container">
    <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" >
                    {{ $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">
                    </div>
                    <br><p style="color: red; margin-left: 35%">(Maximum file size 2GB) </p>
                </div>
                @if ($errors->has('surface_sheet'))
                <span class="invalid" >
                    {{ $errors->first('surface_sheet') }}
                </span>
                @endif


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

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

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

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

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

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

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

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


    </div>
</div>
@endsection
@section('scripts')

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

$(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").remove();
     });

});

</script>
@endsection