@extends('layout.master')
@section('title', 'Add Activity')
@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css"
        crossorigin="anonymous">

    <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.5/css/fileinput.min.css" media="all"
        rel="stylesheet" type="text/css" />

    <link href="{{ asset('css/fileinput.css') }}" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
    <style>
        .english img {
            width: 150px;
            margin: 0 15px 15px 15px;
        }

        .gujarati img {
            width: 150px;
            margin: 0 15px 15px 15px;
        }

        .hindi img {
            width: 150px;
            margin: 0 15px 15px 15px;
        }

        .dropdown.bootstrap-select>.btn,
        .dropdown.bootstrap-select>.btn:hover,
        .dropdown.bootstrap-select>.btn:active,
        .dropdown.bootstrap-select>.btn:visited,
        .dropdown.bootstrap-select>.btn:focus {
            background-color: transparent;
            color: #495057;
            text-transform: none;
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="url"],
        input[type="time"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="tel"],
        input[type="number"],
        input[type="search"],
        textarea.materialize-textarea {
            margin: 0px auto !important;
            padding: 0;
            border-bottom: 1px solid #9e9e9e;
            line-height: 3.5 !important;
        }


        .help-block {
            color: #ff0000 !important;
            font-size: 12px !important;
            font-weight: normal !important;
        }

        .file-upload-indicator {
            visibility: hidden;
        }

        .btn-file {
            background-color: #26b2e5 !important;
        }

        /* select2 day */
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: rgb(38, 178, 229) !important;
        }
        input.select2-search__field::placeholder {
            color: #AAAAAA;
            opacity: 1;
        }

        default.select2-container--focus .select2-selection--multiple {
            border: none;
            outline: 0;
        }
        .select2-container--default .select2-selection--multiple {
            border-bottom: 1px solid #9e9e9e !important;
            background-color: white !important;
            border: none;
            border-radius: 0px;
            cursor: text;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border: none;
            outline: 0;
        }

    </style>
