<div class="mb-0">
  <section id="myAccountNav" class="mx-auto">
      <div class="bg-secondary md:bg-primary p-4"> 
        <div class="flex justify-between items-center">
          <h1 class="text-secondary font-custom md:text-secondary text-xl mdtext-3xl hidden md:block">My Account</h1>
          <!-- <h1 class="font-custom text-white md:text-secondary text-xl mdtext-3xl flex items-center md:hidden ">
            <span class="mr-3">Account</span>
          </h1> -->
          <div class="flex items-center">
            <a href="<?= base_url('account/profile'); ?>"><span class="text-white md:text-secondary font-custom mr-8">Profile</span></a>
            <a href="<?= base_url('account/shipping'); ?>"><span class="text-white md:text-secondary font-custom mr-8">Address</span></a>
            <a href="<?= base_url('account/order_history'); ?>"><span class="text-white md:text-secondary font-custom mr-8">Purchase List</span></a>
            <a href="<?= base_url('register/logout'); ?>"><span class="text-white md:text-secondary font-custom">Logout</span></a>
          </div>
        </div>
      </div>
    </section>

    <div id="cartContainer" class="px-8 md:px-0 max-w-5xl mx-auto">  
      <h1 id="loginRegisterHeading" class="font-custom text-secondary text-2xl xs:text-center md:text-left">PLEASE ENTER DELIVERY DETAILS</h1>  
      <?php if($this->session->flashdata('confirmation')) :?>
        <p class="font-custom text-primary text-center mt-8" style="text-align:center"><?= $this->session->flashdata('confirmation'); ?></p>
      <?php endif; ?>   
      <?php if($this->session->flashdata('error')) :?>
        <p class="font-custom text-primary text-center mt-8" style="text-align:center"><?= $this->session->flashdata('error'); ?></p> 
      <?php endif; ?>  
      <?= form_open('account/update_shipping'); ?> 
      <div id="shippingForm" class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-10">
        <div class="text-center">
          <div class=" border-b-2 border-primary xs:w-full md:w-72 mt-8">
            <?php
              $data = array( 
              'name'        => 'recipient_name',
              'id'          => 'recipient_name',
              'class'       => 'font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px]  xs:w-full md:w-72',
              'required'	  => 'required',
              'placeholder' => 'Full Name', 
              'type'        => 'text' 
            );

            if($shipping->address) 
            {
                $data['value'] = set_value('recipient_name', $shipping->recipient_name);
            }
            else
            {
                $data['value'] = set_value('recipient_name');
            }

            echo form_input($data);
            echo '<span style="font-size:12px;">' . form_error('recipient_name') . '</span>';
          ?>
          </div>
          <div class=" border-b-2 border-primary xs:w-full md:w-72 mt-8">
            <?php
              $data = array( 
              'name'        => 'shipping_phone',
              'id'          => 'shipping_phone',
              'class'       => 'font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px]  xs:w-full md:w-72',
              'required'	  => 'required',
              'placeholder' => 'Phone Number',
              'type'        => 'text'
            );

            if($shipping->address) 
            {
                $data['value'] = set_value('shipping_phone', $shipping->shipping_phone);
            }
            else
            {
                $data['value'] = set_value('shipping_phone');
            }

            echo form_input($data);
            echo '<span style="font-size:12px;">' . form_error('shipping_phone') . '</span>';
            ?>  
          </div>
          <div class=" border-b-2 border-primary xs:w-full md:w-72 mt-8">
            <?php
                $data = array( 
                'name'        => 'shipping_email',
                'id'          => 'shipping_email',
                'class'       => 'font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px]  xs:w-full md:w-72',
                'required'	  => 'required',
                'placeholder' => 'Email',
                'type'        => 'text'
              );

              if($shipping->address) 
              {
                  $data['value'] = set_value('shipping_email', $shipping->shipping_email);
              }
              else
              {
                  $data['value'] = set_value('shipping_email');
              }

              echo form_input($data);
              echo '<span style="font-size:12px;">' . form_error('shipping_email') . '</span>';
              ?>  
          </div>
          <div class=" border-b-2 border-primary xs:w-full md:w-72 mt-8">
            <?php
                $data = array( 
                'name'        => 'shipping_address',
                'id'          => 'shipping_address',
                'class'       => 'font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px]  xs:w-full md:w-72',
                'required'	  => 'required',
                'placeholder' => 'Address',
                'type'        => 'text'
              );

              if($shipping->address) 
              {
                  $data['value'] = set_value('shipping_address', $shipping->shipping_address);
              }
              else
              {
                  $data['value'] = set_value('shipping_address');
              }

              echo form_input($data);
              echo '<span style="font-size:12px;">' . form_error('shipping_address') . '</span>';
            ?>
          </div>
        </div>

        <!-- Kolom 2 (2 kolom tumpuk) -->
        <div class="text-center">
          <div class=" border-b-2 border-primary xs:w-full md:w-72 mt-8">
            <select required name="id_province" id="province" class="font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px]  xs:w-full md:w-72 px-2 mt-2" style="width:100%">
              <option value="">Province</option>
              <?php foreach($provinces as $province) : ?>
                <option 
                <?php if($province['id_indonesia_provinces'] == $shipping->shipping_id_province) : ?>
                selected
                <?php endif; ?>
                value="<?=  $province['id_indonesia_provinces']; ?>"><?= $province['province']; ?></option> 
              <?php endforeach; ?>  
            </select> 
            <?= form_error('id_province'); ?>
          </div>
          
          
          <div class=" border-b-2 border-primary xs:w-full md:w-72 mt-8">
            <select required name="id_city" id="city" class="font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px]  xs:w-full md:w-72 px-2 mt-2" style="width:100%">
              <option 
              <?php if($province['id_indonesia_provinces'] == $shipping->shipping_id_province) : ?>
                selected
              <?php endif; ?>
              value="">City/Region</option>
            </select>
          </div>
          <div class=" border-b-2 border-primary xs:w-full md:w-72 mt-8">
            <select required name="id_district" id="district" class="font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px]  xs:w-full md:w-72 px-2 mt-2" style="width:100%">
              <option value="">District</option>
            </select>
          </div>
          <div class=" border-b-2 border-primary xs:w-full md:w-72 mt-8">
            <?php
              $data = array( 
              'name'        => 'postcode',
              'id'          => 'postcode',
              'value'       => set_value('postcode'),
              'class'       => 'font-tinosRegular bg-transparent border-none text-primary p-1 text-lg focus:ring-0 active:ring-0 ml-[-12px]  xs:w-full md:w-72',
              'required'	  => 'required',
              'placeholder' => 'Postal Code',
              'type'        => 'text'  
            );

            if($shipping->address) 
            {
                $data['value'] = set_value('shipping_postcode', $shipping->shipping_postcode);
            }
            else
            {
                $data['value'] = set_value('shipping_postcode');
            }

            echo form_input($data);
            echo '<span style="font-size:12px;">' . form_error('postcode') . '</span>';   
            ?>
          </div>
        </div>
        <!-- Kolom 3 -->
        <div class="text-center relative">
          <div class="bottom-0 md:absolute w-full">
            <div class="border border-secondary bg-secondary w-full p-3 mx-auto text-center mt-2">
              <input type="submit" value="Save" name="shipping" class="text-white text-center font-custom" style="cursor:pointer" /> 
            </div>
          </div> 
        </div>
      </div>
    </div>
    <?= form_close(); ?> 

<script>
$( document ).ready(function() {
  <?php if($shipping->address) : ?>
      load_city_ajax(<?= $shipping->shipping_id_province; ?>);
      load_district_ajax(<?= $shipping->shipping_id_district; ?>);
  <?php endif; ?>  
             
  $('#province').change(function() {
      var id_province = $(this).val();
      load_city_ajax(id_province);
  });

  $('#city').change(function() {
      var id_city = $(this).val();
      load_district_ajax(id_city);
  });
});  

function load_city_ajax(id_province) {
    $.ajax({
        'url'       : '<?= base_url(); ?>' + 'shipping' + '/ajax_get_city',
        'type'      : 'POST',
        'data'      : {'id_province' : id_province}, 
        'success'   : function(data) {
            if (data) { 
                /*---success----*/
                $('#city').html(data);  
            };
        }
    });
}

function load_district_ajax(id_city) {
    $.ajax({
        'url'       : '<?= base_url(); ?>' + 'shipping' + '/ajax_get_district',
        'type'      : 'POST',
        'data'      : {'id_city' : id_city}, 
        'success'   : function(data) {
            if (data) { 
                /*---success----*/
                $('#district').html(data);  
            };
        }
    });
}
</script>