@extends('layout.main')

@section('content')

<div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12">
        <h2 class="page-title">{{__('nav.set_available_days')}}</h2>
        <p class="text-muted"></p>
        
        <div class="row">
          <div class="col-md-12">
            <div class="card shadow mb-4">
              {{-- <div class="card-header">
                <strong class="card-title">Form row</strong>
              </div> --}}
              <div class="card-body">
                <form action="{{route('appointments.store')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                  <div class="form-row">
                    {{-- <div class="form-group col-md-12">
                      <label for="inputEmail4">{{__('nav.title')}}</label>
                      <input type="text" value="{{ old('title')}}" name="title" class="form-control @error('name')error-message @enderror" id="inputEmail5">
                      @error('title')<div class="invalid-feedback">  {{$message}}</div>@enderror
                    </div> --}}
                    <div class="form-group col-md-12">
                        <label for="inputAddress2">{{__('nav.date_range')}}</label>
                        <div class="form-group">
                            <input type="text" name="datetimes" class="form-control datetimes" />
                          </div>
                    </div>
                    <div class="form-group col-md-12" style="display: none" id="article" >
                        <div id="editor-2" ></div>
                        <textarea rows="3" class="mb-3 d-none" name="content" id="quill-editor-area"></textarea>
                       
                    </div>
                    
                      <div class="form-group col-md-3" style="display: none" id="video">
                        <div class="card border-0 bg-transparent">
                          <label for="inputAddress2">{{__('nav.video_file')}}</label>
                          <input 
                          name="file_video"
                          accept=".mp4,.mov,.avi"
                          onchange="previewVideo(this)"
                        class="form-control mb-3" id="formFileSm" type="file">
                        <div id="preview_video" class="mt-2">
                        </div>
                          <img id="image_3" src="{{asset('dashboard/assets/products/p4.jpg')}}" width="150px" alt="..." aria-hidden="true" class="rounded">
                        </div>
                      </div>
                      <div class="form-group col-md-3" style="display: none" id="document">
                        <div class="card border-0 bg-transparent">
                          <label for="inputAddress2">{{__('nav.document_file')}}</label>
                          <input 
                          name="file_doc"
                          accept=".jpg,.jpeg,.png,.pdf,.doc,.docx"
                          onchange="previewFile(this)"
                        class="form-control mb-3" id="formFileSm" type="file">
                        <div id="preview" class="mt-2">
                        </div>
                        <img id="image_4" src="{{asset('dashboard/assets/products/p4.jpg')}}" width="150px" alt="..." aria-hidden="true" class="rounded">
                        </div>
                      </div>
                  </div>
                  
                  <button type="submit" class="btn btn-primary">{{__('nav.submit')}}</button>
                </form>
              </div> <!-- /. card-body -->
            </div> <!-- /. card -->
          </div> <!-- /. col -->
        </div> <!-- /. end-section -->
        
      </div> <!-- .col-12 -->
    </div> <!-- .row -->
  </div> <!-- .container-fluid -->
@endsection

@push('scripts')
<script>
    $(document).on('change','#simple-select2',function(){
        var id = $(this).val();
        // if id is 0 show video if is 1 show article if is 2 show document 
        if (id == '0'){
            //show video hide the others 
            $('#video').show();
            $('#document').hide();
            $('#article').hide();
        }
        if (id == '1'){
            $('#video').hide();
            $('#document').hide();
            $('#article').show();
        }
        if (id == '2'){
            $('#video').hide();
            $('#document').show();
            $('#article').hide();
        }

    });
    if (document.getElementById('quill-editor-area')) {
        var toolbarOptions = [
          [
          {
            'font': []
          }],
          [
          {
            'header': [1, 2, 3, 4, 5, 6, false]
          }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [
          {
            'header': 1
          },
          {
            'header': 2
          }],
          [
          {
            'list': 'ordered'
          },
          {
            'list': 'bullet'
          }],
          [
          {
            'script': 'sub'
          },
          {
            'script': 'super'
          }],
          [
          {
            'indent': '-1'
          },
          {
            'indent': '+1'
          }], // outdent/indent
          [
          {
            'direction': 'rtl'
          }], // text direction
          [
          {
            'color': []
          },
          {
            'background': []
          }], // dropdown with defaults from theme
          [
          {
            'align': []
          }],
          ['clean'] // remove formatting button
        ];
            var editor = new Quill('#editor-2', {
                theme: 'snow',
                modules:{
                    toolbar: toolbarOptions
                },
            });
            var quillEditor = document.getElementById('quill-editor-area');
            editor.on('text-change', function() {
                quillEditor.value = editor.root.innerHTML;
            });

            quillEditor.addEventListener('input', function() {
                editor.root.innerHTML = quillEditor.value;
            });
    }
    function previewFile(input) {
        const file = input.files[0];
        const preview = document.getElementById('preview');
        const image = document.getElementById('image_4');

        if (file) {
            const fileType = file.type;

            if (fileType.startsWith('image/')) {
                // Show image preview
                image.src = window.URL.createObjectURL(file);
                image.style.display = 'block';
                preview.innerHTML='';
            } else if (fileType === 'application/pdf') {
                // Show PDF icon or text
                preview.innerHTML = '<p>PDF Document Uploaded</p>';
                image.style.display = 'none';
            } else if (fileType === 'application/msword' || fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
                // Show Word document icon or text
                preview.innerHTML = '<p>Word Document Uploaded</p>';
                image.style.display = 'none';
            } else {
                // Handle other file types or show a generic message
                preview.innerHTML = '<p>File Uploaded: ' + file.name + '</p>';
                image.style.display = 'none';
            }
        }
    }
    function previewVideo(input) {
        const file = input.files[0];
        const preview = document.getElementById('preview_video');
        const image = document.getElementById('image_3');
        const maxSizeMB = 100; // Maximum file size in MB
        const maxSizeBytes = maxSizeMB * 1024 * 1024; // Convert to bytes

        if (file) {
            if (file.size > maxSizeBytes) {
                alert('The file size should not exceed 100MB.');
                input.value = ''; // Clear the input
                preview.innerHTML = ''; // Clear the preview
                image.style.display = 'block'; // Display the default image
                return;
            }
            const fileType = file.type;

            if (fileType.startsWith('image/')) {
                // Show image preview
                image.src = window.URL.createObjectURL(file);
                image.style.display = 'block';
                preview.innerHTML='';
            } else if (fileType.startsWith('video/')) {
                // Show video preview
                preview.innerHTML = `
                    <video width="200px" height="200px" controls>
                        <source src="${window.URL.createObjectURL(file)}" type="${fileType}">
                        Your browser does not support the video tag.
                    </video>
                `;
                image.style.display = 'none';
            } 
        }
    }
</script>
@endpush