@stop
@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <form id="addbabyactivity" method="POST" action="{{ route('baby_activities.store') }}"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card">
                            <div class="card-header card-header-warning ">
                                <h4 class="card-title">Add Baby Activity</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <label class="col-sm-3 col-form-label mt-2">
                                        Activity Day<span class="text-danger"> * </span></label>
                                    <div class="col-sm-8">
                                        <div class="form-group bmd-form-group">
                                            <select name="day[]" id="day" class="form-control select2 select2-hidden-accessible day" multiple="" data-placeholder="Select day" style="width: 100%;" tabindex="-1" aria-hidden="true">
                                                <option value="all">Select All</option>
                                                <option value="deselectall">Deselect All</option>
                                                @foreach (range(1, 31) as $y)
                                                <option value="{{ $y }}" title="{{ $y }}">Day {{ $y }}</option>
                                                @endforeach
                                            </select>
                                            <div id="error_day" class="error">
                                                <strong></strong>
                                            </div>
                                            
                                            @if ($errors->has('day'))
                                                <div class="error"><strong>{{ $errors->first('day') }}</strong>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="activity-of-parent-div">
                                    <div class="row">
                                        <label class="col-sm-3 col-form-label">Activity For<span
 class="text-danger"> * </span></label>
                                        <div class="form-group col-sm-8 bmd-form-group">
                                            <input id="mother_activity" name="activity_of" value="mother_activity" type="radio" />
                                            <label for="mother_activity">Mother</label>

                                            <input id="baby_activity" name="activity_of" value="baby_activity" type="radio" />
                                            <label for="baby_activity">Baby</label>

                                            <input id="extra_activity" name="activity_of" value="extra_activity" type="radio" />
                                            <label for="extra_activity">Extra Activity</label>
                                            @if ($errors->has('activity_of'))
                                                <div class="error">
                                                    <strong>{{ $errors->first('activity_of') }}</strong></div>
                                            @endif
                                            <div id="activity_of_error_message" class="error">
                                                <strong></strong></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">

                                    <label class="col-sm-3 col-form-label">
                                        Activity Title (English)<span class="text-danger"> * </span></label>
                                    <div class="col-sm-8">
                                        <div class="form-group bmd-form-group">
                                            <input type="text" class="form-control" id="title_en" name="title_en"
                                                placeholder="Enter Activity Title in English" value="{{ old('title_en') }}">
                                            @if ($errors->has('title_en'))
                                                <div class="error">
                                                    <strong>{{ $errors->first('title_en') }}</strong></div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-sm-3 col-form-label">Activity Title (Gujarati)
                                        <span class="text-danger"> * </span>
                                    </label>
                                    <div class="col-sm-8">
                                        <div class="form-group bmd-form-group">
                                            <input type="text" class="form-control" id="title_gu" name="title_gu"
                                                placeholder="Enter Activity Title in Gujarati"
                                                value="{{ old('title_gu') }}">
                                            @if ($errors->has('title_gu'))
                                                <div class="error">
                                                    <strong>{{ $errors->first('title_gu') }}</strong></div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <label class="col-sm-3 col-form-label">Activity Title (Hindi)
                                        <span class="text-danger"> * </span>
                                    </label>
                                    <div class="col-sm-8">
                                        <div class="form-group bmd-form-group">
                                            <input type="text" class="form-control" id="title_hi" name="title_hi"
                                                placeholder="Enter Activity Title in Hindi" value="{{ old('title_hi') }}">
                                            @if ($errors->has('title_hi'))
                                                <div class="error">
                                                    <strong>{{ $errors->first('title_hi') }}</strong></div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <label class="col-sm-3 col-form-label"> Activity Media</label>
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label">Select Your Media Type <span
                                                    class="text-danger"> * </span></label>
                                            <div class="col-sm-8">
                                                <div class="form-group bmd-form-group">
                                                    <select name="media_type" id="media_type"
                                                        class="form-control  selectpicker p-1 " data-actions-box="true"
                                                        title="Select Activity Media Type"
                                                        data-selected-text-format="count > 2" data-size="5">
                                                        <option selected value="image">Image</option>
                                                        <option value="video">Video</option>
                                                        <option value="audio">Audio</option>
                                                       
                                                    </select>
                                                </div>
                                            </div>

                                                <label class="col-sm-3 col-form-label thumbnailsection">Select Thumbnail<span
                                                    class="text-danger"> *</span></label>
                                                <div class="col-sm-8 thumbnailsection">
                                                    <div class="form-group bmd-form-group">
                                                        <select name="activity_thumbnail_id" id="activity_thumbnail_id"
                                                            class="form-control  selectpicker p-1 " data-live-search="true" data-actions-box="true"
                                                            title="Select Activity Thumbnail" data-selected-text-format="count > 2"
                                                            data-size="5">
                                                            <option value="">Select Activity thumbnail</option>
                                                            @foreach($thumbnail as $image_name)
                                                            <option value="{{ $image_name->id }}">{{ $image_name->name }}</option>
                                                            @endforeach
                                                    </select>
                                                    </div>
                                                    @if ($errors->has('activity_thumbnail_id'))
                                                         <div class="error">
                                                        <strong>{{ $errors->first('activity_thumbnail_id') }}</strong></div>
                                                     @endif
                                                </div>

                                            <!-- en thumbnail start-->
                                            <label class="col-sm-3 mt-2 col-form-label div_audio_en_thumbnail ">Select Media Image</label>
                                            <div class="col-sm-8 div_audio_en_thumbnail " id="eng_thumbnail">
                                                    
                                                
                                            </div>
                                        <!-- en thumbnail end-->

                                            <label class="col-sm-3 col-form-label mt-4">Select English Media<span
                                                    class="text-danger"> * </span></label>
                                            <div class="col-sm-8" id="eng">
                                                @if ($errors->has('media_en'))
                                                    <div class="error">
                                                        <strong>{{ $errors->first('media_en') }}</strong></div>
                                                @endif
                                            </div>

                                            <label class="col-sm-3 col-form-label mt-4">Select Gujarati Media<span
                                                    class="text-danger"> * </span></label>
                                            <div class="col-sm-8" id="guj">

                                            </div>

                                            <label class="col-sm-3 col-form-label mt-4">Select Hindi Media
                                                <span class="text-danger"> * </span>
                                            </label>
                                            <div class="col-sm-8" id="hin">
                                                @if ($errors->has('media_hi'))
                                                    <div class="error">
                                                        <strong>{{ $errors->first('media_hi') }}</strong></div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <label class="col-sm-3 col-form-label"> Activity Description
                                        </label>
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label mt-0">Description (English)<span
                                                    class="text-danger"> * </span>
                                            </label>
                                            <div class="col-sm-8">
                                                <div class="form-group bmd-form-group">
                                                    <textarea class="form-control " name="description_en"
                                                        id="description_en" rows="3"
                                                        placeholder="Enter Description(English)">{{ old('description_en') }}</textarea>
                                                    @if ($errors->has('description_en'))
                                                        <div class="error">
                                                            <strong>{{ $errors->first('description_en') }}</strong></div>
                                                    @endif
                                                    <div class="error">
                                                            <strong id="error_description_en"></strong></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="col-md-12 col-sm-12">
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label  mt-0">Description (Gujarati)<span
                                                    class="text-danger"> * </span>
                                            </label>
                                            <div class="col-sm-8">
                                                <div class="form-group bmd-form-group">
                                                    <textarea class="form-control " id="description_gu"
                                                        name="description_gu" rows="3"
                                                        placeholder="Enter Description (Gujarati)">{{ old('description_gu') }}</textarea>
                                                    @if ($errors->has('description_gu'))
                                                        <div class="error">
                                                            <strong>{{ $errors->first('description_gu') }}</strong></div>
                                                    @endif
                                                    <div class="error">
                                                            <strong id="error_description_gu"></strong></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="col-md-12 col-sm-12">
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label  mt-0">Description (Hindi)<span
                                                    class="text-danger"> * </span>
                                            </label>
                                            <div class="col-sm-8">
                                                <div class="form-group bmd-form-group">
                                                    <textarea class="form-control " id="description_hi"
                                                        name="description_hi" rows="3"
                                                        placeholder="Enter Description (Hindi)">{{ old('description_hi') }}</textarea>
                                                    @if ($errors->has('description_hi'))
                                                        <div class="error">
                                                            <strong>{{ $errors->first('description_hi') }}</strong></div>
                                                    @endif
                                                    <div class="error">
                                                            <strong id="error_description_hi"></strong>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>

                                <div class="text-center p-3">
                                    <a href="{{ route('baby_activities') }}" class="btn btn-danger w-25">Cancel</a>
                                    <input type="submit" class="btn btn-theme w-25" name="submit" value="SAVE">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


