@extends('user.layout.master')
@section('body')

<form action="{{ route('general_setting.update',$row->id) }}" id="form_data" method="POST">
@csrf

<div class=" p-6 bg-gray-100 flex ">
  <div class="container max-w-screen-lg mx-auto">
    <div>

      <div class="bg-white rounded shadow-lg p-4 px-4 md:p-8 mb-6">
        <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-3">
          <div class="text-gray-600 mb-2 text-center">
            <p class="font-medium text-lg">সাইট সেটিং</p>
          </div>

          <div class="lg:col-span-2">
            <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 md:grid-cols-5">

              <div class="md:col-span-5">
                <label for="company_name">কোম্পানীর নাম :</label>
                <input type="text" name="company_name" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50" value="{{ $row->company_name }}" required/>
                @if($errors->has('company_name'))
                <span class="text-sm text-red-600">{{ $errors->first('company_name') }} </span>
                @endif
              </div>

              <div class="md:col-span-5">
                <label for="company_headline">কোম্পানীর হেডলাইন :</label>
                 <textarea type="text" rows="2" name="company_headline" class=" border mt-1 rounded px-4 w-full bg-gray-50" required>{{ $row->company_headline }}</textarea>
                @if($errors->has('company_headline'))
                <span class="text-sm text-red-600">{{ $errors->first('company_headline') }} </span>
                @endif
              </div>

              <div class="md:col-span-5">
                <label for="company_address">কোম্পানীর ঠিকানা :</label>
                 <textarea type="text" rows="2" name="company_address" class=" border mt-1 rounded px-4 w-full bg-gray-50" required>{{ $row->company_address }}</textarea>
                @if($errors->has('company_address'))
                <span class="text-sm text-red-600">{{ $errors->first('company_address') }} </span>
                @endif
              </div>

              <div class="md:col-span-5">
                <label for="company_description">কোম্পানীর বিবরন :</label>
                 <textarea type="text" rows="4" name="company_description" class=" border mt-1 rounded px-4 w-full bg-gray-50" required>{{ $row->company_description }}</textarea>
                @if($errors->has('company_description'))
                <span class="text-sm text-red-600">{{ $errors->first('company_description') }} </span>
                @endif
              </div>

              <hr>

              <div class="md:col-span-5">
                  <label>দোকানের ফোন:</label>
                  <div id="owners-container">
                      @if($row->phones)
                      @foreach (json_decode($row->phones, true) as $phone)
                      <div class="owner-field flex space-x-2 mt-2">
                        <input type="text" name="owner_name[]" value="{{ $phone['name'] ?? '' }}" class="border rounded px-4 py-2 w-full" placeholder="নাম">
                        <input type="text" name="owner_mobile[]" value="{{ $phone['mobile'] ?? '' }}" class="border rounded px-4 py-2 w-full" placeholder="মোবাইল">
                        <button type="button" class="remove-button bg-red-500 text-white px-2 py-2 rounded">ডিলিট</button>
                      </div>
                      @endforeach
                      @endif
                  </div>
                  
                  <!-- Add button -->
                  <button type="button" id="add-owner-button" class="bg-blue-500 text-white px-4 py-2 rounded mt-2">এড করুন</button>
              </div>

             
      
              <div class="md:col-span-5 text-right">
                <div class="inline-flex items-end">
                  <button type="submit" id="save" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">আপডেট</button>
                </div>
              </div>

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

</form>


<div class="mb-4">

</div>


<script>
    $(document).ready(function() {
      $('#add-owner-button').on('click', function() {
          var ownerField = `
              <div class="owner-field flex space-x-2 mt-2">
                  <input type="text" name="owner_name[]" class="border rounded px-4 py-2 w-full" placeholder="নাম">
                  <input type="text" name="owner_mobile[]" class="border rounded px-4 py-2 w-full" placeholder="মোবাইল">
                  <button type="button" class="remove-button bg-red-500 text-white px-2 py-2 rounded">ডিলিট</button>
              </div>`;
          
          $('#owners-container').append(ownerField);
      });

      // Remove owner field when delete button is clicked
      $('#owners-container').on('click', '.remove-button', function() {
          $(this).parent('.owner-field').remove();
      });
  });
</script>

<script type="text/javascript">

    $('#save').on('click',function(e){

      $('#save').text('অপেক্ষা করুন ...');

    });
    
  </script>
@endsection