@stop
@section('script')
    <style>
        .table-responsive {
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }

        body {
            overflow: hidden;
        }

        .table-responsive {
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }

        .bmd-form-group .form-control,
        .bmd-form-group label,
        .bmd-form-group input::placeholder {
            line-height: 3.5;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="url"],
        input[type="time"],
        input[type="date"],
        input[type="datetime-local"],
        input[type="tel"],
        input[type="number"],
        input[type="search"],
        textarea.materialize-textarea {
            margin: 0 auto;
            padding: 0;
        }

        .form-control {
            background: none;
        }

        .activity_section .form-control[type="url"] {
            border-bottom: 1px solid #9e9e9e;
        }

        input.file-path::placeholder {
            line-height: 2;
        }

        textarea.form-control {
            border-bottom: 1px solid #9e9e9e;
        }

        .bootstrap-select {
            background-image: none !important;
            padding: 0 !important;
        }

    </style>
    <script>
        var controller_url = "{{ route('baby_activities') }}";
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.5/js/plugins/piexif.min.js"
        type="text/javascript"></script>

    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.5/js/plugins/sortable.min.js"
        type="text/javascript"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
    </script>

    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.5/js/fileinput.min.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.2.5/js/locales/LANG.js"></script>

    <script src="{{ asset('js/babyactivities/add.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/image/fileinput.js') }}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            
            $('.select2').select2({
                closeOnSelect: false,
                theme: 'default', // classic
            });
            
            
            $('#media_type').on('change', function() {
                var post = $(this).val();

                if (post == 'video') {
                    // $('.thumbnailsection').hide();
                    $(".div_audio_en_thumbnail").addClass('d-none');
                    var my_eng =
                        "<div class='form-group bmd-form-group'><input type='text' class='form-control ' name='video_eng' id='video_eng' rows='2' placeholder='Enter Activity Video Link (English)' ></div>";
                    var my_guj =
                        "<div class='form-group bmd-form-group'><input type='text' class='form-control ' name='video_guj' id='video_guj' rows='2' placeholder='Enter Activity Video Link (Gujarati)' ></div>";
                    var my_hin =
                        "<div class='form-group bmd-form-group'><input type='text' class='form-control ' name='video_hin' id='video_hin' rows='2' placeholder='Enter Activity Video Link  (Hindi)' ></div>";
                } else if (post == 'audio') {
                    // $('.thumbnailsection').show();
                    $(".div_audio_en_thumbnail").removeClass('d-none');
                    var my_eng =
                        "<div class = 'file-field input-field'><input type='file' name='audio_en' id='audio_en'/><p id='audio_en_error' class='error'></p></div><div class = 'file-path-wrapper'><input type='hidden' name='media_link' value=''><i id='error_en' class='errorColor'></i></div>";
                    var my_guj =
                        "<div class = 'file-field input-field'><input type='file' name='audio_gu' id='audio_gu'/><p id='audio_gu_error' class='error'></p></div><div class = 'file-path-wrapper'><input type='hidden' name='media_link' value=''><i id='error_en' class='errorColor'></i></div>";
                    var my_hin =
                        "<div class = 'file-field input-field'><input type='file' name='audio_hi' id='audio_hi'/><p id='audio_hi_error' class='error'></p></div><div class = 'file-path-wrapper'><input type='hidden' name='media_link' value=''><i id='error_en' class='errorColor'></i></div>";
                    var my_audio_en_thumbnail ="<div class='file-loading'><input id='audio_en_thumbnail' name='audio_en_thumbnail' type='file' class='file' data-upload-url='#'></div><strong><span class='text-danger' id='error_audio_en_thumbnail'> </span></strong>";
                    $('#eng_thumbnail').html(my_audio_en_thumbnail);
                }else {
                    
                    // $('.thumbnailsection').show();
                    $(".div_audio_en_thumbnail").removeClass('d-none');
            
                    var my_audio_en_thumbnail ="<div class='file-loading'><input id='audio_en_thumbnail' name='audio_en_thumbnail' type='file' class='file' data-upload-url='#'></div><strong><span class='text-danger' id='error_audio_en_thumbnail'> </span></strong>";
                    $('#eng_thumbnail').html(my_audio_en_thumbnail);
            
                    $('#eng_thumbnail').html(my_audio_en_thumbnail);
                    
                    var my_eng =
                        "<div class = 'file-field input-field'><input type = 'file' multiple  name='media_en[]' id='media_en' class='media_en'/></div><div class = 'file-path-wrapper'><input type='hidden' name='media_link' value=''><i id='error_en' class='errorColor'></i></div>";
                    $('#eng').html(my_eng);

                    var my_guj =
                        "<div class = 'file-field input-field'><input type = 'file' multiple  name='media_gu[]' id='media_gu' class='media_gu'/></div><div class = 'file-path-wrapper'><input type='hidden' name='media_link' value=''><i id='error_gu' class='errorColor'></i></div>";
                    $('#guj').html(my_guj);

                    var my_hin =
                        "<div class = 'file-field input-field'><input type = 'file' multiple  name='media_hi[]' id='media_hi' class='media_hi'/></div><div class = 'file-path-wrapper'><input type='hidden' name='media_link' value=''><i id='error_hindi' class='errorColor'></i></div>";
                    $('#hin').html(my_hin);
                }

                $('#eng').html(my_eng);
                $('#guj').html(my_guj);
                $('#hin').html(my_hin);
                

                setFileinputmedia();

            });


            $("#media_type").trigger('change');
        });

        function setFileinputmedia(){
            // thumbnail
            $("#audio_en_thumbnail").fileinput({
                initialPreviewAsData: true,
                showZoom: false,
                showUpload: false,
                showPreview: true,
                showUploadStats: true,
                removeFromPreviewOnError: true,
                overwriteInitial: true,
                allowedFileExtensions: ['jpg', 'jpeg', 'png'],
                allowedPreviewTypes: ['image'],
                uploadUrl: '/file-upload-batch/2',
                maxFilePreviewSize: 10240
            });
            $("#media_hi").fileinput({
                initialPreviewAsData: true,
                showUpload: false,
                showPreview: true,
                showUploadStats: true,
                removeFromPreviewOnError: true,
                overwriteInitial: true,
                dropZoneEnabled: false,
                allowedFileExtensions: ['jpg', 'jpeg', 'png'],
                allowedPreviewTypes: ['image'],
                uploadUrl: '/file-upload-batch/2',
                maxFilePreviewSize: 20000
            });
            $("#media_gu").fileinput({
                initialPreviewAsData: true,
                showUpload: false,
                showPreview: true,
                showUploadStats: true,
                removeFromPreviewOnError: true,
                dropZoneEnabled: false,
                overwriteInitial: true,
                allowedFileExtensions: ['jpg', 'jpeg', 'png'],
                allowedPreviewTypes: ['image'],
                uploadUrl: '/file-upload-batch/2',
                maxFilePreviewSize: 20000
            });
            $("#media_en").fileinput({
                initialPreviewAsData: true,
                showUpload: false,
                showPreview: true,
                showUploadStats: true,
                dropZoneEnabled: false,
                removeFromPreviewOnError: true,
                overwriteInitial: true,
                allowedFileExtensions: ['jpg', 'jpeg', 'png'],
                allowedPreviewTypes: ['image'],
                uploadUrl: '/file-upload-batch/2',
                maxFilePreviewSize: 20000
            });
            // fileinput-start
            // fileinput for english audio
            $("#audio_en").fileinput({
                initialPreviewAsData: true,
                showUpload: false,
                showPreview: true,
                showUploadStats: true,
                removeFromPreviewOnError: true,
                overwriteInitial: true,
                allowedFileExtensions: ['mp3', 'mp4'],
                allowedPreviewTypes: ['audio'],
                uploadUrl: '/file-upload-batch/2',
                maxFilePreviewSize: 20000
            });
            // fileinput for gujarati audio
            $("#audio_gu").fileinput({
                initialPreviewAsData: true,
                showUpload: false,
                showPreview: true,
                showUploadStats: true,
                removeFromPreviewOnError: true,
                overwriteInitial: true,
                allowedFileExtensions: ['mp3', 'mp4'],
                allowedPreviewTypes: ['audio'],
                uploadUrl: '/file-upload-batch/2',
                maxFilePreviewSize: 20000
            });
            // fileinput for hindi audio
            $("#audio_hi").fileinput({
                initialPreviewAsData: true,
                showUpload: false,
                showPreview: true,
                showUploadStats: true,
                removeFromPreviewOnError: true,
                overwriteInitial: true,
                allowedFileExtensions: ['mp3', 'mp4'],
                allowedPreviewTypes: ['audio'],
                uploadUrl: '/file-upload-batch/2',
                maxFilePreviewSize: 20000
            });

            // fileinput for english pdf            
            $("#pdf_en").fileinput({
                uploadUrl: '/file-upload-batch/2',
                showUpload: false,
                initialPreviewFileType: 'pdf',
                allowedFileExtensions: ["pdf"],
                maxFilePreviewSize: 20000
            });
            // fileinput for gujarati pdf
            $("#pdf_gu").fileinput({
                uploadUrl: '/file-upload-batch/2',
                showUpload: false,
                initialPreviewFileType: 'pdf',
                allowedFileExtensions: ["pdf"],
                maxFilePreviewSize: 20000
            });
            // fileinput for hindi pdf
            $("#pdf_hi").fileinput({
                uploadUrl: '/file-upload-batch/2',
                showUpload: false,
                initialPreviewFileType: 'pdf',
                allowedFileExtensions: ["pdf"],
                maxFilePreviewSize: 20000
            });
            // fileinput-end
        }
    </script>
@stop